DEV Community: Lloyds digital

Use Laravel with OpenAI to validate inappropriate content

Ricardo Čerljenko — Fri, 10 Feb 2023 20:40:29 +0000

Recently I stumbled across OpenAI Moderations API which gives you a way to query OpenAI in order to detect if input text contains inappropriate content such as hate, violence, etc.

API is completly free - you just need to create an OpenAI account and issue a fresh API token.

Since I'm primary a Laravel PHP Framework developer, I decided to make a package which will provide a way to validate request payload fields against OpenAI Moderations API.

Installation

Standard Composer package installation:

composer require rcerljenko/laravel-openai-moderation

Usage

Publish config and translation files.

php artisan vendor:publish --provider="RCerljenko\LaravelOpenAIModeration\LaravelOpenAIModerationServiceProvider"

Set your OpenAI API key and enable package via newly created config file => config/openai.php
Use provided rule with your validation rules.

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;
use RCerljenko\LaravelOpenAIModeration\Rules\OpenAIModeration;

class StoreText extends FormRequest
{
 /**
  * Determine if the user is authorized to make this request.
  */
 public function authorize(): bool
 {
  return true;
 }

 /**
  * Get the validation rules that apply to the request.
  */
 public function rules(): array
 {
  return [
   'text' => ['required', 'string', new OpenAIModeration],
  ];
 }
}

And that's it! Your content can now be validated with powerfull (and yet free) OpenAI Moderations API.

Thank you for reading this! If you've found this interesting, consider leaving a ❤️, 🦄 , and of course, share and comment on your thoughts!

Lloyds is available for partnerships and open for new projects. If you want to know more about us, check us out.

Also, don’t forget to follow us on Instagram and Facebook!

Laravel - Serve API requests with translated validation rules

Ricardo Čerljenko — Wed, 19 Oct 2022 18:49:32 +0000

Consider building a mobile app (or a website) which connects to a Laravel CMS over API for dynamic content. Now, the app can be a multi-language app which expects to receive a translated content from the CMS.
Usually, in our company, we instruct our frontend developers to send a lang query param on every request in order to deliver the correct translated content back.

E.g.:

GET /api/blogs?lang=en

However, Laravel validation is not aware of this and it always returns validation error messages according to app locale (or fallback locale).

Therefore we created a route middleware which groups all API routes and sets app locale based on the lang query param:

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;
use Symfony\Component\HttpFoundation\Response;

class ChangeLocale
{
    /**
     * Handle an incoming request.
     */
    public function handle(Request $request, Closure $next): Response
    {
        $locale = $request->query('lang');

        if ($locale) {
            app()->setLocale($locale);
        }

        return $next($request);
    }
}

And in routes file:

// routes/api.php

use App\Http\Middleware\ChangeLocale;
use Illuminate\Support\Facades\Route;

Route::middleware(ChangeLocale::class)->group(function (): void {
    // ROUTES
});

Now your validation messages will be in the requested locale. If you don't like handling this over query param you can always use a header or something else, e.g.:

$locale = $request->header('Accept-Language');

Thank you for reading this! If you've found this interesting, consider leaving a ❤️, 🦄 , and of course, share and comment on your thoughts!

Lloyds is available for partnerships and open for new projects. If you want to know more about us, check us out.

Also, don’t forget to follow us on Instagram and Facebook!

Creating a Neat DateTime Helper Function in PHP

Ricardo Čerljenko — Thu, 24 Mar 2022 12:35:05 +0000

Let me start with a statement: I'm not a big fan of global helper functions being included in the project, but sometimes it's a good thing to have that little helper functions here and there.

Working with datetime in PHP could be a real pain if you don't take advantage of popular libraries like Carbon. It's all good until you have to convert dates provided on user input into another timezone (eg. UTC) and vice versa. Other example could be that you have to manage various input datetime formats, and sanitize them into a consistent one before saving it to database.

I will show you how I handled that by creating a datetime helper function which will take any datetime format and convert it into a consistent one with the power of Carbon library.

use Carbon\Carbon;

function formatDateTime(
    DateTimeInterface|string|float|int $inputDateTime = null,
    string $outputFormat = 'Y-m-d H:i:s',
    DateTimeZone|string $outputTimezone = 'UTC',
    DateTimeZone|string $inputTimezone = 'UTC'
): string
{
    $carbon = is_numeric($inputDateTime)
        ? Carbon::createFromTimestamp($inputDateTime, $inputTimezone)
        : new Carbon($inputDateTime, $inputTimezone);

    return $carbon->setTimezone($outputTimezone)->format($outputFormat);
}

Let's go over this bit by bit. The function takes 4 arguments and none of them are required which means that if called without any argument, the function should return a current UTC datetime string in a common database format.

$date = formatDateTime();
// 2022-02-03 08:10:21

First argument $inputDateTime is the most important one and by its signature you can easily figure out that it can accept various datetime formats including a string, float, integer and a DateTimeInterface capable object. That last one is important because it enables us to work with any PHP datetime object as well as any potential library that implements that interface (such as Carbon).

// string
$date = formatDateTime('2022-02-03 08:10:21');

// string
$date = formatDateTime('2022-12-31');

// int (UNIX timestamp)
$date = formatDateTime(time());

// float (UNIX timestamp in microseconds)
$date = formatDateTime(microtime(true));

// DateTime object
$date = formatDateTime(new DateTime);

// Carbon object
$date = formatDateTime(new Carbon);

// Laravel Carbon datetime casting
$date = formatDateTime($post->created_at);

Other arguments are pretty self-explanatory.

$outputFormat controls in which format will function return the datetime string, e.g.:

$date = formatDateTime(new DateTime, 'd/m/Y');
// 03/02/2022

$outputTimezone controls the result timezone and $inputTimezone tells the function in which timezone is the $inputDateTime.

If you're running under PHP8+ then it's even easier to handle arguments with the "named arguments" feature like so:

$date = formatDateTime(
    inputTimezone: 'Europe/Zagreb'
);

Thank you for reading this! If you've found this interesting, consider leaving a ❤️, 🦄 , and of course, share and comment on your thoughts!

Lloyds is available for partnerships and open for new projects. If you want to know more about us, check us out.

Also, don’t forget to follow us on Instagram and Facebook!

How to handle both API and Basic authentication in Laravel

Ricardo Čerljenko — Thu, 03 Mar 2022 09:55:42 +0000

While building your app in Laravel PHP Framework, you have multiple ways of protecting your API routes with various auth guards or Basic auth. Would it be nice to support both API guard and Basic auth at the same time?

In default Laravel app you can protect your API routes like this:

// routes/api.php

use Illuminate\Support\Facades\Route;

Route::middleware('auth:api')->group(function (): void {
    // PROTECTED ROUTES
});

Or using Basic auth:

// routes/api.php

use Illuminate\Support\Facades\Route;

Route::middleware('auth.basic')->group(function (): void {
    // PROTECTED ROUTES
});

But it's not possible to guard your routes with both of them. E.g., if there's no provided Bearer token use the Basic auth. To accomplish this we need to make some adjustments to the default Authenticate middleware which is provided in the app/Http/Middleware directory. Here's how I achieved that:

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Auth\AuthenticationException;
use Symfony\Component\HttpFoundation\Response;
use Illuminate\Auth\Middleware\Authenticate as Middleware;

class Authenticate extends Middleware
{
    /**
     * Handle an incoming request.
     */
    public function handle($request, Closure $next, ...$guards): Response
    {
        try {
            $this->authenticate($request, $guards);
        } catch (AuthenticationException $e) {
            if (!$request->wantsJson()) {
                throw $e;
            }

            if ($response = $this->auth->onceBasic()) {
                return $response;
            }
        }

        return $next($request);
    }
}

First, we catch the AuthenticationException which is thrown by the parent authenticate() method. That means that every provided guard (or a default one) didn't produce a valid user.

