DEV Community: Oluyemi

Guide to server-side rendering with Deno and React

Oluyemi — Thu, 10 Jun 2021 18:35:40 +0000

Summary

In this tutorial, we will take a look at server-side rendering with Deno and React. To get a proper hang of the fundamental concepts, we will start by discovering what Deno is, and how it compares to Node in terms of security, package management, and so on.

Introduction

"Using Node is like nails on a chalkboard."

Ryan Dahl, creator of Node.js at 2018 JSConf EU.

While Node is still considered a great server-side JavaScript runtime and used by a large community of Software Engineers, even its creator admits that it leaves a lot to be desired. That's why he created Deno.js.

What is Deno?

As stated on its official website, Deno is a simple and secured runtime for JavaScript and TypeScript. According to Ryan, it was created to fix some of the design mistakes made when Node was created. It is gaining popularity and gradually getting adopted by the JavaScript and TypeScript community.

Why Deno?

There are quite a few reasons to choose Deno over Node.js.

The first is package management. With Node.js, packages dependencies are declared in a package.json file. The packages are then downloaded to the node_modules folder. This can make the project bloated, unwieldy, and sometimes difficult to manage. Deno takes a different approach to handle package dependencies. In Deno, package dependencies are installed directly from a provided URL and stored centrally. Additionally, every package is cached on the hard drive after installation which means they don’t have to be re-downloaded for subsequent projects.
The second key advantage is security. By default, Deno takes an opt-in approach where you have to specify the permissions for the application. This means that Deno scripts cannot (for example) access the hard drive, environment, or open network connections without permission. This not only prevents unwanted side-effects in our application but also reduces the impact of potentially malicious packages on our application.
Deno also provides TypeScript support by default which means that one can take advantage of all the benefits of static typing without any additional configuration.

What is server-side rendering?

Server-side rendering (SSR) is the process of rendering web pages on a server and passing them to the browser instead of rendering them in the browser (client-side).

This has the advantage of making applications more performant as most of the resource-intensive operations are handled server-side. It also makes Single Page Applications (SPA) more optimized for SEO as the SSR content can be crawled by search engine bots.

What we will build

In this tutorial, we will build a movie application to show some bestselling movies and A-list actors. Sanity.io will be used for the backend to manage contents, which includes creating, editing, and updating data for the project. While Deno and React will be used for the front end and server-side rendering respectively. Tailwind CSS will be used to style the application UI.

Prerequisites

To keep up with the concepts that will be introduced in this article, you will need a fair grasp of ES6. You will also need to have a basic understanding of React and TypeScript.

Additionally, you will also need to have the following installed locally. Please click on each one for instructions on how to download:

Deno
Node Package Manager (NPM)
Sanity CLI
A code editor of your choice. For example, VS Code.

Getting started

To get started, create a new directory in your terminal.

mkdir sanity-deno

cd sanity-deno

In the sanity-deno directory, create a new directory called frontend. This will hold the components for our React UI along with the code for handling SSR using Deno.

mkdir frontend

In the frontend directory, create two new directories, ssr and components.

mkdir frontend/ssr frontend/components

Setting up SSR

In the ssr directory, create a new file named server.tsx to hold our server side code.

cd frontend/ssr

touch server.tsx

For our Deno server, we are using the Oak middleware framework, which is a framework for Deno's HTTP server. It is similar to Koa and Express and the most popular choice for building web applications with Deno. In server.tsx, add the following code:

// frontend/ssr/server.tsx

import { Application, Router } from 'https://deno.land/x/oak@v7.3.0/mod.ts';

const app = new Application();
const port: number = 8000;

const router = new Router();
router.get("/", (context) => {
    context.response.body =
        `<!DOCTYPE html>
                 <html lang="en">
                 <head>
               <meta charset="UTF-8">
               <meta name="viewport" content="width=device-width, initial-scale=1.0">
                 <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
               <title>Sanity <-> Deno</title>
                 </head>
                 <body>
               <div id="root">
           <h1> Deno and React with Sanity</h1>
                 </div>
                 </body>
                 </html>`;
});

app.use(router.routes());
app.use(router.allowedMethods());

app.listen({port});
console.log(`server is running on port: ${port}`);

Using the Application and Router modules imported from the Oak framework, we create a new application that listens to requests on port 8000 of the local workstation. We've also added an index route that returns the HTML content to be displayed by the browser. Tailwind is added to the project via the link declared in the head of the HTML element.

With this in place we can test our deno server. Run the following command (within the ssr directory).

deno run --allow-net server.tsx

In this command, we specify server.ts as the entry point for the deno application. We also use the --allow-net command to grant the application permission to access network connections.

Navigate to http://localhost:8000 and you will see:

Stop your application for now by pressing Ctrl + C.

Adding other dependencies

In the frontend directory, create a file named dep.ts

touch frontend/dep.ts

The dep.ts file will contain the frontend project dependencies. This is in line with the deno convention for managing dependencies. Our application will import the following packages:

React, ReactDOM and ReactDOMServer for our React UI.
React Router to handle routing between components
The Sanity image-url builder

Add the following dependencies to dep.ts

// @deno-types="https://denopkg.com/soremwar/deno_types/react/v16.13.1/react.d.ts"
import React from "https://jspm.dev/react@17.0.2";
// @deno-types="https://denopkg.com/soremwar/deno_types/react-dom/v16.13.1/server.d.ts"
import ReactDOMServer from "https://jspm.dev/react-dom@17.0.2/server";
// @deno-types="https://denopkg.com/soremwar/deno_types/react-dom/v16.13.1/react-dom.d.ts"
import ReactDOM from "https://jspm.dev/react-dom@17.0.2";
import imageURLBuilder from "https://cdn.skypack.dev/@sanity/image-url@0.140.22";
export {
  BrowserRouter,
  StaticRouter,
  Link,
  Route,
  Switch,
} from "https://cdn.skypack.dev/react-router-dom";
export { React, ReactDOM, ReactDOMServer, imageURLBuilder };

We use the @deno-types annotation to specify a URL where the React and ReactDOMServer types can be found. You can read more about providing types when importing here.

Creating the app component

Next, create the App component. In the frontend/components directory, create a file named App.tsx.

In App.tsx add the following:

// frontend/components/App.tsx

import { React } from "../dep.ts";

const App = () => <h1> App Component for Deno and React with Sanity</h1>;

export default App;

Here, we are still returning a h1 tag but this will serve as the entry point for React as we build further.

Rendering components via SSR

At the moment, we're returning HTML from the deno server but we also need to render our react components server side. To do this, update ssr/server.tsx to match the following:

// frontend/ssr/server.tsx

import { Application, Router } from 'https://deno.land/x/oak@v7.3.0/mod.ts';
import { ReactDOMServer, React } from "../dep.ts";
import App from "../components/App.tsx";

const app = new Application();
const port: number = 8000;

const router = new Router();
router.get("/", (context) => {
  context.response.body = `
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
    <title>Sanity <-> Deno</title>
</head>
<body >
    <div id="root">${ReactDOMServer.renderToString(<App />)}
    </div>
</body>
</html>`;
});

app.use(router.routes());
app.use(router.allowedMethods());

app.listen({ port });
console.log(`server is running on port: ${port}`);

Using the renderToString function, we are able to render our App component in the body of the HTML returned by our deno server.

Restart the application using the npm run start command and you will see the new body is reflected.

With this in place, we actually have our SSR set up. Let's add some content to our application by building the backend with Sanity.

Setting up the backend

In the sanity-deno directory, create a new directory called backend. Initialize a new Sanity project in the backend directory.

mkdir sanity-deno/backend

cd backend 

sanity init

You will be prompted to provide some information. Proceed as follows:

Select the Create new project option
Name the project react_deno-backend
Use the default dataset configuration (press Y)
Select the project output path (by default it would be the backend directory)
Select the movie project (schema + sample data) option. Using the arrow keys, navigate to that option and press enter when it turns blue.
Upload a sampling of sci-fi movies to your dataset on the hosted backend (press Y)

The Sanity CLI will bootstrap a project from the movie template, link the needed dependencies and populate the backend with some science fiction movies. Once the process is completed, you can run your studio. By default, the studio runs at http://localhost:3333.

sanity start

Your studio will be similar to the screenshot below.

To connect our frontend application with Sanity, we need the projectId and dataset used for our Sanity project. You can find this in the api node of backend/sanity.json. Make a note of it as we will be using it later on.

