DEV Community: Aliyu Abubakar

Getting Started with Docker

Aliyu Abubakar — Fri, 26 Jan 2024 06:55:39 +0000

In this article, you will learn about Docker, its main principles, benefits and usage.

Overview of Docker

Docker is an open-source platform for simplifying application development, deployment, and management using containers.

Docker Containers are lightweight and portable packages containing an application's code, dependencies, and configuration. They run in isolation, ensuring consistent execution across environments.

Why use Docker?

Portability

Docker containers can be used to run the same application on different machines without any modifications, which makes it easier to move applications between development, testing and production environments.

Isolation

Docker containers are isolated in nature, each container runs in its isolated environment with its own file system, network protocol and process space, and this provides a level of security and isolation. This solves the problem of conflict with other applications or dependencies.

Scalability

Docker containers are easily scalable, meaning that one can easily scale the containers that are running the applications by horizontally adding more containers with them when demand increases.

Efficiency

Docker containers are efficient, meaning that containers are lightweight, and consume fewer resources, which means more containers can easily run on the same underlying hardware.

Docker Images

Docker images are made up of multiple layers and each layer adds something specific to the final image, making it more efficient and reusable. For example, one layer might contain the base operating system, another will install your application's dependencies and a third might add your application code.

Dockerfile

Dockerfile is a file that contains instructions for what to include in an image, from base operating systems to application code and configuration.

Commands:

FROM (establishing base image)
COPY (duplicating files from local to the container)
ARG (pass arguments)
ENV (environment variable)
RUN (run a shell command)
EXPOSE (open port from container to virtual network)
CMD (execute a command)
WORKDIR (sets where copied files should be placed.)

To build an image from the Dockerfile, use this command

docker build <path> 
// docker build .

Good Practice

Copy the dependencies 1st and then copy the rest of the files.

COPY package.json ./
RUN npm install
COPY . ./

.dockerignore

The .dockerignore is a file used for specifying the files and directories that should not copied when using the COPY command. It is similar to .gitignore

Docker Network

A Docker network allows containers to communicate with each other and with the outside world. It's like a mini-internet for your Docker containers, where they can have their IP addresses and DNS names and talk to each other without interfering with the network on your host machine.

There are different types of Docker networks, each with its purpose:

Bridge network

This is the default network that containers are attached to unless you specify otherwise. It's like a shared Wi-Fi network in the building, where all the containers can see and talk to each other.

Overlay network

This is a more advanced type of network that allows containers to be connected across multiple hosts. It's like a private VPN for the building, where only authorized containers can access each other.

Macvlan network:

This type of network gives containers direct access to the host machine's network. It's like giving a tenant in the building a direct phone line to the outside world.

docker network create <network-name>

Docker Volumes

A Docker volume is a separate filesystem managed by Docker, independent of the container's temporary storage.

Docker volumes offer several benefits:

Ensures important data survives container restarts and migrations.
Enables collaboration and data access between multiple containers.
Simplifies data backups and container deployments.
Keeps container data separate from the host machine's filesystem.

docker run -v /path/in/container

Named Volume
We can also name the volume otherwise it will generate the ID and be hard to track

docker run -v <volume name>:</path in container> <image name>
docker run -v myvolume:/src/public nginx

Bind Mounting

Bind Mounting is a technique for sharing data between the host machine and a container. In the context of monitoring, it's often used to expose container metrics and logs to an external monitoring tool running on the host.

docker run -v <path to your local system>:<container path>
docker run -v /app/content:/usr/share/nginx/html  nginx
docker run -v $(pwd):/user/html nginx

In compose, we don't have to give the pwd

     volumes:
      - ./:/usr/share/nginx/html:ro
      - ./app:/usr/share/nginx/html/app:ro

Docker Compose

Docker Compose is used for running multi-container Docker applications and configuring relationships between containers.

services:  # containers. same as docker run
  servicename: # a friendly name. this is also the DNS name inside the network
    image: # Optional if you use to build:
    command: # Optional, replace the default CMD specified by the image
    environment: # Optional, same as -e in docker run
    volumes: # Optional, same as -v in docker run
  servicename2:

volumes: # Optional, same as docker volume create

networks: # Optional, same as docker network create

Sample:

services:
  mongo:
    container_name: mongo
    image: mongo:4.0
    volumes:
      - mongo-db:/data/db
    networks: 
      - my-net

volumes:
  mongo-db: # named volume

networks:
    my-net:
        driver: bridge

If any container depends on another container

depends_on:
  - mysql-primary

Docker Swarm

Docker Swarm is an orchestration tool for managing a group of Docker hosts (physical or virtual machines) as a single. It lets you deploy, scale and manage containerized applications across multiple nodes.

Docker Swarm is not enabled by default, here is how to enable it;

docker swarm init

Docker service

Docker service is the core concept of deploying and managing containerized applications within Docker Swarm. It defines how your application runs across a cluster of Docker hosts.

Docker Stacks