Now we can try to do a Basic auth but only if the client expects a JSON response (we don't want to try Basic auth in a normal web context because it would pop-up the Basic auth prompt box on every browser request).

Take note that onceBasic() method returns null if the provided Basic auth credentials are valid. If not, it returns an already formed Error Response bag which you can safely return from the middleware.

Now we're able to authenticate our users on API routes with both API guard and fallback Basic auth by simply using a default auth middleware.

Thank you for reading this! If you've found this interesting, consider leaving a ❤️, 🦄 , and of course, share and comment on your thoughts!

Lloyds is available for partnerships and open for new projects. If you want to know more about us, check us out.

Also, don’t forget to follow us on Instagram and Facebook!

9 tricks to make your React Native development easier

Masimo Orbanic — Mon, 28 Feb 2022 08:58:36 +0000

We all agree that React Native is a great way to develop mobile apps. But in the process of making a mobile app, besides the endless hours spent reading the documentation and debugging some badly implemented package, you come across a situation that makes you think “hmm, I wonder if there is an easier way to do this”. So I bring you some tricks that I’ve learned over the years developing React Native apps and wish that somebody told them to me years ago. Hope you find something useful for yourself, let’s start!

1. Open a new terminal in the same folder - from the terminal (Mac only)

UPDATE

You can open new terminal in the same folder with a setting in the preferences. Go to the Terminal preferences, General settings, and under New windows open with select Same Working Directory.

Your work day probably starts with opening a Terminal, navigating to the project folder and running yarn android or/and yarn start . But after some time you need to install some React Native package or run some tricky git command, and wish to have another Terminal window in the same folder. So you press cmd + N to open new Terminal window and navigate in the terminal to the project folder. To make this thing easier you can run open -a Terminal \$(pwd) in the terminal, which basically opens the Terminal app in the desired folder, which in our case can be obtained with the pwd command. But that command is too long to write and remember, so you can add it in your .zshrc file as alias alias nt="open -a Terminal \$(pwd)" . After you restart the Terminal app, if you run nt command (I’ve named the alias nt for new terminal, you can call it whatever you want), you will get a new Terminal window in the same directory from which you ran the nt command.

2. Simulate push notifications on iOS

Let’s say that you are doing some push notification suff and you want to quickly test how your app reacts when a push notification is received. Instead of manually triggering a push notification by doing some in-app action or sending one from a dashboard, you can create a notification.apns file and drag ‘n drop it in the Simulator window! And what exactly is in the notification.apns file? Well, it looks like this:

{
 "Simulator Target Bundle": "com.example.simpush",
 "aps": {
   "alert": {
     "title": "New notification!",
     "subtitle": "notification.apns triggered notification",
     "body": "Hello there!"
   },
   "sound": "default"
 },
 "custom": {
   "test": "something",
 }
}

The first information is "Simulator Target Bundle": "com.example.simpush", and it tells which application to run, in our case it is the application with bundle id com.example.simpush . Next comes the "aps" section, and as you can see it has an alert section where you define the title, subtitle and body of the notification. Also in the “aps” section you can define the sound and vibration settings. In the “custom” you can define custom information that is sent with the push notification.

Depending on your app push notification setup, the notification.apns file can be different. But once you’ve configured in Xcode that your app can receive push notifications, and you granted permission to receive push notifications, you should be able to make it work.

3. Share Android device screen on your desktop

You will probably need to share your phone’s screen to your desktop. Either you don’t want to stay leaned above your phone all day, or you have something to present to your client/colleague over a video conference. There are some solutions like Vysor or Screen stream over HTTP, but the picture quality is not that great and there could be some ads playing during usage. But there is an app called scrcpy , that provides display and control of Android devices connected with USB (or over TCP/IP, covered in tip number 8). It does not require any root access, and it works on Linux, Windows and macOS. I’ve been using it for some time and it works great. Also the setup is very easy. You can learn how to install it and use here.

4. Generate app icons

When you have an app that is ready to go the stores, you must have an app icon. And you have one because your design team did a great job on creating one! But you must have them in a couple of specific dimensions, with square and rounded corners, for both iOS and Android. To spare yourself and designers from this time consuming and boring task, there are some web applications that can do that for you, and the best one we have been using in Lloyds digital so far is appiconmaker.co for iOS, and for Android AndroidAssetStudio. They is free and easy to use, no watermarks or limitations.

5. Open Xcode project from the Terminal

The longest way to open an Xcode project of your app is to open Finder > find your React Native project folder > open ios folder > open .xcworkspace file. The shortest way is to put "xc": "xed -b ios" in your projects package.json under “scripts”, and just run yarn xc from project folder to open Xcode project of your React Native app. You can find out more about xed in this Medium post.

6. Use transform.tools

Transforming code or data from one format to other can be time consuming and boring, and you could miss some piece of information if the structure is too confusing and big. To help you with that, there is an online app transform.tools which offers many kinds of transformations. I will mention just some of them, mostly used in React Native:

SVG to React Native (JSX)
JSON to JSDoc
JSON to Typescript
JSON to MobX-State-Tree Model
GraphQL to Typescript

Visit transform.tools and make transformations of your code or data with ease.

7. Consider implementing Code Push for faster feedback loop from developer to the testers and clients

As the project timeline comes to an end, communication and feedback loop between testers/client and developer must be the fastest possible. You will probably come to a situation where you made a test release of the app with some small bug that breaks the app and the testing can not continue. And the fix for the bug is very simple, one or two lines of JS code. In order to deliver that fixed version you need to increase build numbers, create a new release, and upload it to the TestFlight or Google Play store testing track, which we all can agree is at least 1 hour of work. To make the feedback loop shorter you can use Code push. Code Push is a cloud service from Microsoft Visual Studio App Center, that acts as a central repository where developers can publish certain updates. These updates are then queried by apps using the client Code Push SDK. Since Code Push is in semi-violation of the Google and Apple store guidelines, I won’t encourage you to implement it in the production version of the app, but for test and development purpose you can find it very helpful. I’ve covered Code Push in the Implementing Code Push in React Native applications article. In the article you can find more information on what Code Push is and how to implement it.

8. ADB over WiFi

Your computer communicates with your Android device using Android Debug Bridge (adb). Maybe you remember adb from the running on device tutorial, and in the tutorial you are guided to use USB to make everything work. But there is an option to have adb over WiFi! Here is how to setup adb over WiFi:

Make sure that your Android device and adb host computer are connected to a common Wi-Fi network accessible to both
Connect the device to the host computer with a USB cable
Set the target device to listen for a TCP/IP connection on port 5555 by running adb tcpip 5555 in your Terminal
Disconnect the USB cable from your device
Find the IP address of your Android device. You can usually find the IP address at Settings > About phone > Status > IP address
Connect to the device by its IP address using adb connect <<device_ip_address>>:5555
Confirm that your host computer is connected to the target device by running adb devices

From that point you can do everything on your Android device as if you were connected with USB, like run adb reverse tcp:8081 tcp:8081 , or use scrcpy from the #3 tip in this article!

Android devices running Android 11+ have a method to wirelessly use adb using Wireless debugging feature. You can find out goodies about adb here.

9. r - Terminal command (Mac)

This is a trick that can be widely used. Basically when you run r in your Terminal, the last command that you executed will be executed again, just like it would if you pressed up key and hit enter. But the trick is that it has options for start and end command that will be ran from your history.

The first option, -4 from the screenshot, is the start, and it runs the fourth command from your terminal history, and the second option -2 is the end and it runs every command between fourth and second one in your terminal history. You can find it useful if you have same the set of commands that you need to run multiple times, like running some test script, or for example pushing a fix to git.
If you once ran git add -Av , git commit -m "small fix" and git push , you can re-run all of them by running r -3 -1 in your Terminal.

Lloyds is available for partnerships and open for new projects. If you want to know more about us, click here.
Also, don’t forget to follow us on Instagram and Facebook!

Structuring a CI/CD workflow in GitLab (Node.js example)

Tomas Martincic — Thu, 03 Feb 2022 08:25:20 +0000

What are pipelines
DevOps pipelines
What CI/CD pipeline software to use?
Why did we choose GitLab?
Docker Technology
gitlab-ci.yml file
Pipeline lifecycle example
Conclusion

What are pipelines

In computing, pipeline refers to the logical queue that is filled with all the instructions for the computer processor to process in parallel. It is the process of storing and queuing tasks and instructions that are executed simultaneously by the processor in an organized way.

This is different from the regular queue or stack data structures in computer science. These data structures work in FIFO or LIFO approaches, respectively. This means literally "First In First Out" or "Last In First Out" principles, no matter if working with elements, instructions, files, or any other arbitrarily listable item.

DevOps pipelines

DevOps is a set of practices that combines software development and IT operations. It aims to shorten the systems development life cycle and provide continuous delivery with high software quality. DevOps is complementary with Agile software development; several DevOps aspects came from the Agile methodology.

So if you're planning on having an 'agile' work environment, you must have good software foundations and automation processes set in place to achieve fast-paced development and results. If everything is done manually, the environment would be rigid, stiff, and slow, thus being the exact opposite of agile.

What is CI/CD?

In software engineering, CI/CD or CICD is the combined practice of continuous integration and either continuous delivery or continuous deployment. CI/CD bridges the gaps between development and operation activities and teams by enforcing automation in the building, testing, and deployment of applications. This would preferably shorten the gap between developers developing the project locally in their IDE and the project being published in their normal production environment, either on public domain for clients or private domain for staging with other branches of the product development lifecycle (backend/frontend/design/QA/testers/...).

It works on my machine ¯\(ツ)/¯

Not only that we've shortened the gap between the developer and productional environment, but we've also introduced an assurance that it will work within the productional environment. The main component of CI/CD is that we run install/compilation, build, and test inside environment which mimics production. Therefore we've eliminated the chance of "but it works on my machine" happening.

Gitlab's CI/CD flow, other software uses mostly similar flow

What CI/CD pipeline software to use?

There are many options available to provide continuous delivery and integration in your software development lifecycle. Some of the most popular CI/CD tools are:

The tool for the job is a personal preference and depends on which of these tools fit your project, budget, requirements, language, technology, etc.

From this point on, we will focus on GitLab's pipeline.

Why did we choose GitLab?

Well, the choice was not a hard one. GitLab is our default VCS and provides a rich set of features for CI/CD pipelines leveraging the Docker technology. The beauty of in-house CI/CD integration with your VCS is that the pipeline itself can be triggered upon various events from the developers. The pipeline itself can be configured in a way that it triggers certain code blocks in all kinds of situations. For example, it can be triggered upon pushing to a certain branch, or by providing some sort of specific trigger key within commit message, it can be triggered upon Merge Requests, upon the success of those merges, etc.

This approach allows the DevOps engineer to configure the pipeline in a way that other software engineers mindlessly continue with their usual workflows and are completely oblivious to what's happening in the background. This is great because now you need only one good engineer to configure and maintain it, whereas the rest of the team/organization does not have to bother with learning the technology inside out to use it.

Alongside being our default VCS and having great flexibility, it can also be hosted on-premise. This way we are not using GitLab's servers (also called runners) but our own. GitLab's pipeline will only charge you for computing time on their servers so we are saving some money. But GitLab does have fast servers which are relatively cheap (10$ for 1000min of computation). That would be a good approach for big companies, it would cost much less in the long run than configuring their cluster of runners.

Docker Technology

Docker is a set of 'platform as a service' products that use OS-level virtualization to deliver software in packages called containers. Containers are isolated from one another and bundle their software, libraries, and configuration files; they can communicate with each other through well-defined channels. A Docker container image is a lightweight, standalone, executable package of software that includes everything needed to run an application: code, runtime, system tools, system libraries, and settings.

The main difference between Docker and Virtual machines is that docker is running within its container virtualization engine, whereas virtual machines virtualize whole guest operating systems.

In raw, the docker allows you to simulate the production environment by replicating it beforehand and then containerizing it and publishing to hub.docker.com. The important thing to consider is that you want to keep your docker image as minimalistic as possible because it does produce a heavy load for the machine using it. You want to containerize only the service which you need to use and test, eg. for our backend stack, we've had to containerize PHP 8 on Ubuntu, and we've added node, npm, and composer to the container. That's it, voila! Now you'd think that it's smart to ship other technologies to the same container, for example, using this container to test the frontend services would be pretty inefficient.

A much better approach is to use a different image for each stack you require because otherwise, you will have unused software within your container.
"Yeah I have it on my computer and server too, so what's the deal?"

The thing is, for every job in the pipeline, once started, the docker fires a fresh container and boots it up. If you want it to be fast, you want it to be as minimal as possible. Meaning that the backend will have only backend software on its image, whereas the frontend will only boot up node.js image, without PHP and composer. Separating services in different containers will help you speed up the pipeline overall.

The boot time is the biggest overhead that you get with additional software, but only if you are using the self-hosted runner. Otherwise, if you're running the pipeline on GitLab servers, you need to download the image (container) at every step of the pipeline. And if you have big images with unneeded software, you will both download and boot longer, and GitLab charges per minute of processing time, meaning that you're twice as inefficient.

GitLab-ci.yml file

YAML is used because it is easier for humans to read and write than other common data formats like XML or JSON. Further, there are libraries available in most programming languages for working with YAML. For a syntactic guidelines of YAML files, Google is your best friend.

This file is the main configuration for your Gitlab pipeline. Whenever you add this file to your project, Gitlab will go through it whenever you change something within your project. Here you will define the flow of your pipeline, jobs, stages, what it will do, when will it execute, etc. By default, it will use shared GitLab runners where you'll have 400 free minutes monthly, by default.

The YAML file has a variety of keywords and control structures so you're able to define the what and when. The content of the job, within the script tag, are the commands which will execute inside the docker container containing your application. Here are some of the most commoontrol structures:

image - defines which docker container will run for given job/pipeline (pulls from hub.docker.com)
stages - define stages in which you can group your jobs. Stages run serially (one after another), whereas jobs within the same stage run in parallel
only - defines when a job will run (eg. only on merge request)
artifacts - defines which files will be shared between different jobs (because the new container is initialized per job, thus contents are lost unless specified with artifacts)
cache - defines which files will be saved to the server for retrospection
script - defines what commands will be executed within the container (OS-level commands, eg. echo, apt-get install, composer install xy)

These are some of the main control structures out of many, for more you can check the documentation.

Pipeline lifecycle example

The pipeline starts from the .gitlab-ci.yml file. Here we'll analyze a simple pipeline configuration and what happens each step of the way. We will consider the following pipeline for a front-end project.



image: node:latest

stages:
  - build
  - run

# Job's name
first-job:
  # Define stage
  stage: build
  # What to run on the job.
  script:
    - npm install
  artifacts:
    paths:
      - node_modules

second-job:
  stage: run
  script:
    - npm run start
    - node test.js
  artifacts:
    paths:
      - node_modules/

second-job-parallel:
  stage: run
  script:
    - echo "I'm running at the same time as second-job!!!"

As we can see, we have two stages, first stage installs the modules and has only one job. The second stage kicks in if the first one finishes successfully and starts two jobs in parallel.

Gitlab's visualization of stages and jobs

The first thing that happens once you push your code is that GitLab scans the .gitlab-ci.yml. If there are no limitations in configuration, the pipeline will be running on every push, merge request and merge result. Gitlab will then contact the 'runner', aka. the server which will be executing your pipeline. Note, if you have a single GitLab runner they will queue in FIFO principle.

Once the server responds, it will start the docker executor with the image you've specified. In our case, it is node:latest. If required, you can specify a different image for each job. If the server has the image cached, it will start using it, otherwise, it will have to download it first.

Then, once you have your container ready and booted up, your project will be downloaded from your repository and once you're placed into the project root directory, it will start executing commands you've provided within the scripts list. In our case, it will install node modules. Once the job is finished, the artifacts will be uploaded so the next job using can download them back into the container. Then the cleanup kicks in and the container is closed.

The second job is different, but only slightly. It will download the artifacts right after the project is downloaded, so we have everything ready for scripts. Once this job finishes, it will again upload the modified artifacts for whoever might be using them next. Other than that, it is the same as the first job regarding the structure. But the commands are slightly different, and here as an example, we run test.js to test if our application is working. Here are the contents of test.js:



console.log('Hello from Node.js!')

console.log(new Date().toUTCString())

console.log('Exiting Node.js...')

Here is the output from the second job:

And the last job is no different from the others, it just proved to us that two jobs can indeed run in parallel.

Conclusion

To conclude the pipelines, I would say that it is a must for any serious company to have these operations set in stone. Human error is removed from the equation and monotonous tasks are automatized. A good pipeline will also deploy the code to a staging server, the company's internal server for testing, quality assurance, and collaboration; but ultimately all productional deploys should be done manually by setting when key to manual in .gitlab-ci.yml file. Many many more things could be done within the pipeline such as benchmarking the app, stress-testing, and others. I might cover them in the next blog, but until then, what features do you think would make an awesome pipeline?

Lloyds is available for partnerships and open for new projects. If you want to know more about us, click here.
Also, don’t forget to follow us on Instagram and Facebook!

How to add a splash screen to a React Native app - The easy way

Mateo Hrastnik — Thu, 27 Jan 2022 12:24:20 +0000

A splash screen is the first screen the users see after tapping the app icon. It's typically a simple screen with your app logo in the center and goes away once the app is ready to launch.

There are two popular packages for adding a splash screen to your app. Namely react-native-splash-screen and expo-splash-screen. While both of them work, the problem is that they're complicated to install and control. There's a much simpler way to add a splash screen and I'm going to show you how.

The idea is to move the splash screen from native code to Javascript. This will give us more control over the rendering, plus we can have matching splash screens on both platforms. We're going to do a couple of things:

Manually set a blank, single-color splash screen background on the native side
On iOS, set the background color of the React Native root view to that same color
As soon as React Native loads, add a View with the same color in React Native and fade in the app logo on it
Once the app loads, fade out the splash screen

The idea is to show the same color screen while the app boots up and React Native initializes. This is typically really short. Then we fade in the splash screen from our React Native code, and while the splash screen is visible, we can initialize the app, fetch assets, load configuration files, and everything else.

Here's what the final product looks like:

App with splash screen

And here's a GitHub repo with a blank app with the added splash screen functionality.

https://github.com/hrastnik/react-native-splash-screen-example

Prerequisites

Pick a background color and get the hex value and RGB values in range 0-1. In my example I picked #E0B9BB. The RGB values are 0.87843, 0.72549 and 0.73333. You can use this converter to grab the RGB values easily.

Now pick an image you'll show in the center of the splash screen. This can be the logo or the app icon or anything else. In my case, it's a PNG of my cat.

Setting a blank background on iOS

Open AppDelegate.swift and add this just before the return true line in the application function.

    if let rootViewController = window!.rootViewController {
      rootViewController.view.backgroundColor = UIColor(red:0.87843, green:0.72549, blue:0.73333, alpha:1.00000)
    }

If you're using an older version where you have AppDelegate.mm do this:

Open AppDelegate.mm and change add the following line:

return [super application:application didFinishLaunchingWithOptions:launchOptions];

to this:

BOOL result = [super application:application didFinishLaunchingWithOptions:launchOptions];
self.window.rootViewController.view.backgroundColor = [UIColor colorWithRed:0.87843 green:0.72549 blue:0.73333 alpha:1.00];
return result;

If you're using an even older versions of React Native that uses AppDelegate.m, open AppDelegate.m and change the lines:

  if (@available(iOS 13.0, *)) {
      rootView.backgroundColor = [UIColor systemBackgroundColor];
  } else {
      rootView.backgroundColor = [UIColor whiteColor];
  }

to simply say

rootView.backgroundColor = [UIColor colorWithRed:0.87843 green:0.72549 blue:0.73333 alpha:1.0];

Make sure to change the RGB values to match your color.

This changed the background color of the React Native root view, but we still need to change the background of the whole app. You could do this step through XCode but I find it faster to use a text editor. Simply paste this code in your ios/<AppName>/LaunchScreen.storyboard file:

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="19529" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
    <device id="retina4_7" orientation="portrait" appearance="light"/>
    <dependencies>
        <deployment identifier="iOS"/>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="19519"/>
        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    </dependencies>
    <scenes>
        <!--View Controller-->
        <scene sceneID="EHf-IW-A2E">
            <objects>
                <viewController id="01J-lp-oVM" sceneMemberID="viewController">
                    <view key="view" autoresizesSubviews="NO" opaque="NO" clearsContextBeforeDrawing="NO" userInteractionEnabled="NO" contentMode="scaleToFill" id="1L6-XZ-uwR">
                        <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
                        <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
                        <viewLayoutGuide key="safeArea" id="VQL-mw-5y0"/>
                        <color key="backgroundColor" red="0.87843" green="0.72549" blue="0.73333" alpha="1" colorSpace="deviceRGB"/>
                    </view>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
            </objects>
            <point key="canvasLocation" x="22" y="100"/>
        </scene>
    </scenes>
</document>

Note that you'll have to change the line that starts with <color key="backgroundColor" and replace the RGB values with your own.

If you run the app at this point, you should see the background color you picked.

App with blank background

Setting a blank background on Android

On Android, all you have to do is add the following line to android/app/src/main/res/values/styles.xml file inside the <style> tag of your app theme:

<item name="android:windowBackground">#E0B9BB</item>

The file should look like this:

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <item name="android:windowBackground">#E0B9BB</item>
    </style>
</resources>

The JS part

Now let's add the Splash component. It works like this:

At first, it shows only a blank View with the background color we picked. This is visible until the splash screen image is loaded into memory
The image fades in
We wait in this state until the app is initialized and ready to run
The whole splash screen fades out, revealing the app's first screen
Finally, the splash screen assets are cleaned up

import React, { useEffect, useRef, useState } from "react";
import { Animated, StyleSheet } from "react-native";

export function WithSplashScreen({
  children,
  isAppReady,
}: {
  isAppReady: boolean;
  children: React.ReactNode;
}) {
  return (
    <>
      {isAppReady && children}

      <Splash isAppReady={isAppReady} />
    </>
  );
}

const LOADING_IMAGE = "Loading image";
const FADE_IN_IMAGE = "Fade in image";
const WAIT_FOR_APP_TO_BE_READY = "Wait for app to be ready";
const FADE_OUT = "Fade out";
const HIDDEN = "Hidden";

export const Splash = ({ isAppReady }: { isAppReady: boolean }) => {
  const containerOpacity = useRef(new Animated.Value(1)).current;
  const imageOpacity = useRef(new Animated.Value(0)).current;

  const [state, setState] = useState<
    | typeof LOADING_IMAGE
    | typeof FADE_IN_IMAGE
    | typeof WAIT_FOR_APP_TO_BE_READY
    | typeof FADE_OUT
    | typeof HIDDEN
  >(LOADING_IMAGE);

  useEffect(() => {
    if (state === FADE_IN_IMAGE) {
      Animated.timing(imageOpacity, {
        toValue: 1,
        duration: 1000, // Fade in duration
        useNativeDriver: true,
      }).start(() => {
        setState(WAIT_FOR_APP_TO_BE_READY);
      });
    }
  }, [imageOpacity, state]);

  useEffect(() => {
    if (state === WAIT_FOR_APP_TO_BE_READY) {
      if (isAppReady) {
        setState(FADE_OUT);
      }
    }
  }, [isAppReady, state]);

  useEffect(() => {
    if (state === FADE_OUT) {
      Animated.timing(containerOpacity, {
        toValue: 0,
        duration: 1000, // Fade out duration
        delay: 1000, // Minimum time the logo will stay visible
        useNativeDriver: true,
      }).start(() => {
        setState(HIDDEN);
      });
    }
  }, [containerOpacity, state]);

  if (state === HIDDEN) return null;

  return (
    <Animated.View
      collapsable={false}
      style={[style.container, { opacity: containerOpacity }]}
    >
      <Animated.Image
        source={require("~/assets/splash.png")}
        fadeDuration={0}
        onLoad={() => {
          setState(FADE_IN_IMAGE);
        }}
        style={[style.image, { opacity: imageOpacity }]}
        resizeMode="contain"
      />
    </Animated.View>
  );
};

const style = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: '#E0B9BB',
    alignItems: "center",
    justifyContent: "center",
  },
  image: {
    width: 250,
    height: 250,
  },
});