We also need to enable CORS on our backend to ensure that it honors requests made by the application. By default, the only host that can connect to the project API is the sanity studio (http://localhost:3333). Before we can make requests to the API, we need to add the host for our application (http://localhost:8000/) to the permitted origins. To do this, open your Sanity Content Studio. This will show you all the Sanity projects you have initialized. Select the project we are working on (react_deno-backend) and click on the Settings tab. Click on the API menu option. In the CORS Origins section, click the Add new origin button. In the form that is displayed, type http://localhost:8000 as the origin. Click the Add new origin button to save the changes made.

Creating a client for sanity studio

We need a client that will help us connect and retrieve data from our Sanity studio. In the frontend directory, create a new file called SanityAPI.ts.

touch frontend/SanityAPI.ts

Rune Botten created a sample client we can use with deno here. We will use this as a foundation and make some slight modifications to suit our use case. Add the following code to frontend/SanityAPI.ts.

// frontend/SanityAPI.ts

type SanityClientOptions = {
  projectId: string;
  dataset: string;
    apiVersion: string;
  token?: string;
  useCdn?: boolean;
};

type QueryParameters = Record<string, string | number>;

const sanityCredentials = {
    projectId: "INSERT_YOUR_PROJECT_ID_HERE",
    dataset: "production",
};

const sanityClient = (options: SanityClientOptions) => {
  const { useCdn, projectId, dataset, token, apiVersion } = options;
  const hasToken = token && token.length > 0;
  const baseHost = useCdn && !hasToken ? "apicdn.sanity.io" : "api.sanity.io";
  const endpoint = `https://${projectId}.${baseHost}/v${apiVersion}/data/query/${dataset}`;

  // Parse JSON and throw on bad responses
  const responseHandler = (response: Response) => {
    if (response.status >= 400) {
      throw new Error([response.status, response.statusText].join(" "));
    }
    return response.json();
  };

  // We need to prefix groq query params with `$` and quote the strings
  const transformedParams = (parameters: QueryParameters) =>
    Object.keys(parameters).reduce<QueryParameters>((prev, key) => {
      prev[`$${key}`] = JSON.stringify(parameters[key]);
      return prev;
    }, {});

  return {
    fetch: async (query: string, parameters?: QueryParameters) => {
      const urlParams = new URLSearchParams({
        query,
        ...(parameters && transformedParams(parameters)),
      });

      const url = new URL([endpoint, urlParams].join("?"));
      const request = new Request(url.toString());

      if (hasToken) {
        request.headers.set("Authorization", `Bearer ${token}`);
      }

      return (
        fetch(request)
          .then(responseHandler)
          // The query results are in the `result` property
          .then((json) => json.result)
      );
    },
  };
};

export const runQuery = async (
  query: string,
  callback: (json: any[]) => void
) => {
  const client = sanityClient({
    ...sanityCredentials,
    useCdn: false,
        apiVersion: "2021-03-25"
  });
  await client.fetch(query).then(callback);
};

export const urlFor = (source: any) =>
  imageURLBuilder(sanityCredentials).image(source);

Note the runQuery function. We provide a GROQ query as the first parameter, the second is a callback function to be executed on the response to the provided query. This function will be called anytime we need to pull data from our backend.

We also added a helper function named urlFor which will be used to generate image URLs for images hosted on Sanity.

Lastly, don't forget to replace the INSERT_YOUR_PROJECT_ID_HERE placeholder with your projectId as obtained earlier.

Building the components

Our application will display the movies and actors saved on our Sanity Content Lake. In the components directory, create a directory named movie to hold movie-related components and another named actor to hold actor-related components.

mkdir frontend/components/actor frontend/components/movie

In the movie directory, create two files named Movies.tsx and Movie.tsx. In the Movies.tsx, add the following:

// frontend/components/movie/Movies.tsx

import { React } from "../../dep.ts";
import Movie from "./Movie.tsx";
import { runQuery } from "../../SanityAPI.ts";

const { useState, useEffect } = React;
const Movies = () => {
  const [movies, setMovies] = useState<any>([]);
  const updateMovies = (movies: any[]) => {
    setMovies(movies);
  };
  useEffect(() => {
    const query = `*[_type == 'movie']{_id, title, overview, releaseDate, poster}`;
    runQuery(query, updateMovies);
  }, []);

  return (
    <div className="container mx-auto px-6">
      <h3 className="text-gray-700 text-2xl font-medium">
        Bestselling Sci-fi Movies
      </h3>
      <div className="p-10 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-1 xl:grid-cols-3 gap-5">
        {movies.map((movie: any) => (
          <Movie key={movie._id} {...movie} />
        ))}
      </div>
    </div>
  );
};

export default Movies;

In this component, we make a GROQ request to the Sanity API using the helper client we created earlier. In our query, we request for the id, title, overview, release date and poster image for all the movies on our backend.

Next, add the following to Movie.tsx.

// frontend/components/movie/Movie.tsx

import { React } from "../../dep.ts";
import { urlFor } from "../../SanityAPI.ts";

const Movie:React.FC<any> = ({ title, overview, releaseDate, poster }) => {
  return (
      <div className="max-w-xs rounded overflow-hidden shadow-lg my-2">
        <img
          src={`${urlFor(poster.asset._ref)}`}
          alt={title}
        />
        <div className="px-6 py-4">
          <h3 className="text-xl mb-2 text-center">{title}</h3>
          <p className="text-md justify-start">
            {overview[0].children[0].text}
          </p>
        </div>
        <div className="align-bottom">
          <p className="text-gray text-center text-xs font-medium my-5">
            Released on {new Date(releaseDate).toDateString()}
          </p>
        </div>
      </div>
  );
};

export default Movie;

Using Tailwind, we design a card that holds the poster image for the movie with the image URL generated by the urlFor helper function we declared earlier. We are also displaying the other details provided by the Movies component.

As we did for the movies, create two files named Actor.tsx and Actors.tsx in the actor directory. Add the following to Actor.tsx

// frontend/components/actor/Actor.tsx

import { React } from "../../dep.ts";
import { urlFor } from "../../SanityAPI.ts";

const Actor: React.FC<any> = ({ name, image }) => {
  const defaultImageURL =
    "https://images.vexels.com/media/users/3/140384/isolated/preview/fa2513b856a0c96691ae3c5c39629f31-girl-profile-avatar-1-by-vexels.png";
  return (
    <>
      <div className="max-w-xs rounded overflow-hidden shadow-lg my-2">
        <img
          className="w-full"
          src={`${image ? urlFor(image.asset._ref) : defaultImageURL}`}
          alt={name}
        />
        <div className="px-6 py-4">
          <h3 className="text-xl mb-2 text-center">{name}</h3>
        </div>
      </div>
    </>
  );
};

export default Actor;

For actors, we only display their picture and name. Because we don't have pictures of all the actors in our backend, we specify an image url to be used if a picture is not available.

Next, in the Actors.tsx file, add the following:

// frontend/components/actor/Actors.tsx

import { React } from "../../dep.ts";
import { runQuery } from "../../SanityAPI.ts";
import Actor from "./Actor.tsx";

const { useState, useEffect } = React;
const Actors = () => {
  const [actor, setActors] = useState<any>([]);
  const updateActors = (actors: any[]) => {
    setActors(actors);
  };
  useEffect(() => {
    const query = `*[_type == 'person']{ _id, name, image}`;
    runQuery(query, updateActors);
  }, []);

  return (
    <div className="container mx-auto px-6">
      <h3 className="text-gray-700 text-2xl font-medium">A-List Movie Stars</h3>
      <div className="p-10 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-1 xl:grid-cols-3 gap-5">
        {actor.map((actor: any) => (
          <Actor key={actor._id} {...actor} />
        ))}
      </div>
    </div>
  );
};

export default Actors;

Here, we make a GROQ query to retrieve all the actors in our backed and map through the returned array, rendering and Actor component for each object in the array.

With these in place, we can update our App.tsx file as follows:

// frontend/components/App.tsx

import { React, Link, Route, Switch } from "../dep.ts";
import Movies from "./movie/Movies.tsx";
import Actors from "./actor/Actors.tsx";

const App = () => {
  return (
    <div className="bg-white">
      <header>
        <div className="container mx-auto px-6 py-3">
          <nav className="sm:flex sm:justify-center sm:items-center mt-4">
            <div className="flex flex-col sm:flex-row">
              <Link
                to="/movies"
                className="mt-3 text-gray-600 hover:underline sm:mx-3 sm:mt-0"
              >
                Movies
              </Link>
              <Link
                to="/actors"
                className="mt-3 text-gray-600 hover:underline sm:mx-3 sm:mt-0"
              >
                Actors
              </Link>
            </div>
          </nav>
        </div>
      </header>
      <main className="my-8">
        <Switch>
          <Route path="/" exact>
            <Movies />
          </Route>
          <Route path="/movies">
            <Movies />
          </Route>
          <Route path="/actors">
            <Actors />
          </Route>
        </Switch>
      </main>
    </div>
  );
};

export default App;

Here, we implement the client side routing for the React UI as well as style the container for the components.

Hydrating our application

At the moment, our application HTML is generated server-side. However, our application will not have the desired functionality because our JavaScript functionality isn't loaded on our page -clicking any link will trigger another render server-side instead of the routing being handled client-side. To fix this, we need to hydrate our React application as well as provide the JavaScript to be loaded client-side. This way, once the index page is loaded, the JavaScript will take over and handle everything else.

Let's start by creating the JavaScript to be used client-side. In the ssr directory, create a new file called client.tsx. In it, add the following:

// frontend/ssr/client.tsx

import { React, ReactDOM, BrowserRouter } from "../dep.ts";
import App from "../components/App.tsx";

ReactDOM.hydrate(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

Notice, we've also added a BrowserRouter to handle client-side routing once the page is loaded.

Next, we need to modify the ssr/server.tsx file to include the JavaScript bundle created (by Deno) from the ssr/client.tsx file. We also need to add a route that will allow the browser to download the bundled Javascript to be loaded client-side.

Update ssr/server.tsx to match the following:

// frontend/ssr/server.tsx

import { Application, Router } from 'https://deno.land/x/oak@v7.3.0/mod.ts';
import {
  React,
  ReactDOMServer,
  StaticRouter,
} from "../dep.ts";
import App from "../components/App.tsx";

const app = new Application();
const port: number = 8000;

const jsBundlePath = "/main.js";

const { diagnostics, files } = await Deno.emit("./ssr/client.tsx", {
  bundle: "esm",
  compilerOptions: { lib: ["dom", "dom.iterable", "esnext"] },
});

console.log(diagnostics);

const router = new Router();
router
  .get("/", (context) => {
    const app = ReactDOMServer.renderToString(
      <StaticRouter location={context.request.url} context={context}>
        <App />
      </StaticRouter>
    );
    context.response.type = "text/html";
    context.response.body = `
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
    <title>Sanity <-> Deno</title>
    <script type="module" src="${jsBundlePath}"></script>
</head>
<body>
    <div id="root">${app}
    </div>
</body>
</html>`;
  })
  .get(jsBundlePath, (context) => {
    context.response.type = "application/javascript";
    context.response.body = files["deno:///bundle.js"];
  });

app.addEventListener("error", (event) => {
  console.error(event.error);
});

app.use(router.routes());
app.use(router.allowedMethods());

app.listen({ port });
console.log(`Server is running on port ${port}`);

We specify the bundled Javascript path as /main.js and added it as a route to our oak application.

Next using the Deno.emit() compiler API, we transpile and bundle our client.tsx file into JavaScript that can be run on the browser. We also update the JSX for the index page to include a script tag pointing to our bundle path.

The Deno.emit() is currently marked as unstable which means we need to give our application explicit permission to perform this operation. We do this with the --unstable flag.

With this in place, our server side rendered app is ready for a test run. Start your Sanity project (if you stopped it).

cd backend

sanity start

Then run your deno application using the command below

cd frontend

deno run --allow-net --unstable --allow-read ./ssr/server.tsx

Navigate to http://localhost:8000/ to see your application in action.

Conclusion

Deno is relatively new in the world of web development but it is gradually gaining popularity and acceptance due to some of its advantages over Node.js. As seen in this tutorial, we learned about Deno and why it was built. We then proceeded to build a server-side rendered movie application using Deno and React.

For proper content management, we leverage the existing infrastructure put in place by Sanity to build the backend of the application. I hope this tutorial has given you some insight into what Deno is, and how to combine it with a frontend framework such as React.

The complete source code for the application built in this tutorial can be found here on GitHub. Happy coding!

How To Build a Customer List Management App with React and TypeScript

Oluyemi — Mon, 17 Jun 2019 18:47:34 +0000

The author selected the Tech Education Fund to receive a donation as part of the Write for DOnations program.

Introduction

TypeScript has brought a lot of improvement into how JavaScript developers structure and write code for apps, especially web applications. Defined as a superset of JavaScript, TypeScript behaves identically to JavaScript but with extra features designed to help developers build larger and more complex programs with fewer or no bugs. TypeScript is increasingly gaining popularity; adopted by major companies like Google for the Angular web framework. The Nest.js back-end framework was also built with TypeScript.

One of the ways to improve productivity as a developer is the ability to implement new features as quickly as possible without any concern over breaking the existing app in production. To achieve this, writing statically typed code is a style adopted by many seasoned developers. Statically typed programming languages like TypeScript enforce an association for every variable with a data type; such as a string, integer, boolean, and so on. One of the major benefits of using a statically typed programming language is that type checking is completed at compile time, therefore developers can see errors in their code at a very early stage.

React is an open-source JavaScript library, which developers use to create high-end user interfaces for scalable web applications. The great performance and dynamic user interfaces built with React for single-page applications make it a popular choice among developers.

In this tutorial, you will create a customer list management application with a separate REST API backend and a frontend built with React and TypeScript. You will build the backend using a fake REST API named json-server. You'll use it to quickly set up a CRUD (Create, Read, Update, and Delete) backend. Consequently you can focus on handling the front-end logic of an application using React and TypeScript.

Prerequisites

To complete this tutorial, you will need:

A local installation of Node.js (at least v6) and npm (at least v5.2). Node.js is a JavaScript run-time environment that allows you to run your code outside of the browser. It comes with a pre-installed package manager called npm, which lets you install and update packages. To install these on macOS or Ubuntu 18.04, follow the steps in How to Install Node.js and Create a Local Development Environment on macOS or the "Installing Using a PPA" section of How To Install Node.js on Ubuntu 18.04.
A local installation of Yarn; follow these steps to install Yarn on your operating system.
A basic understanding of TypeScript and JavaScript.
A text editor installed; such as Visual Studio Code, Atom, or Sublime Text.

Step 1 — Installing TypeScript and Creating the React Application

In this step, you will install the TypeScript package globally on your machine by using the Node Package Manager (npm). After that, you will also install React and its dependencies, and check that your React app is working by running the development server.

To begin, open a terminal and run the following command to install TypeScript:

npm install -g typescript

Once the installation process is complete, execute the following command to check your installation of TypeScript:

tsc -v

You will see the current version installed on your machine:

Output
Version 3.4.5

Next, you will install the React application by using the create-react-app tool to set up the application with a single command. You'll use the npx command, which is a package runner tool that comes with npm 5.2+. The create-react-app tool has built-in support for working with TypeScript without any extra configuration required. Run the following command to create and install a new React application named typescript-react-app:

npx create-react-app typescript-react-app --typescript

The preceding command will create a new React application with the name typescript-react-app. The --typescript flag will set the default filetype for React components to .tsx.

Before you complete this section, the application will require moving from one port to another. To do that, you will need to install a routing library for your React application named React Router and its corresponding TypeScript definitions. You will use yarn to install the library and other packages for this project. This is because yarn is faster, especially for installing dependencies for a React application. Move into the newly created project folder and then install React Router with the following command:

cd typescript-react-app
yarn add react-router-dom

You now have the React Router package, which will provide the routing functionality within your project. Next, run the following command to install the TypeScript definitions for React Router:

yarn add @types/react-router-dom

Now you'll install axios, which is a promised-based HTTP client for browsers, to help with the process of performing HTTP requests from the different components that you will create within the application:

yarn add axios

Once the installation process is complete, start the development server with:

yarn start

Your application will be running on http://localhost:3000.

You have successfully installed TypeScript, created a new React application, and installed React Router in order to help with navigating from one page of the application to another. In the next section, you will set up the back-end server for the application.

Step 2 — Creating a JSON Server

In this step, you'll create a mock server that your React application can quickly connect with, as well as use its resources. It is important to note that this back-end service is not suitable for an application in production. You can use Nest.js, Express, or any other back-end technology to build a RESTful API in production. json-server is a useful tool whenever you need to create a prototype and mock a back-end server.

You can use either npm or yarn to install json-server on your machine. This will make it available from any directory of your project whenever you might need to make use of it. Open a new terminal window and run this command to install json-server while you are still within the project directory:

yarn global add json-server

Next, you will create a JSON file that will contain the data that will be exposed by the REST API. For the objects specified in this file (which you'll create), a CRUD endpoint will be generated automatically. To begin, create a new folder named server and then move into it:

mkdir server
cd server

Now, use nano to create and open a new file named db.json:

nano db.json

Add the following content to the file:

    {
        "customers": [
            {
                "id": 1,
                "first_name": "Customer_1",
                "last_name": "Customer_11",
                "email": "customer1@mail.com",
                "phone": "00000000000",
                "address": "Customer_1 Address",
                "description": "Customer_1 description"
            },
            {
                "id": 2,
                "first_name": "Customer_2",
                "last_name": "Customer_2",
                "email": "customer2@mail.com",
                "phone": "00000000000",
                "address": "Customer_2 Adress",
                "description": "Customer_2 Description"
            }
        ]
    }

The JSON structure consists of a customer object, which has two datasets assigned. Each customer consists of seven properties: id, description, first_name, last_name, email, phone, and address.

Save and exit the file.

By default, the json-server runs on port 3000—this is the same port on which your React application runs. To avoid conflict, you can change the default port for the json-server. To do that, move to the root directory of the application:

cd ~/typescript-react-app

Open the application with your preferred text editor and create a new file named json-server.json:

nano json-server.json

Now insert the following to update the port number:

{
    "port": 5000
}

This will act as the configuration file for the json-server and it will ensure that the server runs on the port specified in it at all times.

Save and exit the file.

To run the server, use the following command:

json-server --watch server/db.json

This will start the json-server on port 5000. If you navigate to http://localhost:5000/customers in your browser, you will see the server showing your customer list.

To streamline the process of running the json-server, you can update package.json with a new property named server to the scripts object as shown here:

{
...
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "server": "json-server --watch server/db.json"
  },
...
}

Save and exit the file.

Now anytime you wish to start the json-server, all you have to do is run yarn server from the terminal.

You've created a simple REST API that you will use as the back-end server for this application. You also created a customer JSON object that will be used as the default data for the REST API. Lastly, you configured an alternative port for the back-end server powered by json-server. Next, you will build reusable components for your application.

Step 3 — Creating Reusable Components

In this section, you will create the required React components for the application. This will include components to create, display, and edit the details of a particular customer in the database respectively. You'll also build some of the TypeScript interfaces for your application.

To begin, move back to the terminal where you have the React application running and stop the development server with CTRL + C. Next, navigate to the ./src/ folder:

cd ./src/

Then, create a new folder named components inside of it and move into the new folder:

mkdir components
cd components

Within the newly created folder, create a customer folder and then move into it:

mkdir customer
cd customer

Now create two new files named Create.tsx and Edit.tsx:

touch Create.tsx Edit.tsx

These files are React reusable components that will render the forms and hold all the business logic for creating and editing the details of a customer respectively.

Open the Create.tsx file in your text editor and add the following code:

    import * as React from 'react';
    import axios from 'axios';
    import { RouteComponentProps, withRouter } from 'react-router-dom';

    export interface IValues {
        first_name: string,
        last_name: string,
        email: string,
        phone: string,
        address: string,
        description: string,
    }
    export interface IFormState {
        [key: string]: any;
        values: IValues[];
        submitSuccess: boolean;
        loading: boolean;
    }

Here you've imported React, axios, and other required components necessary for routing from the React Router package. After that you created two new interfaces named IValues and IFormState. TypeScript interfaces help to define the specific type of values that should be passed to an object and enforce consistency throughout an application. This ensures that bugs are less likely to appear in your program.

Next, you will build a Create component that extends React.Component. Add the following code to the Create.tsx file immediately after the IFormState interface:

    class Create extends React.Component<RouteComponentProps, IFormState> {
        constructor(props: RouteComponentProps) {
            super(props);
            this.state = {
                first_name: '',
                last_name: '',
                email: '',
                phone: '',
                address: '',
                description: '',
                values: [],
                loading: false,
                submitSuccess: false,
            }
        }
    }
    export default withRouter(Create)

Here you've defined a React component in Typescript. In this case, the Create class component accepts props (short for “properties”) of type RouteComponentProps and uses a state of type IFormState. Then, inside the constructor, you initialized the state object and defined all the variables that will represent the rendered values for a customer.

Next, add these methods within the Create class component, just after the constructor. You'll use these methods to process customer forms and handle all changes in the input fields:

              values: [],
              loading: false,
              submitSuccess: false,
          }
      }

      private processFormSubmission = (e: React.FormEvent<HTMLFormElement>): void => {
              e.preventDefault();
              this.setState({ loading: true });
              const formData = {
                  first_name: this.state.first_name,
                  last_name: this.state.last_name,
                  email: this.state.email,
                  phone: this.state.phone,
                  address: this.state.address,
                  description: this.state.description,
              }
              this.setState({ submitSuccess: true, values: [...this.state.values, formData], loading: false });
              axios.post(`http://localhost:5000/customers`, formData).then(data => [
                  setTimeout(() => {
                      this.props.history.push('/');
                  }, 1500)
              ]);
          }

          private handleInputChanges = (e: React.FormEvent<HTMLInputElement>) => {
              e.preventDefault();
              this.setState({
                  [e.currentTarget.name]: e.currentTarget.value,
          })
      }

    ...
    export default withRouter(Create)
    ...

The processFormSubmission() method receives the details of the customer from the application state and posts it to the database using axios. The handleInputChanges() uses React.FormEvent to obtain the values of all input fields and calls this.setState() to update the state of the application.

Next, add the render() method within the Create class component immediately after the handleInputchanges() method. This render() method will display the form to create a new customer in the application:

      public render() {
          const { submitSuccess, loading } = this.state;
          return (
              <div>
                  <div className={"col-md-12 form-wrapper"}>
                      <h2> Create Post </h2>
                      {!submitSuccess && (
                          <div className="alert alert-info" role="alert">
                              Fill the form below to create a new post
                      </div>
                      )}
                      {submitSuccess && (
                          <div className="alert alert-info" role="alert">
                              The form was successfully submitted!
                              </div>
                      )}
                      <form id={"create-post-form"} onSubmit={this.processFormSubmission} noValidate={true}>
                          <div className="form-group col-md-12">
                              <label htmlFor="first_name"> First Name </label>
                              <input type="text" id="first_name" onChange={(e) => this.handleInputChanges(e)} name="first_name" className="form-control" placeholder="Enter customer's first name" />
                          </div>
                          <div className="form-group col-md-12">
                              <label htmlFor="last_name"> Last Name </label>
                              <input type="text" id="last_name" onChange={(e) => this.handleInputChanges(e)} name="last_name" className="form-control" placeholder="Enter customer's last name" />
                          </div>
                          <div className="form-group col-md-12">
                              <label htmlFor="email"> Email </label>
                              <input type="email" id="email" onChange={(e) => this.handleInputChanges(e)} name="email" className="form-control" placeholder="Enter customer's email address" />
                          </div>
                          <div className="form-group col-md-12">
                              <label htmlFor="phone"> Phone </label>
                              <input type="text" id="phone" onChange={(e) => this.handleInputChanges(e)} name="phone" className="form-control" placeholder="Enter customer's phone number" />
                          </div>
                          <div className="form-group col-md-12">
                              <label htmlFor="address"> Address </label>
                              <input type="text" id="address" onChange={(e) => this.handleInputChanges(e)} name="address" className="form-control" placeholder="Enter customer's address" />
                          </div>
                          <div className="form-group col-md-12">
                              <label htmlFor="description"> Description </label>
                              <input type="text" id="description" onChange={(e) => this.handleInputChanges(e)} name="description" className="form-control" placeholder="Enter Description" />
                          </div>
                          <div className="form-group col-md-4 pull-right">
                              <button className="btn btn-success" type="submit">
                                  Create Customer
                              </button>
                              {loading &&
                                  <span className="fa fa-circle-o-notch fa-spin" />
                              }
                          </div>
                      </form>
                  </div>
              </div>
          )
      }