Docker stacks are the powerhouses of deploying and managing multiple interconnected services within a Docker Swarm cluster.

Here we don't use build: object and there is new deploy: specific to swarm to like replicas, and secrets.

    deploy:
      replicas: 3

We deploy stack files with this command

docker stack deploy -c file.yml <stackname>

Docker Secrets

Docker Swarm supports secrets. Secrets are the guardians of sensitive data like passwords, API keys, database credentials, and other sensitive credentials bits. We can pass ENV variables like SSH keys, Usernames, passwords etc.

We can create Docker secrets though CLI external:

echo "<password text>" | docker secret create psql-pw -

Create a file with a password and then pass the path in the stack file:

services:
    postgres:
      image: postgres
      secrets:
        - post-pass
        - post-user
      environment:
          POSTGRES_PASSWORD_FILE: /run/secrets/post-pass
          POSTGRES_USER_FILE: /run/secrets/post-user

secrets:
    post-pass:
      external: true
    post-user:
        file: ./post-user.txt

Docker Healthcheck

Docker health checks ensure your containers are running smoothly and performing their tasks as expected, preventing headaches and downtime.

HEALTHCHECK --interval=30s --timeout=3s \
CMD curl -f http://localhost/ || exit 1

Getting started with GitHub Actions

Aliyu Abubakar — Thu, 25 Jan 2024 10:11:05 +0000

In this tutorial, you will learn about GitHub Actions and how to use it to automate your development workflow.

What you will accomplish

In this tutorial, you will:

Learn about GitHub Actions
Understand workflow, jobs, steps and actions
Create your first GitHub Action

GitHub Actions is a continuous integration and continuous delivery (CI/CD) platform that allows you to automate your software development workflows by defining and running automated workflows within your GitHub repository. These workflows can handle various tasks from building, testing, packaging, releasing, and even deployment.

You can configure your workflow to run automatically when certain events happen, such as when you push code to a specific branch, open a pull request or schedule it to run at a specific time. When the workflow is triggered, GitHub Actions runs each action in the defined order on a virtual machine called a runner.

Overview

Workflow - Workflow is customizable sequences of tasks using YAML files. Workflows are defined in .yml files in the .github/workflows directory of your repository.
Action - An action is a custom application for the GitHub Actions platform that performs a complex but frequently repeated task.
Event - An event is a specific activity that triggers a workflow. For example, an activity that occurs on GitHub, such as opening a pull request or pushing a commit.
Jobs - A job is a group of steps within a workflow that runs on runners (virtual machines).
Steps - A step is an individual task like running commands or actions e.g actions/checkout@v2. Each step in a job executes on the same runner and allows direct file sharing.

name: CI # name of the workflow

on: [push] #     # watch for pull requests into the main branch


jobs:
  build: # name of the job
    runs-on: ubuntu-latest # runs-on is the type of machine to run the job on - runner
    steps: # steps are the individual tasks that make up a job
      - uses: actions/checkout@v2
      - name: Run a one-line script # name is the name of the step
        run: echo Hello, world!

Triggers

The on keyword is used for triggering events within the workflow. It can be triggered by a push, pull request or a schedule.

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

Triggers

The above example triggers the workflow when files in the src/index.js are changed.

on:
  push:
    paths:
      - "src/index.js"

The above example triggers the workflow when files within the .js and .css extensions are changed.

on:
  push:
    paths:
      - "**.js"
      - "**.css"
  pull_request:
    paths:
      - "**.js"

The above example triggers the workflow when files in the src directory are changed.

on:
  push:
    paths:
      - "src/**"

This workflow_dispatch allows you to run workflow manually from the Actions tab

on:
  workflow_dispatch:

Services

Services are external resources that can be used within your workflow to help test and operate your application. Services like redis or postgres or any of your preferred databases can be used within our workflow. We can also run a service in a container and custom images all within our workflow.

services:
  redis:
    image: redis 
    ports:
      - 6379:6379 

  mongodb:
    image: mongo
    ports:
      - 27017:27017

  sqlite:
    image: sqlite
    ports:
      - 3306:3306

Using result from one step in another step

We can use the result from one step in another step using the id keyword.

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: get previous
        id: get_version
        run: echo ::set-output name=version::1.0.0

      - name: Use the previous version
        run: echo ${{ steps.get_version.outputs.version }} # {{ steps.<step_id>.outputs.<output_name> }}

Jobs

We can have multiple jobs within our workflow and each runs in parallel by default. Using the needs keyword, we can run jobs sequentially and each step runs on the same runner.

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Get the version
        run: echo "Hello World"

  test:
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Get the version
        run: echo "Hello World"

GitHub context

The github context is available to you in any workflow or action you create on GitHub. You can use the context to get information about the workflow run, the repository, the event that triggered the workflow like pull request number, etc.

