DEV Community: mkaychuks

Mobile development platforms and the common software architecture

mkaychuks — Fri, 28 Jun 2024 17:38:03 +0000

Taking a random sample among individuals in the society nowadays, 9 out of 10 have a mobile device and are actively using them. In this short article we will delve briefly into the different mobile development platforms and the common software of it. In today's emerging mobile phone operating system, we have two major contenders, iOS and Android and we will talk about the different development platforms for developing for these operating systems.

Native iOS Development

This is a technique used to develop apps and services solely for the iOS ecosystem, i.e the iphones and ipads. The primary technology stack used nowadays is SwiftUI, though initially UIKit, Objective-C was used. The pros are: high performant app, excellent developer support and strong integration with Apple's ecosystem. The con: Limited only to apple devices since it is the only target.

Native Android Development

This is a technique used to develop apps and services solely for the android ecosystem, i.e the android phones. The primary technology stack used nowadays is Jetpack Compose and Kotlin, though initially XML using Java or Kotlin was used. The pros are: high performant app, excellent developer support and strong integration with google android ecosystem. The con: Limited only to android devices since it is the only target.

Cross platform Development

This is a technique used to develop apps and services for both the iOS ecosystem and android ecosystem, i.e the iphones and ipads, and android phones. Some of the tech stack used are Flutter, React Native, Ionic The pros are: single codebase that targets both operating systems, faster development cycle and cost effective. The con: potential for lower performance, larger app size and limited access to native features.

Different architectures used

There are many architectural patterns used in mobile development, but we will talk about MVC, MVVM and Clean architecture. MVC stands for Model-View-Controller and the pros are separation of concerns, easy to manage and scale, the con: can become overly complex for large applications. MVVM stands for Model-View-ViewModel, the cons: Steeper learning curve, potential for excessive boilerplate code, the pros: Enhances separation of concerns, supports data binding, testable. Clean architecture the Pros: High maintainability, easy to test, clear separation of concerns. Cons: Complexity, longer initial development time.

HNG: the journey ahead

I am filled with a mix of excitement and determination. HNG offers a unique opportunity to work on real-world projects, collaborate with seasoned professionals, and enhance my skills in a practical environment. Thus providing an enabling environment to simulate and see how real tech work looks like out there. Choosing HNG was a no-brainer because there are numerous evidence to show that it is doable and there are results of people who passed through the program that are doing well for themselves today in tech

How to Integrate Dojah Javascript Library into your Flutter Application using flutter_inappwebview package

mkaychuks — Fri, 01 Sep 2023 15:00:00 +0000

Dojah uses advanced AI-powered technology to make it easy for businesses to onboard users at scale, ensuring a smooth and secure verification. Their service makes for an easy and smooth user verification (aka KYC). In this tutorial we will delve into using there service in our flutter app.

This tutorial does not cover the step by step process of setting up your account on the Dojah website or creating an App on the Dojah Sandbox, you can read more about it here.

Now to the fun part😄. Integrating Dojah KYC to your flutter app 🚀

Step 1:

create a basic flutter app and install our dependencies

flutter create my-dojah-app
cd my-dojah-app/
flutter pub add flutter_inappwebview

Step 2.

We will also have to install permission_handler package from pub.dev. We will be using this to request camera permission.

Step 3.

In your android folder AndroidManifest.xml file /my-dojah-app/android/app/src/main/AndroidManifest.xml add this

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
//STARTS HERE
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-feature android:name="android.hardware.camera" />
    <uses-feature android:name="android.hardware.camera.autofocus" />
//ENDS HERE
<application
     ..... //other code lives here

it will enable and give us access to our device's camera.

Step 4.

Create a file where our webview configuration and camera permission will be. You can give it any name you want. I called mine my_kyc.dart and create a StatefulWidget

Step 5.

We now need to write a function that request for permission when a user navigates to my_kyc.dart page.

import 'package:permission_handler/permission_handler.dart';