Here, you created a form with the input fields to hold the values of the first_name, last_name, email, phone, address, and description of a customer. Each of the input fields have a method handleInputChanges() that runs on every keystroke, updating the React state with the value it obtains from the input field. Furthermore, depending on the state of the application, a boolean variable named submitSuccess will control the message that the application will display before and after creating a new customer.

You can see the complete code for this file in this GitHub repository.

Save and exit Create.tsx.

Now that you have added the appropriate logic to the Create component file for the application, you'll proceed to add contents for the Edit component file.

Open your Edit.tsx file within the customer folder, and start by adding the following content to import React, axios, and also define TypeScript interfaces:

    import * as React from 'react';
    import { RouteComponentProps, withRouter } from 'react-router-dom';
    import axios from 'axios';

    export interface IValues {
        [key: string]: any;
    }
    export interface IFormState {
        id: number,
        customer: any;
        values: IValues[];
        submitSuccess: boolean;
        loading: boolean;
    }

Similarly to the Create component, you import the required modules and create IValues and IFormState interfaces respectively. The IValues interface defines the data type for the input fields' values, while you'll use IFormState to declare the expected type for the state object of the application.

Next, create the EditCustomer class component directly after the IFormState interface block as shown here:

    ...
    class EditCustomer extends React.Component<RouteComponentProps<any>, IFormState> {
        constructor(props: RouteComponentProps) {
            super(props);
            this.state = {
                id: this.props.match.params.id,
                customer: {},
                values: [],
                loading: false,
                submitSuccess: false,
            }
        }
    }
    export default withRouter(EditCustomer)

This component takes the RouteComponentProps<any> and an interface of IFormState as a parameter. You use the addition of <any> to the RouteComponentProps because whenever React Router parses path parameters, it doesn’t do any type conversion to ascertain whether the type of the data is number or string. Since you're expecting a parameter for uniqueId of a customer, it is safer to use any.

Now add the following methods within the component:

```

...
public componentDidMount(): void {
axios.get(http://localhost:5000/customers/${this.state.id}).then(data => {
this.setState({ customer: data.data });
})
}

    private processFormSubmission = async (e: React.FormEvent<HTMLFormElement>): Promise<void> => {
        e.preventDefault();
        this.setState({ loading: true });
        axios.patch(`http://localhost:5000/customers/${this.state.id}`, this.state.values).then(data => {
            this.setState({ submitSuccess: true, loading: false })
            setTimeout(() => {
                this.props.history.push('/');
            }, 1500)
        })
    }

    private setValues = (values: IValues) => {
        this.setState({ values: { ...this.state.values, ...values } });
    }
    private handleInputChanges = (e: React.FormEvent<HTMLInputElement>) => {
        e.preventDefault();
        this.setValues({ [e.currentTarget.id]: e.currentTarget.value })
    }
...
}

export default withRouter(EditCustomer)




First, you add a `componentDidMount()` method, which is a lifecycle method that is being called when the component is created. The method takes the `id` obtained from the route parameter to identify a particular customer as a parameter, uses it to retrieve their details from the database and then populates the form with it. Furthermore, you add methods to process form submission and handle changes made to the values of the input fields.

Lastly, add the `render()` method for the `Edit` component:




    ```
   ...
        public render() {
            const { submitSuccess, loading } = this.state;
            return (
                <div className="App">
                    {this.state.customer &&
                        <div>
                            < h1 > Customer List Management App</h1>
                            <p> Built with React.js and TypeScript </p>

                            <div>
                                <div className={"col-md-12 form-wrapper"}>
                                    <h2> Edit Customer </h2>
                                    {submitSuccess && (
                                        <div className="alert alert-info" role="alert">
                                            Customer's details has been edited successfully </div>
                                    )}
                                    <form id={"create-post-form"} onSubmit={this.processFormSubmission} noValidate={true}>
                                        <div className="form-group col-md-12">
                                            <label htmlFor="first_name"> First Name </label>
                                            <input type="text" id="first_name" defaultValue={this.state.customer.first_name} onChange={(e) => this.handleInputChanges(e)} name="first_name" className="form-control" placeholder="Enter customer's first name" />
                                        </div>
                                        <div className="form-group col-md-12">
                                            <label htmlFor="last_name"> Last Name </label>
                                            <input type="text" id="last_name" defaultValue={this.state.customer.last_name} onChange={(e) => this.handleInputChanges(e)} name="last_name" className="form-control" placeholder="Enter customer's last name" />
                                        </div>
                                        <div className="form-group col-md-12">
                                            <label htmlFor="email"> Email </label>
                                            <input type="email" id="email" defaultValue={this.state.customer.email} onChange={(e) => this.handleInputChanges(e)} name="email" className="form-control" placeholder="Enter customer's email address" />
                                        </div>
                                        <div className="form-group col-md-12">
                                            <label htmlFor="phone"> Phone </label>
                                            <input type="text" id="phone" defaultValue={this.state.customer.phone} onChange={(e) => this.handleInputChanges(e)} name="phone" className="form-control" placeholder="Enter customer's phone number" />
                                        </div>
                                        <div className="form-group col-md-12">
                                            <label htmlFor="address"> Address </label>
                                            <input type="text" id="address" defaultValue={this.state.customer.address} onChange={(e) => this.handleInputChanges(e)} name="address" className="form-control" placeholder="Enter customer's address" />
                                        </div>
                                        <div className="form-group col-md-12">
                                            <label htmlFor="description"> Description </label>
                                            <input type="text" id="description" defaultValue={this.state.customer.description} onChange={(e) => this.handleInputChanges(e)} name="description" className="form-control" placeholder="Enter Description" />
                                        </div>
                                        <div className="form-group col-md-4 pull-right">
                                            <button className="btn btn-success" type="submit">
                                                Edit Customer </button>
                                            {loading &&
                                                <span className="fa fa-circle-o-notch fa-spin" />
                                            }
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    }
                </div>
            )
        }

Here, you created a form to edit the details of a particular customer, and then populated the input fields within that form with the customer's details that your application's state obtained. Similarly to the Create component, changes made to all the input fields will be handled by the handleInputChanges() method.

You can see the complete code for this file in this GitHub repository.

Save and exit Edit.tsx.

To view the complete list of customers created within the application, you’ll create a new component within the ./src/components folder and name it Home.tsx:

cd ./src/components
nano Home.tsx

Add the following content:

    import * as React from 'react';
    import { Link, RouteComponentProps } from 'react-router-dom';
    import axios from 'axios';

    interface IState {
        customers: any[];
    }

    export default class Home extends React.Component<RouteComponentProps, IState> {
        constructor(props: RouteComponentProps) {
            super(props);
            this.state = { customers: [] }
        }
        public componentDidMount(): void {
            axios.get(`http://localhost:5000/customers`).then(data => {
                this.setState({ customers: data.data })
            })
        }
        public deleteCustomer(id: number) {
            axios.delete(`http://localhost:5000/customers/${id}`).then(data => {
                const index = this.state.customers.findIndex(customer => customer.id === id);
                this.state.customers.splice(index, 1);
                this.props.history.push('/');
            })
        }
    }

Here, you've imported React, axios, and other required components from React Router. You created two new methods within the Home component:

componentDidMount(): The application invokes this method immediately after a component is mounted. Its responsibility here is to retrieve the list of customers and update the home page with it.
deleteCustomer(): This method will accept an id as a parameter and will delete the details of the customer identified with that id from the database.

Now add the render() method to display the table that holds the list of customers for the Home component:

    public render() {
            const customers = this.state.customers;
            return (
                <div>
                    {customers.length === 0 && (
                        <div className="text-center">
                            <h2>No customer found at the moment</h2>
                        </div>
                    )}
                    <div className="container">
                        <div className="row">
                            <table className="table table-bordered">
                                <thead className="thead-light">
                                    <tr>
                                        <th scope="col">Firstname</th>
                                        <th scope="col">Lastname</th>
                                        <th scope="col">Email</th>
                                        <th scope="col">Phone</th>
                                        <th scope="col">Address</th>
                                        <th scope="col">Description</th>
                                        <th scope="col">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {customers && customers.map(customer =>
                                        <tr key={customer.id}>
                                            <td>{customer.first_name}</td>
                                            <td>{customer.last_name}</td>
                                            <td>{customer.email}</td>
                                            <td>{customer.phone}</td>
                                            <td>{customer.address}</td>
                                            <td>{customer.description}</td>
                                            <td>
                                                <div className="d-flex justify-content-between align-items-center">
                                                    <div className="btn-group" style={{ marginBottom: "20px" }}>
                                                        <Link to={`edit/${customer.id}`} className="btn btn-sm btn-outline-secondary">Edit Customer </Link>
                                                        <button className="btn btn-sm btn-outline-secondary" onClick={() => this.deleteCustomer(customer.id)}>Delete Customer</button>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    )}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            )
        }

In this code block, you retrieve the lists of customers from the application's state as an array, iterate over it, and display it within an HTML table. You also add the customer.id parameter, which the method uses to identify and delete the details of a particular customer from the list.

Save and exit Home.tsx.

You've adopted a statically typed principle for all the components created with this application by defining types for the components and props through the use of interfaces. This is one of the best approaches to using TypeScript for a React application.

With this, you've finished creating all the required reusable components for the application. You can now update the app component with links to all the components that you have created so far.

Step 4 — Setting Up Routing and Updating the Entry Point of the Application

In this step, you will import the necessary components from the React Router package and configure the App component to render different components depending on the route that is loaded. This will allow you to navigate through different pages of the application. Once a user visits a route, for example /create, React Router will use the path specified to render the contents and logic within the appropriate component defined to handle such route.

Navigate to ./src/App.tsx:

nano App.tsx

Then replace its content with the following:


    import * as React from 'react';
    import './App.css';
    import { Switch, Route, withRouter, RouteComponentProps, Link } from 'react-router-dom';
    import Home from './components/Home';
    import Create from './components/customer/Create';
    import EditCustomer from './components/customer/Edit';

    class App extends React.Component<RouteComponentProps<any>> {
      public render() {
        return (
          <div>
            <nav>
              <ul>
                <li>
                  <Link to={'/'}> Home </Link>
                </li>
                <li>
                  <Link to={'/create'}> Create Customer </Link>
                </li>
              </ul>
            </nav>
            <Switch>
              <Route path={'/'} exact component={Home} />
              <Route path={'/create'} exact component={Create} />
              <Route path={'/edit/:id'} exact component={EditCustomer} />
            </Switch>
          </div>
        );
      }
    }
    export default withRouter(App);

You imported all the necessary components from the React Router package and you also imported the reusable components for creating, editing, and viewing customers' details.

Save and exit App.tsx.

The ./src/index.tsx file is the entry point for this application and renders the application. Open this file and import React Router into it, then wrap the App component inside a BrowserRouter:


    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import { BrowserRouter } from 'react-router-dom'; 
    import * as serviceWorker from './serviceWorker';
    ReactDOM.render(
        <BrowserRouter>
            <App />
        </BrowserRouter>
        , document.getElementById('root')
    );
    serviceWorker.unregister();

React Router uses the BrowserRouter component to make your application aware of the navigation, such as history and current path.

Once you've finished editing Index.tsx, save and exit.

Lastly, you will use Bootstrap to add some style to your application. Bootstrap is a popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first projects on the web. It allows developers to build an appealing user interface without having to write too much CSS. It comes with a responsive grid system that gives a web page a finished look that works on all devices.

