DEV Community: Nwanze franklin

Paypal in React Native WebView

Nwanze franklin — Sat, 27 Apr 2019 16:05:52 +0000

React native is one of the most popular and widely used Javascript cross platform mobile development framework. It is based on ReactJS thus making it easy for developers who are already good with ReactJS to delve into it. For more on React Native check here.

The Process
I was working on a project that needed Paypal integration recently and couldn’t find a stable open source React Native module for it so I came up with an implementation based on WebView.

Steps to complete before implementation

Create a Paypal account if you don’t have one already
Login to developer and create a sandbox account
Create an app with an already existing sandbox account and get a Client ID

Set up the React Native part

At this point it is assumed that most part of you app is working and perhaps you need the payment part to complete the flow process.
Since we are using WebView there will be a HTML file which we will design to suit our app user interface and a component to communicate with the WebView back and forth.

PayPal.js

Brief explanation of some functions and variables

const patchPostMessageFunction fixes the issue described here.

handleMessage function receives the data emitted from Javascript within paypal.html.

passValues function sends data from react native to paypal.html.

sent key in the state is used to mark when data has been passed from react native to WebView.

paypal.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Paypal</title>
    <script src="https://www.paypal.com/sdk/js?client-id={clientID}"></script>

    <style>
        html, body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(180deg, #3D40AD 0%, #6B6ED7 100%);
        }
        .container{
            height: 100%;
            display: flex;
            margin-left: 20px;
            margin-right: 20px;
            overflow-y: scroll;
            justify-content: center;
            align-items: center;
        }
        p{
            color: white;
            font-size: 16px;
            text-align: justify;
            margin-bottom: 50px;
        }
        #preloaderSpinner{
          display: none;
        }
    </style>
  </head>
  <body>
      <div class="container">
            <div style="justify-content: center; text-align: center">
                <img width="80px" height="80px" src="logo.png"/>
                <p>
                </p>
                <div id="paypal-button-container"></div>
            </div>
      </div>


    <script>
      function payWithPayPal(amount, orderID) {
        paypal
          .Buttons({

            createOrder: function(data, actions) {
                return new Promise(function(resolve, reject){
                  resolve(orderID);
              });
            },
            onApprove: function(data, actions) {
              window.postMessage(JSON.stringify({
                    reference: data.orderID, 
                    message: 'Transaction Successful',
                    status: 'success'
                }));
            }
          })
          .render("#paypal-button-container");
      }
      document.addEventListener("message", function(data) {
        var details = JSON.parse(data.data);
        document.querySelector('p').innerText = "You are about to fund your wallet with USD "+details.amount+" on XYZ. Click on any of the payment options to proceed. Your account will be credited instantly after payment."
        payWithPayPal(details.amount, details.orderID);
      })

    </script>
  </body>
</html>

document.addEventListener("message", function(data)) part listens for message emitted from react native and receives the data sent. This data is then parsed back to JSON, used to prepare a display message and setup PayPal SDK as well.

Transactions are initiated from the server end via an API call and a payload containing the orderID from PayPal is returned.

To initiate a transaction from the backend, PayPal SDKs are very helpful and they can be found here for different languages.

Conclusion

React Native WebView Comes in handy for situations like this as well as plotting some complex animated graphs. I would like to hear from you and learn more too.

Ravot (A realtime dashboard)

Nwanze franklin — Fri, 25 May 2018 16:02:48 +0000

What I built

A real time dashboard for a company

Demo Link

https://realtime.bluebecks.com/
for the purpose of test I am dropping a single admin user login and password

https://realtime.bluebecks.com/login
email: franko4don@gmail.com
password: tomcat

Link to Code

https://github.com/RealDash/realtime-dashboard