class KYCScreen extends StatefulWidget {
  const KYCScreen({
    Key? key,
  }) : super(key: key);

  @override
  State<KYCScreen> createState() => _KYCScreenState();
}

class _KYCScreenState extends State<KYCScreen> {
  bool granted = false; // JUST A FLAG TO CHECK FOR THE USER'S ANSWER

@override
  void initState() {
    super.initState();
    checkPermission(); // WE NOW CALL THE FUNCTION IN INITSTATE
  }

// THIS IS THE FUNCTION THAT CALLS FOR THE USER TO ALLOW FOR CAMERA PERMISSION.
  Future checkPermission() async {
    var status = await Permission.camera.request();
    if (!status.isGranted) {
      print("camera permission denied");
    } else {
      setState(() {
        granted = true;
      });
    }
  }

Step 6.

Now to setting upflutter_inappwebview.

class _KYCScreenState extends State<KYCScreen> {
  /*
  .....previous code still remains.....
*/

  InAppWebViewController? _webViewController;

  InAppWebViewGroupOptions options = InAppWebViewGroupOptions(
    crossPlatform: InAppWebViewOptions(
        clearCache: true,
        useShouldOverrideUrlLoading: true,
        mediaPlaybackRequiresUserGesture: false),
    android: AndroidInAppWebViewOptions(
      useHybridComposition: true,
    ),
    ios: IOSInAppWebViewOptions(
      allowsInlineMediaPlayback: true,
    ),
  );

Step 7.

Setting up the Dojah Javascript Library. In our my_kyc.dart create a variable and assign the following to it. Example below..