Note that you must change the colors and the path to your image asset to match your project.

You could add more content to your splash screen if you feel it's necessary.

Lastly, we need to actually use this component in our app. My app entry point looks like this, and you'll probably have something similar. The idea is to wrap your app entry point in the WithSplashScreen component and once the app is initialized, set the isAppReady prop to true.

export function AppEntry() {
  const store = useRef(undefined);
  const queryClient = useRef(undefined);

  const [isAppReady, setIsAppReady] = useState(false);

  useEffect(() => {
    initialize().then((context) => {
      store.current = context.store;
      queryClient.current = context.queryClient;

      setIsAppReady(true);
    });
  }, []);

  return (
    <WithSplashScreen isAppReady={isAppReady}>
      <StoreProvider store={store.current}>
        <QueryClientProvider client={queryClient.current}>
          <SafeAreaProvider>
            <KeyboardAvoidingView>
              <ModalProvider>
                <Router />
              </ModalProvider>
            </KeyboardAvoidingView>
          </SafeAreaProvider>
        </QueryClientProvider>
      </StoreProvider>
    </WithSplashScreen>
  );
}

If you did everything right, the end result should look something like this:

App with splash screen

Conclusion

Instead of adding complex native dependencies that are hard to control, it's easy to add a splash screen to your app with just a couple of changes on the native side. As a benefit, you get extra control over how the splash screen looks and behaves.

