DEV Community: Dallington Asingwire

How to create a node.js api server using typescript

Dallington Asingwire — Tue, 29 Aug 2023 12:57:26 +0000

Noe.js is a popular runtime environment for building server-side applications include APIs (Application Programming Interfaces).
In this tutorial, we will see how to create a RESTful API in node.js using typescript and mysql.

Follow these steps to setup your project;

Create project folder and navigate into it.
Run npm init -y to initialize a new node.js project.
Install project dependencies

npm i body-parser dotenv express joi jsonwebtoken morgan mysql2 sequelize bcrypt

body-parser; allows you to extract data from the request body.
dotenv; allows you to load environment variables from .env file.
express; provides small and robust tools for HTTP servers like routing, middleware setup etc.
joi; allows you to define validation schemas and validate data types like strings, numbers, arrays etc.
jsonwebtoken; used for authenticating/authorizing requests in your node.js application.
morgan; logs details about the incoming HTTP requests e.g request method, URL, status code etc.
mysql2; mysql client for node.js applications.
sequelize; provides a convenient way to interact with relational databases e.g MySQL, PostgreSQL etc.
bcrypt; helps you hash passwords.

4.To use typescript in node.js, install typescript as a development dependency in your project. The command below installs dev dependencies for typescript, node and Express.js

npm i --save-dev typescript@5.1.6 @types/node @types/express

5.Create tsconfig.json file in the root of your project directory. This file contains typescript compile options and configuration settings.

{
    "compilerOptions": {
      "target": "ES6",
      "module": "CommonJS",
      "esModuleInterop": true,
      "outDir": "./dist",
      "rootDir": "./src",
      "strict": true
    },
    "include": ["src/**/*.ts"],
    "exclude": ["node_modules", "dist"]
}

6.Setup project structure
Setup your project files and sub folders as shown below;

src
- common
- config
- constants
- controllers
- database
- interfaces
- middleware
- routes
- services
.env
.gitignore
package.json
package-lock.json
tsconfig.json

7.Create a file env.ts under constants folder.

require('dotenv').config()

const envConstants = {

    ENVIRONMENT: process.env.ENVIRONMENT,
    PRIVATE_AUTH_SECRET: process.env.PRIVATE_AUTH_SECRET,

    DB: {

        LOCAL: {
            name: process.env.DB_NAME,
            user: process.env.DB_USER,
            password: process.env.DB_PASSWORD,
            host: process.env.DB_HOST,
            dialect: process.env.DB_DIALECT
        },

        DEV: {
            name: process.env.DB_NAME,
            user: process.env.DB_USER,
            password: process.env.DB_PASSWORD,
            host: process.env.DB_HOST,
            dialect: process.env.DB_DIALECT
        },

        PROD: {
            name: process.env.DB_NAME,
            user: process.env.DB_USER,
            password: process.env.DB_PASSWORD,
            host: process.env.DB_HOST,
            dialect: process.env.DB_DIALECT
        },

    },


};

export { envConstants }

This file loads environment variables from the .env file

8.Create env.ts file under the config folder. This file loads environment variables for a specific environment.

import { envConstants as env } from "../constants/env"
process.env.NODE_ENV = env.ENVIRONMENT;

module.exports = () => {
    switch (process.env.NODE_ENV) {

        case "local":
            return {
                DB: env.DB.LOCAL,
            };

        case "dev":
            return {
                DB: env.DB.DEV,
            };

        case "production":
            return {
                DB: env.DB.PROD,

            };

        default:
            return {
                DB: env.DB.LOCAL,
            };
    }
};

9.Create a file connection.ts under database connection

const env = require('../config/env')();
const Sequelize = require('sequelize');

const sequelize = new Sequelize(
    env.DB.name,
    env.DB.user,
    env.DB.password,
    {
        host: env.DB.host,
        dialect: env.DB.dialect,
        logging: false,
        dialectOptions: {
            multipleStatements: true,
            connectTimeout: 150000
        },
        pool: {
            max: 350,
            min: 0,
            acquire: 220000,
            idle: 10000
        }
    });


const connectDB = () => {
    sequelize.authenticate()
        .then(() => {

 sequelize.sync({ alter: false });
 console.log('Connection has been established successfully.');
        })
        .catch((err: unknown) => {
console.error('Unable to connect to the database:', err);
        });
};

const dbCredentails = {
    username: env.DB.user,
    password: env.DB.password,
    database: env.DB.name,
    host: env.DB.host,
    dialect: env.DB.dialect,
    dialectOptions: {
        multipleStatements: true,
        connectTimeout: 60000
    },
}

export {
    connectDB,
    sequelize,
    dbCredentails
}

This file establishes database connection.

NOTE: The api server we are creating will perform CRUD on the user i.e creating, reading, updating and deleting user from the mysql database.
So let's create model User, service UserService, userController and then endpoints for creating, fetching, updating and deleting users.

10.Create User Model under a subfolder models under database folder.


import { Sequelize, Model, DataTypes, Optional } from 'sequelize';
import { UserAttributes } from '../../interfaces';

interface UserCreationAttributes 
 extends Optional<UserAttributes, 'id'> { }

class User extends Model<UserAttributes, UserCreationAttributes> 
  implements UserAttributes {
    public id!: number;
    public firstName!: string;
    public lastName!: string;
    public phoneNumber!: string;
    public email!: string;
    public address!: string;
    public password?: string;
    public isDeleted!: boolean;
    public readonly createdAt!: Date;
    public readonly updatedAt!: Date;

    static initialize(sequelize: Sequelize) {

        this.init(
            {
                id: {
                    type: DataTypes.INTEGER,
                    allowNull: false,
                    primaryKey: true,
                    autoIncrement: true,
                },

                firstName: {
                    type: DataTypes.STRING(50),
                    allowNull: false,
                    unique: true
                },

                lastName: {
                    type: DataTypes.STRING(50),
                    allowNull: false,
                    unique: true
                },

                phoneNumber: {
                    type: DataTypes.STRING(15),
                    allowNull: false,
                    unique: true
                },

                email: {
                    type: DataTypes.STRING(40),
                    allowNull: false,
                    unique: true
                },

                address: {
                    type: DataTypes.STRING(30),
                    allowNull: false
                },

                password: {
                    type: DataTypes.STRING(255),
                    allowNull: false
                },

                isDeleted: {
                    type: DataTypes.BOOLEAN,
                    defaultValue: false
                }

            }, {
            sequelize: sequelize,
            modelName: 'users',
            tableName: 'users',
            timestamps: true,
        }
        );
    }
}

export { User }

The above User model uses UserAttributes interface from the interfaces folder. So create that interface in a index.ts file under interfaces folder as shown below;

interface UserAttributes {
    id: number;
    firstName: string;
    lastName: string;
    phoneNumber: string;
    email: string;
    address: string;
    password?: string;
    isDeleted: boolean;
}

export { UserAttributes }

Now that we have created User model, let's create UserService under services folder that has methods for creating, inserting and updating user data in the database.

import { User } from '../database/models/User'
import { sequelize as db } from "../database/connection"

User.initialize(db)

class UserService {

    public get(criteria: any = {}, projection: any = []) {
        let config: any = { }
        if (criteria.length > 0) {
            config.criteria = criteria;
        }
        if (projection.length > 0) {
            config.attributes = projection;
        }

        return new Promise((resolve, reject) => {
            User.findAll(config).then(result => {
                resolve(result)
            }).catch(function (err) {
                console.log("Error on fetching users", err)
                 reject(err)
            })
        })
    }

    public create(data: User) {
        return new Promise((resolve, reject) => {
            User.create(data).then(function (obj: any) {
                resolve(obj)
            }).catch(function (err) {
                console.log("Error on inserting user", err)
                 reject(err)
            })
        })
    }

    public insertorUpdate(criteria: any, data: User) {
        return new Promise((resolve, reject) => {
            User.findOne({
                where: criteria
            }).then(function (obj: any) {
                if (obj) {
                    obj = obj.update(data)
                } else {
                    obj = User.create(data)
                }
                resolve(obj)
            }).catch(function (err) {
                console.log("Error on inserting or updating user", err)
                reject(err)
            })
        })
    }

    public update(criteria: any, objToSave: Partial<User>) {
        return new Promise((resolve, reject) => {
            User.update(objToSave,
                { where: criteria })
                .then(result => {
                    resolve(result)
                }).catch(function (err) {
                    console.log("Error on updating user", err)
                    reject(err)
                })
        })
    }

    public find = (criteria: any) => {
        return new Promise((resolve, reject) => {
            User.findOne({
                where: criteria
            }).then(result => {
                resolve(result)
            }).catch(function (err) {
                console.log("Error on fetching user details", err)
                 reject(err)
            })
        })
    }

    public count(criteria: any) {
        return new Promise((resolve, reject) => {
            User.count({
                where: criteria
            }).then(result => {
                resolve(result)
            }).catch(err => {
                console.log("Error in getting count for users", err)
                reject(err)
            })
        })
    }

}

export { UserService }

UserController receives requests from routes and processes them by sending requests to the above service for data processing in the database.