name: GitHub Actions
run-name: ${{ github.actor }} is testing out GitHub Actions 🚀
on: [push]
jobs:
  Explore-GitHub-Actions:
    runs-on: ubuntu-latest
    steps:
      - run: echo "🎉 The job was automatically triggered by a ${{ github.event_name }} event."
      - run: echo "🐧 This job is now running on a ${{ runner.os }} server hosted by GitHub!"
      - run: echo "🔎 The name of your branch is ${{ github.ref }} and your repository is ${{ github.repository }}."
      - name: Check out repository code
        uses: actions/checkout@v4
      - run: echo "💡 The ${{ github.repository }} repository has been cloned to the runner."
      - run: echo "🖥️ The workflow is now ready to test your code on the runner."
      - name: List files in the repository
        run: |
          ls ${{ github.workspace }}
      - run: echo "🍏 This job's status is ${{ job.status }}."

Useful properties of GitHub Context

github.event_name - The name of the webhook event that triggered the workflow.
github.sha - The commit SHA that triggered the workflow.
github.ref - The branch or tag ref that triggered the workflow.
github.repository - The owner and repository name. For example, sadiqful/actions.
github.actor - The name of the person or app that initiated the workflow.
github.job - The name of the job that's currently running.
github.run_number - A unique number for each run of a particular workflow in a repository. This number begins at 1 for the workflow's first run, and increments with each new run. This number does not change if you re-run the workflow run.
github.run_id - A unique number for each run of any workflow in a repository. This number begins at 1 for the workflow's first run, and increments with each new run. This number does not change if you re-run the workflow run.
github.workflow - The name of the workflow.
github.action - The unique identifier (id) of the action.
github.event - The event payload. For example, the issue or pull request object that triggered the workflow run.

Environment variables

We can set environment variables in the workflow file using the env keyword.

env:
  DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
  DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}

Secrets

Sensitive data like API keys, passwords, etc can be stored in the repository settings and can be accessed using the secrets context.

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Get the version
        run: echo ${{ secrets.SECRET_KEY }}

Matrix

Matrix is used for running a job on multiple versions of a tool. It can also be used to run a job on multiple operating systems.

jobs:
  example_matrix:
    strategy:
      matrix:
        os: [ubuntu-22.04, ubuntu-20.04]
        version: [14, 16, 18]
    runs-on: ${{ matrix.os }}
    steps:
      - uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.version }}

Outputs

We can use the outputs keyword to output data from a job. We can use the output from one job in another job using the needs keyword.

jobs:
  deploy:
    runs-on: ubuntu-latest
    outputs:
      url: ${{ steps.deploy-preview.outputs.url }}
    steps:
      - uses: actions/checkout@v3
      - id: deploy-preview
        run: echo "url=preview_url" >> $GITHUB_OUTPUT

    data:
      runs-on: ubuntu-latest
      needs: deploy
      steps:
        - name: load JSON files
          run: echo ${{ needs.deploy.outputs.url }}

Conclusion

GitHub Actions play a key role in automating significant activities during a Software Development cycle. GitHub Actions allows you to automate your build, test and deployment pipeline by creating workflows that are triggered by events.

Resources

How to get real-time data and insight on a Phone Number using Sendchamp

Aliyu Abubakar — Mon, 27 Mar 2023 19:38:57 +0000

In today's digital age, businesses need to stay connected with their customers at all times. One of the most effective ways to do this is by using messaging platforms like Sendchamp. Sendchamp provides businesses with a variety of messaging channels to connect with their customers, including SMS, WhatsApp, Email and Voice. But Sendchamp does more than just send messages. It also provides businesses with real-time data and insights on their phone numbers, helping them make better decisions about their messaging strategies.

Here's a step-by-step guide on how to get real-time data and insight on a phone number using Sendchamp:

Access your account

The first step is to create an account on Sendchamp. You can do this by going to the Sendchamp website and signing up with your email address and password. Once you've created an account, you'll need to verify it by clicking on the verification link sent to your email and login into your dashboard.

Check Insights on the Dashboard

You can check the insights on each phone number directly from your dashboard. To do this, go to the "Number" tab in the dashboard and input the phone number you want to check. You'll be able to see information attached to the phone number such as number validation, formatting, carrier information, port status and information, caller identity, roaming status and reachability.

Check Insights using an API

The Number Insight API is a tool that enables businesses to obtain accurate and up-to-date information about a phone number from various real-time sources. This product offers several benefits, including preventing fraud, evaluating risks, blocking fake accounts, and improving customer onboarding success rates without relying on customer-provided information.


https://api.sendchamp.com/api/v1/number-insights/check

The Number Insight API accepts two parameters. The phone number to be validated and insight type which can be core, standard or basic depending on the use case. Businesses can obtain information on any phone number globally using the API. Depending on the country, the data provided can include details such as number validation, formatting, carrier information, port status and information, caller identity, roaming status, and reachability.

Why Real-Time Data and Insight is Important