 final data = """
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, shrink-to-fit=1"
    />
    <title>Dojah Widget Example</title>
    <style>
      @font-face {
        font-family: Athletics;
        src: url("fonts/Athletics.ttf");
      }
      * {
        font-family: Athletics, sans-serif
      }
      body {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .paragraphText {
        font-size: 12px;
        color: #677189;
        padding: 24px 36px;
        margin-top: 0;
        margin-bottom: 0;
        background-color: #3977de05;
        text-align: center;
        line-height: 146.16%;
        border-radius: 8px;
        width: 100%;
        max-width: 268px;
      }
      button {
        margin-top: 32px;
        color: white;
        background-color: #3977de;
        padding: 14px 16px;
        border: none;
        outline: none;
        max-width: 384px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        border-radius: 4px;
        cursor: pointer;
      }
      @media (max-width: 768px) {
        .paragraphText {
          padding: 16px;
        }
      }
    </style>
  </head>
  <body>
    <div
    style="
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh";
    "
  >
    <!-- logo goes here -->
    <img src="favicon.ico" alt="" />
    <!-- <p>Logo</p> -->
    <p
      style="
        font-size: 16px;
        color: #1b2a4e;
        font-weight: bold;
        margin-top: 48px;
        margin-bottom: 21px;
        text-align: center;
      "
    >
      Verify your identity with this Demo
    </p>
    <div>
      <p class="paragraphText">
        Your data will not be stored or retained by Dojah and will only be used
      for the purpose of demonstrating this process flow.
      </p>
    </div>

    <button id="custom-btn-connect">Custom Widget</button>
    <p
      style="
        margin-top: 16px;
        font-size: 12px;
        line-height: 17.54px;
        text-align: center;
      "
    >
      By clicking the button above, you agree to <a href="https://www.dojah.io/policy" target="_blank" rel="noopener" style="text-decoration: underline; color: #1b2a4e"> Dojah's Privacy Policy </a>
    </p>
  </div>

  <script src="https://widget.dojah.io/widget.js"></script>
  <script>
    const customOptions = {
      app_id: 'YOUR APP ID GOES HERE',
      p_key: 'YOUR PUBLIC KEY GOES HERE',
      type: 'custom',
      metadata: {
        user_id: 'YOUR USERS_ID GOES HERE',
      },
      config: {
        widget_id: "YOUR WIDGET ID GOES IN HERE"
      },
      onSuccess: function (response) {
        window.flutter_inappwebview.callHandler('onSuccessCallback', response)
      },
       onError: function (err) {
                                        window.flutter_inappwebview.callHandler('onErrorCallback', error)
                                      },
                                      onClose: function () {
                                        window.flutter_inappwebview.callHandler('onCloseCallback', 'close')
                                      }
    };
    const connectCustom = new Connect(customOptions);
    const connectBtnCustom = document.querySelector('#custom-btn-connect');
    connectBtnCustom.addEventListener('click', function () {
      connectCustom.setup();
      connectCustom.open();
    });
  </script>
</body>

</html>
                  """

There are other parameters that you can pass to the customOptions, you can find more here.

Step 8.

Now to pull everything together. In the build function, you now do the following.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
      ),
      body: Padding(
        padding: EdgeInsets.symmetric(vertical: 16.0),
        child: Center(
          child: InAppWebView(
            initialOptions: options,
            initialUrlRequest:
                URLRequest(url: Uri.parse("https://widget.dojah.io")),
            initialData: InAppWebViewInitialData(
              data: data, // this is the variable we have created initially
              androidHistoryUrl: Uri.parse("https://widget.dojah.io"),
              mimeType: "text/html",
              baseUrl: Uri.parse("https://widget.dojah.io"),
            ),
            onWebViewCreated: (controller) {
              _webViewController = controller;

              _webViewController?.addJavaScriptHandler(
                handlerName: 'onSuccessCallback',
                callback: (response) {
                  success(response); // this function is called on a successful verification
                },
              );
_webViewController?.addJavaScriptHandler(
                  handlerName: 'onCloseCallback',
                  callback: (response) {
                    if (response.first == 'close') {
                      Navigator.pop(context);
                    }
                  },
                );

                _webViewController?.addJavaScriptHandler(
                  handlerName: 'onErrorCallback',
                  callback: (error) {
                    // call a function that you want here
                  },
                );
            },
            androidOnPermissionRequest: (controller, origin, resources) async {
              return PermissionRequestResponse(
                  resources: resources,
                  action: PermissionRequestResponseAction.GRANT);
            },
          ),
        ),
      ),
    );
  }

  // a function that closes the webview after a successful capture
  void success(arg) {
    // what do you want the webview to do after a
    // successful verification. In my case, I want to pop the 
    //webview
    Navigator.of(context).pop;
  }

You can write other functions for when there is an error, or a close, as seen in the snippet above.

Thanks for you time, for more information on what you can achieve with Dojah, visit there documentation page

Password Hashing using bcrypt

mkaychuks — Fri, 11 Jun 2021 09:15:07 +0000

Authentication is a very important aspect of web development, and as beginners, it can seem like a daunting task. In this brief tutorial, we would learn how to hash passwords during user signup/registration.

Pre-requisites

Basic knowledge of JavaScript.
expressJS
bcrypt package

Create a folder on your local machine, and create a file app.js. we would put every code in this single file.

const express = require("express");
const bcrypt = require("bcrypt")

const app = express(); // init express app

app.listen(5000, () => {
   console.log('Server listening on port 5000...')
})

We wouldn't be using a database in this tutorial but a array to pass the lesson across. We would create an async-await function for the password hash.

const express = require("express");
const bcrypt = require("bcrypt")

const app = express(); // init express app

app.use(express.json()) // accepting json body-parsers

const users = [] // we would be using as local storage

// creating a function for the password hash
const hashPassword = async (password) => {
  try {
    const salt = await bcrypt.genSalt();
    const hashedPassword = await bcrypt.hash(password, salt);
    return hashedPassword;
  } catch (error) {
    console.error(error);
  }
};

// Server up and running
app.listen(5000, () => {
   console.log('Server listening on port 5000...')
})