import { verifyPayload, hashPassword, generateRandomStr } from '../common'
import { Request } from 'express'
import { UserService } from '../services/UserService'
const Joi = require('joi')

class UserController {

    userService: UserService
    constructor(){
        this.userService = new UserService()
    }

    async get() {
        try {
            const projection = ["id", "firstName", "lastName", "phoneNumber", "email", "address", "roleId", "departmentId"]
            const users = await this.userService.get({}, projection);
            return users
        } catch (err) {
            throw err
        }
    }

    async find(req: Request) {
        try {
            const schema = Joi.object().keys({
                id: Joi.number().required()
            })

            const payload = await verifyPayload(req.params, schema)
            if (payload.error == null) {
                const id = payload.id
                const criteria = { id: id }
                const data = await this.userService.find(criteria)
                return data
            }
        } catch (err) {
            throw err
        }
    }

    async create(req: Request) {
        try {
            const schema = Joi.object().keys({
                firstName: Joi.string().required(),
                lastName: Joi.string().required(),
                phoneNumber: Joi.string().required(),
                email: Joi.string().email({ minDomainSegments: 2, tlds: { allow: ['com', 'net'] } }).required(),
                address: Joi.string().required(),
                roleId: Joi.number().required(),
                departmentId: Joi.number().required()
            })

            const payload = await verifyPayload(req.body, schema)
            if (payload.error == null) {

                const password =  generateRandomStr()
                const hashedPassword = await hashPassword(password)

                const data = {
                    firstName: payload.firstName,
                    lastName: payload.lastName,
                    phoneNumber: payload.phoneNumber,
                    email: payload.email,
                    address: payload.address,
                    roleId: payload.roleId,
                    departmentId: payload.departmentId,
                    password: hashedPassword
                }
                const result = await this.userService.create(data)
                return result
            }
        } catch (err) {
            throw err
        }
    }

    async update(req: Request) {
        try {

            const querySchema = Joi.object().keys({
                id: Joi.number().required()
            })

            const payloadSchema = Joi.object().keys({
                firstName: Joi.string().required(),
                lastName: Joi.string().required(),
                phoneNumber: Joi.string().required(),
                email: Joi.string().required(),
                address: Joi.string().required(),
                roleId: Joi.number().required(),
                departmentId: Joi.number().required()
            })

            const queryBody = await verifyPayload(req.params, querySchema)
            const payload = await verifyPayload(req.body, payloadSchema)

            if (payload.error == null && queryBody.error == null) {
                const criteria = { id: queryBody.id }
                const data = {
                    firstName: payload.firstName,
                    lastName: payload.lastName,
                    phoneNumber: payload.phoneNumber,
                    email: payload.email,
                    address: payload.address,
                    roleId: payload.roleId,
                    departmentId: payload.departmentId
                }

                const result = await this.userService.update(criteria, data)
                return result
            }
        } catch (err) {
            throw err
        }
    }

    async delete(req: Request) {
        try {

            const querySchema = Joi.object().keys({
                id: Joi.number().required()
            })

            const queryBody = await verifyPayload(req.params, querySchema)
            if (queryBody.error == null) {
                const criteria = { id: queryBody.id }
                const data = {
                    isDeleted: true
                }

                const result = await this.userService.update(criteria, data)
                return result
            }
        } catch (err) {
            throw err
        }
    } 

}

export { UserController }

User controller uses reusable methods i.e verifyPayload, hashPassword and generateRandomStr from index.ts file under common folder in the project root directory and is as follows;

import { Response } from "express"
import { apiConstants } from '../constants/api'
import { ApiResponse } from "../interfaces"
const bcrypt = require("bcrypt")

const sendSuccessMessage = (res: Response, data: any, message: string) => {
    const response: ApiResponse = {
        statusCode: apiConstants.SUCCESS_STATUS_CODE,
        message: message,
        data: data || {}
    };
    res.status(apiConstants.SUCCESS_STATUS_CODE).send(response);
}

const sendErrorMessage = (res: Response, error: any) => {
    let message = error.message;
    if (error.isJoi) {
        message = error.details[0].message;
    }

    const response: ApiResponse = {
        statusCode: apiConstants.ERROR_STATUS_CODE,
        message: message
    }
    res.status(apiConstants.ERROR_STATUS_CODE).send(response);
}

const verifyPayload = async (request: any, requestSchema: any) => {
    try {
        const value = await requestSchema.validateAsync(request);
        return value;
    } catch (error) {
        throw error;
    }
}

const generateRandomStr = () => {
    return (Math.random() + 1).toString(36).substring(7)
}

const hashPassword = async (plaintextPassword: string) => {
    const hash = await bcrypt.hash(plaintextPassword, 15);
    return hash
}


export { sendSuccessMessage, sendErrorMessage, verifyPayload, generateRandomStr, hashPassword}

The index.ts in common folder uses apiConstants defined in the api.ts file under constants folder and is as follows;

const apiConstants = {

    SUCCESS_STATUS_CODE: 200,
    ERROR_STATUS_CODE: 400,
    SUCCESS_STATUS_TEXT: 'SUCCESS',
    ERROR_STATUS_TEXT: 'ERROR',

    SUCCESS_STATUS_MESSAGE: 'OK',
    ERROR_STATUS_MESSAGE: 'FAILED',

}

export { apiConstants }

Previously, we had created interface UserAttributes in the index.ts under interfaces, add ApiResponse interface which is being used by sendSuccessMessage and sendErrorMessage methods. We shall see these methods being used by routes.

Now that we have UserController, lets create user routes, create a file user.ts under routes folder and is as follows;

import { Request, Response } from "express"
const express = require('express')
const router = express.Router()
import { UserController } from '../controllers/UserController'
import { sendSuccessMessage, sendErrorMessage } from '../common'

const controller = new UserController

router.get("/", async (req: Request, res: Response) => {
    try {
        const data = await controller.get()
        sendSuccessMessage(res, data, 'success')
    } catch (error: unknown) {
        sendErrorMessage(res, error)
    }
})

router.post("/", async (req: Request, res: Response) => {
    try {
        const data = await controller.create(req)
        sendSuccessMessage(res, data, 'success')
    } catch (error: unknown) {
        sendErrorMessage(res, error)
    }
})

router.put("/:id", async (req: Request, res: Response) => {
    try {
        const data = await controller.update(req)
        sendSuccessMessage(res, data, 'success')
    } catch (error: unknown) {
        sendErrorMessage(res, error)
    }
})

router.delete("/:id", async (req: Request, res: Response) => {
    try {
        const data = await controller.delete(req)
        sendSuccessMessage(res, data, 'success')
    } catch (error: unknown) {
        sendErrorMessage(res, error)
    }
})

module.exports = router

Our next task is to create the server so create the file app.ts within the src folderas follows.

import express from 'express'
import { connectDB } from './database/connection'
const logger = require('morgan')
const bodyParser = require('body-parser')
require('./database/models')
const app = express();

const userRoutes = require('./routes/user')

//Setting the hostname and port number for the server to listen
const hostname = "127.0.0.1";
const port = 3000;

// database setup
connectDB()


app.use(logger('dev'))
app.use(express.json())

app.use(bodyParser.urlencoded({
  limit: '100mb',
  extended: true,
  parameterLimit: 1000000
}))


app.get('/', (req, res) => {
  res.send('Node.js API Server!');
});

app.use('/api/v1/users', userRoutes)