To include Bootstrap and styling for your application, replace the contents of ./src/App.css with the following:


    @import 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css';

    .form-wrapper {
      width: 500px;
      margin: 0 auto;
    }
    .App {
      text-align: center;
      margin-top: 30px;
    }
    nav {
      width: 300px;
      margin: 0 auto;
      background: #282c34;
      height: 70px;
      line-height: 70px;
    }
    nav ul li {
      display: inline;
      list-style-type: none;
      text-align: center;
      padding: 30px;
    }
    nav ul li a {
      margin: 50px 0;
      font-weight: bold;
      color: white;
      text-decoration: none;
    }
    nav ul li a:hover {
      color: white;
      text-decoration: none;
    }
    table {
      margin-top: 50px;
    }
    .App-link {
      color: #61dafb;
    }
    @keyframes App-logo-spin {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

You have used Bootstrap here to enhance the look and feel of the application by giving it a default layout, styles, and color. You have also added some custom styles, particularly to the navigation bar.

Save and exit App.css.

In this section, you have configured React Router to render the appropriate component depending on the route visited by the user and also added some styling to make the application more attractive to users. Next, you will test all the functionality implemented for the application.

Step 5 — Running Your Application

Now that you have set up the frontend of this application with React and TypeScript by creating several reusable components, and also built a REST API with the json-server, you can run your app.

Navigate back to the project’s root folder:

cd ~/typescript-react-app

Next run the following command to start your app:

yarn start

Note: Make sure your server is still running in the other terminal window. Otherwise, start it with: yarn server.

Navigate to http://localhost:3000 to view the application from your browser. Then proceed to click on the Create button and fill in the details of a customer.

After entering the appropriate values in the input fields, click on the Create Customer button to submit the form. The application will redirect you back to your homepage once you're done creating a new customer.

Click the Edit Customer button for any of the rows and you will be directed to the page that hosts the editing functionality for the corresponding customer on that row.

Edit the details of the customer and then click on Edit Customer to update the customer’s details.

You've run your application to ensure all the components are working. Using the different pages of your application, you've created and edited a customer entry.

Conclusion

In this tutorial you built a customer list management app with React and TypeScript. The process in this tutorial is a deviation from using JavaScript as the conventional way of structuring and building applications with React. You've leveraged the benefits of using TypeScript to complete this front-end focused tutorial.

To continue to develop this project, you can move your mock back-end server to a production-ready back-end technology like Express or Nest.js. Furthermore, you can extend what you have built in this tutorial by adding more features such as authentication and authorization with different tools like the Passport.js authentication library.

You can find the complete source code for the project on GitHub.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License

Add reliable voice and video chat with Vue.js and CometChat

Oluyemi — Tue, 28 May 2019 10:57:53 +0000

Prerequisites

Basic knowledge of JavaScript and Vue.js will help you get the best out of this tutorial. To make it easy for everyone to follow along, I will endeavor to break down any complex implementation. In addition, you will also need to ensure that you have Node runtime and npm installed on your computer. Click here to install Node and follow this link to install npm if otherwise.

Introduction

Irrespective of the size of your web application, a voice, and video chat feature is an addon that will not only allow your users to communicate in real time, have a face to face interaction or meeting without necessarily being in the same location or region but also improves the engagement and interactivity of your application. While the implementation of voice and video chat might sound so cool, trust me, you don’t want to build this from scratch. This is where an awesome tool like CometChat really shines.

So rather than build a backend for your chat application from scratch, you can easily build the entire functionalities using CometChat API which will enable you to build communication features like voice and video chat in real-time.

Together in this tutorial, we will build a voice and video chat application by leveraging on some of the awesome API made available by CometChat. You will be able to run this application on two separate windows(browser) locally and have the ability to make, receive and reject a call amongst other things after a successful implementation. Once we are done, you would have built an application similar to:

This application will be built with Vue.js and CometChat Pro SDK. The complete source code for this tutorial can be found here on GitHubif you will prefer to head straight into the code.

Getting started

To begin, we will create and install a new Vue.js application using an awesome tool named Vue CLI. This is a standard tool created by the team at Vue.js to help and allow developers to quickly scaffold a new project without hassle. Run the following command from the terminal to install it globally on your computer:

npm install -g @vue/cli

Once the installation is complete, proceed to use the vue command to create a new Vue.js project as shown here:

vue create comet-voice-video

Choose the “manually select features” options by pressing Enter on your keyboard and check the features you will be needing for this project by pressing space on your computer to select one. As shown below you should select Babel, Router, and Linter / Formatter:

For other instructions, type y to use history mode for the router. Ideally, the default mode for Vue-Router is hash(#) mode as it uses the URL hash to simulate a full URL so that page won’t be reloaded when the URL changes. Choosing history mode here will help to get rid of the hash mode in order to achieve URL navigation without a page reload and add this configuration to the router file that will be generated automatically for this project. In addition, select ESLint with error prevention only in order to pick a linter / formatter config. Next, select Lint on save for additional lint features and save your configuration in a dedicated config file for future projects. Type a name for your preset, I named mine vuecomet:

Immediately after the configuration, Vue CLI will start the installation of the application and install all its required dependencies in a new folder named comet-voice-video.

Start the application

Now that the installation of the new application is completed, move into the new project and start the development server with:

// move into the app
cd comet-voice-video

// start the server
npm run serve

View the welcome page of the application on http://localhost:8080:

In addition, since we will be depending on CometChat Pro to easily build our application, let’s install the SDK before proceeding with the video chat implementation. Stop the development server from running by hitting CTRL + C on your machine and run the following command from the project directory:

npm install @cometchat-pro/chat --save

Now we can easily import CometChat object wherever we want to use CometChat within our application like this:

import { CometChat } from '@cometchat-pro/chat';

Create the CometChat Pro account, APP ID and API Key

Since we will be leveraging on the hosted service of CometChat to successfully build our voice and video chat application, head over to the website here and create a free CometChat Pro account. Fill in all the required information to set up a trial account.

Log in to view your CometChat dashboard and let’s create a new project. This will give us access to a unique APP ID and an API Key

In the ‘Add New App’ dialog, enter a name and click the plus sign to create a new application. Once you are done, click on the Explore button for the new app created. You will be redirected to a new page as shown below:

Next, from the left side menu, go to “API Keys” tab and you will see a page similar to this:

Immediately after you created a new application from your dashboard, CometChat automatically generated an API Key for the new demo application for you. You don’t need to create a new one as this will suffice and give you full access to the functionality offered by CometChat. Don’t forget to note or better still, copy the automatically-generated Full access API Key and application ID as we will need these shortly.

Now that we are done setting up all the necessary tools and credentials needed to successfully create our application, we will start building properly in a bit.

What we want to achieve

Before we start building the application properly, let’s quickly discuss the application structure and how we intend to structure the flow.

Basically, we want users to log in from different locations and be able to chat using voice and video once we host our application on a live server, but for the sake of this tutorial, we will use two different windows locally. Once the user logs in:

we will redirect to a different page where he or she can input the UID of another user and start a video chat. Each user of CometChat is uniquely identified using his or her UID, you can consider this or relate it with a typical unique primary ID of the user from your database, which gives an opportunity to identify such user:

Initialize CometChat

To begin, the typical workflow when using CometChat requires that the settings for CometChat must be initialized by calling the init() method before any other method from CometChat. To start, create a new file named .env within the root directory of the application and paste the following code in it:

// .env
VUE_APP_COMMETCHAT_API_KEY=YOUR_API_KEY

VUE_APP_COMMETCHAT_APP_ID=YOUR_APP_ID

This will make it very easy to reference and use our application credentials within our project. Don’t forget to replace YOUR_API_KEY and YOUR_APP_ID placeholder with the appropriate credentials as obtained from your CometChat dashboard.

Next, navigate to ./src/App.vue file which is the root component for Vue.js applications and replace its content with:

// ./src/App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>


<script>
import { CometChat } from "@cometchat-pro/chat";

import "./App.css";

export default {
  data() {
    return {};
  },
  created() {
    this.initializeApp();
  },
  methods: {
    initializeApp() {
      var appID = process.env.VUE_APP_COMMETCHAT_APP_ID;

      CometChat.init(appID).then(
        () => {
          console.log("Initialization completed successfully");
        },
        error => {
          console.log("Initialization failed with error:", error);
        }
      );
    }
  }
};
</script>

What we have done here is to include the functional component that will render any matched component for a given path fromVue Router. We will configure the router later in this tutorial. Next, within the section, we imported the CometChat object and a CSS file that we will create next. Lastly, we initialize CometChat by passing the application ID as a parameter.</p> <p>Now create a new file named <code>App.css</code> within <code>./src/App.css</code> and paste the following content in it:</p> <p></p> <div class="highlight"><pre class="highlight plaintext"><code>// ./src/App.css @import 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'; @import 'https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'; #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } #nav { padding: 30px; } #nav a { font-weight: bold; color: #2c3e50; } #nav a.router-link-exact-active { color: #42b983; } #auth { width: 600px; margin: 0 auto; } #callScreen { width: 500px; height: 500px; } .home { width: 600px; margin: 0 auto; } </code></pre></div> <p></p> <p>We imported the CDN files for <a href="https://getbootstrap.com/">Bootstrap</a> and <a href="https://fontawesome.com/">Font awesome</a> and then proceeded to add some default style for the application. Feel free to modify this content as you deem fit.</p> <h3> <a name="login-component" href="#login-component" class="anchor"> </a> Login component </h3> <p>One of the key concept when building chat applications with CometChat is to ensure that users are authenticated before they can have access to use CometChat and start a chat. To ensure this, we will create a Login component that will handle the logic for authenticating a user and redirecting such user to the appropriate page for a chat.</p> <p>To begin, create a new folder named auth within the views folder and within the newly created folder, create a new file and call it <code>Login.vue</code>. Open this new file and paste the following contents:</p> <p></p> <div class="highlight"><pre class="highlight plaintext"><code>// ./src/views/auth/Login.vue <template> <div id="auth"> <div id="nav"> <router-link to="/login">Login</router-link> </div> <p> Enter your username to start video chat </p> <p>Create an account through your CometChat dashboard or login with one of our test users (superhero1, superhero2)</p> <form v-on:submit.prevent="authLoginUser"> <div class="form-group"> <input name="username" id="username" class="form-control" placeholder="Enter your username" v-model="username"/> </div> <div class="form-group"> <button type="submit" class="btn btn-success"> Login <span v-if="showSpinner" class="fa fa-spin fa-spinner"></span></button> </div> </form> </div> </template> <script> import { CometChat } from "[@cometchat](http://twitter.com/cometchat)-pro/chat"; export default { data() { return { username: "", showSpinner: false }; }, methods: { authLoginUser() { var apiKey = process.env.VUE_APP_COMMETCHAT_API_KEY; this.showSpinner = true; CometChat.login(this.username, apiKey).then( () => { this.showSpinner = false; this.$router.push({ name: "home" }); }, error => { this.showSpinner = false; console.log("Login failed with error:", error.code); } ); } } }; </script> </code></pre></div> <p></p> <p>What we have done here is pretty simple. First, we included an HTML form and added an input field that will accept the username of a user during the authentication process. Once the form is submitted, it will be processed using a method named authLoginUser().</p> <p>Next within the <script> tag, we imported the CometChat object and created the authLoginUser() method attached to the form. Within the authLoginUser() method, we called the login() method from CometChat and passed our application API and the username to uniquely identify the user.</p> <p>Once the user logs into the application, we used the <a href="https://router.vuejs.org/">Vue Router</a> to redirect the user to the home page which will be handled by a different component name HomeComponent. We will create that in the next section.</p> <h3> <a name="home-component" href="#home-component" class="anchor"> </a> Home component </h3> <p>In chronological order, what we want to achieve with this component is:</p> <ul> <li>Display the <strong>UID</strong> of the currently logged in user</li> <li>Initiate a video chat</li> <li>Accept or reject a call</li> <li>And finally, be able to log out of the application.</li> </ul> <p>Let’s start adding these functionalities. To begin, open <code>./src/views/Home.vue</code> and replace its content with:</p> <p></p> <div class="highlight"><pre class="highlight plaintext"><code>// ./src/views/Home.vue <template> <div class="home"> <div id="nav"> <button class="btn btn-success" [@click](http://twitter.com/click)="logoutUser">Logout</button> </div> <div class="form-group"> <div class="form-group"> <p>Welcome <b>{{ this.username}}</b>, your UID is <b>{{ this.uid }}</b> <br> Enter the receiver Id to start a chat </p> <p v-if="error"> <b class="text-danger"> Receiver ID is required </b> </p> <input type="text" class="form-control" placeholder="Enter receiver UID" v-model="receiver_id"> </div> <div v-if="incomingCall"> <button class="btn btn-success" [@click](http://twitter.com/click)="acceptCall">Accept Call</button> <button class="btn btn-success" [@click](http://twitter.com/click)="rejectCall">Reject Call</button> </div> <div v-else-if="ongoingCall"> <button class="btn btn-secondary"> Ongoing Call ... </button> </div> <div v-else> <button [@click](http://twitter.com/click)="startVideoChat" class="btn btn-secondary"> Start Call <span v-if="showSpinner" class="fa fa-spin fa-spinner"></span> </button> </div> </div> <div id="callScreen"></div> </div> </template> </code></pre></div> <p></p> <p>Here, we added contents to display the username and the UID of the logged in user. Next, we included an input field that will accept the UID of the receiver in order to uniquely identify such user and be able to initiate or send a call request.</p> <p>Once a call request has been received, the receiver has an option of either rejecting or accepting the call. We have included click events for this process and will define the methods next.</p> <p><strong>Get the logged in user</strong></p> <p>First, let’s retrieve the details of the currently logged in user by adding this <script> section to our code. Place the contents below within the Home.vue immediately after the closing tag of the <template> section:</p> <p></p> <div class="highlight"><pre class="highlight plaintext"><code>// ./src/views/Home.vue <script> import { CometChat } from "[@cometchat](http://twitter.com/cometchat)-pro/chat"; export default { name: "home", data() { return { username: "", uid: "", session_id: "", receiver_id: null, error: false, showSpinner: false, incomingCall: false, ongoingCall: false }; }, created() { this.getLoggedInUser(); }, methods: { getLoggedInUser() { var user = CometChat.getLoggedinUser().then( user => { this.username = user.name; this.uid = user.uid; }, error => { this.$router.push({ name: "homepage" }); } ); }, } }; </script> </code></pre></div> <p></p> <p>Basically, we imported the CometChat method, defined some properties and corresponding initial values within the data option. And finally, once the component is created, we called a method named <code>getLoggedInUser()</code> to automatically retrieve the details of a logged in user and update the view with it.</p> <p><strong>Start video chat</strong></p> <p>To initiate a chat from the app, we will add this method to the function associated with the Vue instance:</p> <p></p> <div class="highlight"><pre class="highlight plaintext"><code>// ./src/views/Home.vue <script> import { CometChat } from "[@cometchat](http://twitter.com/cometchat)-pro/chat"; export default { ... methods: { ... startVideoChat() { if (!this.receiver_id) this.error = true; this.showSpinner = true; var receiverID = this.receiver_id; var callType = CometChat.CALL_TYPE.VIDEO; var receiverType = CometChat.RECEIVER_TYPE.USER; var call = new CometChat.Call(receiverID, callType, receiverType); CometChat.initiateCall(call).then( outGoingCall => { this.showSpinner = false; console.log("Call initiated successfully:", outGoingCall); // perform action on success. Like show your calling screen. }, error => { console.log("Call initialization failed with exception:", error); } ); } } }; </script> </code></pre></div> <p></p> <p>This method will be used to specify the type of call and that of a receiver. For our application, this will be a <code>CALL_TYPE.VIDEO</code> and <code>RECEIVER_TYPE.USER</code> respectively. Finally, we passed these details through an object of call into the <code>initiateCall()</code> method from the CometChat API to send a call request.</p> <p><strong>Listen and receive calls</strong></p> <p>Once a call has been initiated, we need to listen to the call events within our application and based on the actions that will be carried out by the user to either receive or reject the call, we will call the appropriate method. To do this successfully, we need to register the CallListener listener using the <code>addCallListener()</code> method from CometChat. Add the following contents within the created() method:</p> <p></p> <div class="highlight"><pre class="highlight plaintext"><code>// ./src/views/Home.vue <script> import { CometChat } from "[@cometchat](http://twitter.com/cometchat)-pro/chat"; export default { ... created() { ... let globalContext = this; var listnerID = "UNIQUE_LISTENER_ID"; CometChat.addCallListener( listnerID, new CometChat.CallListener({ onIncomingCallReceived(call) { console.log("Incoming call:", call); globalContext.incomingCall = true; globalContext.session_id = call.sessionId; }, onOutgoingCallAccepted(call) { console.log("Outgoing call accepted:", call); globalContext.ongoingCall = true; CometChat.startCall( call.sessionId, document.getElementById("callScreen"), new CometChat.OngoingCallListener({ onUserJoined: user => { /* Notification received here if another user joins the call.*/ console.log("User joined call:", user); /* this method can be use to display message or perform any actions if someone joining the call */ }, onUserLeft: user => { /* Notification received here if another user left the call.*/ console.log("User left call:", user); /* this method can be use to display message or perform any actions if someone leaving the call*/ }, onCallEnded: call => { globalContext.ongoingCall = false; globalContext.incomingCall = false; /* Notification received here if current ongoing call is ended.*/ console.log("Call ended:", call); /* hiding/closing the call screen can be done here.*/ } }) ); // Outgoing Call Accepted }, onOutgoingCallRejected(call) { console.log("Outgoing call rejected:", call); this.incomingCall = false; this.ongoingCall = false; this.receiver_id = ""; // Outgoing Call Rejected }, onIncomingCallCancelled(call) { console.log("Incoming call calcelled:", call); } }) ); }, methods: { ... } }; </script> </code></pre></div> <p></p> <p>Once the recipient accepts an outgoing call in the <code>onOutgoingCallAccepted()</code> callback of the CallListener, we called another method <code>startCall()</code> which takes the</p> <ul> <li>sessionId: The unique session ID available in the CometChat.Call object,</li> <li>callScreen: DOM element where you want to show the call user interface and</li> <li>OngoingCallListener: a CometChat.OngoingCallListener where the real-time events will be received</li> </ul> <p>as parameters.</p> <p><strong>Accept and reject calls</strong></p> <p>Once an incoming call event is received, we will call a method named <code>acceptCall()</code>. This method also takes the unique session ID available in the CometChat.Call object as a parameter. Add this method immediately after the <code>startVideoChat()</code> method:</p> <p></p> <div class="highlight"><pre class="highlight plaintext"><code>// ./src/views/Home.vue <script> import { CometChat } from "[@cometchat](http://twitter.com/cometchat)-pro/chat"; export default { ... methods: { ... acceptCall() { let globalContext = this; this.ongoingCall = true; this.incomingCall = false; var sessionID = this.session_id; CometChat.acceptCall(sessionID).then( call => { console.log("Call accepted successfully:", call); console.log("call accepted now...."); // start the call using the startCall() method console.log(globalContext.ongoingCall); CometChat.startCall( call.sessionId, document.getElementById("callScreen"), new CometChat.OngoingCallListener({ onUserJoined: user => { /* Notification received here if another user joins the call.*/ console.log("User joined call:", user); /* this method can be use to display message or perform any actions if someone joining the call*/ }, onUserLeft: user => { /* Notification received here if another user left the call.*/ console.log("User left call:", user); /* this method can be use to display message or perform any actions if someone leaving the call*/ }, onCallEnded: call => { /* Notification received here if current ongoing call is ended.*/ console.log("Call ended:", call); globalContext.ongoingCall = false; globalContext.incomingCall = false; /* hiding/closing the call screen can be done here.*/ } }) ); }, error => { console.log("Call acceptance failed with error", error); // handle exception } ); } } }; </script> </code></pre></div> <p></p> <p>Here, once an incoming call has been accepted, we then called the startCall() method. With this in place, the sender and the recipient can start a chat. Next, add another method to reject calls:</p> <p></p> <div class="highlight"><pre class="highlight plaintext"><code>// ./src/views/Home.vue <script> import { CometChat } from "[@cometchat](http://twitter.com/cometchat)-pro/chat"; export default { ... methods: { ... rejectCall() { var sessionID = this.session_id; var globalContext = this; var status = CometChat.CALL_STATUS.REJECTED; CometChat.rejectCall(sessionID, status).then( call => { console.log("Call rejected successfully", call); globalContext.incomingCall = false; globalContext.ongoingCall = false; globalContext.receiver_id = ""; }, error => { console.log("Call rejection failed with error:", error); } ); } } }; </script> </code></pre></div> <p></p> <p>And lastly, add another method to Log out users from the application and redirect back to the login page:</p> <p></p> <div class="highlight"><pre class="highlight plaintext"><code>// ./src/views/Home.vue <script> import { CometChat } from "[@cometchat](http://twitter.com/cometchat)-pro/chat"; export default { ... methods: { ... logoutUser() { CometChat.logout().then( success => { console.log("Logout completed successfully"); this.$router.push({ name: "homepage" }); console.log(success); }, error => { //Logout failed with exception console.log("Logout failed with exception:", { error }); } ); } } }; </script> </code></pre></div> <p></p> <p>The <code>CometChat.logout()</code> will log the user out of CometChat and also from our application.</p> <p>In case you miss anything, the complete contents of the Home.vue file can be <a href="https://github.com/yemiwebby/comet-voice-video/blob/master/src/views/Home.vue">found here</a>.</p> <h3> <a name="update-router" href="#update-router" class="anchor"> </a> Update router </h3> <p>Earlier, when we installed Vue.js, we also selected an option of installing Vue Router with it. So open <code>./src/router.js</code> and replace the default content in it with the following:</p> <p></p> <div class="highlight"><pre class="highlight plaintext"><code>// ./src/router.js import Vue from 'vue' import Router from 'vue-router' import Home from './views/Home.vue' import Login from './views/auth/Login.vue' Vue.use(Router) export default new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/', redirect: 'login', name: 'homepage' }, { path: '/login', name: 'login', component: Login, }, { path: '/home', name: 'home', component: Home } ] }) </code></pre></div> <p></p> <p>What we have done here is to map each route within our application to the respective component that will handle the logic. This is a basic format of configuring Vue Router for a Vue.js application. Click <a href="https://router.vuejs.org/">here</a> to find out more about Vue Router.</p> <h3> <a name="test-the-application" href="#test-the-application" class="anchor"> </a> Test the application </h3> <p>Now that you are done adding all the required logic and components, you can now run the application and test it out. Restart the application with npm run serve and navigate to <a href="http://localhost:8080">http://localhost:8080</a> to view the app.</p> <p><img src="https://cdn-images-1.medium.com/max/688/0*qLJzgX9dJ-ZnIB5U.png" alt=""></p> <p>Open the application in two separate windows and login with any two of the test users: superhero1, superhero2, superhero3, superhero4 or superhero5</p> <p><img src="https://cdn-images-1.medium.com/max/600/0*h2sDQ5lxWHDxWN6p.gif" alt=""></p> <p>Once you are able to log in from both window, enter the UID of one user and click on <strong>Start Call</strong> and once the call request is received by the other user, two new action buttons will be displayed. Click <strong>Accept Call</strong> to accept a call</p> <p><img src="https://cdn-images-1.medium.com/max/600/0*JgKRdftJdW8sg0CR.gif" alt=""></p> <p>or <strong>Reject Call</strong> to reject a call:</p> <p>If you have followed the tutorial diligently up until now, then you should have a functional voice and video chat application running on your computer.</p> <h3> <a name="conclusion" href="#conclusion" class="anchor"> </a> Conclusion </h3> <p>As seen in this tutorial, you will agree with me that it is so easy to quickly implement a video chat feature in your project. This can be easily integrated into an existing Vue.js application or a new one entirely.</p> <p>Feel free to explore the source code as linked at the beginning of this tutorial and add more features as you deem fit.</p> <p>With CometChat, you can easily extend the functionalities of this application by adding more awesome features. <a href="https://prodocs.cometchat.com/">Check the official documentation of CometChat Pro</a> to read more about what its got to offer.</p> <p>I do hope you found this tutorial quite helpful? Can’t wait to see what you will build with the knowledge that you have acquired here.</p> <p>Originally published on <a href="https://www.cometchat.com">CometChat</a></p>

Building a chat bot using Nest.js and Telegram

Oluyemi — Mon, 14 May 2018 21:46:01 +0000

Introduction

In this tutorial, I will be showing you how to build a basic chat bot for Telegram using Nest.js. This will, amongst other things, give you an overview of how Telegram bots work and what you can do with them.

Telegram bots are simply accounts that do not require an additional phone number to set up. Users can interact with them via commands: opening a chat directly or sending a request directly from a chat input field by typing bot’s @username.

What we’ll be building

We’ll be building a telegram bot with a username new-nest-bot, you can choose your own preferred name when registering a new telegram bot.

This bot was built to respond to text messages sent directly to it with predefined responses from the logic implemented on the back-end of the application.

Prerequisites

A basic understanding of TypeScript and Node.js will help you get the best out of this tutorial. I assume that you already have Node and npm installed, if otherwise quickly check Node.js and npm for further instructions and installation steps.

In addition, a Telegram account is also required to have access to Telegram services, either to start a chat or create a bot. If you don’t have an account, I recommend using the Telegram web client

Finally, here is a quick overview of the technologies that we will be using in this post.

Nest.js: a progressive framework for building efficient and scalable server-side applications; built to take the advantage of modern JavaScript but still preserves compatibility with pure JavaScript.

Node-telegram-bot-api: a Node.js module to interact with the official Telegram Bot API.

Setting up the project

First, you need to install the Nest.js starter project on Github using Git. To do this, let’s run a command that will clone the starter repository into a new project folder named nest-telegram-chat-bot on your machine. Open your terminal or command prompt and run the command below:

$ git clone https://github.com/nestjs/typescript-starter.git nest-telegram-chat-bot

Go ahead and change directory into the newly created folder and install all the dependencies for the project.

// change directory
cd nest-telegram-chat-bot

// install dependencies
npm install

Installing server dependencies

The only server dependency required for this application is the node-telegram-bot-api. Run the command below to install it:

$ npm install --save node-telegram-bot-api

Creating a Telegram bot

We’ll basically be interacting with Telegram bot API. To do this, you will need to obtain an access token. Open a Telegram app, search for @botfather and start the chat. Use the /newbot command to create a new bot. The BotFather will ask you a couple of questions, like the name and username, before an access token can be generated.

Follow all the instructions and once you are done, a token that is required to send requests to Telegram Bot API will be generated for you. As shown below:

Now we have successfully created a bot, but it is passive at the moment as it has not been configured to respond to chat.

Making request

Open a new tab in your browser and test the new bot by making an HTTPS request to the Telegram Bot API using this URL:

https://api.telegram.org/bot\<YOUR\_ACCESS\_TOKEN\>/getMe

This will return a response in JSON format with the id, name, and username of the bot.

{"ok":true,"result":{"id":591836832,"is\_bot":true,"first\_name":"new-nest-bot","username":"nest\_demo\_bot"}}

Initialize the application controller

When a user interacts with our bot on Telegram, the Telegram Bot API sends details about the interaction to our Nest.js application over an HTTP request and a response will be sent back with instructions on how the bot should respond. Let’s configure our application logic.

Nest.js starter project comes installed with a default controller named app.controller.ts. Open this file and update it with the code below:

// ./src/app.controller.ts

import { BotService } from './bot/bot.service';
import { Get, Controller, Res, HttpStatus } from '@nestjs/common';

@Controller()
 export class AppController {
 constructor( private botService:BotService) {}

 @Get()
 getBotDialog(@Res() res) {
 this.botService.botMessage();
 res.status(HttpStatus.OK).send("Bot service started");
 }
}

Once we start our application, this controller handles the incoming request and returns the appropriate response. As shown above, we imported BotService and injected it into the controller through the constructor. This is to ensure that app.controller.ts handles only the HTTP requests and abstracts the complex logic to a service. We’ll set this up in the next section

Configure the bot service

Our AppController depends on a service named BotService to respond to the interaction with our Telegram bot, based on a specified logic. Let’s create this service. Create a bot folder within the src and proceed to create a new file named bot.service.ts within it. Next, open the newly created file and paste the code below into it:

// ./src/bot/bot.service.ts

import { Component} from '@nestjs/common';

@Component()
 export class BotService {

 botMessage() { 
 process.env.NTBA\_FIX\_319 = "1";
 const TelegramBot = require('node-telegram-bot-api');

const token = 'YOUR\_ACCESS\_TOKEN';

const bot = new TelegramBot(token, { polling: true });

 bot.on('message', (msg) =\> {
let Hi = "hi";
if (msg.text.toString().toLowerCase().indexOf(Hi) === 0) {
 bot.sendMessage(msg.from.id, "Hello " + msg.from.first\_name + " what would you like to know about me ?");
 }
 }
}

Here, we created a method named botMessage() and within it, we required the node-telegram-bot-api module and then assigned the access_token received from BotFather to a token variable. This token was later used as an argument to create a new TelegramBot(). Notice the second argument passed to the new TelegramBot()? What we have done here is to create our bot with the long polling configuration by setting it to true.

It is worth mentioning that, you can actually interact with a server in two ways:

Webhook: A dedicated URL or can also be referred to as a web callback.
Long Polling: This allows us to run our application locally without the need for a dedicated server or external address.

Register the component

At the moment, our application doesn’t recognize the newly created service. Let’s change this by editing our module file app.module.ts. To do this, put the service into the ‘components’ array of the @Module() decorator.

// ./src/app.module.ts

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { BotService } from 'bot/bot.service';

@Module({
 imports: [],
 controllers: [AppController],
 components: [BotService],
})
export class AppModule {}

Running the application

Start the application with :

$ npm start

This will start the application on the default port used by Nest.js. Open your browser and navigate to http://localhost:3000.

Next, open a Telegram app and search for new-nest-bot or the name of your Telegram bot if you happen to choose a different name.

Now, you can click on the start button to start a chat.

if you don’t get a response at the moment, don’t worry, just refresh the application if you have it open in a different tab.

Update the service

In order to avoid refreshing the page all the time, we will use a life-cycle event named OnModuleInit from Nest.js within our component to initialize the botMessage method.

// ./src/bot/bot.service.ts

import { Component, OnModuleInit } from '@nestjs/common';

@Component()
 export class BotService implements OnModuleInit {

 onModuleInit() {
 this.botMessage();
 }

 botMessage() { 
 ...
 }
}

Restart the development server if it is currently running, then proceed to try out the new-nest-bot

You can find the complete bot.service.ts file here with the complete dialog on GitHub.

Conclusion

Here, we have been able to build a telegram chatbot with a predefined response to chat from other users. The intention was to give you a general building block that can be improved and build amazing chatbot that can do much more.

I hope this tutorial was helpful and gave you enough information required to start building bots tailored for other use cases, as you deem fit, in your organization.

The source code for this tutorial can be found here on Github. Feel free to explore.

Bad Permissions writeable by group — Laravel

Oluyemi — Tue, 03 Apr 2018 20:50:19 +0000

Internal Server Error

If you have ever come across this error while deploying applications especially Laravel applications to shared hosting, then you just got for yourself the right post.

So you just deployed your application to the server and instead of the contents being rendered, you were greeted with internal server error .

A (500) Internal Server Error can be caused by many instances, including but not limited to invalid permissions, invalid ownership, errors in php.ini or .htaccess file, invalid requests in the script and others.

Generally, this is not a problem with the server itself and can often be rectified by modifying something in your site’s configuration. The best approach is to check the Error logs in cPanel for the particular information.

So if the error log says Directory is writeable by group:

This is an indication that the folder had permissions for a folder set too high. To correct this, the permissions need to be changed from 777 to 755.

Directories and folders should be 755. Executable scripts within the cgi-bin folder must be 755. Images, media, and text files like HTML should be 644.

Files — 644
CGI Scripts — 755
Directories — 755

You can modify permissions with the File Manager, located in the “Files” category of the cPanel, an FTP client, or using the chmod command in SSH/Bash.

Final Note

This error is not in anyway specific to Laravel Applications, I only used that as my title because I encounter this while uploading an application built with Laravel.

I hope you found this post useful and if you have a different or other approach to resolving an issue like this, kindly share your thoughts and comments below.

Building Real-Time Web Applications Using Nest.js and Ably

Oluyemi — Thu, 22 Mar 2018 15:36:59 +0000

Realtime everywhere! If you are an ardent follower of the trends in the industry, especially the web development ecosystem, you will agree with me that a larger percentage of users appreciate realtime responses from web applications.

This may be in the form of notifications, events, alerts, instant messaging or anything similar to these. Only a few platforms offer realtime technologies applicable for use in realtime digital experiences like Gaming and Gambling, Chat and Social, Data Content, Notifications and Alert and so on. This is where Ably as a company shines.

To explore the realtime technology, I have always wanted to try out Ably and after reading this post I had to get down to work. So when I finally got the chance, I was able to explore the awesomeness of realtime functionality as offered by Ably by building the following application:

This is a realtime opinion poll built with Nest.js and powered by Ably. In this article, I am going to document the stage by stage process of how I was able to build the demo shown above.

Pre-requisites

To get the most out of this tutorial, a basic understanding of TypeScript and Node.js is advised.

Tools

we will use the following tools to build this app :

Nest.js : A progressive Node.js framework for building efficient and scalable server-side applications. It leverages on TypeScript to create reliable and well structured server-side application. If you are quite conversant with Angular, Nest.js gives you similar experience of building an Angular app, but on the backend. Despite using modern JavaScript (Typescript), it’s quite compatible with vanilla JavaScript which makes it very easy to get started with. You can read more about it here.

Nest.js

Ably : An excellent realtime messaging platform that makes it easy to add realtime functionality to applications.

Ably Realtime

Axios : A promise-based HTTP client that works both in the browser and in a node.js environment.
CanvasJS: A responsive HTML5 Charting library for data visualisation.
Lastly, we will also need to install few modules using npm

Setting up the Application

Its super easy to setup a new application using Nest.js, but before we proceed, it is assumed that you already have node and npm installed. If not, kindly check the node.js and npm websites for installation steps.

To begin, use the commands below to clone a new starter repository, change directory into the newly created project folder and finally install all the required dependencies for Nest.js application.

$ git clone https://github.com/nestjs/typescript-starter.git ably-nest-poll

$ cd ably-nest-poll

$ npm install

Run the Application

$ npm run start

This will start the application on the default port used by Nest.js (3000). Head over to http://localhost:3000

Ably Account Setup

If you don’t already have an ably account, head over to their website and create one.

Follow the remaining process and once you are done, you should have a free account with a private key. You will see an ‘API key’ on your account dashboard, this is of importance to us as we’ll use it later in the tutorial to connect to Ably using the Basic Authentication scheme.

You will see that by default, Ably creates an app for you which you can readily start using. However, you can also create a new application and configure it according to your needs.

I have named mine 'ably-nest-poll' . Feel free to choose any name that suits your purpose.

Dependencies

Use the Node Package Manager to install dependencies for the application:

npm install ejs ably --save

Bootstrap application

One of the core files in Nest.js is 'main.ts’ This file contains the necessary functions with the responsibility of bootstrapping our application. Nest favours the popular MVC pattern and therefore allows the usage of template engine. Open '.src/main.ts’ and fill with :

**import** { NestFactory } **from**'@nestjs/core'; **import** { ApplicationModule } **from**'./app.module';

**//** import express module **import** \* **as** express **from**'express';

// path **import** \* **as** path **from**'path'; **async function** bootstrap() { **const** app = **await** NestFactory.create(ApplicationModule); // A public folder to serve static files **app**.use(express.static(path.join(\_\_dirname, 'public')));

**app**.set('views', \_\_dirname + '/views');

// set ejs as the view engine **app**.set('view engine', 'ejs'); **await** app.listen(3000); } bootstrap();

The only addition I have made to the default configuration of this file is to import Express module, path and finally set ejs as the view engine for the application.

Set Up the View

In order to render the HTML output and display the application to users, we will create a folder called views within the src folder. Now, within this newly created folder, create a new file and name it index.ejs

Then add the following code to your 'index.ejs' file:

\<!DOCTYPE html\> \<html lang="en"\> \<head\> \<meta charset="UTF-8"\> \<meta name="viewport" content="width=device-width, initial-scale=1.0"\> \<meta http-equiv="X-UA-Compatible" content="ie=edge"\> \<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"\> \<title\>Realtime Poll\</title\> \</head\> \<body\> \<div class="container"\> \<h1\> Marvel Movies \</h1\> \<p\> Select your favorite Marvel Movie \</p\> \<form id="opinion-form"\> \<p\> \<input type="radio" name="movie" id="avengers" value="The Avengers"\> \<label for="avengers"\>The Avengers\</label\> \</p\> \<p\> \<input type="radio" name="movie" id="black-panther" value="Black Panther"\> \<label for="black-panther"\>Black Panther\</label\> \</p\> \<p\> \<input type="radio" name="movie" id="captain-america" value="Captain America"\> \<label for="captain-america"\>Captain America\</label\> \</p\> \<p\> \<input type="radio" name="movie" id="other" value="Other"\> \<label for="other"\>Something Else \</label\> \</p\> \<input type="submit" value="Vote" class="btn btn-success"/\> \</form\> \<br\>\<br\> \<div id="chart-container" style="height:300px;width:100%;"\> \</div\> \</div\> \<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"\>\</script\> \<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"\>\</script\> \<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.js"\>\</script\> \<script src="http://cdn.ably.io/lib/ably.min-1.0.js"\>\</script\> \<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"\>\</script\> \<script src="/main.js"\>\</script\> \</body\> \</html\>

This will serve as the homepage for our realtime poll application. In order to make this page look presentable, I included a CDN file each for Materialize, Ably, CanvasJS and JQuery. Further, I’ve included a form with radio-button input fields and finally linked a custom script named main.js that we’ll visit later on in this tutorial.

Handling Route

Route is handled within Nest.js by the controller layer. This receives the incoming requests and returns a response to the client. Nest uses a Controller metadata '@Controller' to map routes to a specific controller. For now, we will make use of the default controller to set up the homepage for our demo app. So edit '.src/app.controller.ts' and add the code shown below :

**import** { Get, Controller, Res } **from**'@nestjs/common'; @Controller() **export class** AppController { @Get() root(@Res() res) { res.render('index'); } }

The above code lets us manipulate the response by injecting the response object using the @Res() decorator. This will ensure that Nest maps every '/' route to the 'index.ejs' file.

Create a Controller

The next thing we need to build is the controller for poll. This will handle every request once a user selects a choice and submit votes. So go ahead and create a new folder named poll in your 'src' folder and then create a file 'poll.controller.ts' within it. Paste the following code in the newly created file.

**import** { Controller, Post, Res, Body } **from**'@nestjs/common';

// import pollService **import** { PollService } **from**'./poll.service'; @Controller('poll') **export class** PollController {

// inject service **constructor** ( **private** pollService: PollService) {} @Post() submitVote(@Res() res, @Body() poll: **string** ) { **this**.pollService.create(poll); res.render('index'); } }

A quick peek into the code above, you will realize that we imported a service and injected it into the controller through the constructor, this is recommended by Nest in order to ensure controllers handles only HTTP requests. This service will perform a task of publishing payload to Ably. We will create this service PollService in a bit.

In addition, the @Controller(‘poll’) tells the framework that we expect this controller to respond to requests posted to */poll * route.

Realtime Service

Basically, we want to utilize one of the core functionalities of Ably, which is publishing messages or payload to Ably and ensure that every connected client or device on that channel receives them in realtime by means of subscription. This is where Ably really shines; you get to focus on building apps and allow the platform to use their internal infrastructure to manage communication without you having to worry about it

Lets create a component as a service within Nest.js . This will be used to publish a payload to Ably on a specified channel.

Controllers in Nest.js only handle HTTP requests and delegate complex tasks to components. Components here are plain TypeScript classes with @Component decorator. So create a new file within poll folder named poll.service.ts

**import** { Component } **from**'@nestjs/common'; @Component() **export class** PollService { **private** poll: **string** ; create(poll) { **const** Ably = require('ably');

// replace with your API Key **var** ably = **new** Ably.Realtime('YOUR\_KEY');

**var** channel = ably.channels.get('ably-nest'); **const** data = { points: 1, movie: poll.movie }; channel.publish('vote', data); } }

Here, I required the ably module that was installed earlier and passed in the required API key. Also, I created a unique channel ably-nest for clients to subscribe to. I also have the publish method which takes in two parameters, one is an optional message event name and the other is a payload to be published.

Connecting the dots

At the moment, our application doesn’t recognise any newly created controller and service. We need to change this by editing our module file 'app.module.ts' and put controller into the 'controller' array and service into 'components' array of the '@Module() decorator respectively.

**import** { PollController } **from**'./poll/poll.controller'; **import** { Module } **from**'@nestjs/common'; **import** { AppController } **from**'./app.controller'; **import** { PollService } **from**'./poll/poll.service'; @Module({ imports: [], controllers: [AppController, PollController], components: [PollService], }) **export class** ApplicationModule {}

Plug in Ably client-side and update UI

Just a quick recap before the final stage. So far, in this tutorial, we have

Created a form with radio buttons for users to cast and submit polls.
We went further to create an account on Ably
Set up an homepage
Created a controller to handle post route.
Setup a service to publish payloads to a named channel ably-nest on Ably and
Lastly, we registered the newly created controller and service within our application module.

Remember that we included a custom 'main.js' file in our index.ejs file? Go ahead a create a new folder called public within the src folder then create the main.js file within it. Further, add the following code to the file.

**const** form = document.getElementById('opinion-form'); // form submit event form.addEventListener('submit', (e) =\> { **const** choice = document.querySelector('input[name=movie]:checked').value; **const** data = {movie: choice}; axios.post('/poll', data).then( (data) =\> { console.log(data); }); e.preventDefault(); }); let dataPoints = [{label: 'The Avengers', y: 0}, {label: 'Black Panther', y: 0}, {label: 'Captain America', y: 0}, {label: 'Other', y: 0},]; **const** chartContainer = document.querySelector('#chart-container'); **if** (chartContainer) { **const** chart = **new** CanvasJS.Chart('chart-container', { animationEnabled: **true** , theme: 'theme1', title: { text: 'Favorite Movies' }, data: [{ type: 'column', dataPoints: dataPoints }] }); chart.render(); **var** ably = **new** Ably.Realtime('YOUR\_KEY'); **var** channel = ably.channels.get('ably-nest'); channel.subscribe('vote', **function** (poll) { dataPoints = dataPoints.map(x =\> { **if** (x.label == poll.data.movie) { x.y += poll.data.points; **return** x; } **else** { **return** x; } }); chart.render(); }); }

This content of this file is self explanatory, we handle form submission and post to the poll route using axios.

We also set a default dataPoints for our chart and finally subscribe to the payload posted from the server.

Don’t forget to replace the YOUR_KEY with the appropriate API KEY from your dashboard.

Bringing it all together

Restart the development server again if it is currently running and navigate to http://localhost:3000 or http://127.0.0.1:3000 to check it out.

And that is it.

If you miss any of the steps, you can find the code for this demo here on github

Conclusion

We have successfully achieved two things in this tutorial:

Get introduced to building web applications using Nest.js
Explore the realtime functionality offered by Ably

If you would like to find out more about how channels, publishing and subscribing works, see the Realtime channels & messages documentation or better still learn more about the complete set of Ably features.

2017 In Review: Journey to greatness

Oluyemi — Sun, 31 Dec 2017 20:15:47 +0000

ForLoop Meet-up held at switch.ng

Personally, its been an amazing year for me, major reason why this review was aptly titled “ Journey to greatness ”. Reminiscing on some of the mind blowing events and memories from this year and I thought it fit to write about it. As this might inspire someone.

Community Involvement

I was more active in the Tech community this year than I have ever been. This has not only inspire me to keep learning but also offered me an opportunity of meeting lot of experienced developers. I literarily attended all kind of meetups and met the likes of Christian Nwamba (who has been a super duper mentor and a good friend till date), Prosper Otemuyiwa, Chuks El-Gran Opia, Chuloo, Elijah Valentine Troy Abako, Neo Ighodaro

Angular Nigeria Meetup

Laravel Nigeria Meetup

Frontstack Meetup

Writing

This is one of the main highlights of the year for me. Inspired by Christian Nwamba, Prosper Otemuyiwa and Chris Sevilleja, I ventured into the world of technical writing.

I applied to become an author on one of the platforms that I have learnt a lot from (i.e scotch.io). I was super excited when my account was approved for author status.

Despite the fact that I worked for a company, before the end of the year, I was able to come up with 3 published article and few others still under review :

To crown it up, I emerged one of the top authors for the month of december

Projects and Work

Started working for a different company called Taxaide Technologies this year. Its amazing and a great opportunity to contribute and learn when you work with a company whose vision resonate with yours.

Taxaide Technologies Limited (TaxTech) was conceived to develop and deploy easy to use technology in the management of taxes, whether by the tax payer, the tax collector or the tax professional.

I was appointed a position where I had to maintain few existing web applications and also build new ones. Thank you Taxtech.

Open Source Projects

Contributed to few open source projects this year

Won an Hackathon (Angular Nigeria)

I successfully led a team of programmers and we won the very first Angular Nigeria Hackathon sometimes in May this year.

How My Team Won The First Angular Nigeria Hackathon

Team Hack Brad Green

On Speaking

I was opportuned to visit students of Federal College of Education(Technical) Akoka and got them fired up to explore the world of programming. Despite busy schedules at work, I am excited that I made this happen.

Speaking at FCE Akoka

Life

Read a lot of technical Articles this year.
I met a lot of amazing people this year both techies and non techies 😄. Christian Nwamba such an amazing guy, Fidelia Unifoh, Bidemi Daniel Olumide, oyeyemi oke.
Bought a MacBook Pro this year.
Got a new Avatar this year. Its cool to have some sort of identity right? 😏

And finally, just when it seems nothing serious will come out of this year as regards relationship, I met a young beautiful lady whose passion, dedication and support has been beyond expectation. Lucky to have you in my life Funmilayo 😘.

2018 Resolution

Looking into the new year with great expectations and more territories to conquer. I will like to hold myself accountable by the end of the year

Writing : I want to write more articles in 2018, improve on my writing skills 🔥 🔥 💪
Become one of the top authors on scotch.io
Speak and participate in more events and conferences

Kudos to everyone that made this year amazing for me. Lets do this again in 2018. #SpreadTheFire

Build a Quote Application Using Laravel and Vue: Part 2

Oluyemi — Thu, 14 Dec 2017 03:18:05 +0000

Quote Application Part 2

In the first part of this series, we were able to successfully build the backend of our Quote Application using Laravel. We went ahead to also set up endpoints to post, fetch, update, and delete quote from our database. And lastly, we tested the functionality of our API by using a tool called Postman.

In this article, we will complete the Quote application, by building the frontend with Vue.js. Here, we want to be able to achieve the following :

Post a new quote to the server
Retrieve all quotes after they have been saved
And finally, edit and delete quotes.

Just before we proceed, open up the source code from the first part of the series in a code editor of your choice and run the application. It is important to keep this running as one of the objective of this tutorial is to ensure smooth communication between the Backend and Frontend on separate domains. The complete code for both application can be found on Github, scroll to the end of this tutorial to access the links.

Let’s Build the Frontend

An HTTP call will be required to access all the resources from the backend. For this, we will make use of Axios which is a Promised based HTTP Client for the browser and node.js, but first, let’s install Vue. Vue-cli will be used here, as it will help us to rapidly scaffold Single Page Application in no time.

# install vue-cli
$ npm install -g vue-cli

Next, we’ll set up our Vue app with the CLI.

# create a new project using the "webpack" template
$ vue init webpack-simple frontend-quote-app

You will be prompted to enter a project name, description, author and others. This should initialize our app, all we have to do now is, change directory into our project folder and install the required dependencies.

#change directory
$ cd frontend-quote-app

#install dependencies
$ npm install

Finally, to serve the application, run

# run the application
$ npm run dev

A similar page like the image below should open up in your browser by now

Components

Since Vue offers developers the ability to use components driven approach when building web apps, we will create more components for our quote application. Vue CLI already generated a main component that can be found in src/App.vue, this will be used as the top level component for our application.

Creating a Component

Apart from the default component generated by Vue CLI, we will need more component, namely, 'new-quote.vue', quotes.vue', quote.vue' . These components will be used to add a new quote, display all quotes and moreso, be able to edit and delete quote.

Ready? Let’s get to work!.

Proceed to create a ./src/components folder, which will hold all the components that we will create soon.

Create more component JS files such as quote.vue , quotes.vue , new-quote.vue within the components folder.

Install NPM Modules

As we are required to make web requests (API calls) within all the components created above, install Axios).

npm install axios --save

And for routing purposes, let’s also install Vue-router

npm install vue-router --save

Configure Components

The required tools and components files have just been created, next is to start configuring these files by creating individual template, logic and style.

First of all, clean up the default contents within ./src/App.vue . This will be filled later.

<template>

<div id="app">
...
</div>

</template>

<script type="text/babel">

export default {

data () {

return {

}
  }
}
</script>

<style lang="scss">
...
</style>

New-quote.vue

This component is responsible for adding new quote(s). Whenever the form for posting a new quote is submitted, a function 'onSubmitted will be called and executed.

<template>
   <div>
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
            <form @submit.prevent="onSubmitted">
                <div class="form-group">
                    <label for="content">
                        <b>Quote</b>
                        </label>
                        <br>
                    <i> Write your quote</i>

                    <textarea name="" id="content" class="form-control" v-model="quoteContent" cols="80" rows="6"></textarea>
                </div>

                <div class="form-group">
                    <button type="submit" class="btn btn-success">
                        Submit
                    </button>
                </div>
            </form>
        </div>
    </div>
</template>

<script type="text/babel">
    ...
</script>

<style scoped>
...
</style>

This function sends an HTTP request to the server (Laravel backend) with the quote data and stores it in the database. This pattern is similar to what we have in other components as will be revealed very soon.

<template>
...
</template>
<script type="text/babel">
    import axios from 'axios';
    export default {
        data() {
            return {
                quoteContent: ''
            }
        },
        methods: {
            onSubmitted() {
                axios.post('http://localhost:8000/api/quote',
                        {content: this.quoteContent})
                        .then((response) => {
                        window.location.href = "/";
                        })
            .catch ((error) => console.log(error)
            )}
        }
    }
</script>

<style scoped>
...
</style>

Notice the URL and endpoint being called by axios within the onSubmitted() method http://localhost:8000/api/quote? Remember the Laravel backend was started at the beginning of this tutorial, it is assumed that this application is running on localhost port 8000. Kindly change this URL if your backend is running on a different port.

And style

<style scoped>
#content {
    margin-top: 40px;
}
</style>

Quotes.vue

This is the parent component for quote component. Props defined here are are used to passed down information to the child component.

<!-- quotes.vue -->
<template>
    <div>
        <div class="text-center">
            <button class="btn btn-success" @click="onGetQuotes">
            Get Quotes
             </button>
        </div>
        <hr>

<app-quote v-for="quote in quotes" :qt="quote" :key="quote.id" @quoteDeleted="onQuoteDeleted($event)"></app-quote>
    </div>
</template>

<script type="text/babel">
    ...
</script>

onGetQuotes() will initiate a call to the API backend and return all the posted quote(s) as response. This is being called after the instance has been mounted.

<script type="text/babel">
    import Quote from './quote.vue';
    import axios from 'axios';

export default {
        data() {
            return {
                quotes: []
            }
        },
        methods: {
            onGetQuotes() {
                axios.get('http://localhost:8000/api/quotes')
                        .then(
                                response => {
                    this.quotes = response.data.quotes;
                }
                        )
                .catch(
                        error => console.log(error)
                );
            },
            onQuoteDeleted(id) {
                const position = this.quotes.findIndex((element) => {
                            return element.id == id;
                        });
                this.quotes.splice(position, 1);
            }
        },
        mounted: function () {
           this.onGetQuotes();
        },
        components: {
            'app-quote':Quote
        }
    }
</script>

Quote.vue

This is the child component of quotes component. Conditional declaration is used to toggle the editing mode, when the edit button is clicked, an onEdit() method is called and editing property from the vue instance is set to true. on the other hand, the onCancel() and onUpdtae() methods will set editing property to true after the specified login for this function are carried out.

<!-- quote.vue -->
<template>
<div>
    <div v-if="editing">
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
            <div class="form-group" id="form__group">
                <label for="content"><b>Edit Quote</b></label><br>
                <textarea id="content" v-model="editValue" rows="10" cols="30" class="form-control"></textarea>
                <div class="control_1">
                    <button @click="onUpdate" class="btn btn-success">Save</button>
                    <button @click="onCancel" class="btn btn-danger">Cancel</button>
                </div>
            </div>
        </div>
    </div>

<div v-if="!editing">
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
            <div class="quote-holder">
                <div class="quote">
                    {{ qt.content }}
                </div>

<div class="quote_control">
                    <div>
                        <div class="control_1">
                            <button @click="onEdit" class="btn btn-primary">
                                Edit
                            </button>
                            <button @click="onDelete" class="btn btn-danger">
                                Delete
                            </button>
                        </div>

<div class="control_2">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</template>

<script type="text/babel">
   ...
</script>

<style scoped>
   ...
</style>

The expected information, in this case, quote are declared and received using the props option :

<script type="text/babel">
    import axios from 'axios';

export default {
        props: ['qt'],
        data() {
            return {
                editing: false,
                editValue: this.qt.content
            }
        },
        methods: {
            onEdit() {
                this.editing = true;
                this.editValue = this.qt.content
            },
            onCancel() {
                this.editing = false;
            },
            onDelete() {
                this.$emit('quoteDeleted', this.qt.id);
                axios.delete('http://localhost:8000/api/quote/' + this.qt.id)
                        .then(
                                response => console.log(response)
            )
            .catch (
                        error => console.log(error)
            )
            },
            onUpdate() {
                this.editing = false;
                this.qt.content = this.editValue;
                axios.put('http://localhost:8000/api/quote/' + this.qt.id,
                        {content: this.editValue})
                        .then(
                                response => console.log(response)
            )
            .catch (
                        error => console.log(error)
            )
                ;
            }
        }
    }
</script>

Style

<style scoped>
a {
        cursor: pointer;
    }

.quote {
        display: block;
        margin-left: auto;
        margin-right: auto;
        /*min-height: 125px;*/
    }

.quote-holder {
        background: #ffffff;
        margin-bottom: 30px;
        position: relative;
        overflow: hidden;
        padding: 20px;
        min-height: 250px;
    }
    .quote_btn {
        border-radius: 0;
        width: 100%;
        display: block;
        cursor: pointer;
    }

.quote_control {
        width: 100%;
        display: flex;
        padding: 20px 20px 15px;
        background: #FFF;
    }

.control_1 {
        flex: 2;
    }
    .control_2 {
        flex: 1;
        /*display: flex;*/
        justify-content: flex-end;
        align-items: center;
        font-size: 20px;
        font-weight: bold;
        color: #51D2B7;
    }

#form__group{
        box-sizing: border-box;
        overflow: hidden;
    }

textarea {
        margin: 10px 0;
    }
</style>

index.html

Bootstrap classes are used to improve the styling in this application. Don’t forget to include stylesheet in index.html file :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Vue + laravel</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

</head>
  <body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
  </body>
</html>

App.vue

Earlier we cleaned up this file by getting rid of the default contents. Now, fill it with :

<!-- App.vue -->
<template>
  <div id="app">
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
         <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container">
              <ul class="nav navbar-nav navbar-center links">
                <li><router-link to="/">Quotes</router-link></li>
                <li><router-link to="/new-quote"> New Quotes</router-link></li>
              </ul>
            </div>
          </nav>
        </div>
      </div>
      <hr>
      <div class="row">
        <div class="col-xs-12">
          <div id="view">
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/babel">
export default {
  data () {
    return {

}
  }
}
</script>

<style lang="scss">
#app {
  margin: 30px 0 0 0;
  background: #F7F8FB;
  min-height: 800px;
}