Now, it is time to use the password hash function we created above to hash passwords. And the empty users array as our local storage.

const express = require("express");
const bcrypt = require("bcrypt")

const app = express(); // init express app

app.use(express.json()) // accepting json body-parsers

const users = [] // we would be using as local storage

// creating a function for the password hash
const hashPassword = async (password) => {
  try {
    const salt = await bcrypt.genSalt();
    const hashedPassword = await bcrypt.hash(password, salt);
    return hashedPassword;
  } catch (error) {
    console.error(error);
  }
};

// sending a post request to create a user
app.post(async (req, res) => {
    const passwordHash = await hashPassword(req.body.password)
    try {
    const user = {username: req.body.username, password: 
               passwordHash}
    users.push(user);
    res.status(201).json(user); 
/*
would return the user if you are using postman, 
you can as well console.log(user) to see the result in the terminal
*/
    } catch (error){
      console.error(error)
    }
})

// Server up and running
app.listen(5000, () => {
   console.log('Server listening on port 5000...')
})

I believe things worked out on your own end, while following this tutorial..

Thanks for reading..

Python Basics

mkaychuks — Tue, 21 Apr 2020 19:34:31 +0000

Greetings. This would be a very short post on an introductory aspect of Python LISTS which I learnt while currently learning the Python programming language. Python language is really cool for beginners because of its simple and easily readable syntax.

What are List(s)?

List(s) also referred to Arrays in some other programming languages, is a python data type that gives us the ability to store large sets of data, whether strings, integers, booleans or even another List. They are also mutable, meaning that you can alter the contents i.e. changing, removing or adding new items to it. List(s) is denoted using a square-bracket [ ] and each item in a list is assigned an index, and is assigned a variable name. A basic example of a List is:

# a simple list of sports  done in my school
sports = ['Basketball', 'Table Tennis', 'Soccer'] # assigning a list to a 
                                                  # variable
print(sports)

Here, the variable "sports" was assigned a list of sports done in my school and returns ['Basketball', 'Table Tennis', 'Soccer'] when the code is ran.

Accessing the elements of a Lists.

To access an item in a list, you make use of its index. Whenever you declare a List variable like the sports we declared, each item is assigned an index(which is stored in the memory). Index in python starts to count from zero and is accessed using square-brackets. Accessing the items of the sports list variable

# accessing the items of the list
print(sports[0])   # returns the item at index 0 which is "Basketball"
print(sports[2])   # returns "Soccer" which is at index 2.

List within a list, list with mixed data types...

Lets say we have a list variable car_companies that stores list of car companies, with a boolean, and another list.

# mixed data types and a list within a list
car_companies = ['Toyota', 'Mazda', True, ['Lexus', 34]]
print(car_companies[1])  # returns 'Mazda' at index 1
print(car_companies[3])  # returns '['Lexus', 34] at index 3, which is a 
                         # list inside of a list

Accessing the items of the list within the list, you use double square-brackets to access them. example

1. car_companies = ['Toyota', 'Mazda', True, ['Lexus', 34]]
2. print(car_companies[3])  # returns '['Lexus', 34]' at index 3, which is 
                            # a list inside of a list

3. print(car_companies [3][0])  # returns 'Lexus'
4. print(car_companies [1][0])  # returns 'M'

What the last two lines of code means: For line 3, go to index 3 of the list variable car_companies, which returns ['Lexus', 34], then inside that item returned, in this case is a list, return the item that is at index of zero, which would return 'Lexus'. So also for line 4, what the code is saying is, go to index 1 of the list variable, which returns a String data type, "Mazda" (and in python, strings are also assigned indexes when they are created), then return the letter at index 0 of the string "Mazda" that was returned, in this case the letter "M".

I believe with this my article of basic knowledge acquired while learning the python language, would help you understand the basic workings of a list and how to instantiate one. There are other amazing things that can be done to a list, like copying the content of a list, slicing e.t.c.