Real-time data and number insight are crucial for businesses because they provide accurate and up-to-date information about a phone number. This information can prevent fraud, assess risk, and block fake accounts, which ultimately helps businesses to increase their success rates of onboarding customers. With the Number Insight API, businesses can get important data such as number validation, formatting, carrier information, port status and information, caller identity, roaming status, and reachability. Having access to this information allows businesses to make informed decisions about customer onboarding, without relying solely on customer inputs. This leads to improved efficiency, better risk management, and a better customer experience overall.

Conclusion

Sendchamp provides businesses with a powerful messaging platform that includes real-time data and insights on phone numbers. By following the steps outlined in this article, businesses can use Sendchamp to gather valuable insights into their messaging campaigns and make informed decisions about their messaging strategies. With Sendchamp, businesses can stay connected with their customers and drive revenue growth through effective messaging.

How to setup Tailwind CSS in your React App.

Aliyu Abubakar — Wed, 08 Mar 2023 12:39:10 +0000

Introduction

Tailwind CSS is a popular utility-first CSS framework that helps to quickly build modern websites and applications. In this tutorial, we'll go through the steps to set up Tailwind CSS in a React app.

Prerequisite

Make sure you have the following installed on your computer;

Nodejs
Npm

If you don't have them, you can download and install them from the official Node.js website.

Create React App

Set up your react application using the create-react-app command. Open your terminal or command prompt and enter this command:

npx create-react-app my-app

This command will create a react app with all necessary structure that comes along with it. The time it takes for the process to complete depends on how fast your internet connection is.

Install TailwindCSS

We need to install Tailwind CSS and all its dependencies in our React app. To do so, let’s navigate to your our new react app in the terminal and install all TailwindCSS dependencies using the following command:

npm install -D tailwindcss
npx tailwindcss init

If you intend to work with tools like webpack, Rollup, Vite and Parcel, it is recommend to install Tailwind as a PostCSS plugin, you can do that using the following command:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

If you used the PostCSS command, make sure to confirm if Tailwind was added to the PostCSS configuration in your postcss.config.js file.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Both CLI and PostCSS requires templates paths configuration in order for Tailwind to work in your react app. Inspect your tailwind.config.js file and make sure you have the following configuration:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Next, we need to add the @tailwind directives for each of Tailwind’s layers to your main CSS file. Let’s navigate to src folder and create index.css and add the following lines.

@tailwind base;
@tailwind components;
@tailwind utilities;

Using Tailwind Classes in React

We can use Tailwind CSS classes in our React app. Go to the src/App.js file and replace its contents with the following code:

import React from 'react';
Import ‘./index.css’
function App() {
  return (
    <div className="bg-gray-200">
      <h1 className="text-4xl font-bold text-center pt-20">Welcome to my Tailwind CSS app</h1>
      <p className="text-gray-800 text-center mt-10">Let's build something amazing!</p>
    </div>
  );
}
export default App;

If you review the above code, you can see that we used Tailwind CSS classes to set the background color, font size, font weight and text alignment of our App component.

Understanding Smart Contract ABI

Aliyu Abubakar — Fri, 03 Mar 2023 21:32:57 +0000

Photo by fabio on Unsplash

In this article, we will explore what ABI is, why it is important for smart contracts and how it works with an example.

What is ABI?

Application Binary Interface (ABI) is a set of rules that defines how software components interact with each other. In the context of smart contracts, ABI defines how external applications should interact with a smart contract. This includes the data types that can be used to communicate with the contract, the order in which data should be sent, and the structure of the function calls that are supported.

ABI is a standardized format that allows different programming languages to communicate with each other, making it easier for developers to build applications that interact with smart contracts. ABI is used to create a contract interface, which is a set of functions and their input and output parameters that define how an external application can interact with a smart contract.

Why is ABI important for smart contracts?

ABI is important for smart contracts because it allows external applications to interact with them in a standardized way. Without ABI, developers would have to manually write code to interact with each individual smart contract, which would be time-consuming and error-prone. With ABI, developers can write code to interact with any smart contract that conforms to the ABI standard, regardless of which programming language it was written in.

ABI also allows smart contracts to be upgraded without breaking external applications that interact with them. When a smart contract is upgraded, the ABI can be updated to reflect any changes to the contract interface. External applications can then be updated to use the new ABI, without having to change any other code.

How does ABI work?

ABI is based on a binary format that is used to encode function calls and their parameters. When an external application wants to call a function in a smart contract, it encodes the function call and its parameters using the ABI format. The encoded data is then sent to the smart contract which decodes the data and executes the function.

ABI Elements

ABI supports several data types, including integers, booleans, strings, and arrays. It also supports complex data structures, such as structs and mappings. The ABI format includes a function signature, which is a unique identifier for each function. The function signature is based on the function name and the types of its parameters.

Example

For this example, we are going to write a simple smart contract.

// SPDX-License-Identifier: MIT

pragma solidity ^0.8.1;

/// a simple set and get function for mood defined: 

