DEV Community: /[Abejide Femi Jr]\s/

Deploy a (Node.js + Express + MongoDB) API to Azure App Service via Visual Studio Code

/[Abejide Femi Jr]\s/ — Fri, 15 Jan 2021 21:34:13 +0000

In this tutorial, we will implement an API with Node.js and Express then deploy it to Azure App Service using Azure Cosmos DB for MongoDB API as the database.

Prerequisite
Node.js
Visual Studio Code
Azure account

According to Microsoft Azure The Azure free account includes access to a number of Azure products that are free for 12 months, $200 credit to spend for the first 30 days of sign up, and access to more than 25 products that are always free. Azure App Service and Azure Cosmos Database are part of the free service, you can check for the other services here https://azure.microsoft.com/en-us/free/free-account-faq/.

To create an account on Azure, you can simply do that by visiting this link https://azure.microsoft.com/en-gb/, and selecting Try Azure for free.

After doing that, we need to set up a database for the application by creating the Azure Cosmos Database for MongoDB API. Search for Azure Cosmos DB in the search bar, and select Azure Cosmos DB under services

Click on create Azure Cosmos DB account

On the create page, you need to create a resource group if you don’t have one, you can provide any name you want for the account name, for the API you need to select Azure Cosmos DB for MongoDB API because we will be using MongoDB, you can also select your desired location.

The next configuration is the Networking, select All networks, in a real-world application, Private endpoint will be ideal.

You can leave the backup with the default config

Also, you can use the Encryption default config You can set a tag with a key of env and value of dev.

If validation is successful, select the create button

It takes about 2-5mins for this process to be complete. Once this is done, select Node.js as the platform, and copy the connection string that is provided on the page, we will be using it in our application.

Now let's build the API endpoint and use this database that we just created

First, create a project, and run

npm init -y
npm i express mongoose dotenv

In the terminal

In the package.json file, we need to set a start script

"start": "node index.js

Create an index.js file where we will set up express to listen to connection on port 4000 locally.

const express = require("express");

const app = express();

const port = process.env.PORT || 4000;

app.listen(port, () => {
  console.log(`listening on ${port}`);
});

Create a config.js file, that is where we will implement the database configuration, note that we also need to create a .env file and set the DB_PASSWORD so we don’t expose the database credentials to the public.

const mongoose = require("mongoose");
const dotenv = require("dotenv");

dotenv.config();
const { DB_PASSWORD } = process.env;

const connectDB = () => {
  return mongoose
    .connect(
      `mongodb://node-rest-api:${DB_PASSWORD}@node-rest-api.mongo.cosmos.azure.com:10255/?ssl=true&appName=@node-rest-api@&retryWrites=false`,
      {
        useCreateIndex: true,
        useNewUrlParser: true,
        useFindAndModify: true,
        useUnifiedTopology: true,
      }
    )
    .then(() => console.log(`database connected successfully`))
    .catch((err) => console.log(err.message));
};

module.exports = connectDB;

We need to create a model, we will have just one model, that is the Post model with two fields(title and description).

const mongoose = require("mongoose");

const postSchema = new mongoose.Schema({
  title: {
    type: String,
  },
  description: {
    type: String,
  },
});

const Post = mongoose.model("Post", postSchema);

module.exports = Post;

I created some dummy data that we can seed into the database and retrieve it in the controller.

[
  {
    "_id": "5c8a34ed14eb5c17645c9108",
    "title": "cash app",
    "description": "Cras mollis nisi parturient mi nec aliquet suspendisse sagittis eros condimentum scelerisque taciti mattis praesent feugiat eu nascetur a tincidunt"
  },
  {
    "_id": "5c8a355b14eb5c17645c9109",
    "title": "kor po ke",
    "description": "Tempus curabitur faucibus auctor bibendum duis gravida tincidunt litora himenaeos facilisis vivamus vehicula potenti semper fusce suspendisse sagittis!"
  }
]

The seed file inserts the data into the Post model, and we have a console.log to confirm the data was seeded.

const Post = require("./model/Post");
const postData = require("./data/post.json");

require("./config")();

const seedData = async () => {
  try {
    await Post.insertMany(postData);
    console.log("data seeded");
  } catch (err) {
    console.log(err.message);
  }
};
seedData();

Let’s create the controller, with one endpoint, to get all post.

const Post = require("../model/Post");

exports.getAllPosts = async (req, res) => {
  const posts = await Post.find()
  res.status(200).json(posts)
};

And the post router file