#view {
    margin-top: 80px;
  }

.navbar {
    background: #333333;
    min-height: 70px;
    font-weight: bold;
  }
  .links {
   margin-top: 10px;
  }

.links li a {
    color: #ffffff !important;
    font-weight: bold;
    font-size: 20px;
  }
</style>

Don’t forget that we have made use of custom html tags within our vue' files. All these component tag and routes will be managed by src/main.js . So open the file and fill in the content below :

<!-- src/main.js -->
import Vue from 'vue'
import VueRouter from 'vue-router';

import App from './App.vue'
import Quotes from './components/quotes.vue';
import NewQuote from './components/new-quote.vue';

Vue.use(VueRouter);

const routes = [
  { path: '', component: Quotes},
  { path: '/new-quote', component: NewQuote },
];

const router = new VueRouter({
  node: 'history',
  routes: routes
});
new Vue({
  el: '#app',
      router: router,
  render: h => h(App)
})

CORS (Cross-Origin Resource Sharing)

Now if we attempt to post a quote from our frontend-quote-app, we will be redirected to the homepage but the quote will not be saved. Inspecting the browser will reveal what the error is.

Check the console

Just before you get scared, it is interesting to affirm that we had this error coming. In this application, we are trying to create a direct connection between two different domains. Technically, It is generally not allowed to have two different applications, with different domain name exchanging data. This is by default a form of security measure, but since we are building an API backend, we will have to turn off this protection in order to allow our frontend communicate effectively with the backend.