//define the contract
contract MoodDiary{

    //create a variable called mood
    string mood;

    //create a function that writes a mood to the smart contract
    function setMood(string memory _mood) public{
        mood = _mood;
    }

    //create a function the reads the mood from the smart contract
    function getMood() public view returns(string memory){
        return mood;
    }
}

With Remix IDE, we can easily get our contract ABI after deploying the smart contract. If you look at the bottom of the screenshot, you will find ABI.

The complete ABI for our mood smart contract would look like this

[
    {
        "inputs": [],
        "name": "getMood",
        "outputs": [
            {
                "internalType": "string",
                "name": "",
                "type": "string"
            }
        ],
        "stateMutability": "view",
        "type": "function"
    },
    {
        "inputs": [
            {
                "internalType": "string",
                "name": "_mood",
                "type": "string"
            }
        ],
        "name": "setMood",
        "outputs": [],
        "stateMutability": "nonpayable",
        "type": "function"
    }
]

In conclusion, ABI enables smart contracts to be interoperable with external applications. It provides a standardized format for interacting with smart contracts, making it easier for developers to build applications that use them. ABI also allows smart contracts to be upgraded without breaking existing applications.

Fetch API: A simple guide

Aliyu Abubakar — Thu, 02 Mar 2023 14:47:14 +0000

Photo by Douglas Lopes on Unsplash

Introduction

This tutorial provides an introduction to using the Fetch API for making HTTP requests in JavaScript. It covers the basics of how to make GET and POST requests, how to handle the response, and how to use different options available in the Fetch API. By the end of this tutorial, you should have a good understanding of how to use the Fetch API to retrieve and send data from web APIs.

Fetch API

Fetch API is a modern JavaScript interface for pulling resources such as JSON, Images and texts from a server through an API. The Fetch method is available in all modern browsers such as Chrome, Firefox, Safari etc and provides a simpler way of accessing and manipulating requests and responses.

Before the Fetch API, developers used XMLHttpRequest (XHR) to send and receive data from servers. XHR is still widely used but has limitations such as verbose syntax and the need to configure it for every request. Fetch API was introduced to address these limitations and provide a cleaner, fast, consistent and easy way of fetching data from servers.

Basic Fetch request

The easiest form of a Fetch request takes just one argument, the API endpoint of the resource you want to fetch. Here's an example:

fetch(‘https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

This code sends a GET request (an HTTP method used for requesting data for a specified resource) to the specified API endpoint and returns the response in JSON format. The second .then() block extracts the JSON data from the response and logs it to the console.

In this example, we used the fetch() method to send a GET request to the endpoint https://api.example.com/data. The fetch() method returns a Promise that resolves to the response object representing the response from the server.

We then use the json() method of the response object to parse the response as JSON. This method also returns a Promise that resolves to the parsed JSON data.

We use the then() and catch() methods of the Promise object to handle the success and error cases respectively.

Adding options to the Fetch request

To customize a Fetch request, you can include various options in the second argument, such as specifying the request method, defining headers, and providing a request body. An example of this could be setting specific options to tailor the Fetch request to your desired configuration.

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1
  })
})
.then(response => response.json())
.then(data => console.log(data))

This code sends a POST request to the specified endpoint with the given headers and body. The second .then() block extracts the JSON data from the response and logs it to the console.

Handling errors

When making a fetch request, there may be instances where the request fails due to issues like network errors or server errors. To manage these errors, it is possible to add a .catch() block following the .then() block. Essentially, this allows you to handle any errors that occur during the fetch request and respond accordingly. An example of this in action could be implementing alternative functionality or displaying an error message to the user.

fetch('https://jsonplaceholder.typicode.com/404')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok')
    }
    return response.json()
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error))

This code sends a GET request to a non-existent endpoint, which returns a 404 status code. The first .then() block checks if the response was successful using the response.ok property, and throws an error if it was not. The .catch() block handles the error and logs it to the console.

Using async/await

An alternative way to make Fetch requests is by using async/await syntax. It can simplify the code and make it easier to read and understand. Here is an example of how this syntax can be used to make Fetch requests.

async function fetchData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1')
    const data = await response.json()
    console.log(data)
  } catch (error) {
    console.error('Error:', error)
  }
}
fetchData()

This code defines an async function that makes a Fetch request and extracts the JSON data from the response using await. The try/catch block handles errors in the same way as the previous example.

Conclusion

The Fetch API is a powerful tool for making HTTP requests in JavaScript. It provides a simple, flexible and easy-to-use interface for retrieving and sending data from web APIs. Whether you're building a web application, a mobile app or a server-side script, the Fetch API can help you communicate with web APIs in a more efficient and effective way. By following the examples and guidelines provided in this tutorial, you should be well-equipped to start using the Fetch API in your own projects and make the most of its features.

How to connect multiple wallets to your React dApp using Web3Modal

Aliyu Abubakar — Fri, 24 Feb 2023 14:09:54 +0000

In this tutorial, we will cover how to connect wallets to your React dApp using Web3Modal.

Introduction