Thanks for giving this article a read! If you've found it useful, consider liking and sharing.

Lloyds digital is available for partnerships and open for new projects. If you want to know more about us, check us out.

The ultimate guide for junior frontend developers

Nikolina Ljubičić — Tue, 10 Aug 2021 06:55:12 +0000

How hard is it to become a developer? Can I do that? The answer is yes, you can. First of all, it should be noted that this path is not easy; there will undoubtedly be frustration and a desire to give up. If you want to be a good frontend developer, you have to realize that you will never finish learning. I have been through all of this, and I can tell you if you are persistent in achieving your goals, I can guarantee you that you will succeed.

But how to get to the desired position of junior frontend developer? I believe that most of the students graduating from college are interested in that. Many employers look for people with work experience in their profession, but how do you gain experience if no one provides you a job opportunity?

Sit tight, and let me share my story.

How to start?

One solution is to look for a professional internship. Keep in mind that even if you do it pro bono, believe me, it will pay off. Be grateful for the opportunity and try to use that time to learn as much as possible. You’ll have a chance to experience the real work environment, and that’s exactly what you need after college. Try to prove yourself, show the desire to learn, and progress. Don't come to an internship for the formality and signature that you have to take to college; you are making a big mistake that you will only be aware of later. Make the most of that time: ask questions, research, work hard, code, and learn. Perseverance will pay off. It always does.