Back to the Backend Application

Earlier on, I stated that we need to keep our server on, just incase you haven’t done that.

Mission

Our goal, is to be able to target all API route from a different domain. In order to achieve this, we must create a new middleware, register it and eventually attach this middleware to our routes. You can read more about Laravel middlewares here.

Create Middleware

Creating a middleware in Laravel application is quite easy. A middleware named Cors will be created for the purpose of this article, and all we have to do is run this command. So open your terminal and go ahead :

php artisan make:middleware Cors

This will create a middleware in app/Http/middleware/Cors.php . Now is the convenient moment to open the newly created middleware and add the logic to accept incoming HTTP request from the frontend-quote-app'.

<?php

namespace App\Http\Middleware;

use Closure;

class Cors
{

    public function handle($request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Origin', '*')
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE, OPTIONS')
            ->header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    }
}

Here, HTTP headers were set to allow the frontend-application gain permission to access resources from the backend app.

Now that we have added the required Logic into the created middleware, Laravel needs to know that a new middleware exists and then be able to use it. Go to app/Http/Kernel.php and add to kernel class :

protected $middleware = [
       ...
        \App\Http\Middleware\Cors::class,
    ];

With this, we should be able to successfully communicate with our backend application.

Please feel free to try out the demo here.

Conclusion

