DEV Community: Karim Abdallah

How To Install SQLite On Windows

Karim Abdallah — Wed, 10 Jul 2024 01:19:46 +0000

Howdy, In This Article We Will See How To Install Sqlite On Windows OS.

Installing Steps

1- Go To Sqlite Download Page And Download sqlite-tools-win-________.zip

.
2- Now Extract The zipped File Then Rename The Extracted Folder To sqlite

.
3- Move The sqlite Folder To This Path C:\Program Files

You Can Put The Folder At Any Path You Like!

.
4- Open Windows Search And Type Environment Variables Then Click On It, And Add The sqlite Folder Path To The Environment Variables Path By Clicking On Environment Variables > Choose Path > New > Paste The Path > Ok.

You May Need To Restart Your PC If The sqlite Didn't Worked In The Last Step.

Verifying The Installation

Let's Make Sure That sqlite Is Installed And Working Properly.

Open command prompt CMD And Type:

sqlite3 --version

If You Got This Message Congrats! Installation Success:

That's All, Thanks For Reading.
Please Follow Me For More Tutorials ❤️

How To Install SQLite On Windows

Karim Abdallah — Thu, 27 Jun 2024 21:07:58 +0000

Howdy, In This Article We Will See How To Install Sqlite On Windows OS.

Installing Steps

1- Go To Sqlite Download Page And Download sqlite-tools-win-________.zip

.
2- Now Extract The zipped File Then Rename The Extracted Folder To sqlite

.
3- Move The sqlite Folder To This Path C:\Program Files

You Can Put The Folder At Any Path You Like!

You May Need To Restart Your PC If The sqlite Didn't Worked In The Last Step.

Verifying The Installation

Let's Make Sure That sqlite Is Installed And Working Properly.

Open command prompt CMD And Type:

sqlite3 --version

If You Got This Message Congrats! Installation Success:

That's All, Thanks For Reading.
Please Follow Me For More Tutorials ❤️

Recursion: Computer Science Challenge

Karim Abdallah — Fri, 21 Jun 2024 19:03:05 +0000

This is a submission for DEV Computer Science Challenge v24.06.12: One Byte Explainer.

Explainer

Recursion: A function that calls itself! Solves problems by breaking them into smaller, similar problems. Powerful for complex tasks but requires careful design to avoid infinite loops.

Additional Context

resources: About Recursion

How To use DataStore Preferences In Android App Using Kotlin

Karim Abdallah — Thu, 07 Sep 2023 21:13:01 +0000

In

this tutorial i will show you how to use DataStore Preferences to save data locally in your android application instead of the old method with Shared Preferences.

I See A lot Of People That Didn't Know How to use DataStore and they see it's too difficult, so in this article i will explain everything in DataStore to make it Easier For You So Please save this post and And focus with me 😁

What Is DataStore Preferences?

DataStore is a data storage solution that allows you to store key-value pairs or typed objects with protocol buffers. DataStore uses Kotlin coroutines and Flow to store data asynchronously, consistently, and transactionally.

i know that you didn't understand the context but let's begin now!

In This Article We Will Create A Simple App That Will Save User Name & Email Address, Here Is The Project Source Code On Github

you can also download a demo app from github actions to see how the app works: demo app

Let's Start NOW ⚽

1. Create A New Project On Android Studio.

2. Open build.gradle file and add the library implementation:

Check the latest version of the library from google developers

3. Create A New Class Called DataStoreManager for example, and Create Init Of The DataStore:

We Need to stop here to understand what is going on with the previous code.

look at this image and let's explain it:
1- this is the name of the datastore pref that we will use it to make actions on this dataStore Name.
2- the second one is the DataStore name Let's Say it's like Database Name like SQL that we will use to store data with this name.

4. Now Let's Create Keys That Will Save The Data Inside The DataStore That we've created:

Here i've created two keys one for store Username, the other will store Email address.

Now We're Ready To Use DataStore In Our Activity/Fragment.

I've Created a simple app that contains two EditTexts & two Buttons and two textViews That Will Display The Saved Data, You Can Find The Sample Project At Github.

5. Now Open Your Activity And Create a Suspend Fun That Will Save Our Data From The Edittexts:

Wait, What Is Going On Here?

First, DataStore Runs Only Inside suspend fun or CoroutineScope so that's why i've created suspended fun.

After That I've Created instance of user that we've declared it before by calling:

user.edit { usrData ->

}

usrData is a value-parameter you can choose any name because it's a lambda expression.

And inside the user.edit expression i've added the keys that we've created before to save the name and email:

user.edit { usrData ->
    usrData[DataStoreKeys.USER_NAME] = name
    usrData[DataStoreKeys.EMAIL] = email
}

Now You Have Successfully Saved Data Using DataStore 🎉, it's simple right?

