INNOVATE - CONNECT - CREATE
INNOVATE
CONNECT
CREATE

Who We Are

 
Devamplify is a tech innovation community focused on providing support for individuals that are interested in tackling some of our biggest challenges in the south eastern part of Nigeria, Nigeria and Africa using innovative technology.
 

INNOVATION

Let's work together to create solutions targeted at solving real community issues.

ACCELERATION

Access funding, support and mentoring required to grow your startup market share.

INCUBATION

Leverage on our support, shared office space, meetups and startup trainings to grow your idea.

Membership

Devamplify offers shared office workspace for developers and event space for tech related events. Located along the most accessible road in the city of Awka in Anambra state Nigeria, Devamplify members will be able to acces our meeting areas as well as other office facilities like constatnt power supply and internet at a very discounted rate for their buddig startups

More On Membership

What We have been up to

Paschal Okeke of Start Up Anambra speaking during Devamplify Bot Party, Feb 2018.
Chidume Nnamdi @ngArchangel releasing codes of fire during Devamplify Bot Party, Feb 2018.
Olibie Jennifer @dera_jo speaking on Application of Artificial Intelligence during the Bot Party event.
Group photograph from the february edition of Bot Party, Feb 2018
Devamplify Codecamp web session with Cyprian. MVC using AngularJS September 2017
AngularSE Meetup at Devamplify Hub with Chidume Nnamdi @ngArchangel September 2017
From the Left Kelechi (TribeNG), Chuka (Devamplify), David (Laravel Nigeria) and Frank (TribeNg) at the first LaravelSE Meetup at Devamplify hub June 2017
Inaugural LaravelSE Meetup by Tribe NG at DevAmplify Hub, June 2017

Like what we are doing ?

Are you a software developer, an aspiring developer or a tech enthusiast and interested in building this community with us, join our slack channel to meet other developers and together we will make a great community. You can also follow us on twitter or like our page on facebook.

Built with at Devamplify Hub Awka

Check This space soon! The Chefs are still In the Kitchen

Recent Blog Posts

Deep dive into middlewares in Laravel