So in this series, we have learnt to :

* Build API using Laravel

* Use a frontend library (VueJs) to consume the API built with Laravel

* Ensure smooth communication between two separate domains.

I hope you have seen how you can conveniently connect Vuejs with a Laravel API backend.

In a subsequent post, we will learn how to add authentication to this application and allow only user with the right access to be able to carry out certain actions like editing and deleting a particular quote.

If you found this tutorial helpful, have any suggestions or encounter any issues, kindly leave a comment below.

Here are the links to the source code in both series can be found on github, Backend and Frontend.

Build a Quote Application Using Laravel and Vue: Part 1

Oluyemi — Mon, 11 Dec 2017 02:33:24 +0000

Laravel and Vuejs

Have you ever thought of the best way to structure your application and split up your backend and frontend into the separate domains? Then you are in the right place and this tutorial is just for you!

We are in the era of a client-server model architecture of building web applications, where the backend is built as an API and a frontend is built to consume it.

In this tutorial, we will build an application where we will ensure a smooth communication between a backend (API) and a frontend(Vue) on a separate domain. Laravel will be used to expose some API endpoints or URL to which Vue application can connect to and carry out different actions or requests.

This tutorial assumes you have a basic knowledge of object oriented programming in PHP and javaScript. And even-though we will be going through the basics of Laravel and Vue.js, a basic understanding of their concepts is recommended. Now that we have that cleared, lets build something awesome together.

Consuming web services are where JavaScript library like Vue really shines.

Vue is a progressive JavaScript framework for building user interfaces on the web. It can easily be used to build a single page application(SPA), and can also scale up to be used for a large scale enterprise application.

Laravel on another hand, is a powerful MVC PHP web application framework with expressive, elegant syntax, and it is designed for developers who need a simple and elegant toolkit to create full-featured web applications.

There are two different ways of connecting Laravel to a library like Vue.

You could either simply add some widget to your Laravel application, that is, you can still render some views with Laravel but using Vue to power the DOM, this enhances the ability to edit the DOM at runtime
Build both Laravel backend and Vue on separate domains and connect them to each other via HTTP calls.

For the sake of this tutorial, we’ll choose the second option.

Since Vue cannot be used to connect to a server for a dynamic web experience, we will employ and use Laravel as our backend application.

Laravel will not be used here to render multiple views but instead, it will provide the API that will be connected to by Vue via Ajax HTTP Request. This covers all the request required when reaching out to the backend of any application.

What We’ll Build

To better demonstrate this connection between Vue and Laravel, together, we’ll build a simple quote Application. Vue will be used to post a quote to the backend for it to be saved and also fetch the quote, for it to be displayed on the homepage. You can checkout the demo here.

This will be a single page application powered fully by Vue, with the ability to switch between pages, and re-render contents on the pages based on the data fetched from the backend.

Let’s Get Started

As mentioned earlier, our Laravel backend will make available some API endpoint that will eventually be consumed by Vue. To create this, we will start by building all the required API endpoint necessary for interacting with our frontend App.

Set Up Backend

Laravel utilizes Composer to manage its dependencies. So before using Laravel, make sure you have Composer installed on your machine.

You can download and install Laravel via:

Laravel installer
Composer create-project.

We’ll start by creating a new Laravel project called 'backend-quote-app'

composer create-project --prefer-dist laravel/laravel backend-quote-app

And if you have Laravel installer already installed on your computer, you can simply proceed to run the command below

laravel new backend-quote-app

Now change directory to the newly created project folder backend-quote-app and start the PHP’s built-in development server to serve the application like this:

## change directory
cd backend-quote-app

## start the server
php artisan serve

By now, you should have your Laravel application set up.

Your homepage should look similar to what we have above if you open your Laravel application on your local server. What I have done differently was to edit the resources/views/welcome.blade.php as shown below.

<!-- resources/views/welcome.blade.php -->
<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
      ...
            <div class="content">
                <div class="title m-b-md">
                   // this was edited
                    Scotch Demo Quote App
                </div>

<div class="links">
                   ...
                </div>
            </div>
        </div>
    </body>
</html>

Set Up Your Route

For a normal Laravel application, it is conventional for us to setup our route by using routes/web.php file, but for the purpose of this tutorial, we will be using routes/api.php. This is a group of route specifically made for API endpoints. The routes in routes/api.php are stateless and are assigned the api middleware group.

For this sample application, we will need the routes below

<?php

Route::post('/quote',[
        'uses' => 'QuoteController@postQuote',
        'as' => 'post-quote'
    ]);

Route::get('/quotes',[
        'uses' => 'QuoteController@getQuotes',
        'as' => 'get-quotes'
    ]);

Route::put('/quote/{id}',[
        'uses' => 'QuoteController@putQuote',
        'as' => 'update-quote'
    ]);

Route::delete('/quote/{id}',[
        'uses' => 'QuoteController@deleteQuote',
        'as' => 'delete-quote'
]);

We are basically using the HTTP verbs POST, GET, PUT, and DELETE to post, fetch, update and delete the quote from our database respectively.

Create a Model and Controller

Create a model in order to access quotes(i.e fetching and storing quotes in the database) by running the command below :

php artisan make:model Quote -m

This will create a model Quote and a migration file to build the application’s database schema.

Now that we have both model and migration file ready. We won’t be adding much content to app\Quote.php, but we will need to edit the contents of the migration file within database\migrations directory to reflect our database schema :

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateQuotesTable extends Migration
{

    public function up()
    {
        Schema::create('quotes', function (Blueprint $table) {
            $table->increments('id');
            $table->text('content');
            $table->timestamps();
        });
    }

    public function down()
    {
        Schema::dropIfExists('quotes');
    }

}

Database Set Up

Open the .env file and add your database details

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=Your-database-name

DB_USERNAME=Your-database-username

DB_PASSWORD=Your-database-password

Migrating and Creating Table

You can go ahead and run the migration with :

php artisan migrate

If you hit this error when trying to run the migration command,

[PDOException]                                                               
  SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length is 767 bytes

this is because you are running an older version of MySQL. You can read more about it here. But a quick fix is to drop the database and re-create it. Then you will have to edit your AppServiceProvider file and set a default string length inside the boot method:

use Illuminate\Support\Facades\Schema;

public function boot()
{
    Schema::defaultStringLength(191);
}

You can now re-run the migration command and all should be fine by now.

Create Controller

The next step is to create Controller and quickly set up the required logic for our application

php artisan make:controller QuoteController

The command above will create a new file called QuoteController.php stored in the app/Http/Controllers. Here, we want to be able to handle requests to postQuote, getQuotes, putQuote and deleteQuote. We will need to create a couple of functions for all these requests :

<?php

namespace App\Http\Controllers;

use App\Quote;
use Illuminate\Http\Request;

class QuoteController extends Controller
{

    public function postQuote(Request $request)
    {
       ...
    }

public function getQuotes()
    {
       ...
    }

public function putQuote(Request $request, $id)
    {
        ...
    }

public function deleteQuote($id)
    {
        ...
    }
}

Now that the functions have been created, we need to start implementing their functionalities.

public function postQuote(Request $request)
    {
        $quote = new Quote();
        $quote->content = $request->input('content');
        $quote->save();
        return response()->json(['quote' => $quote], 201);
    }

First of all, in order to create a new quote and persist into the database, we instantiate the Quote model, use Laravel’s input()method to retrieve the value passed in from the input field content and then save it. A response was also returned with the newly created quote and a status code of 201.

public function getQuotes()
    {
        $quotes = Quote::all();
        $response = [
            'quotes' => $quotes
        ];
        return response()->json($response, 200);
    }

The created quotes need to be fetched and returned for it to be displayed to users, this method above handles that. It retrieves all the quotes from the database and return it in json format.

public function putQuote(Request $request, $id)
    {
        $quote = Quote::find($id);

// check if quote is not found
        if(!$quote)
        {
            return response()->json(['message' => 'Quote not found'], 404);
        }

$quote->content = $request->input('content');

$quote->save();
        return response()->json(['quote' => $quote], 200);
    }

We added another functionality to update any created quote within our application. This method takes in an extra argument, which is the id of the quote we wish to update. It retrieves the quote, update it and then persist into the database.

public function deleteQuote($id)
    {
        $quote = Quote::find($id);
        $quote->delete();
        return response()->json(['message' => 'Quote deleted'], 200);
    }

To finally complete the CRUD(Create, Read, Update and Delete) operation, the deleteQuote($id) uses the find() method to fetch the quote and then delete.

A close look at all the functions in this controller, you will noticed the use of a json()method all through. It is a Laravel helper method that takes in two arguments, the first one is an associative array which will be transferred to json format by Laravel and the second is a status code. This method comes handy and useful when developing especially a micro service-based application.

All setup? Great!!.

You can quickly test the API endpoints by using a tool called Postman.

Post a Quote

Get Quotes

Get quotes using the browser

If you have followed along up until now, you should celebrate

Congratulations! you have successfully set up the backend for our Quote application.

Conclusion

So far, we have been able to set up the backend required for the quote Application. In the next part, we will build the frontend with Vue, this will consume the API created. In order to ensure a smooth communication between the frontend and backend, we will also enable CORS (Cross-origin resource sharing). See you then.

PART 2 : Here

Handling Ajax Request in Vue Applications Using Axios.

Oluyemi — Sat, 09 Dec 2017 19:02:57 +0000

Contemporarily, the prevalent Architecture for building web applications is a client-server model. This makes it very easy to build, especially, JavaScript Applications by fetching data from a remote source or consume an API. It can either be Publicly available APIs or the ones you personally built using frameworks like Laravel.

Vue offers the flexibility to build applications using data fetched from any API and conveniently serve content to the users of your applications.