app.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}`);
});

Create .env file in your project root directory

DB_HOST=localhost
DB_NAME=testdb
DB_USER=root
DB_PASSWORD=root
DB_DIALECT=mysql

Adjust your package.json file to include the following scripts;

 "scripts": {
    "compile": "npx tsc",
    "start": "tsc && node dist/app.js",
    "build": "tsc",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

Finally, add .gitignore to specify files and directories that should be ignored and not tracked by Git and in our project, this is how it looks like.

node_modules
dist
.env

Testing API with ThunderClient (You can use Postman too)

1. Fetch all users
http://127.0.0.1:3000/api/v1/users

2. Create user

3. Update user

4. Delete user

Conclusion

We have created a node.js RESTful api server using typescript. In the next article, we will see how to secure our endpoints using authentication middleware. Thank you for attending today's class.👏🏻😅

Github link: 👉 https://github.com/DallingtonAsin/nodejs-api-server.git

How to Get Google Metrics from the Google Analytics Platform Using Node.js

Dallington Asingwire — Thu, 27 Oct 2022 09:07:07 +0000

Assume you've published an app on Google Play and a growing number of people have downloaded it. Eventually, you'll want to know how many total, active installs and other metrics, such as daily, weekly, and monthly active users, your app has.

In this tutorial, I'll show you how to use node.js to get Google metrics/analytics data for your app.

But first, you must do the following;

Select or create a Google Cloud Project (Your app must be connected on Google Cloud Platform).
Have Google Analytics Data API enabled.
Set up authentication with a service account so you can access the API from your local workstation.

First and foremost, you must install the @google-analytics/data google client node library with the following command under the root directory of your node project.

npm i @google-analytics/data

Next, import the Google Analytics Data API client library at the start of your javascript file as follows;

const { BetaAnalyticsDataClient } = 
require('@google-analytics/data');

The next step is to call the BetaAnalyticsDataClient constructor and pass Google credentials, specifically the file path containing Google credentials (This is typically stored in json format and is obtained from step 3 of the aforementioned prerequisites);


const analyticsDataClient = new BetaAnalyticsDataClient(
          {
            keyFilename: 'pathtoGooglecredentialsfile',
          }
);

Another value you must obtain before fetching Google metrics with this API is the Google Analytics 4 property ID. How to get Google Analytics 4 Property ID? 👉 Link

Next, let's look at the method that we shall use in fetching analytics;

 // get activeUsers, active1DayUsers, active7DayUsers, active28DayUsers, newUsers, totalUsers etc.

getAnalyticsData = async(startDate = '', endDate = '') => {

try{

 let dateRange = {
        startDate: startDate ? startDate : '30daysAgo',
        endDate: endDate ? endDate : 'yesterday'
     }

const [response] = 
await analyticsDataClient.runReport({
     property: `properties/${propertyId}`,
     dateRanges: [dateRange],
     dimensions: [{ name: 'platform' }],

     metrics: [
      { name: 'activeUsers' },
      { name: 'active1DayUsers'},
      { name: 'active7DayUsers' },
      { name: 'active28DayUsers' },
      { name: 'newUsers' },
      { name: 'totalUsers' }, 
      { name: 'crashAffectedUsers' },
      { name: 'averageSessionDuration' },
       ],
            });

let report = {};

 response.rows.forEach(row => {

report.activeUsers = this.numberWithCommas(row.metricValues[0].value);
report.active1DayUsers = this.numberWithCommas(row.metricValues[1].value);
report.active7DayUsers = this.numberWithCommas(row.metricValues[2].value);
report.active28DayUsers = this.numberWithCommas(row.metricValues[3].value);
report.newUsers = this.numberWithCommas(row.metricValues[4].value);
 report.totalUsers = this.numberWithCommas(row.metricValues[5].value);
report.crashAffectedUsers = this.numberWithCommas(row.metricValues[6].value);

let engagementDuration = parseFloat(row.metricValues[7].value);
engagementDuration = engagementDuration >= 3600 
 ? `${(engagementDuration/3600).toFixed(2)} hrs`  :
  engagementDuration < 3600 
  ? `${(engagementDuration/60).toFixed(2)} mins` :                              `${engagementDuration.toFixed(2)} secs`
report.userEngagementDuration = engagementDuration;

});

  return report;

}
 catch(err){
  throw err;
 }
}

getAnalyticsData is a custom method in the above code that retrieves analytics such as activeUsers, active1DayUsers, active7DayUsers, active28DayUsers, newUsers, totalUsers, crashAffectedUsers, and averageSessionDuration.

It takes in 2 optional parameters i.e startDate and endDate. If not supplied, startDate is '30daysAgo' while endDate is yesterday. On the instance for google analytics client, there is a method called runReport which takes in an object of keys, property (where you supply you Google Analytics property ID),dateRange, dimensions and then metrics.

Furthermore, I have a method called numberWithCommas that formats the metrics values with a thousand separator, as shown below;


 // formats a number with thousand separator 
    numberWithCommas = (x) => {
        try{
            return x.toString()
          .replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
        }catch(err){
            throw err;
        }
    }

If you want to getDAU (Daily Active Users), WAU (Weekly Active Users), and MAU (Monthly Active Users), follow the same steps as above, but change the dimensions to date instead of platform, and the respect values for the key names for DAU, WAU, and MAU are dauPerMau, dauPerWau, and wauPerMau.

The Entire Code

const { BetaAnalyticsDataClient } = require('@google-analytics/data');
let credentialsJsonPath =  env.GOOGLE_ANALYTICS.PRIVATE_KEY_PATH; 

const analyticsDataClient = new BetaAnalyticsDataClient({
    keyFilename: process.env.GOOGLE_PRIVATE_KEY_PATH
});
const propertyId = env.GOOGLE_ANALYTICS.PROPERTY_ID;

let googleAnalyticsApi = class {

getAnalyticsData = async(startDate = '', endDate = '') => {

try{

 let dateRange = {
        startDate: startDate ? startDate : '30daysAgo',
        endDate: endDate ? endDate : 'yesterday'
     }

const [response] = 
await analyticsDataClient.runReport({
     property: `properties/${propertyId}`,
     dateRanges: [dateRange],
     dimensions: [{ name: 'platform' }],

     metrics: [
      { name: 'activeUsers' },
      { name: 'active1DayUsers'},
      { name: 'active7DayUsers' },
      { name: 'active28DayUsers' },
      { name: 'newUsers' },
      { name: 'totalUsers' }, 
      { name: 'crashAffectedUsers' },
      { name: 'averageSessionDuration' },
       ],
            });

let report = {};

 response.rows.forEach(row => {

report.activeUsers = this.numberWithCommas(row.metricValues[0].value);
report.active1DayUsers = this.numberWithCommas(row.metricValues[1].value);
report.active7DayUsers = this.numberWithCommas(row.metricValues[2].value);
report.active28DayUsers = this.numberWithCommas(row.metricValues[3].value);
report.newUsers = this.numberWithCommas(row.metricValues[4].value);
 report.totalUsers = this.numberWithCommas(row.metricValues[5].value);
report.crashAffectedUsers = this.numberWithCommas(row.metricValues[6].value);

let engagementDuration = parseFloat(row.metricValues[7].value);
engagementDuration = engagementDuration >= 3600 
 ? `${(engagementDuration/3600).toFixed(2)} hrs`  :
  engagementDuration < 3600 
  ? `${(engagementDuration/60).toFixed(2)} mins` :                              `${engagementDuration.toFixed(2)} secs`
report.userEngagementDuration = engagementDuration;

});

   return report;

  } 
  catch(err){
    throw err;
  }
}

 // formats a number with thousand separator 
    numberWithCommas = (x) => {
        try{
         return x.toString()
         .replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
        }catch(err){
            throw err;
        }
    }


}

So that's how you get Google metrics from Google Analytics, and thank you for reading.

How to generate and download QR code in a React Native application

Dallington Asingwire — Sat, 16 Jul 2022 19:23:44 +0000

Background:
QR Codes are scannable codes that store data. QR stands for Quick Response. They serve a great purpose in accessing information forexample items in a supermarket have a QR codes that contain product information say item name, date of expiry, details about product manufacturer e.g their phone number etc.

Onto coding🥳
With that background information, let's dig deep into how we can generate and download QR codes in a react native application. First, we need to install 2 dependency packages i.e react-native-svg and react-native-qrcode-svg.
You can use npm or yarn to install the two dependencies under the root directory of your project using the commands below;

npm i -S react-native-svg react-native-qrcode-svg

yarn add react-native-svg react-native-qrcode-svg

Reusable component QRCODE example
In the following example, I create a reusable hook component called QRCODE;

import React from 'react';
import QRCode from 'react-native-qrcode-svg';

const QRCODE = ({value, getRef}) => {
    return(
        <QRCode
        value={value}
        size={250}
        color="black"
        backgroundColor="white"
        getRef={getRef}
        />
        )
    }

export default QRCODE

In the above hook, I import QRCode from react-native-qrcode-svg package. Then the custom reusable hook QRCODE takes in 2 props i.e value & getRef. value is string value of the QR code (When you scan the QR code, value is the information that gets displayed) while getRef is the svg ref of the QR code that can be used further(as we are going to see when downloading/saving this QR code to gallery).

In the return statement, QRCode hook from the dependency, has props i.e value, size, color of the QR code and getRef prop.

Using reusable hook QRCODE
In the following code example, I demonstrate how you can use the reusable hook created above to generate QR Code.

import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import QRCODE from '../components/QRcode';

const App = () => {

  const initialItemState ={
    name: 'Sugar',
    expiryDate: '2023-12-31',
    manufacturer: 'Kakira Sugar Estate'
  }

  const [item, setItem] = useState(initialItemState);
  const [productQRref, setProductQRref] = useState();

  return (
  <View>
   <QRCODE 
      value={JSON.stringify({
       name: item.name,
       expiry: item.expiryDate,
       manufacturer: item.manufacturer
      })}
      getRef={(c) => setProductQRref(c)}/>
  </View>
  )
}
export default App;

const styles = StyleSheet.create({
   container:{
    flex: 1,
    alignItems: 'center'
  }
});

In the above code, I import reusable hook we created before, and then pass properties, values and getRef with their corresponding values. Value is an item with keys; name, expiryDate and manufacturer. Because value prop to QRCODE is a string, I use JSON.stringify to convert item object to a string.

Downloading the generated QR code to Gallery
Well, I talked of useRef as the property passed to QRcode to get svg ref of the QR code.
In that case, I use setProductQRref hook to store the state of the svg ref of the QR code as seen in the above code.

In order to save QR code to gallery, we need two dependencies i.e @react-native-community/cameraroll and react-native-fs. @react-native-community/cameraroll is a react-native native module that provides access to the local camera roll or photo library while react-native-fs is the library that can make you use the filesystem easily in react native.

Code example for saving QR Code to photo gallery

import { 
Platform,
PermissionsAndroid,
ToastAndroid }
 from 'react-native';
import RNFS from "react-native-fs";
import CameraRoll from "@react-native-community/cameraroll";

 const saveQrToDisk = async(item) => {

if (Platform.OS === "android" &&
 !(await hasAndroidPermission())) {
     return;
}

if(productQRref){

productQRref.toDataURL((data) => {

let filePath =  RNFS.CachesDirectoryPath+`/${item.name}.png`;
RNFS.writeFile(filePath, data, 'base64')
  .then((success) => {
    return CameraRoll.save(filePath, 'photo')
  })
 .then(() => {
ToastAndroid.show('QRCode saved to gallery', ToastAndroid.LONG);
          });
   });
   }
 }

const hasAndroidPermission = async() => {
const permission=
PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE;

  const hasPermission = 
await PermissionsAndroid.check(permission);
  if (hasPermission) {
    return true;
  }

  const status = await PermissionsAndroid.request(permission);
  return status === 'granted';
}

saveQrToDisk is my function name, used to save QR code to gallery, it uses productQRref, the svg ref of the QR code we created in the previous code example. toDataURL function returns returns a data URL containing a representation of the QR code image. The imported RNFS hook writes the filePath of the QR code on the disk. When the path is finally written, I then use CameraRoll.save hook to save the QR code to the created file path on the disk.

hasAndroidPermission hook is used to request permissions to write to phone storage if not enabled.

Full Code example for generating and downloading QR code

import React, { useState } from 'react';
import { View, StyleSheet,Platform, PermissionsAndroid,
         ToastAndroid, Text, TouchableOpacity  } 
from 'react-native';
import QRCODE from '../components/QRcode';
import RNFS from "react-native-fs";
import CameraRoll from "@react-native-community/cameraroll";

const App = () => {

  const initialItemState ={
    name: 'Sugar',
    expiryDate: '2023-12-31',
    manufacturer: 'Kakira Sugar Estate'
  }

  const [item, setItem] = useState(initialItemState);
  const [productQRref, setProductQRref] = useState();

const saveQrToDisk = async() => {

if (Platform.OS === "android" &&
 !(await hasAndroidPermission())) {
     return;
}

if(productQRref){

productQRref.toDataURL((data) => {

let filePath =  RNFS.CachesDirectoryPath+`/${item.name}.png`;
RNFS.writeFile(filePath, data, 'base64')
  .then((success) => {
    return CameraRoll.save(filePath, 'photo')
  })
 .then(() => {
ToastAndroid.show('QRCode saved to gallery', ToastAndroid.LONG);
          });
   });
   }
 }

 const hasAndroidPermission = async() => {
const permission=
PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE;

  const hasPermission = 
await PermissionsAndroid.check(permission);
  if (hasPermission) {
    return true;
  }

  const status = await PermissionsAndroid.request(permission);
  return status === 'granted';
}

  return (
  <View style={styles.container}>
    <Text style={styles.qrText}>QR Code</Text>
   <QRCODE 
      value={JSON.stringify({
       name: item.name,
       expiry: item.expiryDate,
       manufacturer: item.manufacturer
      })}
      getRef={(c) => setProductQRref(c)}/>
  <TouchableOpacity 
      style={styles.button}
      onPress={() => { saveQrToDisk() }}>
     <Text style={styles.save}>Save to Gallery</Text>
   </TouchableOpacity>
  </View>
  )
}
export default App;

const styles = StyleSheet.create({

  container:{
    flex: 1,
    backgroundColor: '#fff',
    justifyContent: 'center',
    alignItems: 'center'
  },

  button: {
    borderRadius:30,
    padding:15,
    position: 'absolute',
    bottom: 0,
    width: '90%',
    justifyContent: 'center',
    alignItems: 'center',
    fontWeight: 'bold',
    marginBottom: 30,
    color: '#fff',
    backgroundColor:"#273746"
  },

  qrText: {
    top: -20,
    color: '#000',
    fontSize:18,
    fontWeight: 'bold'
  },

  save: {
    color: '#fff',
    fontSize:16,
    textTransform: 'capitalize'
 }
});

Output on your emulator or phone device screen

That's how you can generate QR Code and save it to gallery in a react native application. Thank you for reading through this article. Today was a long class, oops!!!😌 But thank you!!🤗

How to use .env file in node.js

Dallington Asingwire — Wed, 29 Jun 2022 21:44:41 +0000

Using .env file to store secret variables in software applications is a good common practice in software development. These variables can be database credentials, urls, ip addresses or hosts, secret keys for third party integrations etc.

In this tutorial, we are going to look at how to store secret variables in .env file and make use of them in a node.js application.

First of all, install an npm package called dotenv using the following command in your node.js project root directory;

npm install dotenv --save

dotenv package automatically loads environment variables from .env file into process object in node.js applications.

Create a .env file in your project root directory

DB_NAME=students
DB_USERNAME=dallington
DB_PASSWORD=fdggavcyyatexcda

In the above example of .env, I have database secret variables; database name (DB_NAME), database username (DB_USERNAME) and database password (DB_PASSWORD) but you can add as many variables as per your project needs.

You can then access your environment variables in any file of your node.js application as follows;

require('dotenv').config()
console.log(`Database name is ${process.env.DB_NAME}`);
console.log(`Database username is ${process.env.DB_USERNAME}`);
console.log(`Database password is ${process.env.DB_PASSWORD}`);

In the above code example, we import and configure dotenv using require; which is a built-in node.js function used to load modules. We then access our environment variables through process which is a global object in node.js.

Output

Database name is students
Database username is dallington
Database password is fdggavcyyatexcda

Note:
Since this file contains secret variables, we don't push it to git/github so remember to include .env file in your .gitignore file under your project root directory.

This is the basic example or tutorial of how you use .env file in node.js application. Thank you for reading through this tutorial and happy coding!😊

How to send a push notification from node.js & display it in a kotlin app

Dallington Asingwire — Mon, 20 Jun 2022 12:42:00 +0000

In this article, we look at how you can send a push notification using Firebase and node.js to a mobile device.
First of all, I assume you have a mobile application in which you have Firebase configured. I also assume you have a node.js application.

First of all, you need to install 2 node libraries i.e firebase-admin and fcm-notification in your node application.

npm i firebase-admin --save
npm i fcm-notification --save

You need to access your firebase account and private key which is a json file and include it in your node.js application. To get this private key, Go to Firebase > YouProjectName > Settings > Service Accounts > click Generate new private key button.
Import the following packages in your class or function in your node app.

var admin = require("firebase-admin");
var fcm = require('fcm-notification');
var serviceAccount = require("../config/privateKey.json");
const certPath = admin.credential.cert(serviceAccount);
var FCM = new fcm(certPath);

I use firebase-admin to create a certificate from the private key json file. as seen on code line

const certPath = admin.credential.cert(serviceAccount);

This certificate created from the private key, is meant to authenticate your requests to your firebase account.

Function to send push notification

  sendPushNotification= (fcm_token, title, body) => {

    try{
        let message = {
            android: {
                notification: {
                    title: title,
                    body: body,
                },
            },
            token: fcm_token
        };

        FCM.send(message, function(err, resp) {
            if(err){
                throw err;
            }else{
                console.log('Successfully sent notification');
            }
        });

    }catch(err){
        throw err;
        }

    }

sendPushNotification() is the function name i have created to send push notification. it takes 3 parameters i.e fcm_token, title and then body of the push notification. message is an object with android and token keys. Android is a key that indicates that the notification is being sent to a mobile device. Within android key, is notification object which holds title and body of the push notification. token is the key that holds the fcm token to which the notification is being sent.

FCM is the instance of fcm class from fcm-notification package which takes in the certificate created from the private key.
Within fcm class, is a method send which is accessed through the instance and it takes in 2 parameters i.e the message object and a callback function as seen in the code snippet below;

 FCM.send(message, function(err, resp) {
   if(err){
        throw err;
     }else{
        console.log('Successfully sent notification');
     }
   });

This is how you can send a push notification to a mobile device from node.js using firebase.
Before I conclude, note that fcm tokens come from a mobile app in which firebase is configured and used. This means that you can actually access this token from database that is if you are storing it in your database.

In Kotlin (Mobile App)
In your kotlin code, you can setup your firebase service as follows;

import android.app.NotificationChannel
import android.app.NotificationManager
import android.app.PendingIntent
import android.content.Context
import android.content.Intent
import android.media.RingtoneManager
import android.net.Uri
import android.os.Build
import android.util.Log
import androidx.core.app.NotificationCompat
import androidx.core.content.ContextCompat
import com.google.firebase.messaging.FirebaseMessaging
import com.google.firebase.messaging.FirebaseMessagingService
import com.google.firebase.messaging.RemoteMessage

class CustomFirebaseMessagingService : FirebaseMessagingService() {

    override fun onMessageReceived(remoteMessage: RemoteMessage) {

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
            val mNotificationManager =
                getSystemService(Context.NOTIFICATION_SERVICE) as NotificationManager
            val importance = NotificationManager.IMPORTANCE_HIGH
            val mChannel = NotificationChannel(
                AppConstants.FCMConstants.CHANNEL_ID,
                AppConstants.FCMConstants.CHANNEL_NAME,
                importance
            )
            mChannel.description = AppConstants.FCMConstants.CHANNEL_DESC
            mNotificationManager.createNotificationChannel(mChannel)
        }

        if(remoteMessage.data.isNotEmpty()) {
            remoteMessage.data.let {

                var title = it["title"]
                var body = it["message"]
                println("From data object, notification title: $title and body: $body")
                sendNotification(title.toString(), body.toString())
            }
        }

        if (remoteMessage.notification != null){
            var title = remoteMessage.notification?.title
            var body = remoteMessage.notification?.body
            println("From notification object, notification title: $title and body: $body")
            if(!title.isNullOrEmpty() && !body.isNullOrEmpty()){
                sendNotification(title.toString(), body.toString())
            }
        }


    }


    private fun sendNotification(title: String, messageBody: String) {
        var intent: Intent? = null
        intent = Intent(this, HomeActivity::class.java)
        intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP)
        val pendingIntent = PendingIntent.getActivity(
            this, 0 /* Request code */, intent,
            PendingIntent.FLAG_ONE_SHOT
        )
        var defaultSoundUri: Uri? = null
        defaultSoundUri = RingtoneManager.getDefaultUri(RingtoneManager.TYPE_NOTIFICATION)
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
            val importance = NotificationManager.IMPORTANCE_HIGH
            val channel =
                NotificationChannel(
                    AppConstants.FCMConstants.CHANNEL_ID,
                    AppConstants.FCMConstants.CHANNEL_NAME,
                    importance
                )
            channel.description = AppConstants.FCMConstants.CHANNEL_DESC
            // Register the channel with the system; you can't change the importance
            // or other notification behaviors after this
            val notificationManager = this.getSystemService(
                NotificationManager::class.java
            )
            notificationManager.createNotificationChannel(channel)
        }
        val notificationBuilder: NotificationCompat.Builder =
            NotificationCompat.Builder(this, AppConstants.FCMConstants.CHANNEL_ID)
                .setStyle(NotificationCompat.BigTextStyle().bigText(messageBody))
                .setContentTitle(title)
                .setContentText(messageBody)
                .setAutoCancel(true)
                .setPriority(NotificationManager.IMPORTANCE_MAX)
                .setChannelId(AppConstants.FCMConstants.CHANNEL_ID)
                .setSound(defaultSoundUri)
                .setContentIntent(pendingIntent)
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            notificationBuilder.setSmallIcon(R.drawable.push_icon)
            notificationBuilder.color = ContextCompat.getColor(this, R.color.pink_500)
        } else {
            notificationBuilder.setSmallIcon(R.mipmap.ic_launcher)
        }
        val notificationManager =
            this.getSystemService(Context.NOTIFICATION_SERVICE) as NotificationManager
        notificationManager.notify(0 /* ID of notification */, notificationBuilder.build())
    }


    override fun onNewToken(p0: String) {
        Log.d("NotificationFCM", "Token: " + p0)
    }

}

Thank you for reading through this article, I hope you find it helpful.

How to send sms to a phone number in node.js

Dallington Asingwire — Fri, 11 Mar 2022 15:00:18 +0000

Twilio is a platform used by hundreds of thousands of businesses and more than ten million developers worldwide to build unique and personalized experiences for their customers. Twilio is popular for being a gateway to send text, voice, chat, video and email through API.

So today, we shall look at how to send a text message to the user through Twilio using Node.js.
First we need to install Twilio helper library by running the following command;

 npm i twilio

Code (TwilioMessagingService.js)

var twilio = require('twilio');
require('dotenv').config();
const accountSid = process.env.accountSid; //Your Account SID from twilio console
const authToken = process.env.authToken; //Your Auth Token from twilio console

var client = new twilio(accountSid, authToken);

module.exports = {
    sendSms: async(req, callback) => {
        const phoneNumber = req.to; // phone number must start with country code
        client.messages.create({
            body: req.message,
            to: phoneNumber, //'',  // Text this number
            from: '+xxxxxxxxxx' // From a valid Twilio number
        }, function(err, message) {
            if (err) {
                callback(err.message);
            } else {
                callback(null, message.sid);
            }
        });
    },

}

In the above code example, first step is to access Twilio module for use using require function through this line of code var twilio = require('twilio').

Next step is to instantiate Twilio client by using new twilio(accountSid, authToken) and its constructor takes in accountSid and authToken which are obtained from your Twilio console. Both accountSID and authToken are configured in .env file and I read those values using dotenv npm library. Once you have created an account with Twilio, you can access Twilio console and get those credentials.

You can use this link https://www.twilio.com/blog/better-twilio-authentication-csharp-twilio-api-keys to see how to get AccountSID and AuthToken.

In module.exports instruction, I have a method named sendSms() which is used to send text message to a user phone number. Through an Twilio instance client, you can send a message using messages.create() function which takes in one parameter, a json object with keys body (the message to be sent to the user), to (a phone number that belongs to the user, receiving the message) and from (the phone number of the sender).

The function sendSms takes in 2 parameters i.e req which contains the message body and the phone number to which text message is sent, and a callback function.

Calling sendSms
You can call sendSms forexample using the code snippet below;

const Twilio = require("../helpers/TwilioMessagingService");

const sendTextMessage = (phoneNumber) => {

 Twilio.sendSms({ to: phoneNumber, message: `Hey, this text message 
        has been sent through Twilio platform` }, (err,smsData) => {
        console.log(err, smsData);
   });

}

In the above example, you access your Twilio messaging service through a constant named Twilio and then call sendSms where you pass parameters i.e receiver phone number, message to be sent and then the callback function.

So this is how you can send an sms to a phone number using Twilio, hope it helps you. Thank you for reading through this article.

How to secure Laravel API

Dallington Asingwire — Mon, 31 Jan 2022 11:33:41 +0000

Laravel Passport provides a full OAuth2 server implementation for your laravel application. If your application needs to support OAuth2, then you should use Laravel Passport.
To get started, install Passport via the Composer package manager as follows;

composer require laravel/passport

Passport has its service provider that registers its own database migration directory, so you should migrate your database after installing the package. The Passport migrations will create the tables your application needs to store OAuth2 clients and access tokens:

php artisan migrate

Next, execute the following artisan command;

php artisan passport:install

The above command creates the encryption keys needed to generate secure access tokens. This also creates "personal access" and "password grant" clients which will be used to generate access tokens.

After running the passport:install command, add Laravel\Passport\HasApiTokens trait to your model that authenticates your users. In my case, I use customer model as the authentication model.

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Passport\HasApiTokens;

class Customer extends Authenticatable
{
    use HasApiTokens, HasFactory, Notifiable;
    protected $table = "customers";
    public $timestamps = true;

    protected $guarded=['id'];
    protected $fillable = [
       'first_name',
       'last_name',
       'phone_number',
       'email',
       'account_balance',
       'password'
    ];

    protected $hidden = [
        'password',
        'remember_token',
    ];

    protected $casts = [
        'email_verified_at' => 'datetime',
    ];

    public function getAuthPassword(){
        return $this->password;
    }

}

As you can see in the above code snippet, my model Customer uses HasApiTokens trait.

The next step is to call the Passport::routes method within the boot method of your App\Providers\AuthServiceProvider. This method registers the routes necessary to issue access tokens and revoke access tokens, clients, and personal access tokens.

<?php

namespace App\Providers;

use Illuminate\Foundation\Support\Providers\AuthServiceProvider
as ServiceProvider;
use Illuminate\Support\Facades\Gate;
use Laravel\Passport\Passport;

class AuthServiceProvider extends ServiceProvider
{
    /**
     * The policy mappings for the application.
     *
     * @var array
     */
    protected $policies = [
        'App\Models\Model' => 'App\Policies\ModelPolicy',
    ];

    /**
     * Register any authentication / authorization services.
     *
     * @return void
     */
    public function boot()
    {
         $this->registerPolicies();

         Passport::routes();

         // scope customer used when creating access token  
         Passport::tokensCan([
            'customer' => 'Customer access',
         ]);


    }
}

In the next step, in the application's config/auth.php, I set the driver option of my customized api authentication guard called api-customers to passport. This instructs the application to use passport's TokenGuard when authenticating incoming customer API requests.

   'guards' => [
        'web' => [
            'driver' => 'session',
            'provider' => 'users',
        ],

        'api-customers' => [
            'driver' => 'passport',
            'provider' => 'customers',
            'hash' => false,
        ],
    ],

in the above config/auth.php file, I have created an authentication guard called api-customers which uses provider customers. Below is my provider customers set in the providers array in the same file.

  'providers' => [
        'users' => [
            'driver' => 'eloquent',
            'model' => App\Models\User::class,
        ],

         'customers' => [
            'driver' => 'eloquent',
            'model' => App\Models\Customer::class,
        ],

    ],

Lastly, you can apply auth middleware to your routes in routes/api.php as seen in the example below;

Route::group(['prefix' => 'customer', 'middleware' => ['auth:api-customers']], function(){
 Route::get('/search/{id}', [CustomerController::class, 'findCustomer']);
});

In the above route for searching customer, an auth middleware on the customer guard(api-customers) is used and any request to this endpoint will be authenticated using Laravel passport since we applied it to the api authentication guard called api-customers.

Now users will be assigned new access tokens every time they login. Access token in the login method in your login controller can be created as follows;

$access_token = $customer->createToken('Customer'.$customer->phone_number, ['customer'])->accessToken;

This token must be sent as part of headers in the http requests from the frontend to the API if the end point is to be accessed.

And that's how you can secure your application or your laravel api end points using Laravel Passport. Thank you for reading through this, see you in my next post.

How to use .env file in a React Native Application

Dallington Asingwire — Wed, 08 Dec 2021 08:52:00 +0000

Using environment file (.env) to configure most critical variables like database credentials, api keys, is the most common practice in software development. In this post, we are going to see how to create and use .env file in react native.

First, we need to install and use a babel plugin called react-native-dotenv. Install this plugin under your project root directory using the command below;

npm install react-native-dotenv

This babel plugin lets you inject your environment variables into your react-native application.

.env file
Create .env file under your project root directory and example looks like below;

APP_NAME=MyRNApp
COMPANY_EMAIL=yyy@xxxx.com
API_KEY=myapikeyisplacehere

Create if you don't have babel.config.js file under your project root directory, and add the following code

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    ["module:react-native-dotenv", {
      "envName": "APP_ENV",
      "moduleName": "@env",
      "path": ".env",
      "safe": false,
      "allowUndefined": true,
      "verbose": false
    }]
  ]
};

How to access and use environment variables in your components

import React from 'react'
import {View, Text} from 'react-native'
import {APP_NAME, API_KEY, COMPANY_EMAIL} from '@env'

const App = () => {
return (
   <View>
    <Text>My App name is {APP_NAME}</Text>
    <Text>My API Key is {API_KEY}</Text>
    <Text>Company email is {COMPANY_EMAIL}</Text>
   </View>
);
}

export default App;

Output on your emulator or phone device screen

My App name is MyRNApp
My API Key is myapikeyisplacehere
Company email is yyy@xxxx.com

As you can see the above output, we have been able to load environment variables,APP_NAME, API_KEY and COMPANY_EMAIL into our react native application.

NOTE:
If you are using Typescript, create a file env.d.ts or env.d.tsx in your project root directory and then define module '@env' in it forexample;

 declare module '@env' {
    export const API_URL: string;
    export const APP_MAJOR_VERSION: string;
    export const APP_MINOR_VERSION: string;
    export const APP_PATCH_VERSION: string;
 }

And that's the basic example of how you can use a .env file in a react native application. Thank you for reading through this article.

How to upload an image in React Native

Dallington Asingwire — Mon, 29 Nov 2021 08:32:09 +0000

In this post, we are going to learn how to upload an image in a react native app to Laravel api server.
We are going to use react-native-image-crop-picker, a package to handle upload of an image either using camera or from the gallery.
First, we install this package using npm by using the command below;

npm i react-native-image-crop-picker

Hooks takePhotoFromCamera() and choosePhotoFromLibrary()

import React from 'react';
import ImagePicker from 'react-native-image-crop-picker';

const uploadProfilePicture = () => {

const [isUpdatingImage, setIsUpdatingImage] = useState(false);
const [visible, setVisible] = useState(false);

 const takePhotoFromCamera = () => {
       ImagePicker.openCamera({
        width: 300,
        height: 400,
        cropping: true,
        compressImageQuality: 0.7,
      }).then(image => {
        SubmitProfileUpdateDetails(image);
      });
    }


 const choosePhotoFromLibrary = async() => {
      ImagePicker.openPicker({
        width: 300,
        height: 400,
        cropping: true,
      }).then(async (image) => {
        SubmitProfileUpdateDetails(image);
      });
    }
}

}

In the above code snippet, there are two custom hook methods i.e takePhotoFromCamera and choosePhotoFromLibrary.

takePhotoFromCamera() uses openCamera() method on the object imagePicker to allow user upload the photo using camera while choosePhotoFromLibrary() uses openPicker() method on the object imagePicker to allow user upload photo from gallery.

Both hooks call method SubmitProfileUpdateDetails(image) which takes in parameter image (a response object after uploading photo either using camera or from gallery).

Method SubmitProfileUpdateDetails()

var mime = require('mime-types') 
// import this at the top of your component

const SubmitProfileUpdateDetails = async(image) => {

      const imagePath = image.path;
      const mimeType = image.mime;
      const source = {url: image.path};
      const fileExtension = mime.extension(mimeType);
      setImage(imagePath);

      const ImageData = {
        uri: imagePath,
        type: mimeType,
        size: image.size,
        extension: fileExtension,
        name: 'profile_pic',
      }

      let formData = new FormData();
      formData.append('id', profile.user_id);
      formData.append('phone_number',profile.phone_number);
      formData.append('extension', fileExtension);
      formData.append('image', ImageData);

      setIsUpdatingImage(true);
      let result = await uploadProfilePicture(formData);

      const statusCode = result.statusCode;
      const message = result.message;
      if(statusCode == 1){
        const customer = result.data;
        await setProfile(customer);
        await getProfile(customer);
        Toast.show(message);
      }else{
          Alert.alert("Message", message);
      }
      setIsUpdatingImage(false);
      setVisible(false);
    }

The object image has properties; image path and image mime which i use to get image extension. I form object imageData, containing photo details i.e image uri, type, size, extension and name. I use FormData interface to append user data (id, phone number, extension and image object) to the formData object.
Note: I use node package mime-types to get file extension of the uploaded photo. The package can be installed using the command npm i mime-types.

The method calls uploadProfilePicture() which takes in formData object containing user details.

Method uploadProfilePicture()

const uploadProfilePicture = (data) => {
        const endpoint = "change/profile/image";
        return FileUpload(endpoint, data);
   }

Method uploadProfilePicture calls FileUpload which takes in an endpoint "change/profile/image" and user details which are uploaded to the server.
Method FileUpload()

const FileUpload = async(endPoint, data) => {
      const url = config.API_URL+""+ endPoint; 
// Replace config.API_URL with your api url
      const response = await fetch(url, {
        method: 'POST',
        body: data,
        headers: {
          Accept: 'application/json',
          'Content-Type': 'multipart/form-data',
          'authToken': 'yourtokenhere',
        },
      });

      var resultSet;
      (response.ok) 
      ? resultSet = await response.json()
      : resultSet = "HTTP-Error: " + response.status;

      return resultSet;
   }

FileUpload() uses javascript fetch api to send data to the server using Post method.

Full Code


import React from 'react';
import {View, Text,TouchableOpacity} from 'react native';
import FontAwesome from 'react-native-vector-icons/FontAwesome'
import ImagePicker from 'react-native-image-crop-picker';
var mime = require('mime-types')

const uploadProfilePicture = () => {

const [isUpdatingImage, setIsUpdatingImage] = useState(false);
const [visible, setVisible] = useState(false);

 const takePhotoFromCamera = () => {
       ImagePicker.openCamera({
        width: 300,
        height: 400,
        cropping: true,
        compressImageQuality: 0.7,
      }).then(image => {
        SubmitProfileUpdateDetails(image);
      });
    }


 const choosePhotoFromLibrary = async() => {
      ImagePicker.openPicker({
        width: 300,
        height: 400,
        cropping: true,
      }).then(async (image) => {
        SubmitProfileUpdateDetails(image);
      });
    }
}

const SubmitProfileUpdateDetails = async(image) => {
      const imagePath = image.path;
      const mimeType = image.mime;
      const source = {url: image.path};
      const fileExtension = mime.extension(mimeType);
      setImage(imagePath);

      const ImageData = {
        uri: imagePath,
        type: mimeType,
        size: image.size,
        extension: fileExtension,
        name: 'profile_pic',
      }

      let formData = new FormData();
      formData.append('id', profile.user_id);
      formData.append('phone_number',profile.phone_number);
      formData.append('extension', fileExtension);
      formData.append('image', ImageData);

      setIsUpdatingImage(true);
      let result = await uploadProfilePicture(formData);

      const statusCode = result.statusCode;
      const message = result.message;
      if(statusCode == 1){
        const customer = result.data;
        await setProfile(customer);
        await getProfile(customer);
        Toast.show(message);
      }else{
          Alert.alert("Message", message);
      }
      setIsUpdatingImage(false);
      setVisible(false);
    }

const FileUpload = async(endPoint, data) => {
      const url = config.API_URL+""+ endPoint; 
      const response = await fetch(url, {
        method: 'POST',
        body: data,
        headers: {
          Accept: 'application/json',
          'Content-Type': 'multipart/form-data',
          'authToken': 'yourtokenhere',
        },
      });

      var resultSet;
      (response.ok) 
      ? resultSet = await response.json()
      : resultSet = "HTTP-Error: " + response.status;

      return resultSet;
   }

 return(

            <View>
            <View>
            <Text>Upload Profile Photo</Text>
            <Text>Choose Your Profile Picture</Text>
            </View>

            <View>

            <View>
            <TouchableOpacity onPress={()=>{ setVisible(false) }} >
            <FontAwesome name={"trash"} size={25} color= 
    {"#fff"} />
            </TouchableOpacity>
            <Text>Cancel</Text>
            </View>

            <View>
            <TouchableOpacity onPress={choosePhotoFromLibrary} >
            <FontAwesome name={"photo"} size={25}  color={"#fff"}/>
            </TouchableOpacity>
            <Text>Gallery</Text>
            </View>

            <View>
            <TouchableOpacity onPress= 
             {takePhotoFromCamera}> 
            <FontAwesome name={"camera"} size={25} color= 
           {"#fff"}/>
            </TouchableOpacity>
            <Text>Camera</Text>
            </View>

            </View>
            </View>

    );


}

Note: Do not forget to install fontawesome package because we use it as well in the example above.
You can use any server technology like laravel to handle the backend.
Laravel code snippet to handle the uploading of the image

  if($request->filled('id') && 
     $request>filled('phone_number') && 
     $request->filled('extension') && 
     $request->has('image')) {
    $file = $request->file('image');
    $user_id = $request->input('id');
    $phone_number = $request->input('phone_number');
    $file_extension = $request->input('extension');

    $doesUserExist = User::where('id', $customer_id)
         ->where('phone_number', $phone_number)->exists();
    if($doesUserExist){
       $user = User::findOrFail($user_id);
       if(!empty($user->image)){
           Storage::disk('public')->delete($user->image);
        }
       $fileName = $user_id.''.time().'.'.$file_extension;
       $filePath = 
               $file->storeAs('images',$fileName,'public');
       $input = ['image' => $filePath];

       if($user->update($input)){
          $message = 'Profile updated successfully';
          $resp->statusCode = '1';
          $resp->message  = $message;
        }else {
          $resp->statusCode = '0';
          $resp->message = "Unable to update profile picture";
       }
 }else{
   $resp->statusCode = '0';
   $resp->message = "Unable to find user";
 }
}
 else{
  $resp->statusCode = '0';
  $resp->message = "Unable to process request";
 }

I hope this post gives you a picture of how to upload profile picture or any photo from react native app to the server say laravel. Thank you for taking time to read through this post.

Inner or nested classes in java

Dallington Asingwire — Tue, 09 Nov 2021 09:45:48 +0000

An inner class is a class that is declared inside a class or interface. Inner classes are used to logically group classes or interfaces in one place in order to improve readability and maintainability.
Syntax of inner class

class X1{
// code
  class X2{
      // code
    }
}

Advantages of using inner classes

Because inner classes logically group classes and interfaces in one place only, they improve readability and maintainability.
minimises coding efforts since there is less code to write thus facilitating code optimisation.
Inner classes are a representation of a particular type of relationship in that an inner class can access all the members(data members and methods) of an outer class including one declared private.

Why need an inner class?
There might be a program where a class must not be accessed by other class so in that case, you include it in another class.

Types of inner classes
There are 4 types of nested/inner classes i.e member(nested inner class), static member(static nested class), anonymous inner class and local inner class.
A) Static member inner classes
A static member inner class is an inner class which is declared static.
Syntax for a static inner class

  class MainClass {
    // code
    static class StaticInnerClass{
     // code
    }
}

In the above code snippet, StaticInnerClass is a static inner class.
This class can't refer directly to their instance variables or methods defined in its enclosing class since they use them only by an object reference. They are accessed by the use of class name.
Note: Syntax for creating an object of a static inner class

MainClass.StaticInnerClass objectname 
= new MainClass.StaticInnerClass();

Example:

 class A{
  static String parent_name = "A";
  static class B{
    void whoami(){
      System.out.print("I am static inner class B
          and my parent class is"+parent_name);
     }
  }
 public static void main(String[] args)  
      {  
        A.B obj = new A.B();  
        obj.whoami();  
      }
}

Output

I am static inner class B and my parent class is A

In the above example, B is a static inner class and an instance method like whoami() is accessed by using class name B.

B. Member inner class
A member inner class is a class created within a class and outside a method. A member inner class is non-static.
A member inner class refers directly to its instance variables or methods defined in its enclosing class. Also, because an inner class is associated with an instance, it cannot define any static members itself.
Syntax for a member inner class

class MainClass
  {
    // code
    class InnerClass
      {
        // code
      }
  }

Note: Syntax for creating an object of a non-static member inner class

MainClass m = new MainClass();
MainClass.InnerClass innerObj = m.new InnerClass();

Example

class X{
     static String parent_name ="X";
     class Y{
       void message(){
        System.out.println("Hey, I am an non-static inner 
             class Y and my parent class is "+parent_name);
     } 
    }

public static void main(String[] args)  
      {  
        X x = new X();
        X.Y innerObj = x.new Y();
        innerObj.message();  
      }
}

Output

Hey, I am an non-static inner class Y and my parent class is X

C. Anonymous inner class
Anonymous inner class is one that is created for implementing an interface or extending a class. Thereafter, anonymous class must implement an interface or extend an abstract class but you don't use keywords extend or implement to create anonymous class.
Syntax for creating anonymous class

new interface-or-class-name{
  // code
}

Example:

import java.util.Random;

public class AnonymousClassExample {

    interface Food{
        public void choose();
        public void whichFood();
    }

    public void eat() {

        // Anonymous class
  Food birdsFoodPreference = new Food() {
        public void choose() {
            whichFood();
        }
        public void whichFood() {
     String [] foodItems = {"Insects", "Maize", "G.nuts"};
      System.out.println("Birds like eating 
                         "+getRandomFoodChoice(foodItems));
    }
    };

    // Anonymous class
    Food MansFoodPreference = new Food() {
        public void choose() {
            whichFood();
        }
        public void whichFood() {
   String [] foodItems = {"Meat", "Posho", "Rice"};
    System.out.println("Man likes eating 
                   "+getRandomFoodChoice(foodItems));
        }
    };

    birdsFoodPreference.choose();
    MansFoodPreference.choose();

    }

    public static void main(String[] args) {
AnonymousClassExample app = new AnonymousClassExample();
app.eat();

    }

    public static String getRandomFoodChoice(String[] array) {
        int rnd = new Random().nextInt(array.length);
        return array[rnd];
    }

}

Output

Birds like eating Insects
Man likes eating Posho

Key facts about anonymous inner classes

Anonymous class cannot have a constructor. Thus, you cannot pass parameters to an anonymous class when you instantiate it.
Anonymous class can access any variables visible to the block within which anonymous class is declared, including local variables.
Anonymous class can also access methods of a class that contains it.

D. Local inner class
A local class is a class that is defined in a block, which is a group of zero or more statements between balanced braces. You typically find local classes defined in the body of a method.

import java.util.*;
public class Bank {

    public static void getTotalPayable(String bank, 
              double principal, int years) {

        // local class named Interest
         class Interest{
           double bank_interest_rate = 0.0;

               Interest(String bank){
                 switch (bank) {
                   case "Centenary":
                      bank_interest_rate = 3.2;
                      break;
                   case "Stanbic":
                         bank_interest_rate = 2.8;
                     break;
                   case "Equity":
                         bank_interest_rate = 3.15;
                     break;
                       default:
                         bank_interest_rate = 1.5;
    }

    }
// method in local class that returns interest
    public double getInterestRate() {
     return bank_interest_rate;
    }

 }

Interest obj = new Interest(bank);
double amount = Math.round(principal*
               (1 + (obj.getInterestRate()*years)));

System.out.println("The total amount payable
 for principal "+principal+" after
 "+years+" years in "+bank+" bank
 whose interest is "+obj.getInterestRate()+"
 is "+amount);

 }


    public static void main(String[] args) {
        double amt = 100000;
        int years = 3;
        getTotalPayable("Centenary", amt, years);
        getTotalPayable("Stanbic", amt, years);
        getTotalPayable("Equity", amt, years);

    }

}

Output

The total amount payable for principal 100000.0 after 3 years in Centenary bank whose interest is 3.2 is 1060000.0
The total amount payable for principal 100000.0 after 3 years in Stanbic bank whose interest is 2.8 is 940000.0
The total amount payable for principal 100000.0 after 3 years in Equity bank whose interest is 3.15 is 1045000.0

So that's the concept of inner classes in java, thank you to taking time to read through this post. See you in the next one!

Improving your reasoning with Arrays in java

Dallington Asingwire — Wed, 03 Nov 2021 07:21:05 +0000

QUESTION:
Write a function that takes an array of integers as an argument and returns a value based on the sums of the even and odd numbers in the array. Let X = the sum of the odd numbers in the array and let Y = the sum of the even numbers. The function should return X-Y
The signature of the function is: int f(int [] a)

Examples

if input array is	return
{1}	1
{1, 2}	-1
{1, 2, 3}	2
{1, 2, 3, 4}	-2
{3, 3, 4, 4}	-2
{3, 2, 3, 4}	0
{4, 1, 2, 3}	-2
{1, 1}	2
{}	0

ANSWER:


import java.util.*;
public class ArraySum {

    public int f(int[] a) {
        int X = 0;  // initialization for sum of odd numbers in an array
        int Y = 0; // initialization for sum of even numbers in an array
        for(int i = 0; i<a.length; i++) {
            if(a[i] % 2 == 1) {
                X+=a[i];
            }
            if(a[i] % 2 == 0) {
                Y+=a[i];
            }   
        }
        return X-Y;

    }

    public static void main(String[] args) {

        ArraySum obj = new ArraySum();
        int [] A = {1};
        int [] B = {1, 2};
        int [] C = {1, 2, 3};
        int [] D = {1, 2, 3, 4};
        int [] E = {3, 3, 4, 4};
        int [] F = {3, 2, 3, 4};
        int [] G = {4, 1, 2, 3};
        int [] H = {1, 1};
        int [] I = {};

        // Printing results on the screen
        System.out.println("Result for array A "+Arrays.toString(A)+" is "+obj.f(A));
        System.out.println("Result for array B "+Arrays.toString(B)+" is "+obj.f(B));
        System.out.println("Result for array C "+Arrays.toString(C)+" is "+obj.f(C));
        System.out.println("Result for array D "+Arrays.toString(D)+" is "+obj.f(D));
        System.out.println("Result for array E "+Arrays.toString(E)+" is "+obj.f(E));
        System.out.println("Result for array F "+Arrays.toString(F)+" is "+obj.f(F));
        System.out.println("Result for array G "+Arrays.toString(G)+" is "+obj.f(G));
        System.out.println("Result for array H "+Arrays.toString(H)+" is "+obj.f(H));
        System.out.println("Result for array I "+Arrays.toString(I)+" is "+obj.f(I));

    }

}

OUTPUT:

Result for array A [1] is 1
Result for array B [1, 2] is -1
Result for array C [1, 2, 3] is 2
Result for array D [1, 2, 3, 4] is -2
Result for array E [3, 3, 4, 4] is -2
Result for array F [3, 2, 3, 4] is 0
Result for array G [4, 1, 2, 3] is -2
Result for array H [1, 1] is 2
Result for array I [] is 0

That's one of examples in java arrays that can improve your reasoning, practice as many challenges as you can to better your programming skills. Thank you for taking time to read through this post.

How to connect MySQL database in java

Dallington Asingwire — Fri, 29 Oct 2021 18:58:00 +0000

In this post, we're going to see Java Database Connectivity (JDBC) with MySQL. Connecting to database to have CRUD operations like INSERT, SELECT, UPDATE and DELETE is the "center of gravity" of almost every backend technology.
To connect java application with the MySQL database, mysqlconnector.jar file is required to be loaded. You can download this file from here or check here.

To load the jar file, you can do this by setting the classpath permanently. To do this, go to environment variable then click on new tab. In variable name write classpath and in variable value paste the path to the mysqlconnector.jar file by appending mysqlconnector.jar as C:\yourfolder\mysql-connector-java-8.0.25;
Then create a new project in your java text editor say Eclipse, Netbeans.

Next, load mysqlconnector.jar file in your project by right clicking on it. I'm using Eclipse as my text editor, do the following to load the jar file in your project.
1.Right-click on your project.
2.Select Build Path.
3.Click on Configure Build Path.
4.Click on Libraries, select Add External JARs.
5.Select the jar file from the required folder.
6.Click and Apply and Ok.

For Ubuntu users, you might find this helpful.

NOTE: For whatever text editor you are using, You should be able to load that file.
Next after loading the jar file in your project, create a java class say Users to illustrate how to connect java to MySql database using com.mysql.jdbc.Driver driver class.

Code Example

import java.sql.*;  
public class Users {

    public static void main(String[] args) {
        try{ 

Class.forName("com.mysql.cj.jdbc.Driver");
//Class.forName("com.mysql.jdbc.Driver"); // this has been deprecated
String connectionString = "jdbc:mysql://localhost:3306/db_name";
String db_username = "yourdatabase_username";
String db_password = "yourdatabase_password";

Connection con = DriverManager.getConnection(connectionString,
                                           db_username,
                                           db_password);  

            Statement stmt=con.createStatement();  
            ResultSet rs=stmt.executeQuery("select * from users");  
            while(rs.next()) {

            int id = rs.getInt("id");
            String firstName = rs.getString("first_name");
            String lastName = rs.getString("last_name");

            String name = rs.getString("name");
            String username = rs.getString("username");
            String telephone_no = rs.getString("tel_no");
            String address = rs.getString("address");


            Date dateCreated = rs.getDate("created_at");
            boolean isActive = rs.getBoolean("isActive");
            int user_role = rs.getInt("user_role");

            System.out.format("%s, %s, %s,
                             %s, %s, %s, %s, %s, %s\n", 
                             id,firstName, lastName, dateCreated,
                             isActive, user_role, name, username,
                             telephone_no, address);
          }
con.close();  
    }
catch(Exception e){ 
     System.out.println(e);
   }  
}  
  }

Code Explanation:

Class.forName() is the method loads the driver class for the mysql database (com.mysql.jdbc.Driver).
Next, we establish a database connection using getConnection() method on DriverManager class which takes in the url for the database host, database username and password.
con.createStatement() is used to create a statement instance on the database connection object (con). Statement is used for accessing database. Statement interface cannot accept parameters and is useful when you are making static SQL statements at runtime like SELECT.
executeQuery() method on the statement object(stmt) returns result set by fetching data from database by selecting data from users table.
In the next line, we use while loop and rs.next to iterate through the rows of data from users table in database and then capture cell data using getString(), getInt(), getDate() and getBoolean() to capture string, integer, date and boolean column data from the schema which are later printed on the screen using System.out.println().

UPDATE QUERY CODE SNIPPET

Class.forName("com.mysql.cj.jdbc.Driver");
String connectionString = "jdbc:mysql://localhost:3306/db_name";
String db_username = "yourdatabase_username";
String db_password = "yourdatabase_password";

Connection con = DriverManager.getConnection(connectionString,
                                           db_username,
                                           db_password);
 String query = "UPDATE users SET first_name= ?,
                 last_name=? where id = ?";
      PreparedStatement preparedStmt=con.prepareStatement(query);
      preparedStmt.setString(1, "Dallington");
      preparedStmt.setInt   (2, 1);
      preparedStmt.executeUpdate();
      con.close();

NOTE: We use PreparedStatement interface not Statement when executing dynamic sql updates in java. PreparedStatement is suitable when you want to use SQL statements many times and it accepts input parameters at runtime which is not the same case with Statement interface. Statement interface is useful when you are running static SQL statements at runtime.

Benefits of PreparedStatement over Statement Interface

PreparedStatement can execute parameterized queries whereas Statement can only run static queries.
The PreparedStatement performs faster as compared to Statement because the Statement needs to be compiled everytime we run the code whereas the PreparedStatement compiled once and then execute only on runtime.

DELETE QUERY CODE SNIPPET

Class.forName("com.mysql.cj.jdbc.Driver");
String connectionString = "jdbc:mysql://localhost:3306/db_name";
String db_username = "yourdatabase_username";
String db_password = "yourdatabase_password";

Connection con = DriverManager.getConnection(connectionString,
                                           db_username,
                                           db_password);
      String query = "DELETE FROM users where id = ?";
      PreparedStatement preparedStmt = 
      con.prepareStatement(query);
      preparedStmt.setInt(1, 3);
      preparedStmt.execute();
      con.close();

Because we pass parameters (e.g id in our code example) during the delete query at runtime, that's why we use PreparedStatement interface.

INSERT QUERY CODE SNIPPET

Class.forName("com.mysql.cj.jdbc.Driver");
String connectionString = "jdbc:mysql://localhost:3306/db_name";
String db_username = "yourdatabase_username";
String db_password = "yourdatabase_password";

Connection con = DriverManager.getConnection(connectionString,
                                           db_username,
                                           db_password);
      String query = " insert into users (first_name, last_name, 
         username, telephone_no, age, address, isActive)"
        + " values (?, ?, ?, ?, ?, ?, ?)";

      PreparedStatement preparedStmt=con.prepareStatement(query);
      preparedStmt.setString(1, "Dallington");
      preparedStmt.setString(2, "Asingwire");
      preparedStmt.setString(3, "Dalton");
      preparedStmt.setString(4, "25670000000");
      preparedStmt.setInt(5, 33);
      preparedStmt.setString(5, "Kampala");   
      preparedStmt.setBoolean(6, true);
      preparedStmt.execute();
      con.close();

Conclusion: That's how you can have CRUD operations in java using driver class; com.mysql.jdbc.Driver. Hope you can use this as the building block for more interesting projects in java. Thank you for taking time to read through this post, see you in the next one!