Posted on: Mon, 16-Apr-2018
Written by: Nwanze Franklin

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 AppHttpMiddleware;
use Closure;
class RedirectIfSuperAdmin
{
    /**
     * Handle an incoming request.
     *
     * @param  IlluminateHttpRequest  $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 AppHttpMiddleware;
use Closure;
class RedirectIfSuperAdmin
{
    /**
     * Handle an incoming request.
     *
     * @param  IlluminateHttpRequest  $request
     * @param  Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        //Your logic goes here
        return $next($request);
    }
}

After middleware:

<?php
namespace AppHttpMiddleware;
use Closure;
class RedirectIfSuperAdmin
{
    /**
     * Handle an incoming request.
     *
     * @param  IlluminateHttpRequest  $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 ValidatePostSizeTrimStrings,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 thatkernel.php location on Laravel come with Laravel by default. it contains three major arrays which include $middleware , $middlewareGroups and $routeMiddleware

<?php
namespace AppHttp;
use IlluminateFoundationHttpKernel 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 = [
        IlluminateFoundationHttpMiddlewareCheckForMaintenanceMode::class,
        IlluminateFoundationHttpMiddlewareValidatePostSize::class,
        AppHttpMiddlewareTrimStrings::class,
        IlluminateFoundationHttpMiddlewareConvertEmptyStringsToNull::class,
        AppHttpMiddlewareTrustProxies::class,
    ];
    /**
     * The application's route middleware groups.
     *
     * @var array
     */
    protected $middlewareGroups = [
        'web' => [
            AppHttpMiddlewareEncryptCookies::class,
            IlluminateCookieMiddlewareAddQueuedCookiesToResponse::class,
            IlluminateSessionMiddlewareStartSession::class,
            // IlluminateSessionMiddlewareAuthenticateSession::class,
            IlluminateViewMiddlewareShareErrorsFromSession::class,
            AppHttpMiddlewareVerifyCsrfToken::class,
            IlluminateRoutingMiddlewareSubstituteBindings::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' => IlluminateAuthMiddlewareAuthenticate::class,
        'auth.basic' => IlluminateAuthMiddlewareAuthenticateWithBasicAuth::class,
        'bindings' => IlluminateRoutingMiddlewareSubstituteBindings::class,
        'can' => IlluminateAuthMiddlewareAuthorize::class,
        'guest' => AppHttpMiddlewareRedirectIfAuthenticated::class,
        'throttle' => IlluminateRoutingMiddlewareThrottleRequests::class,
        //the just created middlware
        'superadmin' => AppHttpMiddlewareRedirectIfSuperAdmin::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 $routeMiddlewarearray 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 IlluminateHttpRequest;

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 IlluminateHttpRequest;

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 AppHttpMiddlewareCheckAge;

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 IlluminateHttpRequest;

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  IlluminateHttpRequest  $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.

How to set up a React.js/TypeScript project using create-react-app

Posted on: Mon, 16-Apr-2018
Written by: Chidume Nnamdi

Being an Angular developer, I am used to writing codes in TypeScript which I love so much because of TypeScript (a strict syntactical super-set of JavaScript), adds optional static typing to your codes. Recently, I started working on how to transition my Angular/TypeScript projects into React/TypeScript. After scouring the web, I found tons of articles on how to setup React/TypeScript project using Webpack, they were very stressful and brain-racking. I fine-tuned my search and I found out how you could easily setup a React/TypeScript project with zero stress using create-react-app and react-scripts-ts.


Why is this important
Suppose you want to start a new project with React.js and because you are a good software developer, you want to use npm, babel and Webpack. what comes to mind is

Where do I start?
Before create-react-app you had to search and try an infinite amount of boilerplates and example repositories to finally had a mediocre setup after two days of wasted time.
Now it’s easier .

Introduction
We will learn how to create a React/TypeScript project using the create-react-app utility. By the end, we’ll have

* a project with React and TypeScript
We’ll use the create-react-app tool to quickly get set up.I assume that you’re already using Node.js with npm.

Install create-react-app
First, install the global package.

npm install -g create-react-app
Create our new project
We’ll create a new project called myreactapp:

create-react-app myreactapp — scripts-version=react-scripts-ts
* create-react-app is a global command-line utility that you use to create new projects
* react-scripts-ts is a development dependency in the generated project to take the standard create-react-app project and bring TypeScript into the mix.
The create-react-app — scripts-version=react-scripts-ts command will proceed to create the myreactapp folder and install the dependencies in the package.json file it generated.

Your project layout should look like this.

myreactapp/
├─ .gitignore
├─ node_modules/
├─ public/
├─ src/
 | — — index.tsx 
 | — — registerServiceWorker.ts
 | — — logo.svg
 | — — App.tsx
 | — — App.test.tsx
 | — — App.css
 | — — index.css
 | — — assets/
├─ package.json
├─ tsconfig.json
└─ tslint.json
* tsconfig.json contains TypeScript-specific options for our project.
* tslint.json stores the settings that our linter, TSLint, will use.
* package.json contains our dependencies, as well as some shortcuts for commands we’d like to run for testing, previewing, and deploying our app.
* public contains static assets like the HTML page we’re planning to deploy to, or images. You can delete any file in this folder apart from index.html.
* src contains our TypeScript and CSS code.
 *index.tsx is the entry-point for our file, and is mandatory.


Running the project
Ok, now that we are done with the setup. lets fire up our application. First, move into the project folder myreactapp.

cd myreactapp


Then, run the command

npm run start
This runs the start script specified in our package.json, and will spawn off a server which reloads the page as we save our files. Typically the server runs at http://localhost:3000, but should be automatically opened for you.

You can now navigate your favorite browser to localhost:3000 to see our application in action.

Testing the project

Testing is also just a command away:

npm run test


Creating a production build
When running the project with npm run start, we didn’t end up with an optimized build. Typically, we want the code we ship to users to be as fast and small as possible. Certain optimizations like minification can accomplish this, but often take more time. We call builds like this “production” builds (as opposed to development builds).

To run a production build, just run

npm run build
This will create an optimized JS and CSS build in ./build/static/js and ./build/static/css respectively.

You won’t need to run a production build most of the time, but it is useful if you need to measure things like the final size of your app.

Conclusion
You can see that create-react-app is a powerful command-line tool that simplifies the creation of React/TypeScript projects.

I can’t emphasize how useful and important create-react-app is for the ecosystem.

The first and obvious benefit is being able to quickly create new projects without having to think about build infrastructure, which is honestly the most painful part of building a modern React project. create-react-app makes all the hard choices for you and gives you a reasonable set of defaults to work with.

I can’t thank the team behind this little tool enough for making it so easy and so much fun to build React applications!

You can find the full source code at my Github repo.

You can Find us Here