6. Let's Create A New Function That Will Get The Saved Data And Display It In Our UI:

Explaination:
As We Explained Before We've Added The user instance but here in GetData you will use user.data.collect to collect saved data is it Exists if there is no data saved it will return null so that's why i've added ?: "none" to check if the datastore returned null the null check will return "none" value.

And as we know we can retrive data by the same keys we used to save data so you will use it again to retrive data again:

user.data.collect { usrData ->
    val name = usrData[DataStoreKeys.USER_NAME] ?: "none"
    val email = usrData[DataStoreKeys.EMAIL] ?: "none"

    // you can use $name variable or $email anywhere
}

as i told you before i've added ?: "none" to check if the datastore returned null it will return "none" instead of null to prevent App Crashes.

7. The Last Step Is Creating A Function That Will Delete The Saved Data:

Explaination:
It's Simple Just Use The user instance and use user.edit to access the DataStore And call usrData.clear():

user.edit { usrData ->
    usrData.clear()
}

You Can Use All These Functions At OnCreate Inside CoroutineScope(Dispatchers.IO) like that:

CoroutineScope(Dispatchers.IO).launch {
    getUserData()  //get data suspend fun
}

That's All For Today, Thanks For Reading, Please Share & Follow For More :)

Resources:
https://developer.android.com/topic/libraries/architecture/datastore

https://github.com/kimoandroid/DataStore-Android-Example

The Full MainActivity Code:

How To Get Data From User IP

Karim Abdallah — Thu, 18 May 2023 20:34:49 +0000

Hello, in this article we will learn how to get user data from it's IP address such as (User Country, Timezone, City, Region Name, Country Code, Continent Name, Currency and more).

Notice: Before we start you must know why we get data from userIP, Imagine you're working on a project and want to create ban system that block user or you want to get & save user country & language to display the right localization for that user for example if there is a user from United Stated opened your website you will get his country & language to make your website language is English and Currency is USD.
So These Information Are Very Important To Make Your Project Work Properly.

We will use a very simple Api called geoplugin that will provide us all mentioned info above.

you can easily call this url:
http://www.geoplugin.net/json.gp?ip= $userIP

replace $userIP with the real user ip such as 156.000.00.00

The Response should be like this photo:

Now you can easily get the response in JSON format and use it directly in your project, but if you want to customize the response such as get specified keys or change keys name You Will Use This Library From Github: github.com/kimoandroid/UserDataFromIp

I've Created This Library To Detect User IP Auto By Calling The Url With This Code:

if (!empty($_SERVER['HTTP_CLIENT_IP'])) {
     $this->userip = filter_var($_SERVER['HTTP_CLIENT_IP'], FILTER_VALIDATE_IP);
} elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])) {
     $this->userip = filter_var($_SERVER['HTTP_X_FORWARDED_FOR'], FILTER_VALIDATE_IP);
} else if (!empty($_SERVER['REMOTE_ADDR'])) {
     $this->userip = filter_var($_SERVER['REMOTE_ADDR'], FILTER_VALIDATE_IP);
} else { $this->userip = NULL; }

This code might get wrong ip address or might get inaccurate user ip but you can use it if you can't get the ip from user device OR you can delete this code from the library files and get user ip from GET response, It's up to you.

Now i've customized this library to get Five keys only from the api and display the customized response in my own JSON format.

as you see here in get_data.php file it's a simple OOP with getters & setters so you can edit them easily:

finally at index.php file i called the Class to get user data from the api with this code:

// call get_data class
require "get_data.php";
$getData = new get_data();

// print user data in a simple json format.
echo '{"ip": "'.$getData->get_ip().'", "country": "'.$getData->get_country().'", "timezone": "'.$getData->get_timezone().'", "continent": "'.$getData->get_continent().'", "currency": "'.$getData->get_currency().'"}';

you can customize the response in advanced JSON Array but i used simple json to clarify only.

That's All For Today, Thanks For Reading & Follow For More :)

How to implement Countries List API in your project

Karim Abdallah — Sun, 14 May 2023 14:21:16 +0000

Hello, in this article we will learn how to implement Countries List inside your project (website, android app, etc).

here's an example of android app:

first, we will use CountriesList library from Github:
github.com/kimoandroid/CountriesList

Why this library

Easy to use anywhere.
You can add unlimited translation for the same file without editing the main function or use Hardcoded.
You can use country_code key to use it in your sytem for calling codes.
you can display country name with it's flag easily.

You can easily use the ready api directly by using this link: https://api.encept.co/countries/index.php?lang=en

api parameters: lang=ar OR lang=en

api response: JSON Encode.

JSON response example:

[{
"code":"US",
"calling_code":"+1",
"flag":"🇺🇸",
"name":"United States"
}]

You can use this api directly and call this link from your project and get the JSON response.