const express = require('express')
const { getAllPosts } = require('../controller/post')

const router = express.Router()

router.get('/', getAllPosts)

module.exports = router

Then we mount the route in the index.js file and also require the database config.

const express = require("express");
const postRoute = require("./route/post");

require("./config")();

const app = express();

app.use("/api/v1/posts", postRoute);

const port = process.env.PORT || 4000;

app.listen(port, () => {
  console.log(`listening on ${port}`);
});

Let’s seed the data into the database by running

node seed.js

from the console, we can confirm that the data is seeded

You can also see the post document under test, in the Azure portal, when you click on Data Explorer

Before we finally deploy the app, you need to install this extension https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-node-azure-pack in your VSCode.

After installation the Azure menu will appear in VSCode, you will be prompted to sign in with your Azure account.

Let’s go back to the Azure portal to create the App Service. Select create App Service

Provide the name of the web app, name of the resource group, the runtime stack(I used Node 12 LTS)

Next is Monitoring, we need to enable monitoring, it provides detailed observability in our application We can leave the tags empty, and click on create.

This process takes about 2-5mins, once this is done, we need to set the environment variable that we used in the application by clicking on the New application setting and providing the key and the value, then click on save.

We can now deploy via VSCode, by first selecting the Azure icon, the up arrow button in App Service

Select the current project, if you can’t see the App Service that we just created, reload VsCode by running Ctrl+Shift+P and select reload window. Select the App Service once it appears

You will be asked if you want to always deploy to the App Service while the deployment is in progress, you can select yes.

Once the deployment is complete, click on the Browse website.

Now we can visit the endpoint from the hosted URL https://node-azure-tuts.azurewebsites.net/api/v1/posts.

Link to the GitHub repo - https://github.com/abejide001/node-azure-appservice

Conclusion
In this tutorial we deployed a REST API to Azure App Service, using Azure Cosmos DB as the database. You can delete these resources that were created in the Azure Portal if you won’t use them any longer.
You might also want to consider using Terraform or Azure Resource Manager to setup Azure Cosmos DB and Azure App Service rather than doing it manually

Finding a single item in an array

/[Abejide Femi Jr]\s/ — Fri, 01 Jan 2021 11:13:11 +0000

If we have an array, and we want to find the item(s) that appears once in the array.

const arr = [1,1,2,2,4,5,4]

The single item in the array above is 5, how can we solve this using JavaScript? We can use a hashmap aka Hash table, we need to convert the array to an object with the item as the key and their number of occurrence as the value.

const hashMap = {};
for (i of arr) {
  if (hashMap[i]) {
    hashMap[i]++;
  } else {
    hashMap[i] = 1;
  }
}
console.log(hashMap)
//

We declared an empty object, and loop through the array, our array item is passed in as the key, and we check to see if this item appears in the array more than once, if it does, we increment the value, if it appears once we set the value to 1.

We get the result below

{ '1': 2, '2': 2, '4': 2, '5': 1 }

As we can see 5 is the only number that appears once in the array, with a value of 1.

We need to loop through the object and get the keys with the value of 1, then push it into an array.

const single = []
for (i in hashMap) {
  if (hashMap[i] === 1) {
    single.push(Number(i));
  }
}
console.log(single)

The single item in the array is a string, it is converted to a number as we push it into the array.

We get the value below.

[ 5 ]

Thank you for reading.

Switching from JavaScript to Golang

/[Abejide Femi Jr]\s/ — Mon, 30 Sep 2019 09:07:27 +0000

Image Source
Coming from a JavaScript background, I have always wanted to learn a static-typed programming language, earlier this year I picked up Golang after reading the reviews about the language, Golang is backed by Google. Oh, and of course popular DevOps tools such as Docker, Kubernetes, Terraform, are built with Golang, in this article I will be taking you through basic programming in Golang and Javascript.

Variables

Javascript

In Javascript variables can be declared using the let, const(ES6), and var(ES5) keyword.

  // using the const keyword
  const a = 10
  // using the let keyword
  let b = 10
  // using the var keyword
  var c = 10
  console.log(a, b, c) // returns 10, 10, 10

Javascript Variable Playground

Golang