Web3Modal is a library that helps developers connect their decentralized applications to various Ethereum wallets like MetaMask, WalletConnect and more. By using Web3Modal, users can interact with your dApp using their preferred wallet. The library provides built-in support for React and seamlessly integrates with the popular React-hook library called wagmi.

It takes away the complexity of dealing with different wallet providers and allows users to connect and interact with dApps using their preferred wallet or provider. This is done to improve the user experience and accessibility of decentralized applications.

Web3Modal works well with multiple programming languages and frameworks including React, Angular, Vue.js and more, making it a versatile tool for building decentralized applications.

Prerequisites

Basic understanding of Reactjs and Nextjs
Node.js and npm installed on your system

To proceed, visit WalletConnect Cloud and either login or create a new account.

Once you are logged in, create a new project or use an existing one and copy the associated Project ID. This Project ID will be required in a later step of the process.

Install Packages

Install Web3Modal packages inside your app using the following command. Ensure you have the latest version of tools associated with your application.

Install the package with npm
npm install @web3modal/ethereum @web3modal/react wagmi ethers@^5 

Alternative installation method 
yarn add @web3modal/ethereum @web3modal/react wagmi ethers@^5

Set Environment Keys

Create a .env file in your app folder and add your project ID.

# Get your Project ID  at https://cloud.walletconnect.com 

NEXT_PUBLIC_PROJECT_ID=" paste your project ID here"

Import Packages

Next, import Web3Modal, Wagmi and chains libraries in your React component file. Locate the entry point file of your React app.

This is usually in the src/index.js file if you used CRA or pages/_app if you are working with Next.js. In any case, you want to make you are importing your packages where the ReactDOM.render function gets called.

import {
  EthereumClient,
  modalConnectors,
  walletConnectProvider,
} from "@web3modal/ethereum";

import { Web3Modal } from "@web3modal/react";

import { configureChains, createClient, WagmiConfig } from "wagmi";

import { arbitrum, mainnet, polygon } from "wagmi/chains";

These were the packages we initially installed. In the last import, we only called three chains but we can add more chains as we wish.

const chains = [mainnet, polygon, avalanche, arbitrum, bsc, optimism, gnosis, fantom]

Configuring Web3Modal

const { provider } = configureChains(chains, [
  walletConnectProvider({ projectId: "<projectId>" }),
]);
const wagmiClient = createClient({
  autoConnect: true,
  connectors: modalConnectors({
    projectId: "<projectId>",
    version: "1", // or "2"
    appName: "web3Modal",
    chains,
  }),
  provider,
});

// Web3Modal Ethereum Client
const ethereumClient = new EthereumClient(wagmiClient, chains);

Wagmi Client
The wagmi Client can be used with any web framework. It facilitates the management of wallet connection state and configuration through a set of features, including connection establishment, compatibility with connectors and ethers providers.

AutoConnect

AutoConnect allows you to reconnect to the last connector upon mouting.It can be set to true or false based on user preference. By default, it is set to false but when you set it to be true, it enables the user to quickly resume their previous connection without the need to manually re-establish it.

Connectors

Connectors component that facilitates the process of linking accounts and allows users to establish a connection between their digital wallets.

Wrap your app with WagmiProvider and add Web3Modal compoennt

function App() {
  return (
    <>
      <WagmiConfig client={wagmiClient}>
        <HomePage />
      </WagmiConfig>

      <Web3Modal
        projectId="<YOUR_PROJECT_ID>"
        ethereumClient={ethereumClient}
      />
    </>
  );
}

It is advisable to place the component in a separate area that is distinct from your main application in order to minimize the amount of unnecessary re-rendering that may occur within your application. By doing so, you can potentially reduce the overall workload and optimize the performance of the application.

Add Connect Wallet Button

To add a connect wallet button, we need to import Web3Button and Web3NetworkSwitch packages into our app.

import { Web3Button, Web3NetworkSwitch } from '@web3modal/react'

We can now go ahead to create a component for the Wallet Connect Button.

export default function HomePage() {
  return (
    <>
      <Web3Button icon="show" label="Connect Wallet" balance="show" />
      <br />

      <Web3NetworkSwitch />
      <br />
    </>
  )
}

Connecting wallets to your React dApp using Web3Modal can enhance the user experience of your application. Users can connect to various wallets with just a few clicks, making it easier to interact with your dApp.

How to get started in Developer Advocacy.

Aliyu Abubakar — Sat, 04 Feb 2023 20:27:55 +0000

Developer Advocacy is an important and growing field that helps bridge the gap between technology companies and the developer community. If you're interested in getting started in Developer Advocacy, there are several key steps you can take to begin building your skills and making a positive impact.

Develop a Strong Understanding of Technology

The first step to becoming a successful Developer Advocate is to have a deep understanding of technology and the specific platforms, tools, and APIs that your company offers. This requires a willingness to constantly learn and stay up-to-date with the latest trends and developments in the tech industry.

Build Relationships with Developers