How I built it (what's the stack? did I run into issues or discover something new along the way?)

Project Overview

We worked on a real time dashboard to display tasks, announcements, important events in the future, which music is currently playing etc. Our dashboard was built using Laravel, Vue and Pusher.
Our intent is to display this dashboard on a TV Screen against a wall in our office.

The dashboard(live dashboard end) will have the following:

Upcoming events scheduled by the admin. An announcement section to display announcement to interns/team members.
A Scrumy board section.
Github section to display statistics of our numerous public repositories on Github.
Bitbucket section.
The music that is currently playing in the office.
A clock with the current date and time.

After the browser displays the dashboard for the first time, we’ll never refresh the page again. WebSockets and Vue are being leveraged to update the sections. Doing it this way will avoid having to refresh the page and in turn flashing screens.

Each section is its own Vue component. Laravel’s default scheduler is used to check for scheduled events and fires an event which is broadcasted to pusher when a logic is satified. When data is received, a broadcast event is fired to Pusher.

This powerful service (Pusher) leverages websockets to carry over server events to clients in real-time. On the client side we used Laravel’s echo. The JavaScript library that makes handling those Pusher events very easy. Still on the client side each Vue component will listen to new events to update on the displayed sections.

Team Members

We had three persons who worked on this project. Team members collaborated on Github and project development began on Friday 18th May, 2018 that's after initial commit on 2nd of may, 2018.

Below are the names of the team members:

Nwanze Franklin (franko4don): Team Lead
Timothy Onyiuke (timolinn): Team Member
Nwankwo Gabriel (gfuns): Team Member

How it was built

We started out with the requirement analysis on the system we proposed to design which is a mini task management system with real time feed. We iterated over a few designs and technologies to use then got our specifications.

After much deliberation we came up with the following

Specifications

Laravel, vuejs, Laravel Echo and Pusher will be used for the project, Laravel for backend, Laravel Echo and Vuejs for front end and Pusher as websocket for realtime updates
Task management module for admins to create tasks while setting the description and the scheduled time of start and completion.
Task Assignment module for users who will be able to pick tasks, work on them and deliver by clicking a button so that it goes in for review
Music management module which Enables the admin to create and delete music as well as set the current music to play on the live dashboard view with just a click in real time
Announcment management module which enables admins create company wide announce ments.
Gist module for users where anyone can drop the latest gist in shortest words as possible
Event management module enables admin create upcoming events for display on the live dashboard
Artist module for managing artists that have music on the platform
Categories management for adding the category of tasks that can be created
User Module for managing users on the platform by the admin, the admin can delete a user as well as view a user
Profile module that enables a user manage his/her profile

*Processes

Database analysis
Version control integration with github
Creation of migrations and seeders
Template integration for dashboard(Gentelella alella)
Simple Autodeploy setup from github to test server
Design of live feed dashboard with HTML and CSS
Creation of routes and controllers as well as adding functionalities
Pusher integration on the backend
Laravel Echo integration for frontend
Vuejs setup with laravel mix
Breaking down html and css designs of live feed dashboard into vue components
adding functionality to components and setting up listeners for pusher events
Testing of Each module with fake data
Fixing of discovered bugs
Deployment

Additional Resources/Info

https://blog.pusher.com/writing-realtime-apps-with-laravel-5-and-pusher/
https://vuejs.org/
https://laravel.com/docs/5.5
All this is placeholder text. Use this format or any other format of your choosing to best describe your creation.

Conclusion

Thanks to dev.to and pusher for this opportunity to explore real time apps, This app will later be used for the new technology hub (https://binaryhills.org) we are setting up for managing tasks and daily activities.

Deep dive into middlewares in Laravel

Nwanze franklin — Wed, 13 Dec 2017 22:48:00 +0000

Deep dive into middlewares in Laravel

What is a Laravel middleware?

It is a feature in Laravel which provides a mechanism for filtering HTTP requests entering your application. This allows you to hook into Laravel request processing work flow to perform some kind of logic that decides how your application works.

What would you use middleware for?

Protecting your routes
Setting headers on HTTP responses
Logging requests to your application
Sanitizing incoming parameters
Enable site-wide maintenance mode
Manipulating responses generated by your application

How to create a custom middleware?

Creating a middleware in Laravel is as simple as running the following command

php artisan make:middleware <MiddlewareName>
//MiddlewareName should be replaced with actual name of the middleware

This creates a middleware with the specified name in the middleware folder located in app.
Luckily, Laravel scaffolds the basic things needed to start customizing your middleware.

<?php
namespace App\Http\Middleware;
use Closure;
class RedirectIfSuperAdmin
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        return $next($request);
    }
}

Notice the handle function which accepts two parameters $request and $next . The $request parameter holds the incoming request URI in your application while $next parameter is used to pass the request deeper into the application. The logic needed is written within the handle function and that brings us to types of middleware-before middleware and after middleware.

Before middleware as the name suggests handles some set of logic before forwarding the request deeper into the application. On the other hand after middleware runs after the request has been handled by the application and the response built.

Before middleware:

<?php
namespace App\Http\Middleware;
use Closure;
class RedirectIfSuperAdmin
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        //Your logic goes here
        return $next($request);
    }
}

After middleware:

<?php
namespace App\Http\Middleware;
use Closure;
class RedirectIfSuperAdmin
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        $response = $next($request);
        //Your logic goes here e.g return redirect('/)

        return $response;
    }
}

Categories of Middleware

Global middleware
Route middleware

Global middlewares run for every single request that hits the application. Laravel comes with most of these middlewares such as ValidatePostSize, TrimStrings,CheckForMaintenanceMode etc.

Route middlewares run only on routes they are attached to e.g redirectIfAuthenticated.

Registering a Middleware

Any middleware created has to be registered as that is the only way Laravel knows that such exists. To register a middleware simply open the file named kernel.php which is located inside Http folder like so:

This file contains list of all registered middlewares that come with Laravel by default. it contains three major arrays which include $middleware , $middlewareGroups and $routeMiddleware