In Go variables can be declared using the var, const keyword and also using the short variable declaration syntax.

  // using the var keyword
  var a = 10 // go detects the type here even though we don't specify
  fmt.Println(a) // returns 10
  fmt.Printf("variable a is of type: %T\n", a) // returns int

  // using the const keyword
  const b = 20  // It is important to note that the value of b must be known at compile-time
  fmt.Println(b) // returns 20

  // variable decalred but not assgined a value returns the zero value of the type
  var c bool
  fmt.Println(c) // returns the zero value(zero value of a boolean is false)

  // using the short variable declaration syntax
  d := "this is a variable" // go detects the type of this variable
  fmt.Println(d) // returns this is a variable
  fmt.Printf("d is of type: %T\n", d) // returns the type(string)

Go Variable Playground

Arrays

An array is a collection of items.

Javascript

In Javascript arrays are dynamic, items can be added and removed from the array, also Javascript being a loosely-typed language, it can hold values of different type in the array.

  let myArray = [1, "this is array", true, 100.30]
  console.log(myArray) // returns [1, "this is array", true, 100.30]

// we can remove the last item in an array using the pop method
  myArray.pop()
  console.log(myArray) // returns [1, "this is array", true]

// we can add to the end of the array using the push method
  myArray.push(20)
  console.log(myArray) // returns [1, "this is array", true, 20]

// we can remove the first item of the array using the shift method
  myArray.shift()
  console.log(myArray) // returns ["this is array", true, 20]

// we can add to the start of the array using the unshift method
  myArray.unshift(210)
  console.log(myArray) // returns [210, "this is array", true, 20]

Javascript Array Playground

Golang

Arrays are of fixed length in Go, you can't add nor remove from an array, also an array can only contain the specified type.

    a := [5]string{"a", "b", "c", "d", "e"} // length is 5
    fmt.Println(a) // returns [a b c d e]
    // But what happens if we don't specify exactly 5 items
    b := [5]string{"a", "b", "c"}
    fmt.Printf("%#v", b) // returns [5]string{"a", "b", "c", "", ""}
    // "" represents the zero value(zero value of a string is "")

Go Array Playground
In Golang we also have slices, they are dynamic and we don't need to specify the length, values can be added and removed from a slice.

    a := []string{"a", "b", "c"}
    fmt.Printf("%#v", a) //  returns []string{"a", "b", "c"}

    // adding to a slice, we can use the append method to add an item to a slice
    a = append(a, "d")   // append takes in the the array and the value we are adding
    fmt.Printf("%#v", a) // returns []string{"a", "b", "c", "d"}

    // removing from a slice by slicing
    a = append(a[0:3])   // 0 represents the index, while 3 represents the position
    fmt.Printf("%#v", a) // returns []string{"a", "b", "c"}

    // slices can also be created using the make method(in-built)
    // the first value is the type, the second and the third value is the length and maximum capacity of the slice
    b := make([]string, 3, 5)
    fmt.Printf("length of b is:%#v, and cap of b is:%#v\n", len(b), cap(b)) // returns length of b is:3, and cap of b is:5

Slice Playground

Function

Javascript

In Javascript a function expression can be written using the function keyword, arrow function(ES6) can also be used.

// using the function keyword
   function a(value) {
       return value
   }
   const val = a("this is the value")
   console.log(val)
// using arrow function
   const b = ((value) => value) 
   const val2 = b("this is another value")
   console.log(val2)

Javascript Function Playground

Golang

Using the func keyword, a function expression can be written in go.

  func a() {
   fmt.Println("this is a function")
}
  a() // returns "this is a function"
// parameters and return type can also be specified
  func b(a,b int) int { // takes in value of type int and returns an int
     result := a * b
   return result
}
  val := b(5,6)
  fmt.Println(val) // returns 30

Go Function Playground

Objects

Javascript

In JavaScript we can write Objects by specifying the key and the value in curly braces separated by a comma.

  const music = {
   genre: "fuji",
   title: "consolidation",
   artist: "kwam 1",
   release: 2010,
   hit: true
}
console.log(music) // returns {genre: "fuji", title: "consolidation", artist: "kwam 1", release: 2010, hit: true}

Javascript Object Playground

Golang

In Golang there is Structs which holds a field and the field type

  type Music struct {
    genre   string
    title   string
    artist  string
    release int
    hit     bool
}
ms := Music{
    genre:   "hiphop",
    title:   "soapy",
    artist:  "naira marley",
    release: 2019,
    hit:     true,
}
fmt.Printf("%#v\n", ms) // returns main.Music{genre:"hiphop", title:"soapy", artist:"naira marley", release:2019, hit:true}

Go Struct Playground

Helpful Golang resources

Tour of go
Complete go bootcamp
RunGo
gobyexample

Practical Explanation Of Javascript Iterators(with a demo app)

