Month: October 2022

User registration – Kotlin, Node JS, Mongo DB

Posted on by adnanafzal565

This tutorial will create an android user registration activity in Kotlin. You will learn the following:

  • How to use Node JS API for android apps
  • How to call HTTP request with POST method in Kotlin

Creating an activity

First, we will create an empty activity named “RegisterActivity.kt”. Following will be the code of that file:

1
2
3
4
5
6
7
8
9
10
11
12
package com.adnantech.myapp
 
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
 
class RegisterActivity : AppCompatActivity() {
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_register)
    }
}

This will look for a file named “activity_register.xml” inside the “res/layout” folder.

Create an XML file

Then we will create a file named “activity_register.xml” inside the “res/layout” folder. That file will have the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="20dp">
 
    <TextView
        android:id="@+id/heading"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Register"
        android:textAlignment="center"
        android:textSize="40sp"
        android:textStyle="bold" />
 
    <EditText
        android:id="@+id/etName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/heading"
        android:layout_marginTop="20dp"
        android:hint="Enter name" />
 
    <EditText
        android:id="@+id/etPhone"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/etName"
        android:layout_marginTop="20dp"
        android:hint="Enter phone"
        android:inputType="phone" />
 
    <EditText
        android:id="@+id/etPassword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/etPhone"
        android:layout_marginTop="20dp"
        android:hint="Enter password"
        android:inputType="textPassword" />
 
    <Button
        android:id="@+id/btnRegister"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/etPassword"
        android:layout_marginTop="20dp"
        android:text="Register" />
 
</RelativeLayout>

It will display the heading “Register” horizontally center-aligned. Three input fields. One to enter the name, one for the phone number, and one for the password. It will also display a button that when clicked will call an HTTP request to save that data.

Button onclick event listener

We need to attach an “onclick” event listener to the button. So we will create instances of all our input fields and button.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
class RegisterActivity : AppCompatActivity() {
 
    private lateinit var etName: EditText
    private lateinit var etPhone: EditText
    private lateinit var etPassword: EditText
    private lateinit var btnRegister: Button
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_register)
 
        etName = findViewById(R.id.etName)
        etPhone = findViewById(R.id.etPhone)
        etPassword = findViewById(R.id.etPassword)
        btnRegister = findViewById(R.id.btnRegister)
 
        btnRegister.setOnClickListener {
            doRegister()
        }
    }
 
    private fun doRegister() {
        // [HTTP request code goes here]
    }
}

And inside this button click listener, we are calling our method that will call an HTTP request.

Calling an HTTP request

To call an HTTP request, first, make sure you have INTERNET and ACCESS_NETWORK_STATE permissions added in your “AndroidManifest.xml” file.

1
2
&lt;uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
&lt;uses-permission android:name="android.permission.INTERNET" />

Then you need to add the following line in your “app/build.gradle” file:

1
implementation "com.android.volley:volley:1.2.1"

Make sure to “Gradle sync” after pasting that line. You will see the option to sync Gradle on top in Android studio. After that, you need to write the following code in the [HTTP request code goes here] section:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
btnRegister.isEnabled = false
 
val queue = Volley.newRequestQueue(this)
val url = "http://172.20.10.4:3000/register"
 
val requestBody =
    "name=" + etName.text + "&phone=" + URLEncoder.encode(etPhone.text.toString(), "UTF-8") + "&password=" + etPassword.text
val stringReq: StringRequest =
    object : StringRequest(Method.POST, url,
        Response.Listener { response ->
            btnRegister.isEnabled = true
            Log.i("mylog", response)
        },
        Response.ErrorListener { error ->
            Log.i("myLog", "error = " + error)
        }
    ) {
        override fun getBody(): ByteArray {
            return requestBody.toByteArray(Charset.defaultCharset())
        }
    }
queue.add(stringReq)

This will first disable the registration button. Then it will create an instance of Volley. After that, it sets the path of an API. You can get your IP address by running either of the following commands in your terminal:

1
2
3
> ipconfig /all
or
> ifconfig

You need to copy the ipv4 address and paste it as your IP address.

Then it creates a request body, the parameters that will be sent to the API. Creates an instance of “StringRequest”. When the response is received, it simply enables the registration button and displays the response in the log. You can view the response by opening your “logcat” in your android studio bottom bar. And select “info” and search for “mylog”.

Converting JSON string response to class

If your API is returning a JSON string in response, then you also need to convert that JSON string response to Kotlin class. You can do that by installing a library called “Gson”. You can easily install it by adding the following line in “app/build.gradle” and running “Gradle sync”:

1
implementation "com.google.code.gson:gson:2.8.5"

Then create a package named “models” since it is a good practice to keep all your response classes in a separate package. Inside this package, create a file named “GeneralResponse.kt” and write the following code in it:

1
2
3
4
5
6
package com.adnantech.myapp.models
 
class GeneralResponse {
    lateinit var status: String
    lateinit var message: String
}

When the response is received you simply need to do the following with the “response” string:

1
val generalResponse: GeneralResponse = Gson().fromJson(response, GeneralResponse::class.java)

This will convert the JSON string into your class object.

Creating an API in Node JS

We already have created a public GitHub repo that will give you a pre-built registration API. You can make the changes as per your needs. Just download the repo. Paste it anywhere on your computer. Run the following commands in the “api” folder:

1
2
> npm update
> node server.js

Make sure you have Node JS installed in your system. That’s how you can create a user registration activity in Kotlin with Node JS and Mongo DB as the backend. Check out our tutorials on Android to learn more.

Android chat app in Kotlin and Node JS

Posted on by adnanafzal565

We created a chat application in native Android using Kotlin and Node JS. We have used Mongo DB as a database.

Modern and professional UI

End-to-end encryption

Usually, we use encryption but on server side. It has a security issue i.e. plain messages are transmitted through a network that can be read or altered in-transit.

But in this app, we have implemented end-to-end encryption means the encryption and decryption is done on client side rather than on server side. Client will encrypt the message and send it to the server. Server will send the encrypted message to the receiver and the receiver client will do the decryption. So even the server will not be able to read your messages.

We will be using the AES-256-bit length key to generate secret keys. All messages are sent to the server after encryption. So data will remain safe in-transit.

Voice notes

Sending voice notes is a quick way to send messages especially when you are in places when you are in hurry. Instead of typing the message which might cause spelling mistake, you can simply record your audio and send it directly to the receiver inside the app. No need to record the audio from a separate app and attach the audio in a message. You can also listen to your sent or received voice notes within the app.

If you use WhatsApp, you already know how voice notes work. You will learn how to record audio from your android phone and save it in your phone’s storage. Once stored, we will send that MP3 file to the Node JS server. The server will save the file. The user will be able to play that audio from the URL.

All contacts

We are using android contact’s API to fetch all the contacts. So you will learn how to get runtime contacts permission in android.

Private chat

The user can chat with any of his contact numbers as long as the receiver is a registered user.

Chat attachments

Users can attach files in chat messages as well. Images and videos are not compressed at all. So the receiver will see the image in its original quality.

Search contacts

Group chat

Users can chat in groups. Create as many groups as you want. Add members to them and start chatting. What makes it different from other chat apps ? First, it does not allow anyone to add you to a group. You will be invited. You will only start receiving the group notifications when you accept the invitation. Second, this app displays a list of all groups separately. So you can know in which groups you are currently in.

Share status that disappears after 24 hours

In this tutorial, you will:

  • Be able to share your status with all your contacts
  • Exclude some contacts from viewing your status
  • Create multiple lists (e.g. friends, family, colleagues, etc.) so you won’t have to select the contacts each time you upload a status
  • See contacts who have viewed your status/story
  • Download the image or video of status

Seen/unseen messages (blue ticks)

In this part, you will learn how to:

  • Install sockets in android
  • Connect android sockets with the Node JS server
  • Get real-time events on new message
  • Mark messages as read and un-read
  • Get bluetick (like WhatsApp) when the user sees your message

User profile

Search messages

Learn how to apply case in-sensitive sub-string search on all the messages in a chat with any of your contact. You can write any part of text of message and the app will show you the messages that matched your searched string.

Although the messages are end-to-end encrypted, which means that the server will not be able to apply search because server can’t read your messages. But we still found a way to apply search on end-to-end encrypted messages.

How to install

Our TrustPilot Reviews

TrustPilot-reviews

Decode HTML entities in WordPress PHP

Posted on by adnanafzal565

In this article, we are going to tell you, how you can decode HTML entities in your WordPress post using PHP. For example, if you write &copy; in your blog post, it will be displayed as ©.

To do that, you need to create a simple WordPress plugin. Go to your “wp-content” folder, then to the “plugins” folder. Inside this folder, create a new folder named “decode-html-entities”. Inside this newly created folder, create a file named “index.php”. Inside this file, you only need to write the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<?php
 
/**
 * Plugin Name: Decode HTML entities
 */
 
function decode_html_entities_from_content($content)
{
    return html_entity_decode($content);
}
 
function decode_html_entities()
{
    // to filter post by ID
    $post = get_post();
    if ($post->ID == 9)
    {
        add_filter("the_content", "decode_html_entities_from_content");
    }
 
    // to filter posts by category
    $categories = get_the_category();
    if (!empty($categories))
    {
        foreach ($categories as $category)
        {
            if (strtolower(esc_html($category->name)) == "php")
            {
                add_filter("the_content", "decode_html_entities_from_content");
            }
        }
    }
}
 
// this action hook executes just before WordPress determines which template page to load
add_action("template_redirect", "decode_html_entities");

After that, you need to go to your admin dashboard and activate the plugin. You will see the plugin named “Decode HTML entities” on your “plugins” page. If you want to know more about the “template_redirect” hook, you can learn it from its official documentation.

That’s how you can decode HTML entities from your WordPress posts in PHP. Check out our more free tutorials on WordPress.

[wpdm_package id=’1882′]