Building strong relationships with developers is a key component of Developer Advocacy. This involves participating in online forums and events, and engaging with developers through social media and other online channels. As you build these relationships, it's important to listen and understand the needs and perspectives of developers, and to communicate your company's value proposition in a way that is relevant and valuable to them.

Create and Share Engaging Content

One of the most important tasks for Developer Advocates is creating and sharing engaging content that helps developers understand and make use of your company's products and services. This can include tutorials, blog posts, videos, and more. Your content should be clear, concise, and easy-to-understand, and should provide valuable information that helps developers get the most out of your company's products.

Participate in Developer Communities

Participating in developer communities is a great way to build your skills as a Developer Advocate and to make valuable connections with other advocates and developers. This can include participating in online forums, attending meetups and events, and contributing to open source projects.

Continuously Learn and Grow

It's important to continuously learn and grow as a Developer Advocate. This includes staying up-to-date with the latest trends and developments in the tech industry, and seeking out opportunities to expand your skills and knowledge. This could include attending conferences and events, taking online courses, and seeking out mentorship opportunities.

Getting started in Developer Advocacy is an exciting and rewarding journey. By developing a strong understanding of technology, building relationships with developers, creating and sharing engaging content, participating in developer communities, and continuously learning and growing, you can make a positive impact and become a valuable advocate for your company and the developer community.

Developer Relations at Sendchamp

As a DevRel at Sendchamp, I am responsible for managing the developer community and making sure that developers are able to seamlessly make use of the company's product and core APIs.

One of the key benefits of Developer Relation at Sendchamp is that it helps to foster a sense of community among developers. This is achieved through regular interactions with the developer community, such as through events, twitter spaces conversations and slack chat. Through these interactions, developers are able to ask questions, receive support, and share their experiences with others in the community. This helps to build trust and confidence in the company's products and services, which in turn leads to increased adoption and usage.

Another important aspect of Developer Relation at Sendchamp is that it focuses on ensuring that developers have a positive experience while using the company's APIs. This is achieved through providing comprehensive documentation and support, as well as through regular updates and improvements to the APIs. This helps to ensure that developers are able to quickly and easily integrate Sendchamp's APIs into their own systems and applications.

How to Send Emails with JavaScript using Sendchamp Email API

Aliyu Abubakar — Thu, 02 Feb 2023 12:22:09 +0000

Sendchamp Email API allows you to programmatically send emails to your customers.

Let’s walk through how to Send Emails with JavaScript using Sendchamp Email API step by step so you can get on to the important steps like sending Emails to your customers.

Prerequisite

Before getting started, ensure you have:

JavaScript knowledge and familiarity with Nodejs.
Nodejs installed on your machine
Sendchamp account sign up on Sendchamp.
A subscription plan.

Sending emails using Sendchamp Email API is a simple process that requires a subscription plan. To subscribe to a plan, follow these steps:

Go to your Sendchamp Dashboard and navigate to the email section.
Click on the subscription option and select a plan that suits your needs.
The subscription fee will be charged from your wallet balance on Sendchamp.

Once you have an active subscription plan, you can start sending emails to your customers using the Sendchamp Email API.

Setting up your Nodejs Application

Create a .js file, let’s call it email.js, and in the file, initialize an instance with your credentials:

const options = {
  method: 'POST',
  headers: {
    accept: 'application/json',
    'content-type': 'application/json',
    Authorization: 'Bearer ACCESS_KEY’
  },

Make sure to replace ACCESS_KEY with your correct public access key on your Sendchamp dashboard.

Sending an Email Message

The Email API takes the following parameters:

Subject: The heading of the email.
To: The email and name of the recipient.
From: The email and name of the sender.
Message body: Message format and value of the message.

The type can be either "html" or "text" and the value should be the content of the message.

Let’s try to hard-code the following parameters to test out the Email API.

For example, if you want to send an email to a recipient with the subject "Test Email" and the message 'This is the content of the message', the body of the request would look like this.

  body: JSON.stringify({
    to: [{email: 'recipient@example.com', name: 'Sender'}],
    from: {email: 'sender@example.com', name: 'Receiver'},
    message_body: {type: 'text/html', value: 'This is the content of the message'},
    subject: 'Hello world'
  })
};

fetch('https://api.sendchamp.com/api/v1/email/send', options)
  .then(response => response.json())
  .then(response => console.log(response))
  .catch(err => console.error(err));

The email has been sent successfully. Thanks for following.

Join our Slack developer community for questions you might have and valuable resources.

For quicker testing, you can import our Postman collection and test APIs on Postman

How Domain Authentication for Emails Work on Sendchamp

Aliyu Abubakar — Wed, 01 Feb 2023 18:26:36 +0000

Domain authentication is an important aspect of email communication. It verifies the identity of the sender and ensures that the emails are not marked as spam or blocked by the recipient’s email server. On Sendchamp, domain authentication is a simple process that can be completed with no coding skills.