Or you can create your api from zero at your own server & use your own link.

First, Download The Library Files That I Mentioned Before From Github: github.com/kimoandroid/CountriesList

This Library is very flexable and easy to use & edit.

Inside Localization folder you will find the translation of the countries name you can add new translation file by creating file called country_[lang symbol].php such as spanish, you will create a file named country_sp.php.

and after that copy all content that inside default_strings.php file 'this is the translation schema'

now if anyone called the api url and put this parameter: 'lang=sp' the api will return the countries list with spanish.

That's all, Follow For More :)

Create Websocket Android Application Using Ktor

Karim Abdallah — Tue, 02 May 2023 19:49:17 +0000

In this article i will show you the simple way to create webscocket android app (client side) and create websocket server side with Kotlin Ktor.

First, Let's Create Server Side (websocket server)
Open Intellij Ide or any ide you prefer then create a new project and select Ktor from left side then click next.

now you will see project plugins page, Search for 'Routing' then add it & search for 'WebSockets' and add it then click Create

after project builds you must have these files in your project:

Now open build.gradle.kts and add these dependencies

dependencies {
    implementation("io.ktor:ktor-server-netty:$ktor_version")
    implementation("io.ktor:ktor-server-core-jvm:$ktor_version")
    implementation("io.ktor:ktor-server-websockets-jvm:$ktor_version")
    implementation("io.ktor:ktor-server-netty-jvm:$ktor_version")
    implementation("ch.qos.logback:logback-classic:$logback_version")
    testImplementation("io.ktor:ktor-server-tests-jvm:$ktor_version")
    testImplementation("org.jetbrains.kotlin:kotlin-test-junit:$kotlin_version")
}

Now we want to create application.conf inside resources folder and add inside it these lines.

Ktor uses this file to determine the port on which it should run, and it also defines the entry point of our application.

ktor {
    deployment {
        port = 8080
        port = ${?PORT}
    }
    application {
        modules = [ com.example.ApplicationKt.module ]
    }
}

now we have set the application entry point at com.example.ApplicationKt.module so let's go to Application.kt file, and this is our entry point.

you don't have to create application.conf file you can use fun main() to put your port & host (ip) instead of it.

then, go to Sockets.kt file and put this code in it

routing {
    webSocket("/chat") {
        send("You are connected!")
        for(frame in incoming) {
            frame as? Frame.Text ?: continue
            val receivedText = frame.readText()
            send("You said: $receivedText")
        }
    }
}

Now Our server is ready, Let's run it by opening application.kt file and press on the green play button and you must see this at the terminal

to check if our server is running properly or not, just open Postman & open new file & choose websocket request then put your server ws://url:port/chat in that scheme: ws://127.0.0.1:8080/chat and click connect

now if you send any message you will see it at realtime so our server is running correctly that's awesome.
But this is so simple and not a chat, Let's create more advanced websocket chat
first create new file in your main project package called Connections.kt then add this code in it

package com.example

import io.ktor.websocket.*
import java.util.concurrent.atomic.*

class Connection(val session: DefaultWebSocketSession) {
    companion object {
        val lastId = AtomicInteger(0)
    }
    val name = "user${lastId.getAndIncrement()}"
}

Go back to Sockets.kt and modify routing by adding these new codes

routing {
    val connections = Collections.synchronizedSet<Connection?>(LinkedHashSet())
    webSocket("/chat") {
        println("Adding user!")
        val thisConnection = Connection(this)
        connections += thisConnection
        try {
            send("There are ${connections.count()} users here.")
            for (frame in incoming) {
                frame as? Frame.Text ?: continue
                val receivedText = frame.readText()
                val textWithUsername = "[${thisConnection.name}]: $receivedText"
                connections.forEach {
                    it.session.send(textWithUsername)
                    println(textWithUsername)
                }
            }
        } catch (e: Exception) {
            println(e.localizedMessage)
        } finally {
            println("Removing $thisConnection!")
            connections -= thisConnection
        }
    }
}

re-run the server and try sending messages with postman again to see the results.

now you see that the chat is little advanced and every user joins the chat takes unique username

Now Our Server Is Ready To Be Linked With Our Android App :)

Okay, Let's Create Client Side (Android Application)
Open Android studio or any Ide you have, then create a new project & select Kotlin as a primary language.

Then, open build.gradle app level file and put this implementation at dependencies.

dependencies {
    implementation 'org.java-websocket:Java-WebSocket:1.4.0'
}

we will use View Binding in this project so don't forget to activate it at build.gradle file.

After gradle sync complete, open AndroidManifest.xml and put the internet permission.

<uses-permission android:name="android.permission.INTERNET" />

then we will store server url at strings.xml go to 'res > values > strings.xml' and add this line & modify your server url as you want