However, if you don't have the opportunity to start with an internship, there are other alternatives, such as courses on Udemy, Udacity, Coursera, etc. You can find various courses for less than 15€. And here is a tip for you: the prices of the courses should be researched in the Incognito window, only in this way you will find out the real price. When you take a course, finish it completely and write the code in parallel with the lecturer. In addition, you should regularly take notes on paper or laptop, write comments in the code, and additionally follow official documentation as you discover new things. At that moment, you think you will remember it, but trust me, you probably won’t so you will be grateful when you see that you have something written down. It has been proven that we remember faster while writing. After finishing the course, there is no need to immediately take a new one. You should rather set yourself your own project that needs to be done, and you will be able to apply your knowledge there. To sharpen your skills, it is necessary to complete as many projects as possible and invest a lot of effort in the exercises. This is a guaranteed path to success, no mistake.

Consistently invest in your knowledge. If you focus on working on yourself, the results will definitely come. That’s guaranteed! Depending on how you want to feel or what you want more in your path to success, choose one book or online program - and get started. Just start somewhere and do it as soon as possible. Yes, it's never too late, but if you can start learning earlier and possibly create something, why not do it?

Top tech skills you need to know

First of all, it's important to point out a few significant facts. If you want to become a frontend developer, needless to say, you must know HTML and CSS, because these are the basics. If you are asked at a job interview which programming languages you know, do not say HTML and CSS because they are not programming languages. HTML is a markup language, while CSS is a style language. Five years ago, it was completely normal to say at job interviews that you have knowledge of HTML or CSS, and they would be thrilled. Today is different and much more is expected from you. There is no need for fear; if you have the desire to learn, you will master other programming languages with ease.

What we need to know now when we talk about the position of a frontend developer are JavaScript and/or TypeScript. Today, it's good to know Sass or Less - both are CSS preprocessors that script superset of CSS that makes writing CSS code easier. Knowing the rules for responsive web design is a crucial thing you need to know today. One of the things that have made my life a lot easier is the CSS flex property. The number of internet users who access and use the web through smartphones and other mobile devices is constantly increasing at an alarming rate. This means that websites should be even more optimized than before, especially the customization of web design for different types of screen sizes is necessary. If you fail to do that, then you will end up losing customers. Based on Statista research, 54,8% of websites are viewed from a mobile device - use that information wisely.

Another thing to know are software version control platforms - which allow users to track changes in projects and collaboration between teams during and after software development. There are some free platforms such as GitLab, GitHub, or BitBucket. Realistically, working on it isn’t that abstract at all; it’s quick to learn, and it can make your life so much easier. Trust me, you will sleep more peacefully when you know that everything is stored on your Git.

It is a big plus for a frontend developer if you know the basics of DNS, HTTP, and HTTPS (read: you have to know it).

The soft skills you need to know as a junior frontend developer

Now we came to the point that developers don’t really like, but these skills are just as important as tech skills. These skills do not include programming, but if you stick to them, they can make you a more skilled and better programmer as well as a team player.

In this industry, things change very quickly, and only by learning can one keep up with new things and technologies. When learning, it is important to be humble and learn from your mistakes because that is one of the better ways to learn. And most important of all, show that you are always passionate and highly motivated for what you do.

Of course, in this position, the key skill is writing code, but there is much more behind it, and to progress, it is important to know other skills.

Here are some skills that are important to master:

1. Written communication. You can't escape it, you will use it every day in email. Try to write in a friendly way, always thank the person for contacting you, and most important of all - quickly get to the point without overcomplicating things.

2. Mentoring. You probably don't understand why a junior frontend developer needs this, but in fact, there is always something you know and some of your colleagues don’t. Also, after a while and after you master things, you find yourself in situations where you need to explain something to someone. Trust me, this is the best way to further solidify and validate your knowledge (and only then realize how much you have already learned!). In principle, as soon as you teach someone something new, you are on the right track, so just keep it up. I speak from my own experience when I say the combination of learning and mentoring is very effective.

3. Focus. In this industry, your focus should be on goals. For example, to achieve a goal which is developing a website, you have to be focused on details, especially on small ones, because the frontend is just that, what is seen on the user’s screen. The developer must be focused on how the website works and how it will look, although the look and feel are resolved with the designers.

4. Troubleshooting. This aspect is crucial in programming. It would be easiest to remember the commands to copy from StackOverflow and throw in the code. However it is crucial to know the problem, look at the bigger picture of the problem, and only then, with the help of Google and StackOverflow, solve the problem.

5. Teamwork. If you want to be a good programmer, it is also decisive that you are a team player. There is a lot of collaboration with designers, other developers, clients, and others in this work, so this skill is necessary.

What can you do to become a better programmer?

Frontend development is considered to be much harder to master than it was before. The difficulty has remained the same, but web development is evolving very quickly, which entails several new things in a very short time and in a much larger number. That way, you need to learn a lot more things in a shorter amount of time than previously. Documentation will save you in many situations, don't be repulsed by it, read it several times.

Here are some tips on how to quickly overcome all the difficulties of the programming process:

Learn to read someone else's code. You can find out a lot from it and see good ways to write code.
Always be informed - this is one of the ways to help you learn constantly. There is nothing better than listening to industry experts. This allows you to keep up with the dev trends so focus on things you need to master.
Attend technical meetings. The advice is to listen to podcasts, follow certain YT channels, join Facebook groups - a lot can be learned from the community.
Try to make your code clear and understandable from the beginning. However, once you start training as a programmer, you will certainly try to go back to some parts and prepare that source code. Make your code better for other developers that will work on its maintenance in the future.
It’s important to seek feedback, be it good or bad, it will surely help you see what you are doing wrong or which direction you have to follow.

Short tips and tricks