/[Abejide Femi Jr]\s/ — Tue, 29 May 2018 01:37:34 +0000

What are Iterators?

Iterators in a layman term are used to iterate through a collection of objects.Iterators is an ES6(EcmaScript6) feature and it is an advanced loops that can be paused, an iterator provides the next() method which returns the next item in the sequence, the value property can be used to access value of the current item, an iterator is considered to be terminated when the next() method return an object with the done property set to be true.
Here is an Example Below

     function Iterator(names){
        //set the index to 0
        let nextIndex = 0;
        return {
            next() {
            return nextIndex < names.length 
                    ?
                {value:names[nextIndex++], done:false}
                    : 
                {done:true}
            }
        }
    }
    //Create an array
    let names = ['wale', 'ali', 'john', 'bubu'];
    //pass the array into the Iterator function
    let name = Iterator(names);
    console.log(name.next().value);//wale
    console.log(name.next().value);//ali
    console.log(name.next().value);//john
    console.log(name.next().value);//bubu
    console.log(name.next().value);//undefined

From the code above, the first four calls gives us the value of the first four item in the array, the last returns undefined, because the iteration was terminated as there is no longer item in the array to iterate through.
Below is the console output

I will be explaining iterators practically by building a demo app, so it gives us an overview of what iterators is being used for in a real-world application, In this app, i will be fetching data from https://api.github.com/users, it will enable us to view the first 46 users profile.
Here is the HTML structure

    <!doctype html>
<html lang="en">
  <head>
    <title>Profile Scroller</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-6 mx-auto text-center">
          <h1 class="mb-3">Profile Scroller</h1>
          <div id="imageDisplay"></div>
          <br>
          <div id="profileDisplay"></div>
          <br>
          <button id="next" class="btn btn-dark btn-block">Next</button>
        </div>
      </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
    <script src="app.js"></script>
  </body>
</html>

Below is the Javascript code

         //create the function
  function Iterator(profile) {
    //set the index to 0
    let nextIndex = 0;

    return {
      next() {
        return nextIndex < profile.length 
              ?
          {value: profile[nextIndex++], done: false}
              :
          {done: true}
      }
    }
  }
  //html classes and ids stored in object
  let selector = {
    next : 'next',
    profile : 'profileDisplay',
    image: 'imageDisplay'
  }

//Using AJAX to fetch data
  var xhr = new XMLHttpRequest();

  xhr.open('GET', 'https://api.github.com/users', true);

  xhr.onload = function() {
    if (this.status === 200) {
      let data = JSON.parse(this.responseText);
      //pass the data coming in from the API into the iterator function
      let profile = Iterator(data);
      //call the load function to load the first profile
      loadProfile();
      //create an event listener for the button
      document.getElementById(selector.next).addEventListener('click', loadProfile);

      function loadProfile() {
        //get the value of the current and next data
        const currentProfile = profile.next().value
          //check if the current value is not undefined
          if(currentProfile !== undefined){
            document.getElementById(selector.profile).innerHTML =
            `<ul class="list-group">
                    <li class="list-group-item">Login: ${currentProfile.login}</li>
                    <li class="list-group-item">Id: ${currentProfile.id}</li>
                    <li class="list-group-item">Type: ${currentProfile.type}</li>
              </ul>
            `
            document.getElementById(selector.image).innerHTML = `<img src="${currentProfile.avatar_url}" class="w-25">`;
          }
        else {
          //reload the page after the last iteration
          window.location.reload();
        }
      }
    }
  }
  xhr.send()

In the code above, the Iterator Function was created, the data fetched from the API, was passed into the Iterator function, from the API we can access the avatar, login, id and type which is being displayed in the browser, after the last iteration, the page reloads, and the function loadProfile is called again.

Below is the output in the browser

Note

We also have Generators, but Generators are slightly different from iterators, The data being fetched can be created, also data can come from any External API.
Here is a link to the app
Thank You For Reading, Happy Coding!

Beginners Guide To Fetching Data With (AJAX, Fetch API & Async/Await)

/[Abejide Femi Jr]\s/ — Sun, 20 May 2018 21:02:06 +0000

Introduction

In this tutorial, I will be explaining how to fetch data asynchronously from an external API using web technologies like AJAX, Fetch API and Async/Await.

How To Fetch Data From An External API

AJAX