<string name="server_url" translatable="false">ws://127.0.0.1:8080</string>

Now we need to create chat ui so open activity_main.xml file and add this codes to add ListView, EditText and Button

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/linear2"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical"
        android:padding="4dp">

        <ListView
            android:id="@+id/listview1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:choiceMode="none"
            android:padding="8dp"/>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linear1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="2dp">

        <EditText
            android:id="@+id/edit_msg"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:hint="Enter Message"
            android:importantForAutofill="no"
            android:padding="8dp"
            android:textColor="#000000"
            android:textColorHint="#607D8B"
            android:textSize="12sp"
            tools:ignore="TextFields" />

        <Button
            android:id="@+id/btnSend"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="8dp"
            android:text="Send"
            android:textColor="#FFFFFF"
            android:textSize="16sp" />
    </LinearLayout>

</LinearLayout>

after that Create new kotlin class called ChatWebSocketClient.kt and add these line of code

this class handle every action that happen like when connection open, close, error and when receive a message from server.

package com.encept.websocket_client

import org.java_websocket.client.WebSocketClient
import org.java_websocket.handshake.ServerHandshake
import java.net.URI

// initialize websocket client
class ChatWebSocketClient(serverUri: URI, private val messageListener: (String) -> Unit) : WebSocketClient(serverUri) {

    override fun onOpen(handshakedata: ServerHandshake?) {
        // When WebSocket connection opened
    }

    override fun onClose(code: Int, reason: String?, remote: Boolean) {
        // When WebSocket connection closed
    }

    override fun onMessage(message: String?) {
        // When Receive a message we handle it at MainActivity
        messageListener.invoke(message ?: "")
    }

    override fun onError(ex: Exception?) {
        // When An error occurred
    }

    fun sendMessage(message: String) {
        send(message)
    }
}

Now open MainActivity.kt and put these variables after class declaration

private lateinit var binding: ActivityMainBinding
private lateinit var webSocketClient: ChatWebSocketClient
private var AL: ArrayList<HashMap<String, Any>> = ArrayList()

Then, Add this onCreate function with these codes that initialize

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    binding = ActivityMainBinding.inflate(layoutInflater)
    setContentView(binding.root)

    //declare the ui widgets using binding
    val btnSend = binding.btnSend
    val editMsg = binding.editMsg
    val listview1 = binding.listview1

    // load server url from strings.xml
    val serverUri = URI(getString(R.string.server_url))

    webSocketClient = ChatWebSocketClient(serverUri) { message ->
        // display incoming message in ListView
        runOnUiThread {
            run {
                val _item = HashMap<String, Any>()
                _item["message"] = message
                AL.add(_item)
            }
            listview1.adapter = ListviewAdapter(AL)
        }
    }
    // connect to websocket server
    webSocketClient.connect()

    btnSend.setOnClickListener {
        try {
            // send message to websocket server
            webSocketClient.sendMessage(editMsg.text.toString())
            editMsg.setText("")
        } catch (e: Exception) {
            e.printStackTrace()
            Toast.makeText(this, e.toString(), Toast.LENGTH_SHORT).show()
        }
    }
}

in case of you're using IDE that does not support auto import just add these imports to your MainActivity.kt

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.Toast
import com.encept.websocketchat.databinding.ActivityMainBinding
import java.net.URI
import android.widget.*
import java.util.*

Now we need to close Websocket connection when activity destroy.

override fun onDestroy() {
    super.onDestroy()
    // close websocket connection
    webSocketClient.close()
}

now we need to create listview custom view, so create new xml file called custom.xml and add this code we will just add TextView to display any message.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="8dp"
        android:orientation="horizontal"
        tools:ignore="UselessParent">

        <TextView
            android:id="@+id/text2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="text"
            android:textSize="16sp"
            android:textStyle="bold"
            android:textColor="#000000"/>
    </LinearLayout>

</LinearLayout>

After onCreate fun Add The ListView Adapter

class ListviewAdapter(private val _data: ArrayList<HashMap<String, Any>>) : BaseAdapter() {
    override fun getCount(): Int {
        return _data.size
    }

    override fun getItem(_index: Int): HashMap<String, Any> {
        return _data[_index]
    }

    override fun getItemId(_index: Int): Long {
        return _index.toLong()
    }

    override fun getView(_position: Int, _v: View?, _container: ViewGroup?): View? {
        val _inflater = LayoutInflater.from(_container?.context)
        var _view = _v
        if (_view == null) {
            _view = _inflater.inflate(R.layout.cul, _container, false)
        }

        val text2 = _view?.findViewById<TextView>(R.id.text2)

        if (text2 != null) {
            text2.text = _data[_position]["message"].toString()
        }

        return _view
    }

}

That's all for today i hope this article helped you :)

Sources and References:
Ktor docs
websocket client
websocket server