It’s important to understand the difference between image formats: PNG, SVG, and JPG. Whenever you need a transparent image, use PNG, when you use icons, use SVG, for full-color images (and whenever possible if you don't need one of the above.), use JPG.
For web optimization, it is necessary to compress images. There are free services available online such as TinyPNG.
If you have icons on the web that change color on hover or some other action, use the program for vector icons.
If you install some packages but end up not using them, please uninstall those unnecessary packages.
If the designer didn't prepare the final pictures for you, don't use some crazy gray squares, use placeholders.
Every time you finish a task on your project upload it on Git (git push) and every time you enter the project use git pull.

What you need to know as a junior frontend developer

Mandatory knowledge of HTML and CSS (CSS flex property)
Knowledge of JavaScript or Typescript
Basic knowledge of WordPress
Knowing some JS frameworks (e.g. Vue.js, Nuxt.js)
Basic understanding of SEO optimization
Knowledge of working on Git
Know how to use CSS preprocessors - Less or Sass

Basic things that you need to do on the web as a frontend developer

Set up SEO optimization
Enable Google Analytics
Turn on the Google Search Console
Turn on Sitemap
Enable REcaptcha if the website has forms
Set Error page
Set up a website favicon
Set an open graph image
Placing of lazy loading on images to reduce the initial load

To sum it up

I realized over time that the more we know, the clearer it is to us how much we still have to learn. The fact that you know how much you don't know is the best indicator that you already know a lot.
You have to be committed to the end goal, that’s the key that will guide you forward when it gets tough or tricky. The most important thing is to learn to think like a programmer. Once you have fully mastered one programming language, you can easily switch to new languages.

As long as you’re willing to invest your time learning the necessary skills for a developer, you’ll be at a huge advantage over others, so if you’re not embarking on doing new things, it’s time to do it today.

Keep on learning!

Lloyds is available for partnerships and open for new projects. If you want to know more about us, click here.
Also, don’t forget to follow us on Instagram and Facebook!

Let them call it Blockchain

Toni — Tue, 23 Mar 2021 10:21:55 +0000

With the recent rise of Bitcoin and other cryptocurrency values, there are more and more people interested in buying them. Unfortunately, not many of them are interested in educating themselves before investing. In the media, we can often hear that blockchain is the technology behind bitcoin, and the conferences once called "Bitcoin conference" are now called "Blockchain/crypto conference". In this blog post, I will explain how blockchain works and why it doesn’t actually matter that much.

What is a hash function?

Before explaining how blockchain works, it's necessary to know what a hash function is. Hash function gets a string of any length as an input and reproduces output that has the exact length (e.g. 256 bits). The most used algorithm for hashing is called SHA256 (Secure hashing algorithm) which reproduces 256bits (32 bytes) output. Each time we hash the same data, we will get the same result. This function is very useful because it's not possible to decrypt the result.

What is blockchain?

The shortest explanation - blockchain is a database. This database is made of so-called "blocks". Blocks contain the actual data of transactions. At the end of each block is its hash. We get the block hash when we pull all transactions inside a block through the hash function. The next block adds to the previous by using the previous block hash at the beginning. With this way of storing data, if any data (transaction) changes, the whole chain breaks. Because of this, cryptocurrencies get the characteristic of immutability.

Source: Bitcoin Whitepaper

Is every cryptocurrency immutable?

The answer is no. Even though they use blockchain, 99% of them are not immutable. What matters is how new blocks are created. Cryptocurrencies that use proof of work (POW) for creating new blocks are far more secure/immutable. For attacking such a network, you need a lot of electricity, which is expensive. Or in other words, to attack such a network you need to have 51% of the network’s power. On the other hand, many cryptocurrencies use proof of stake and similar technology for validating new transactions. This means the more coins you have stacked, the more likely your block will be included next.

Are all proof of work blockchains equally secured?

The answer is, again, no. This depends on how many people currently mine on that network. Their power is measured in the number of hashes per second. The next graph shows the Bitcoin hash rate compared to some other popular cryptocurrencies such as Ethereum or Litecoin.

Source: Bitinfocharts

Blockchain is slow

Blockchain is a very slow database. A new block (on the bitcoin network) that contains around 3000 transactions is created every 10 minutes. Some people argue that’s the reason behind the unscalability of Bitcoin.

Source : Analysis of the Possibilities for Improvement of BlockChain Technology

Why Blockchain then?

Because it's distributed, that's its greatest strength. However, to be distributed, it has to be open, public, and accessible to anyone at any moment. The key is to understand there is no single blockchain, but many copies of the same blockchain on thousands of different nodes.

Open vs Closed blockchains

Bitcoin uses a public and open blockchain and doesn’t ask for permission to use it. On the other hand, we have closed blockchains controlled by corporations (e.g. Ripple). In such blockchains, you have to ask for permission and they are able to change data as they will. It still blows my mind that people call them cryptocurrencies.

Blockchains only use case

Blockchain on its own is a useless, slow database. This has been proven a thousand times. Only blockchain used together with proof of work, P2P (peer-to-peer), and cryptography is useful and it's called Bitcoin, not blockchain. This still hasn’t stopped people from selling things by promoting them as something new by using words such as blockchain.

Final words

Since the rise of bitcoin popularity and its value, we have seen a lot of people and companies trying to make profit by selling their products and calling them innovative and new just because they use blockchain. My opinion is they are not innovative and that blockchain's only use case is bitcoin as the hardest money ever created.

I highly encourage you to educate yourself more on bitcoin as I think it's the technology that will change the world. I recommend reading Bitcoin Standard by Saifedean Ammous as well as Internet of money and Mastering Bitcoin by Andreas Antonopoulos.

Thank you for reading this!

Lloyds is available for partnerships and open for new projects. If you want to know more about us, check out our company profile here.

Also, don’t forget to follow us on LinkedIn and Facebook!

How to make WooCommerce, CorvusPay and Nuxt.js dance together

Dina Knapic — Wed, 03 Mar 2021 12:50:42 +0000

When you are assigned to do a webshop project where you need to implement a payment gateway on your own for the very first time, along with using an eCommerce platform, you may start to panic. But soon you realize that the hardest part is finding a quiet place in the office to focus on reading the documentation properly. For anyone who needs to fill some voids to make a complete webshop, I hope this post will be right for you.

In our company, in frontend web dev we use Nuxt framework for Vue.js. WordPress serves us as a headless backend, and to build this specific webshop we decided to give a shot to eCommerce plugin WooCommerce. As a payment gateway our customer chose CorvusPay.

In general, my tasks for this project were:

build UI
set up WordPress and WooCommerce, add the products data
get WooCommerce data through REST API
build shop functionalities
process payments with Corvus Pay
get orders to WooCommerce

Integrating CorvusPay payment gateway

In this post I focused on implementing payment gateway and getting orders to backend.
The whole process is pretty comprehensive and describing it all would take ages, so I rather choose to write about some obstacles, give some advice and point out things to pay more attention to. Some things may seem too obvious, but trust me, they can cause the worst headaches. I’ll go through my project and give you a heads up for problems I stumbled upon.

In CorvusPay Merchant portal:

When you register on the CorvusPay Merchant portal, you will need to fill in some company info. Be especially careful with entering the store URL domain, success and cancel URLs. Write HTTP, HTTPS, www and slashes right and be consistent. If you somewhere in the process strip www from URL and somewhere you don’t, you may have some problems, especially because links with and without "www" don't share the same local storage.
Choose GET http postback method.

In code:

As the order number must be unique for every order sent on checkout, you need to find a way to generate it. You can write some functions that return unique numbers, or you can go the very easy way using new Date().getTime(), a function that returns current time in milliseconds. There is a very, very, very small chance that two customers will hit the buy button in the exact same millisecond, so I went with that.
Don’t be surprised if nothing happens when you change email language in the Merchant portal. The language parameter you include in the POST method is the language the sent emails will be written in. Even if you choose a different language in the CorvusPay Merchant portal, the one in the POST method will win.
Amount parameter must have a decimal point, not a comma, and have two decimal digits.
In signature, beware you include all mandatory parameters, sorted alphabetically and concatenated without separators. POST requests must be signed using HMAC-SHA256. To do that, I installed vue-criptojs package. Signature was then created as simple as: const signature = this.CryptoJS.HmacSHA256(parameters, this.corvusSecretKey).
You can include cardholder data in signature, but you don't have to.
When you go live don’t forget to change Store ID, Secret key and checkout URL to wallet.corvuspay.com/checkout.

If you carefully go through documentation and you do above said things right, your buyer will now be successfully redirected to the CorvusPay checkout page, where they will see the total amount, fill in credit card data and make a payment. When buyers complete this step they will be redirected to the success URL provided by you in the CorvusPay Merchant portal.
At the same time payment/order gets to Merchant portal for the company owner to see, email is sent to the shop owner and to the customer. This could be the final step for some simple online purchase.

Sending orders to WooCommerce

But if you also have an eCommerce platform like WooCommerce in your project, your job here is far from over.
You need to find a way to send all the purchase data to WooCommerce if the payment is done correctly. Where do you start? You may notice the success page provides you with order data in the URL when landing on it, and we will use that.
Now go back to your code. In the same function where you are submitting data to Corvus checkout, also store in the browser's local storage all the needed order data you prepared for WooCommerce, along with the order number. The order number is mandatory because it will be used as an identifier. On your success page write a function that gets the order_number parameter from the URL. You can use this.$route.query.order_number. When you finally get the order number, perform the search for it in the local storage. If found, send belonging order data to WooCommerce with the POST method.

Conclusion

Building a webshop for the first time requires quite a bit of time and a lot of nerves. There are many dots you have to connect, and they all have to collaborate together well. But once you figure it all out, life gets much easier. At least until you get a more advanced task to implement next time.

Thank you for reading this! If you've found this interesting, consider leaving a ❤️, 🦄, and of course, share and comment your thoughts!

Lloyds is available for partnerships and open for new projects. If you want to know more about us, click here.
Also, don’t forget to follow us on Instagram and Facebook!

Stripe in-app payments in React Native

Masimo Orbanic — Tue, 08 Dec 2020 11:05:29 +0000

Stripe is currently one of the best payment services that you can use in your web and mobile applications. It offers many features like subscriptions, the option to collect payments from customers and pay them out to sellers or service providers, invoicing, and many other good things. It is also very developer-friendly, it has support for popular programming languages, Webhooks for all types of events and the developer documentation is well written.

🚨 Important 🚨

Since May 2021 Stripe has an official package to support React Native platform called stripe-react-native . It's recommended to use the official package for long term support and stability.

Stripe does not have an official package for React Native, but the community has some libraries to offer. One of them is tipsi-stripe. The stable release of tipsi-stripe is not currently supported (December 2020) because the last stable release is from August 2019, and since then the EU Strong Customer Authentication (SCA) came into power. It requires a major update of the package because the native part of the package has been updated. The version of tipsi-stripe that supports SCA 8.0.0-beta.11 is still being developed.

Another package is react-native-stripe-payments, it has a stable release that supports SCA, but accepts only payments with credit cards. Other methods are not supported. We in Lloyds are using react-native-stripe-payments and so far it is working well.

What do you need in order to implement Stripe?

The first thing you will need is, of course, a Stripe account. After you create one, you are free to jump into testing mode by turning on the test mode ("View test data" switch in the sidebar). To switch Stripe to production environment, you must enter a bunch of company data and bank account information to receive payments. Also, you must be sure that Stripe is available in the country where the company is registered.

In order to have Stripe in your React Native app, you must have a backend where the majority of the checkout process is defined. The official Stripe package is available for Node, Ruby, Python, PHP, .NET, Java and Go. In Lloyds we are using Laravel, a PHP framework.

How it works?

Everything is revolving around Payment intents. Payment intents track a payment, from initial creation through the entire checkout process, and triggers additional authentication steps when required. In order for react-native-stripe-payments to work, you must have client_secret which is retrieved from the backend where the payment intent is created.

The flow is:

user presses the BUY button,
a request containing items to buy is sent to the backend,
payment intent is created on the backend and client_secret is returned in the response,
user is prompted to enter credit card details,
payment is confirmed on the client-side using client_secret and credit card details,
payment confirmation is recorded in the backend using Stripe Webhooks

Since the items to buy and client_secret are the only two thing shared between client and server, this process is very secure, there is very little room for the corruption of the payment process.

Backend

Backend is used to create Payment intent and to store information about the transactions that occurred.

First, we add the Stripe package to our framework so our backend can communicate with Stripe.

In total, the basic implementation of Stripe requires two API endpoints to be created:

to create payment intent and return client_secret to client
Webhook URL to receive information from Stripe about a successful payment

The endpoint to create payment intent is used to create payment intent and to bind created payment intent to order in the database. The order in the database must have stored information about payment intent because the payment is not confirmed yet, the confirmation of the payment is done through the Webhook endpoint. The response must contain client_secret, which can be found in the created Payment intent object.

The request from Stripe to our backend (Webhook) contains data about the payment intent, so we can find an order which is bound to payment intent in the database and mark that order as completed. Webhook can be configured on Stripe dashboard. The event that you want to trigger is payment_intent.succeeded. That is just the basic setup, but with Stripe Webhooks you can configure Webhook for many types of events, in other words, notify your backend about the change that occurred.

React Native

As mentioned earlier, we will use the react-native-stripe-payments package. Installation of the package does not require any linking process, everything is handled with autolinking.

The package is very simple and does not require a lot of configuration. The first thing we must do is to call setOptions method and pass the Stripe publishing key:

import stripe from 'react-native-stripe-payments';

stripe.setOptions({ publishingKey: 'STRIPE_PUBLISHING_KEY' });

Next thing, as we described in the "How it works" section, we'll send a request to your backend on route to create payment intent. In the request, you can pass the cart_id, or array of cart items that are being bought, as long as you can calculate the total price, you are good.
If the request was successful, the backend should return you the client_secret, and you can prompt the user to enter his credit card details. You can create your own design of the credit card input, or you can use react-native-credit-card-input or some other credit card input package. You can check if the credit card is valid using the stripes isCardValid method. For testing you can find the test credit cards here.

When you have client_secret and valid credit card, you can run the confirmPayment method:

stripe.confirmPayment('client_secret_from_backend', cardDetails)
  .then(result => {
    // payment was successful
  })
  .catch(err =>
    // error occurred
  )

If the payment was successful, Stripe will fire a Webhook request to the backend, and the backend will make a record that the transaction occurred and store data relevant to the transaction so the transaction can be back-traced if needed. You can also check the received payments on the Stripe dashboard and make sure that the transaction was successful.

Conclusion

The process of payment on the web and in mobile apps is evolving and is being made secure every day. It is on the developer to create flexible solutions and quickly respond to the changes that need to be made. Also, don't forget to check if you are viewing the test data or live data on the Stripe dashboard 🙂

Thank you for reading this! If you've found this interesting, consider leaving a ❤️, 🦄, and of course, share and comment your thoughts!

Lloyds is available for partnerships and open for new projects. If you want to know more about us, click here.

Also, don’t forget to follow us on Instagram and Facebook!

Modern desk setup for developers in 2020

Dominik Rusac — Wed, 25 Nov 2020 12:36:29 +0000

I spent a lot of time looking at different pieces of IT equipment and how to connect them most efficiently for everyday use. Every developer prefers their own type of desk setup. Some developers find one laptop enough while others like a multi-monitor setup with laptop or desktop PC. I prefer a laptop with two extra monitors while I work in the office because I find that as my perfect desk setup.

You are asking why this is my perfect setup? On two big screens, I can do the main work while I am using the 3rd screen (laptop) as an additional helping screen. I use my main screen in the middle and that’s where I write the code while my second screen on the left is showing the result of the code I wrote on my main screen. Also I use my left screen for browsing the internet and reading the documentation.

The laptop is on my right and depending on what I'm doing at the moment, there is usually Slack, Insomnia or Chrome DevTools opened if I am doing some JavaScript. Sometimes I think it would be nice to have a 4th screen for browsing MySQL database in phpmyadmin but I’m fine for now. 😄

What would be the best way to connect every piece of hardware to a laptop?

Content:

Efficient connection with peripherals
Today's laptops...
Why Type-C?
How? What are the requirements?
What about the second monitor?
Possible problems and solutions
Which monitor and how many?
Laptop specifications?
Keyboard and mouse
Conclusion

Efficient connection with peripherals

For sure, there also must be a headset, separate keyboard and mouse connected to my laptop. All of that must be connected with the minimum number of cables. The desk needs to be as clean as possible with the ability to quickly connect and start working.

When I need to take my laptop to a meeting, I don’t want to have to disconnect a lot of cables from my laptop, and when I get back on my desk reconnect all the cables back. That’s inefficient and annoying. I needed to come up with the perfect solution on how to connect all peripherals and two extra monitors to a laptop using as few cables as possible.

A lot of questions came up, but the final, perfect solution was found. Connect everything together using a single Thunderbolt 3 / Type-C cable. Type-C is the perfect solution for my problem and probably for yours too. When I get back to my desk after the meeting, plugging in one cable instantly connects the headset, keyboard, mouse, two monitors and power to my laptop and my desk is usable in a second! Isn’t that nice? I love it. To achieve that level of connectivity, your equipment must support it.

Today's laptops...

Many modern laptops have fewer connectivity options than older laptops. Few years ago, laptops had VGA, HDMI and Display port built-in, so you could easily connect multiple monitors using a few cables. Today that's not the case. For example, the new Apple Macbook has only 4 ports and they are all the same - Type-C/Thunderbolt which means no VGA, HDMI or Display port connectivity.

I found out that's also the case with other brands, the more expensive the laptop is the fewer ports it has. That’s a little bit odd, don’t you think? It is, but the premium laptop has premium connectivity ports, and the premium connectivity port today is Type-C / Thunderbolt port.

Why Type-C?

On cheap laptops, you’ll hardly find a Type-C/Thunderbolt port. Cheaper non-premium laptops still have some ports for connecting to external displays, most common today are HDMI and DisplayPort. Connecting through these you can get video and audio to your monitor, but you still need to connect the keyboard and mouse to your laptop via USB. And also you need your laptop charger plugged in. That’s like 4 cables already connected to a laptop which is really messy. So how can we fix that? Type-C to the rescue!

Type-C can do all that through one cable. Yes, you read that correctly. To achieve that, it is required to have a Type-C supported monitor. Once your laptop is connected to your monitor via Type-C cable, you can connect all of your peripherals to that monitor. Through the monitor everything is connected to a laptop via single Type-C cable. Boy, that’s clean!

How? What are the requirements?

To be able to connect your setup this way, your hardware must support it. For sure, you must have Type-C/Thunderbolt port on your laptop and at least one Type-C external monitor.

When you buy a Type-C monitor you should also get a Type-C cable in the box, at least that’s the case with Dell’s monitors. You should use that cable to connect your laptop to the monitor. Once connected, since the monitor has a 3.5 audio jack and multiple USB ports, you can easily connect your headset, mouse, keyboard, smartphone and all other devices you use to your monitor. All of that is instantly connected to your laptop through the single Type-C cable.

Another great thing about Type-C is that you don’t need to use your laptop charger because the monitor provides power to your laptop through the same Type-C cable. Single Type-C cable carries power, data, display and audio all at once. How awesome is that?

What about the second monitor?

Now we have connected one monitor, keyboard, mouse and headset to our laptop using only one cable. How to connect the second monitor to our setup? It’s pretty simple as long as your monitor supports MST (Multi-Stream Transport), also known as Daisy Chaining. If your monitor has one display port input (DP IN) and one display port output (DP OUT) that means your monitor supports MST/Daisy Chain, but to be sure take a closer look into monitor specifications.

The first monitor your laptop is connected to via Type-C cable should support MST/Daisy Chain. You simply use a display port cable to connect the first monitor to your second monitor. In the first monitor (the one connected to laptop via Type-C), plug your display port cable in DP OUT and on the second monitor plug that same display port cable in DP IN port. You got two monitors connected to your laptop all together with all of your peripherals that go into your laptop through one single Type-C cable. Let me repeat, ONE cable!

Possible problems and solutions

If you don’t get a picture on some of your monitors, first make sure the proper input source is set up in the monitor settings. The first monitor input source must be set on “Type-C” while the second monitor input source must be set on “Display port”.

Also, MST must be turned on in your first monitor settings so you are able to get a picture on the second display. If you still have problems after that make sure you are using DP v1.2 cable or newer. If you don’t get a picture even on the first monitor, try to use higher quality Type-C cable. Not every Type-C cable is gonna work, but the cable that comes in a box with a monitor should always work.

Which monitor and how many?

The number of monitors mostly depends on what you prefer and how you work. The more monitors you have, the more space you have to work on without minimizing the windows all the time. That way it’s faster and easier to work and because of that you are more efficient and you make more money! 💵

While choosing the new monitor, make sure it supports MST/Daisy Chaining and Type-C connectivity. Dell has a lot of nice Type-C monitors, for example, U2419HC is the one that supports everything you need to connect to the laptop the way I described. Look for letter “C” in the model name to be sure it supports Type-C connectivity. Also make sure that monitor has sufficient USB ports on the back and audio jack for connecting headphones.

I wouldn’t recommend a monitor sized under 24-inches, if possible go with a 27-inch with a 2K resolution. Full HD is fine on a 24-inch, but on a 27-inch monitor it’s not that good. IPS panel type would probably be the best, also VA is fine except for some lower viewing angles, as long as you sit in front of it, it will be fine and will probably have a better contrast.

Laptop specifications

Always look for the best laptop your money can buy. Don’t buy the first laptop you see, do your research. I recommend a configuration with at least 12 GB RAM (don’t go under 8 GB) and Intel i5 CPU. A dedicated GPU is a plus but not required. SSD is a must with a capacity of 250/500 GB. Make sure it has at least one Type-C/Thunderbolt port, other ports like USB Type A and audio jack are welcome.

The ideal screen size for a laptop would be 14” because it’s in the perfect middle of 13” and 15” laptop screens. I left out 17” laptops because they are too big and heavy to carry around. I wouldn’t mind a 13” laptop as long as I am using two external monitors with it. Still, 14” seems ideal with of course Full HD resolution or better.

A bigger battery means longer battery life and battery life is important. Look for around 50-60 Wh battery which should get you through the day. High quality keyboard and touchpad is also a thing you should worry about - you don't want laggy touchpad or squeaky keyboard. Overall laptop build quality is better the more money you spend. Also, you will pay more for a thinner and lighter laptop.

Keyboard and mouse

This mostly depends on your preferences and budget. Whether you want classic, mechanical, small size (tenkeyless) or a full size keyboard. I currently use Logitech K280 wired keyboard which is fine but... I am looking at you Logitech MX keys.

I use Logitech G502 wired mouse and I find it almost perfect, it has all the extra buttons I need. There is also an even better G502 Lightspeed which is practically identical but wireless. You could pair your wireless mouse with wireless charging mousepad so you don't need to worry about the battery.

Choose what suits you best and go wireless for an even cleaner desk setup!

Conclusion

A desk that makes you comfortable and suits your needs is a productive desk. Make sure you organize it the way you want as this will lead you to grow and become a better and more efficient developer!

Happy coding everyone!

Thank you for reading this! If you've found this interesting, consider leaving a ❤️, 🦄, and of course, share and comment your thoughts!

Lloyds is available for partnerships and open for new projects. If you want to know more about us, click here.

Also, don’t forget to follow us on Instagram and Facebook!

DEV Community: Lloyds digital

Use Laravel with OpenAI to validate inappropriate content

Installation

Usage

Laravel - Serve API requests with translated validation rules

Creating a Neat DateTime Helper Function in PHP

How to handle both API and Basic authentication in Laravel

9 tricks to make your React Native development easier

1. Open a new terminal in the same folder - from the terminal (Mac only)

UPDATE

2. Simulate push notifications on iOS

3. Share Android device screen on your desktop

4. Generate app icons

5. Open Xcode project from the Terminal

6. Use transform.tools

7. Consider implementing Code Push for faster feedback loop from developer to the testers and clients

8. ADB over WiFi

9. r - Terminal command (Mac)

Structuring a CI/CD workflow in GitLab (Node.js example)

Table of contents

What are pipelines

DevOps pipelines

What is CI/CD?

It works on my machine ¯\(ツ)/¯

What CI/CD pipeline software to use?

Why did we choose GitLab?

Docker Technology

GitLab-ci.yml file

Pipeline lifecycle example

Here is the output from the second job:

Conclusion

How to add a splash screen to a React Native app - The easy way

Prerequisites

Setting a blank background on iOS

Setting a blank background on Android

The JS part

Conclusion

The ultimate guide for junior frontend developers

How to start?

Top tech skills you need to know

The soft skills you need to know as a junior frontend developer

What can you do to become a better programmer?

Short tips and tricks

What you need to know as a junior frontend developer

Basic things that you need to do on the web as a frontend developer

To sum it up

Let them call it Blockchain

What is a hash function?

What is blockchain?

Source: Bitcoin Whitepaper

Is every cryptocurrency immutable?

Are all proof of work blockchains equally secured?

Source: Bitinfocharts

Blockchain is slow

Source : Analysis of the Possibilities for Improvement of BlockChain Technology

Why Blockchain then?

Open vs Closed blockchains

Blockchains only use case

Final words

How to make WooCommerce, CorvusPay and Nuxt.js dance together

Integrating CorvusPay payment gateway

Sending orders to WooCommerce

Conclusion

Stripe in-app payments in React Native

What do you need in order to implement Stripe?

How it works?

Backend

React Native

Conclusion

Modern desk setup for developers in 2020

Content:

Efficient connection with peripherals

Today's laptops...

Why Type-C?

How? What are the requirements?

What about the second monitor?

Possible problems and solutions

Which monitor and how many?

Laptop specifications

Keyboard and mouse