AJAX stands for Asynchronous Javascript and XML, it is a set of web technology to send and receive data asynchronously from a client or server, it is done behind the scene and you don't need to reload the webpage, JSON(Javascript Object Notation) have actually replaced XML(eXtensible Markup Language), most of the API's returns JSON data, AJAX can also return plain text.

Below is a description of how AJAX works

Request is being sent by making an AJAX call, Data in JSON format is being fetched asynchronously from the server and page content is being updated without reloading your webpage, we can fetch data from our local machine or server, public API.
I'll be demonstrating in the code below how to get data from Github API, an external API with AJAX.

    //Create the XHR Object
    let xhr = new XMLHttpRequest;
    //Call the open function, GET-type of request, url, true-asynchronous
    xhr.open('GET', 'https://api.github.com/users', true)
    //call the onload 
    xhr.onload = function() 
        {
            //check if the status is 200(means everything is okay)
            if (this.status === 200) 
                {
                    //return server response as an object with JSON.parse
                    console.log(JSON.parse(this.responseText));
        }
                }
    //call send
    xhr.send();
    //Common Types of HTTP Statuses
    // 200: OK
    // 404: ERROR
    // 403: FORBIDDEN

Below is the data

Fetch API

It is the newest standard for dealing with HTTPRequest, it is part of the window object, and we can easily fetch data from an external API as well.Fetch returns Promises
I'll be demonstrating in the code below how to get data from Github API, an external API with Fetch API.

    //call the fetch function
    fetch('https://api.github.com/users')
    .then(res => res.json())//response type
    .then(data => console.log(data)); //log the data;

Below is the data

Async/Await

It is part of the ES7 standard, it is now fully implemented in Chrome, we add async to the function and it returns a Promise.
I'll be demonstrating in the code below how to get data from Github API, an external API with Async/Await.

    async function getData() 
        {
            //await the response of the fetch call
           let response = await fetch('https://api.github.com/users');
            //proceed once the first promise is resolved.
           let data = await response.json()
            //proceed only when the second promise is resolved
            return data;
        }
//call getData function
getData()
.then(data => console.log(data));//log the data

Below is the data

Note

Any of the three methods can be used to fetch data, i actually prefer to use Fetch API, and there are several methods(axios, superagent e.t.c) apart from three methods, not discussed in this context, API's are different, how request is being taken and how response is being served differs, documentation is being provided for external API's to guide you.
I hope you enjoyed the tutorial, Thanks For Reading.

Awesome Visual Studio Code Extensions

/[Abejide Femi Jr]\s/ — Fri, 11 May 2018 08:16:42 +0000

What's Visual Studio Code?

Visual Studio Code is a source editor developed by microsoft for windows, linux and MacOS, it includes suppport for debugging, embedded git control, syntax highlighting, intelligent code completions, code snippets and code refractoring.
I enjoy using visual studio code for writing codes, and my favorite extensions are listed below in no particular order.

Extensions

1 Open In Browser

This extension was developed by TechER, and it allows you to open the current file in your default browser or application, finally you can open HTML pages with browsers you specify, right click and select 'open in defalult browser' after installation, pretty awesome, isn't it?.

2 Indent Rainbow

This extension makes indentation easier to read, it colorises the indentation in front of your text alternating four different colors on each step, oderwat developed this extension.

3 Bracket Pair Colorizer

Undoubtedly my favorite extension, this extension allows matching brackets to be identified with colors, users can define which characters to match, and which colors to use, this sweet extension was developed by CoeenraadS.

4 Javascript(ES6) Code Snippets

This extension contains code snippets for Javascript in ES6 syntax, it was developed by charalampos karypidis

5 React Native Tools

This extension provides a development environment for React Native projects. Using this extension, you can debug your code, quickly run react-native commands from the command palette, and use IntelliSense to browse objects, functions and parameters for React Native APIs, it was developed by visual studio mobile tools.

6 HTML5 Boilerplate

This extension provides the standard HTML boilerplate code used in all web applications, sidthesloth developed this.

7 TS(typescript)lint

Integrates the tslint linter for the TypeScript language into VS Code, developed by egaama.

8 Angular v6 Snippets

This extension for Visual Studio Code adds snippets for Angular for TypeScript and HTML, it was developed by John Papa.

How To Install An Extension

1 Launch visual studio code
2 Launch the command Ctrl+Shift+p.
3 Type Install Extensions and select 'Extensions : Install Extensions'.
4 Type in your favorite extension and choose from the dropdown, Install it.
5 Launch the command Ctrl+Shift+p and type reload window, select it to reload visual studio code.
Thanks For Reading, Happy Coding!.