<?php
namespace App\Http;
use Illuminate\Foundation\Http\Kernel as HttpKernel;
class Kernel extends HttpKernel
{
    /**
     * The application's global HTTP middleware stack.
     *
     * These middleware are run during every request to your application.
     *
     * @var array
     */
    protected $middleware = [
        \Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode::class,
        \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
        \App\Http\Middleware\TrimStrings::class,
        \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
        \App\Http\Middleware\TrustProxies::class,
    ];
    /**
     * The application's route middleware groups.
     *
     * @var array
     */
    protected $middlewareGroups = [
        'web' => [
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            // \Illuminate\Session\Middleware\AuthenticateSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],
        'api' => [
            'throttle:60,1',
            'bindings',
        ],
    ];
    /**
     * The application's route middleware.
     *
     * These middleware may be assigned to groups or used individually.
     *
     * @var array
     */
    protected $routeMiddleware = [
        'auth' => \Illuminate\Auth\Middleware\Authenticate::class,
        'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
        'bindings' => \Illuminate\Routing\Middleware\SubstituteBindings::class,
        'can' => \Illuminate\Auth\Middleware\Authorize::class,
        'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
        'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
        //the just created middlware
        'superadmin' => \App\Http\Middleware\RedirectIfSuperAdmin::class, 
    ];
}

The $middleware array holds global middlewares which runs for every single HTTP request to the application, so if you want a middleware to run for every request you should register it here. The $middlewareGroups makes it possible to register middlewares in groups making it easier to attach lots of middlewares to a route by using the group name. The $routeMiddleware array holds individual registered middlewares.

Assigning a Middleware

Once a middleware is registered it can be attached to a route in two major ways

Through the constructor method in a controller
Through the route

Middleware assignment through constructor

Middleware assignment via a constructor on a controller gives more flexibility as it offers two important functions except($parameters) and only($parameters) which can be used to prevent or allow the middleware to apply to some helper functions in that controller. Without using the helper functions the middleware applies to every single function on that controller.

<?php
use Illuminate\Http\Request;

class ForumController extends Controller
{

    public function __construct(){
      /**in this case the middleware named auth is applied
       to every single function within this controller
       */
        $this->middleware('auth');
    }

    public function viewForum(){

      return view('index');
    }

    public function edit($id){

    }

    public function delete($id){

    }

}

With the except and only functions we can select which functions the middleware will apply to as shown below:

<?php
use Illuminate\Http\Request;

class ForumController extends Controller
{

    public function __construct(){
      /**the authentication middleware here applies to all functions but
       viewForums() and viewForumDetails() and the opposite of this happens
       when you use only()
       */
        $this->middleware('auth')->except(['viewForums', 'viewForumDetails']);
    }

    public function viewForums(){

      return view('index');
    }

    public function edit($id){

    }

    public function delete($id){

    }

    public function viewForumDetails(){

    }
}

Middleware assignment through routes

Provided a middleware has been registered in can be attached to the route directly as show below:

<?php
//method 1
Route::get('admin/profile', function () {
  //action
})->middleware('auth');

/**method 2
or using the fully qualified class name like so:
*/
use App\Http\Middleware\CheckAge;

Route::get('admin/profile', function () {
    // action
})->middleware(CheckAge::class);

//method 3
Route::group(['middleware' => ['web']], function () {
    //action
});

N:B Middleware groups can be assigned to a route the same way as a single middleware

Middleware Parameters

Additional parameters can be passed to a middleware. A typical example is where each user id is assigned to a role and the middleware checks the role of a user to determine if he/she has access to the requested URI. Parameters can be passed to a middleware as shown below:

<?php
//First method (Through route)
Route::get('admin/profile', function () {
  //action
})->middleware('auth:<role>'); //<role> here should be replaced by whatever parameter the user intends to pass.

//Second method (Through a controller)
use Illuminate\Http\Request;

class ForumController extends Controller
{

    public function __construct(){
        $this->middleware('auth:<role>');
    }
  }

Multiple parameters can be passed to a middleware by separating each parameter by a comma.

<?php
Route::get('admin/profile', function () {
  //action
})->middleware('auth:<role>,<age>,<country>'); //<role>, <age>, <country> here should be replaced by whatever parameters the user intends to pass.

These parameters are passed to the handle function of the middleware after the $next variable

<?php
class RedirectIfSuperAdmin
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next, $role, $age, $country)
    {   
        //Logic for the middleware using the parsed parameters
        return $next($request);
    }
}

Summary

To create a middleware you go through the following processes

Create the middleware with artisan command php artisan make:middleware <Middleware Name>.
Register the middleware in kernel.php located in the app→Http folder
Write your logic in the created middleware
Assign middleware to a route or controller

Conclusion

Laravel middlewares make it easier to protect our routes, sanitize input and do a whole lot of other stuffs without writing so much logic. Checkout the official Laravel documentation here for more features of middlewares and most importantly practice.