The first step is to Sign up on Sendchamp if you don't have an account. If you already have an account, the next step is to access your Sendchamp Dashboard. From there, navigate to the email section and select the "Domain auth and SMTP" option. Fill in the details for your domain. Enter your domain name without including HTTP or HTTPS. For example, mywebsite.com or mail.mywebsite.com.

Once the information is entered, Sendchamp will provide you with a set of cname records. These records must be added to your DNS server for verification. The process of adding cname records to your DNS server may vary depending on your domain provider, but typically involves logging into your domain account and adding the records under the DNS management section.

Once the cname records have been added, the verification process can begin. Sendchamp will check that the records have been correctly added to your DNS server and verify your domain. The process may take a few hours to complete, but once it is done, your domain will be fully authenticated on Sendchamp.

With domain authentication, you can be sure that your emails are reaching your customers without any issues. It also helps to establish trust with your customers and improve the deliverability of your emails. So, domain authentication is a must-have feature if you’re looking to send high-quality, professional emails to your customers.

In conclusion, domain authentication is a straightforward process on Sendchamp, making it easy for businesses to send messages to their customers with confidence. Whether you’re communicating via WhatsApp, SMS, email, or voice, Sendchamp has you covered. With zero coding skills required, it’s the perfect platform for growing businesses looking to take their communication to the next level.

How to Verify Whatsapp Number via Sendchamp API

Aliyu Abubakar — Tue, 24 Jan 2023 13:20:20 +0000

The WhatsApp Number Validation API allows you to validate WhatsApp number to determine if a number is active or not.

Let’s walk through how to validate WhatsApp numbers with Sendchamp step by step so you can get on to the important steps like sending WhatsApp messages.

Prerequisite

Before getting started, ensure you have:

JavaScript knowledge and familiarity with Nodejs.
Nodejs installed on your machine
Sendchamp account sign up on Sendchamp.

Navigate to your Sendchamp Dashboard to get your API key in the account settings section.

Setting up your Nodejs Application

Create a .js file, let’s call it index.js, and in the file, initialize an instance with your credentials:

const options = {
  method: 'POST',
  headers: {
    accept: 'application/json',
    'content-type': 'application/json',
    Authorization: 'Bearer ACCESS_KEY’
  },

Make sure to replace ACCESS_KEY with your correct public access key on your Sendchamp dashboard.

Validate WhatsApp Number

The WhatsApp Number validation API takes only one parameter, which is the WhatsApp phone number you want to validate.

Let’s try to hard-code a WhatsApp phone number which should start with a country code, e.g. “2349039099438” to test out the WhatsApp Number validation API:

body: JSON.stringify({"phone_number": "2349039099438",)
};
fetch('https://api.sendchamp.com/api/v1/whatsapp/validate', options)
  .then(response => response.json())
  .then(response => console.log(response))
  .catch(err => console.error(err));

Let’s look at the response.

{
    "code": 200,
    "data": {
        "is_valid": true,
        "phone_number": "2349039099438"
    },
    "errors": null,
    "message": "whatsapp number validated",
    "status": "success"
}

The response shows that the phone number was validated and active. Thanks for following up.

Join Sendchamp Slack developer community for questions you might have and valuable resources.

For quicker testing, you can import our Postman collection and test APIs on Postman

Sending SMS with nodejs using sendchamp SMS API

Aliyu Abubakar — Wed, 07 Dec 2022 11:50:23 +0000

The Sendchamp SMS API allows you to send SMS anywhere around the world. With your verified Sender ID, you can use the SMS API to facilitate outbound messages.

In this article, you will learn how to send SMS messages with Node.js.

Prerequisite

Before you can get started, make sure you have:

JavaScript knowledge and familiarity with nodejs.
Nodejs installed on your machine
Sendchamp account

To get started with Sendchamp SMS API, sign up on Sendchamp to get your API credentials. Once you signed up, go to your Sendchamp Dashboard to get your API key in the account settings section and you will find APIs & Webhook.

Setting up your Nodejs Application

Create a .js file, let’s call it index.js, and in the file, initialize an instance with your credentials:

var request = require('request');
var options = {
  'method': 'POST',
  'url': 'https://api.sendchamp.com/api/v1/sms/send',
  'headers': {
    'Accept': 'application/json',
    'Authorization': 'Bearer ACCESS_KEY',
    'Content-Type': 'application/json'
  },

Make sure to replace ACCESS_KEY with your correct public access key on your sendchamp dashboard.

Sending SMS Messages

To send a message, pass the Sender ID you are sending the message from, a recipient number, message to be sent and the route.

Let’s try to hard-code a phone number (which should start with a country code, e.g. “2349039099438”) and a message to test out the SMS API:

body: JSON.stringify({"to":["2349039099438"],"message":"Testing Sendchamp SMS API","sender_name":"Sendchamp", "route":"dnd"})
};
request(options, function (error, response) {
  if (error) throw new Error(error);
  console.log(response.body);
});

Let’s see if we will get an SMS.

Leave a comment if you need further clarifications. You can join our developer community here