For the purpose of this tutorial, we are going to explore one of the publicly available API ICNDB. Its basically a database of chuck norris jokes on the internet. Fetching data from this API will give us an overview of how to successfully communicate with information from a remote source using Axios.

A basic understanding of the concept of Vue will be a plus in order to be able to follow along properly in this tutorial.

Making Ajax Request and Handling Responses

Handling Ajax request within a Vue application was previously made easy by using vue-resource, which has now been retired. This means any 3rd party libraries can be used for the purpose of making Ajax request, but as recommended by Evan, we will use Axios. Axios is a commendable promise-based HTTP client library that runs on both the client and the server.

Now that we are conversant with the tools and what we intend to build, let’s get right into it.

What we will Build

A sneak peek into what we will build in this tutorial.

What we will Build

Ready? Lets build it!

Set Up Application

Vue CLI will be used here to quickly set up the application. This command line interface(Vue-CLI) provides a means of rapidly generating a Single Page Application in no time, we will install it in a bit. Before installing vue-cli globally on your system, I assume that you already have Node and npm installed, if otherwise quickly download them here. Once you are done, you can verify Node and npm from the terminal with :

node -v

npm -v

Now install Vue-CLI :

npm install -g vue-cli

Having installed the CLI, vue command becomes available for scaffolding our application. Lets use it to create a project for this tutorial

vue init webpack-simple vue-axios

We used webpack-simple template instead of starting out with a blank page.

Next, change directory into the newly created project and install all the dependencies.

cd vue-axios

npm install

This might take few minutes to get all the necessary files installed, once the process is completed, start the application with :

npm run dev

This will start the application on your default browser on port 8080, as shown below :

Install Axios

One of the main objective of this tutorial is to learn how to seamlessly use axios in our application. Lets install it using npm :

npm install axios --save

Axios will be installed and save into the package.json file in our application.

Now that the necessary dependencies and tools have been installed. We will then build a component that will be used to make the API call described earlier and also render the fetched contents. Using Vue-CLI to scaffold an application will also generate a default component ./src/App.vue Open this file and clear the contents in there

<template>

<div id="app">
...

</div>

</template>

<script>

export default {

name: 'app',

data () {

return {

}

}

}

</script>

<style>

</style>

This will result in an empty page if you check your browser now. Let the filling commence.

<template>
  <div id="app">
    <header>
      <span>Handling Ajax Request with Axios in Vue</span>
    </header>
    <main>
        <h2>Click the button to get Random jokes</h2>
        <button id="btn" class="" v-on:click="getJokes">Get Jokes</button>

        <div v-if="loading">
          <img src="../src/assets/loader.gif"/>
          Loading.....
        </div>

      <div class="wrapper">
        ... 
      </div>
    </main>
  </div>
</template>

<script>
...
</script>

<style>
...
</style>

So far, within this file, we have added a header in order to display the title of the application. And within the '<main></main>' tag, we have a button that will call a function 'getJokes()’ once clicked. This function will be defined very soon.

Furthermore, we added a loader image that will be displayed once API call is initiated. This loader image will be hidden once our content has been received from the remote source.

Next we will set up the script to make the calls, loop through the data within our component in order to display the results and then add a little bit of styling.

Edit the 'App.vue' file :

<template>
...
</template>

<script>
  import axios from 'axios';

export default {
  name: 'app',
  data () {
    return {
      jokes: [],
      loading: false
    }
  }, 
  methods: {
    getJokes: function () {
      this.loading = true;
      axios.get("http://api.icndb.com/jokes/random/10")
      .then((response) => {
        this.loading = false;
        this.jokes = response.data.value;
      }, (error) => {
        this.loading = false;
      })
    }
  },
}
</script>

<style>
...
</style>

First of all, we imported axios into our component as we already have it installed. Then we setup the 'getJokes()' function and make API to 'http://api.icndb.com/jokes/random/10', this will return 10 random jokes to be rendered. And lastly, we also set a condition for loading and hiding the image loader.

To view the content from our API calls, lets go back to the our component and set up the view:

<template>
  <div id="app">
        ...
        <div v-if="loading">
          ...
        </div>

      <div class="wrapper">
        <div class="row">
          <div v-for="joke in jokes" :key="joke.id">
          <div class="col-md-4 cards">
             <img src="https://placeimg.com/300/300/nature" class="img-responsive" alt="Random images placeholder"> 
            <div>
              <h3>{{ joke.id }}</h3>
              <p>{{ joke.joke }}</p>
              <p>{{ joke.category }}</p>
            </div>
          </div>
        </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
...
</script>

<style>
...
</style>

Here, we used the v-for directive to render a list of items based on the array fetched from the API.

In addition to the bootstrap framework used to style the application, we will also add a little bit of custom style :

<template>
  ...
</template>

<script>
   ...
</script>

<style>
  body {
  margin: 0;
}

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

main {
  text-align: center;
  margin-top: 40px;
}

header {
  margin: 0;
  height: 56px;
  padding: 0 16px 0 24px;
  background-color: #35495E;
  color: #ffffff;
}

header span {
  display: block;
  position: relative;
  font-size: 20px;
  line-height: 1;
  letter-spacing: .02em;
  font-weight: 400;
  box-sizing: border-box;
  padding-top: 16px;
}

button {
  background: #51B767;
  color: #ffffff;
  padding: 15px;
  border-radius: 0;
  font-weight: bold;
  font-size: 15px;
  border: 0;
}

.cards {
  background: #F5F5F5;
  height:400px;
}
 .cards:hover {
  transform: translateY(-0.5em);
  background: #EBEBEB;
}

.cards {
   column-count: 1;
  column-gap: 1em;
    margin-top: 70px;

} 
</style>

Download the loader image loader.gif from here.

And refresh your browser :

And don’t forget to include the link tag for bootstrap in the application’s index.html file.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

By now, your page should look properly aligned

Conclusion

In this post, we have only used Axios to make a GET request and obtain contents from an API. Axios is powerful enough to handle other HTTP request methods such as POST, PUT, PATCH and DELETE anywhere in our application. Feel free to improve on this and if you found this post useful, show some love with claps. The code can also be found on github.

Send SMS From Laravel Application

Oluyemi — Sun, 08 Oct 2017 17:52:53 +0000

http://pngtree.com/do/envelope

There is always a need to send a message to users from your web application. It could be to verify details such as phone number or send a **_one time password_** popularly called OTP before a transaction can be completed. Most users don’t have the luxury of patience, waiting for messages to arrive, they want it Asap!!!.

I used this on a particular project recently, so I thought the need to share how I was able to put this together. My application was built using Laravel and an API provided by one of the best bulk SMS platforms in Nigeria (https://www.bulksmsnigeria.net/).

** Disclamer:- I am not in any way affiliated with BulkSMSNigeria and this is not a sponsored post.

Since this post is not really about how you can get started with Laravel. I will suggest that you follow this link https://laravel.com and learn more about laravel and how to quickly set it up.

Alright, there is a lot to do, so I will suggest we quickly get into it

Let’s Begin

I assume that you already have composer setup on your system. Else, quickly follow that link and get composer now.

You can download and install Laravel via:

Laravel installer
Composer create-project.

For the purpose of this tutorial, I will use the second option which is proven to be more straightforward.

So, run the following command in your terminal.

composer create-project — prefer-dist laravel/laravel send-sms

The command above will create a new directory (folder) called **send-sms** in your preferred development folder or whenever local folder you run the command from.

By now, you should have a new laravel project called **_send-sms_**, obviously, this is the name of our simple project, but please feel free to name it whatever you like.

change directory into your new project

cd send-sms

And start the PHP’s built-in development server to serve your application with the Artisan command below:

php artisan serve

This command will start a development server at http://localhost:8000

check it out

WHAT WE WILL BUILD

Now that we are fully set up with laravel. Don’t forget that the main aim of this tutorial is to be able to send SMS from our laravel application. So we are just going to build a very simple form that takes in the phone number of a user and send SMS to him/her.

Quickly create a controller that will handle the SMS action for us

php artisan make:controller SmsController

This will generate a new controller for you. Fill in the following : -

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use GuzzleHttp\Exception\GuzzleException;
use GuzzleHttp\Client;

class SmsController extends Controller
{

    private $SMS_SENDER = "Sample";
    private $RESPONSE_TYPE = 'json';
    private $SMS_USERNAME = 'Your username';
    private $SMS_PASSWORD = 'Your password';

    public function getUserNumber(Request $request)
    {
        $phone_number = $request->input('phone_number');

        $message = "A message has been sent to you";

        $this->initiateSmsActivation($phone_number, $message);
// $this->initiateSmsGuzzle($phone_number, $message);

        return redirect()->back()->with('message', 'Message has been sent successfully');
    }

    public function initiateSmsActivation($phone_number, $message){
        $isError = 0;
        $errorMessage = true;

        //Preparing post parameters
        $postData = array(
            'username' => $this->SMS_USERNAME,
            'password' => $this->SMS_PASSWORD,
            'message' => $message,
            'sender' => $this->SMS_SENDER,
            'mobiles' => $phone_number,
            'response' => $this->RESPONSE_TYPE
        );

        $url = "http://portal.bulksmsnigeria.net/api/";

        $ch = curl_init();
        curl_setopt_array($ch, array(
            CURLOPT_URL => $url,
            CURLOPT_RETURNTRANSFER => true,
            CURLOPT_POST => true,
            CURLOPT_POSTFIELDS => $postData
        ));

        //Ignore SSL certificate verification
        curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);

        //get response
        $output = curl_exec($ch);

        //Print error if any
        if (curl_errno($ch)) {
            $isError = true;
            $errorMessage = curl_error($ch);
        }
        curl_close($ch);

        if($isError){
            return array('error' => 1 , 'message' => $errorMessage);
        }else{
            return array('error' => 0 );
        }
    }

    public function initiateSmsGuzzle($phone_number, $message)
    {
        $client = new Client();

        $response = $client->post('http://portal.bulksmsnigeria.net/api/?', [
            'verify' => false,
            'form_params' => [
                'username' => $this->SMS_USERNAME,
                'password' => $this->SMS_PASSWORD,
                'message' => $message,
                'sender' => $this->SMS_SENDER,
                'mobiles' => $phone_number,
            ],
        ]);

        $response = json_decode($response->getBody(), true);
    }
}

What I have done here is to create a function that will accept the user’s phone number and send SMS, but before we can use this, you will need to create an account on https://www.bulksmsnigeria.net/ if don’t have one already. Once you are set, proceed and recharge your account.

Don’t forget to use your credentials here

private $SMS_USERNAME = 'Your username';
private $SMS_PASSWORD = 'Your password';

What I have also done here is to add two separate functions,

public function initiateSmsActivation($phone_number, $message){
    $isError = 0;
    $errorMessage = true;

    //Preparing post parameters
    $postData = array(
        'username' => $this->SMS_USERNAME,
        'password' => $this->SMS_PASSWORD,
        'message' => $message,
        'sender' => $this->SMS_SENDER,
        'mobiles' => $phone_number,
        'response' => $this->RESPONSE_TYPE
    );

    $url = "http://portal.bulksmsnigeria.net/api/";

    $ch = curl_init();
    curl_setopt_array($ch, array(
        CURLOPT_URL => $url,
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_POST => true,
        CURLOPT_POSTFIELDS => $postData
    ));

    //Ignore SSL certificate verification
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);

    //get response
    $output = curl_exec($ch);

    //Print error if any
    if (curl_errno($ch)) {
        $isError = true;
        $errorMessage = curl_error($ch);
    }
    curl_close($ch);

    if($isError){
        return array('error' => 1 , 'message' => $errorMessage);
    }else{
        return array('error' => 0 );
    }
}

and

public function initiateSmsGuzzle($phone_number, $message)
{
    $client = new Client();

    $response = $client->post('http://portal.bulksmsnigeria.net/api/?', [
        'verify' => false,
        'form_params' => [
            'username' => $this->SMS_USERNAME,
            'password' => $this->SMS_PASSWORD,
            'message' => $message,
            'sender' => $this->SMS_SENDER,
            'mobiles' => $phone_number,
        ],
    ]);

    $response = json_decode($response->getBody(), true);
}

You can use the first one if you prefer to use cURL, while the second one is to make API calls using guzzleClient (you will have to install guzzle client in order to be able to use it ).

Now open _send_-_sms_/_routes_/_web_._php_ and add a route as shown below : -

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

Route::post('/send-sms', [
   'uses' => 'SmsController@getUserNumber',
   'as' => 'sendSms'
]);

Lastly, to add our view and style the page appropriately. Locate **_send-sms/resources/views_** folder and clear the default html files, then replace it with this:-

<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="{{ asset('css/style.css') }}" rel="stylesheet">
    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>SEND SMS</title>
</head>
<body>
<div id="homepage">
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">SEND SMS</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="{{ url('/') }}">Home</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </nav>

    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
                <div class="panel panel-default">

                    @if(session()->has('message'))
                        <div class="alert alert-success">
                            {{ session()->get('message') }}
                        </div>
                    @endif

                    <div class="panel-heading">
                        <h3 class="panel-title">Welcome to my site</h3>
                    </div>
                    <div class="panel-body">
                        <form id="myForm" method="POST" action="{{ route('sendSms') }}" role="form">
                            {{csrf_field()}}
                            <fieldset>
                                <div class="form-group">
                                    <input class="form-control" placeholder="Your Phone Number" name="phone_number" type="number" autofocus>
                                </div>
                                <!-- Change this to a button or input when using this as a form -->
                                <button id="submitBtn" type="submit" class="btn btn-success btn-block">Send Message</button>
                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </div><!-- /.container -->

</div>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script>
    $('#myForm').submit(function(){
        $('#submitBtn').html('Sending...');
    });
</script>

</html>

For styling:-

/* send-sms/public/css/style.css */
#homepage {
    margin-top: 100px;
}

Your page should look like this now:

You can try to send SMS to your own phone number or anyone.

You could also check this out on Github

CONCLUSION

I believe this tutorial has shown you a very simple way of sending SMS from your Laravel application without much hassle. Needless to say this, the same process can be followed to implement sending of SMS using any other sms API.

Moving forwards, you can create a separate class for sending SMS as you might need to use this within any of your controller.

Furthermore, you can build on this and improve the structure as you deem fit. If you have found this useful, kindly show some love, share with others and post your comments below. Happy coding!!!!

DEV Community: Oluyemi

Guide to server-side rendering with Deno and React

What is server-side rendering?

What we will build

Prerequisites

Getting started

Setting up SSR

Adding other dependencies

Creating the app component

Rendering components via SSR

Setting up the backend

Creating a client for sanity studio

Building the components

Hydrating our application

Conclusion

How To Build a Customer List Management App with React and TypeScript

Introduction

Prerequisites

Step 1 — Installing TypeScript and Creating the React Application

Step 2 — Creating a JSON Server

Step 3 — Creating Reusable Components

Step 4 — Setting Up Routing and Updating the Entry Point of the Application

Step 5 — Running Your Application

Conclusion

Add reliable voice and video chat with Vue.js and CometChat

Prerequisites

Introduction

Getting started

Start the application

Create the CometChat Pro account, APP ID and API Key

What we want to achieve

Initialize CometChat

Building a chat bot using Nest.js and Telegram

Introduction

What we’ll be building

Prerequisites

Setting up the project

Installing server dependencies

Creating a Telegram bot

Making request

Initialize the application controller

Configure the bot service

Register the component

Running the application

Update the service

Conclusion

Bad Permissions writeable by group — Laravel

Final Note

Building Real-Time Web Applications Using Nest.js and Ably

Pre-requisites

Tools

Setting up the Application

Run the Application

Ably Account Setup

Dependencies

Bootstrap application

Set Up the View

Handling Route

Create a Controller

Realtime Service

Connecting the dots

Plug in Ably client-side and update UI

Bringing it all together

Conclusion

2017 In Review: Journey to greatness

Community Involvement

Writing

Other Articles

Projects and Work

Open Source Projects

Won an Hackathon (Angular Nigeria)

On Speaking

Life

2018 Resolution

Build a Quote Application Using Laravel and Vue: Part 2

Let’s Build the Frontend

Components

Creating a Component

Install NPM Modules

Configure Components