DEV Community: Emmanuel Etukudo

Build automatic URL shortener with react and Emly

Emmanuel Etukudo — Wed, 22 Sep 2021 23:59:25 +0000

Automatic link shortening is increasingly getting popular. Top tech companies (eg: Twitter and LinkedIn) are leveraging automatic link shortening to reduce the length of horrible-looking URLs. Twitter uses T.co behind the senses to shorten URLs posted on the micro-blogging platform. LinkedIn also uses the same technique to shorten links posted on the platform.

In this tutorial, we'll explore how to implement automatic link shortening in react using Emly.cc.

To follow along with this React tutorial, you should have:

Familiarity with CSS, HTML, and Javascript ES6
Node.js installed on your system
A web browser installed in your system, i.e., Chrome
A code editor installed on your development machine, i.e., VS Code
A basic understanding of React

Setting up an Emly account

Visit http://emly.cc/register to create a new account.

Next, obtain your API key from your dashboard. Scroll down to the footer, click on the developer, select link, and click on Get your API key. See screenshot below:

With your API key in place, let’s proceed to build our project in the next section.

Building the frontend

Before we begin, let's initialize a new React app, install the emly-nodejs SDK, and set up a backend server for the project. Navigate to your work directory, and run the code below in your terminal for mac users or command prompt for windows users to initialize a new react project.

npx create-react-app emly-app

Next, run the code below to test run your app.

cd emly-app &&
npm start

Your app should look similar to the screenshot below.

Next, create a new folder components, navigate to it and create a file ResizeableTextbox.js and copy-paste the code below.


import React from 'react';
import axios from 'axios';
class ResizableTextarea extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            post: '',
            rows: 5,
            minRows: 5,
            maxRows: 20,
            showPost: false,
            newPost: null,
        };
        this.handelSubmit = this.handelSubmit.bind(this);
        this.handleChange = this.handleChange.bind(this);
        this.getUrl = this.getUrl.bind(this);
        this.replaceUrl =  this.replaceUrl.bind(this);
    }

    replaceUrl = (post) => {
        if(!post) return;
        var urlRegex = /(((https?:\/\/)|(www\.))[^\s]+)/g;
        return post.replace(urlRegex, function(url) {
            var link = url;
            if (!link.match('^https?:\/\/') ) {
                link = 'http://' + link;
            }
        return '<a href="' + link + '" target="_blank" rel="noopener noreferrer">' + url + '</a>'
        })
    }
    getUrl = (post) => {
        var urlRegex = /(((https?:\/\/)|(www\.))[^\s]+)/g;
        return post.match(urlRegex);
    }
    handleChange = (event) => {
        const textareaLineHeight = 24;
        const { minRows, maxRows } = this.state;
        const previousRows = event.target.rows;
        event.target.rows = minRows; // reset number of rows in textarea 
        const currentRows = ~~(event.target.scrollHeight / textareaLineHeight);
        if (currentRows === previousRows) {
            event.target.rows = currentRows;
        }
        if (currentRows >= maxRows) {
            event.target.rows = maxRows;
            event.target.scrollTop = event.target.scrollHeight;
        }
        this.setState({
            post: event.target.value,
            rows: currentRows < maxRows ? currentRows : maxRows,
        });
    };
    handelSubmit = (e) => {
        e.preventDefault();
        let post = this.state.post;
        let urls = this.getUrl(post);
        var urlRegex = /(((https?:\/\/)|(www\.))[^\s]+)/g;
        var self = this;

        axios.post('http://localhost:9000/create',
            { url: urls[0] })
            .then(function (res) {
                if (res.data) {
                    const url = res.data.data.short_url;
                    const newPost =   post.replace(urlRegex, res.data.data.short_url);
                  self.setState({
                    showPost: true, 
                    newPost: newPost
                });
                }
            })
    }
    render() {
        return (
            <div className="col-md-8">
                {!this.state.showPost && <form onSubmit={this.handelSubmit}>
                    <label className="form-label">Creat a Post</label>
                    <textarea
                        rows={this.state.rows}
                        value={this.state.post}
                        placeholder={'Enter your text here...'}
                        className={'textarea'}
                        onChange={this.handleChange}
                    />
                    <button type="submit" className="btn btn-warning">Publish</button>
                </form>}
                {this.state.showPost &&
                    <div className="card" style={{border: '1px', margin: "20px"}}>
                        <div className="card-body">
                            <p className="card-text m-4">
                            <span dangerouslySetInnerHTML={{__html: this.replaceUrl(this.state.newPost)}} />
                            </p>
                        </div>
                    </div>
                }
            </div>
        );
    }
}
export default ResizableTextarea;

From the code snippet above, when a user submits the form, the handelSubmit function is called, we use the regular expression urlRegex to search for URL from the post, and pass it to our backend server which in turn communicate to emly.cc’s API to get the link shortened. The replaceUrl function searches the post once more, this time to convert the shortened URL to a clickable hyperlink.

Next, update the code in App.js with the code below.

import './App.css';
import ResizableTextarea from './components/ResizeableTextbox';
function App() {
  return (
    <div className="App">
      <header className="App-header">
      <ResizableTextarea/>
      </header>
    </div>
  );
}
export default App;

Next, run the code below in the terminal for mac or command prompt for windows users to start your app.

Lastly, update the App.css with the code below.

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: #ffffff;
}

.App-link {
  color: #61dafb;
}

.textarea {
  box-sizing: border-box;
  border: none;
  border-radius: 3px;
  resize: none;
  font-size: 20px;
  line-height: 24px;
  overflow: auto;
  height: auto;
  color: #282c34;
  padding: 8px;
  width: 100%;
  box-shadow: 0px 4px 10px -8px black;
}
.textarea::-moz-placeholder {
  color: gainsboro;
}
.textarea:-ms-input-placeholder {
  color: gainsboro;
}
.textarea::placeholder {
  color: gainsboro;
}
.textarea:focus {
  outline: none;
}

Now, run the app with the command below.

npm run start

Your app should look similar to the screenshot below.

Building the back-end server

Now that you have completed the frontend on the project, let’s proceed to build a server that will handle all our backend requests.

Navigate into your work directory and follow the instructions below to initialize a new Nodjs project.

mkdir emly-server &&
npm init -y

On initialization complete, run the code below to install the emly-nodejs SDK and other dependencies required in this section.

npm i emly-nodejs body-parser cors dotenv express nodemon

Now, create a new file index.js, and copy-past the code below.

require('dotenv').config();
const express = require('express');
const app = express();
const cors = require('cors');
const bodyParser = require('body-parser');
const port = 9000;
const emly = require('emly-nodejs')(process.ev.KEY);

//Body-Parser
app.use(express.json({limit: '50mb'}));
app.use(bodyParser.urlencoded({limit: "50mb", extended: true }));
app.use(bodyParser.json());
//handel cors
app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    next();
});
app.use(cors({
    origin: '*',
    methods: ['GET','POST','DELETE','UPDATE','PUT','PATCH']
}));

app.get('/links', (req, res) => {
   emly.link.list()
   .then(function(body){
       res.send(body);
   })
   .catch(function(error){
       res.send(error);
   })
})
app.post('/create', (req, res) => {
    const {url} = req.body;
    emly.link.create({
        url: url,
      })
        .then(function(error, body) {
            res.send(error);
            res.send(body);
    });
 })

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

Note: endeavor to create a .env file and add your API key. See the example below.

KEY=your_api_key_goes_here

Next, run the code below to start the server.

npm run serve

With your backend and front-end server running, add text with a long URL to the text box and click publish. After the article is published, your app should look similar to the screenshot below.

Conclusion

Whether you are looking to add automatic URL shortening to your existing react app, or you want to get detailed analytics of all the links shared on your mobile/web app, emly.cc’s URL shortener has a detailed API to get you started within few minutes.

Best Free URL Shortener

Emmanuel Etukudo — Fri, 20 Aug 2021 13:49:14 +0000

You can Brand, track, and share your short links, engage with your users for free. Visit http://emly.cc to get started.

Other features:

Dark mood,
Link retargeting
Statistics

https://emly.cc

marketing #emly

How to implement an API using Vuejs & Axios

Emmanuel Etukudo — Sun, 24 Jan 2021 09:04:11 +0000

Case study: Hacker News API

Prerequisite

Laptop with an Internet connection
An API client (e. g: Postman or Insomnia)
A code editor
Basic knowledge of Javascript, Vue.js, Axios, CSS, HTML
Concentration

This tutorial will get you started with Hackernews API, get you aquatinted with the 5 major endpoints shipped with this API, explain how you can make different requests, as well as teach you how to build a simple restful API based news aggregator on top of the API. The Hacker News API is developed by Hackernews in partnership with Google’s Firebase with the aim to make the public Hacker News data available in near real-time. This tutorial will not cover API development in-depth but will work you through how to test and consume API endpoints effectively.

How to follow this tutorial

This tutorial is divided into 3 deferent sections as follows:

Getting Started
Making API requests to the available endpoints
The Hacker News Reader App

To get the best out of this tutorial, I will advise you to follow this tutorial one section after the other as each section seamlessly introduces the other. If you are ready to learn new techniques, join me let’s set the ball rolling.

Getting Started

Before we begin, a tour around the endpoints shipped with this API will give you glims of how the API is designed, structured, and served. The Hackernews API has 5 major endpoints that are used to aggregate news stories, jobs, poles, and comments on the Hackernews website. For basic information and to explain how simple the API is, I will explain the 5 endpoints by making the requests to endpoints listed below using Postman:

Items
Users
Top Stories
Max Item ID
Changed Items and Profiles

The base URL for the endpoints is http://hacker-news.firebaseio.com/Items/v0/item/.json

The Item endpoint returns all link posts, comments, jobs, Ask HN posts, and polls all categorized as “items”. They can be accessed by their unique id at this endpoint. Let’s test the ‘items’ endpoint together, open Postman set your Request URL like so: https://hacker-news.firebaseio.com/v0/item/8861.json, select ‘GET’ as your request type and press send. You should get the same result as the screenshot below:

You noticed I replaced the ‘integrid’ with ‘/v0/item/8861.json/’ as the unique identifier for this particular item. Note: an item can either be a story, comment, job, ask, etc., you can as well traverse the tree and get even deeper. We will practice more on traversing in the Hackernews Reader App section.

Users /v0/user/<userid>.json

Each user is uniquely identified by case-sensitive ‘ids’, and live under ‘/v0/user/’. This endpoint only reveals users that have public activity (e.g: comments or story submissions) on the website. The screenshot below is a result of a ‘GET’ request to the URL https://hacker-news.firebaseio.com/v0/user/john.json.

You noticed the unique identifier this time is ‘john’. What if you are looking to get all the comments the user has made so far? The ideal solution would be using the ‘submitted’ array to access items the user has published. Remember, the endpoint only return a user with activity. We will dive deeper into this in the next section.

Top Stories /v0/topstories.json

This endpoint returns the item ids for the top 500 stories on Hackernews. You can use this endpoint to access the ids of the top items on the site. The latest stories can be accessed at ‘/v0/topstories’ (also contains jobs) and ‘/v0/newstories’. Best stories can be accessed as well at ‘/v0/beststories’. The screenshot below is the result of a ‘GET’ request to https://hacker-news.firebaseio.com/v0/topstories.json.

There is more you can achieve with this endpoint, we will be making use of this API endpoint in the Hackernews Reader App section.

Max Item ID

This endpoint returns the current largest item id /v0/maxitem. This might be the right approach to guessing backward to discover all items available on the API.

Changed Items and Profiles

This API returns a list of items and profiles that have changed in realtime. Thanks to Firebase for this awesome feature, the item, and profile changes are at ‘/v0/updates’. This endpoint can be very helpful if you are looking to track real-time changes within your application.

The Hacker News Reader App

If you have been following this tutorial up to this point, congratulations you are fully equipped with the knowledge and understanding needed to build the Hackernews Reader App. Let’s start off by making a request to fetch 50 top stories and order them in descending order, and get them sorted by votes. This will be the building block for our Reader App. We will use Javascript to handle the logic for this application, Vue.js, to build the front-end and Axios for sending requests to the endpoints respectively.

What is Vue.js?

Vue is a progressive framework for building user interfaces. Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries. I didn’t choose vue.js for this tutorial for any other reason other than its simplicity, and how it is easy to get along with. This reason isn’t limited to what you can achieve with vue.js, you can also build this application with other front-end frameworks like react.js or angular. You can read the documentation and get started with vue.js here.

What is Axios?

Axios is a promise-based HTTP client for the browser and node.js. Axios is a Javascript library pretty easy to integrate with any front-end framework or existing application written in Javascript. We will not be using axios within vue.js because I don’t want us to make multiple requests within our components. We will create a “story-service” that will handle all requests to our endpoints, pass the output via props within components. Click here to read instructions on how to install axios via the node.js package manager (npm).

Setup and Installation:

Create a new application
Install Axios
Create a service folder

Let’s get started, navigate to your working directory, and copy-paste the code below on your terminal to create a vue.js application. Make sure you have vue-cli installed on your machine. You can follow instructions on how to install and get started with vue-cli here.

$ vue create vue-hackernews

Select your preferred add-ons and type the code below:



    $ cd vue-hackernews
    $ npm run serve

If you got everything set up correctly, you should have the result below:



    App running at:
    - Local: http://localhost:8081/
    - Network: http://172.20.10.3:8081/

Hold-down command key and click on the local link to view the Web App in your browser (cmd + click). Bravo!! You should get the result below:

Install Axios:

Copy-paste the code below on your terminal to install Axios:



$ npm i axios

Now that you have generated the barebones of the Reader App, create a new folder inside the ‘src’ folder name its services. Next, let’s rouse through our folder structure and remove some content we don’t need. Below is a traversing tree of what our folder structure looks like.

├── vue-hackernews
├── public
   ├── style.css
├── src
   ├── assets
      ├── css
         ├── main.css
      ├── bk-sale.png
├── componets
    ├── singleStory.vue
    ├── storyItem.vue
├── router
    ├── index.js
├── services
    ├── storyService.js
├── views
    ├── home.vue
    ├── singleStory.vue
├── App.vue
├── main.js

Folder Structure Explained:

The Hackernews Reader App is a single-page application built with the aim to illustrate how you can build an application on top of the Hackernews API. If you used veu-cli to generate the application, you should have a similar folder structure as the folder structure above. The ‘/src’ folder is the entry-point for our application, it contains all folders and relevant files for our web app. The ‘/asset’ folder contains the stylesheet and images for the application, the ‘/components’ folder holds all the components for the application, the ‘/router’ folder contains ‘index.js’ a script responsible for routing in the application, the ‘/services’ folder is a custom folder I created, it contains all services for the application, the ‘/view’ folder contains all the views for the application (e.g: home.vue and singleStory.vue), the ‘App.vue’ renders all the views/routes in the application, lastly, the ‘main.js’ file is a script that renders ‘App.vue’ component the parent component for the entire application by passing it to vue.js engine which will in-turn convert it to ‘HTML’ that is readable on web browsers.

Building the “story-service”

Navigate into the services folder, create a new file called ‘storyService.js’, copy-paste the code below:



import axios from 'axios';
    const baseUrl = 'https://hacker-news.firebaseio.com/v0';
    /* 
     *  Fetch list of the top 50 stories
     *  returns stories[].
    */
    export async function getTopStories() {
        let stories = [];
        const response = await axios.get(`${baseUrl}/topstories.json`, {
            params: {
                limitToFirst: '50',
            }
        });
        stories = response.data;
        return stories;
    }
    /* 
     *  Fetch items based on 'ids' from getTopStories()
     *  returns items[].
    */
     export async function storiesWithItems(){
         let items = [];
         getTopStories().then(stories => {
              stories.forEach(id => {
               axios.get(`${baseUrl}/item/${id}.json`).then( res => {
                items.push(res.data);
               });
              });   
         });
         return items;
     }
    /* 
     *  Makes request based on the 'id' param
     *  returns response[].
    */
     export async function getSingleItem(id){
        let response;
        response = await axios.get(`${baseUrl}/item/${id}.json`);
        return response.data;
    };

    /* 
     *  Makes request based on the 'id' passed to the
     *  getSingleItem(<id>), loops through kids[];
     *  returns comments[].
    */
    export async function getSingleStoryComments(id) {
        let comments = [];
        getSingleItem(id).then(res => {
            res.kids.forEach(comment => {
                 axios.get(`${baseUrl}/item/${comment}.json`).then(res => {
                     comments.push(res.data);
                 });
            })
        });
        return comments;
    }
    /* 
     *  Sorts the result based on the property score;
     *  returns a sorted array.
    */
    export function sortByScore(a, b){
        if (a.score < b.score) {
            // a comes before b in the sorted order 
            return -1;
        }else if(a.score > b.score){
            // a comes before b in the sorted order
            return 1;
        }else{
            // a and b are the same
            return 0
        }
    }

The concept of these services can be likened to a troop of soldiers fighting together for a single cause. We could have as well built the entire App with one or two functions, but we have to make our App reusable, maintainable, also easy to read and understand.

getTopStories():

I started off by importing axios, then I declared a constant to hold the baseurl for our API, the getTopStories() function makes an asynchronous request to the ‘topstories.json’ endpoint and returns 50 stories ordered by votes in descending order. You noticed within the params ‘Object’ I include the ‘orderBy: votes’ and ‘limitToFirst: 50’, these parameters are passed as headers through the URL when the request is sent and will be received by the endpoint to retrieving the data. You can read more on retrieving data in Firebase here.

The getTopStroies() function only returns ids for the first 50 top stories. To access details of the stories we need to make another iterative request based on the result we get to the /item/${id}.json endpoint. We could have as well handled this within this function, but we need to keep maintainability in mind, so we will let another function handle that.

storiesWithItems():

This function relies on the getTopStories() function to fetch stories associated with the ‘ids’ it returns. They are a lot of ways you can get this task done, I chose to make a new request to /item/${id}.json endpoint by iterating each ‘ids’ returned from the ‘getTopStroies()’ function. Each item found within the loop is pushed to the ‘item’ array which is returned when the loop ends.

getSingleItem(id):

The getSingleItem() sends a request to the /item/${id}.json endpoint and returns a single item based on the itemid passed to it. This function is also used by the getSingleStoryComments(id) to fetch comments associated with the current item.

getSingleStoryComments(id):

This function is similar to the storiesWithItem() function, its primary purpose is to return all the comments associated with a single item by iterating its kids array and making a request to the /item/${id}.json endpoint with each of the kid. It’s amazing how the Hackernews API is structured, comments are items with the “type: comment” and are direct children of the story ‘object‘ accessible via the kids array.

Sorting the items based on the highest vote:

sortByScore(a, b):

The sortByScore() is a callback function that defines the sort order for our items, the function is often passed as a parameter to the javascript function sort. In our case, the sorting is done based on the item with the highest vote. It compares the first element (a) with the next (b) in the object of an array based on the highest score, reduces its index number, and push it forward one step each time a match is not found vis-visa. Read more on the sort function here.

Building the components

Now that you are done with building the story service, let’s create the components needed for our application. Navigate to the component folder and create singleitem.vue and singleStoryItem.vue components.

copy and paste the code below to create the signgleItem.vue:



<template>
    <div class="story">
    <span class="score">{{ item.title | url }}</span>
    <router-link  :to="{ path: '/story/' + item.id }"
    >{{ item.title }}
    </router-link><br />
    <span class="own-url">{{ item.url | host }}</span><br />
    <span class="meta">
    by: <span class="author">@{{ item.by }} </span> | Time: {{ item.time }} Ago | {{
    item.descendants }} comments
    </span>
    </div>
    </template>
    <script>
    export default {
    name: 'storItem',
    props:{
    item: {
    type: Object,
    required: true,
    },
    index:{
    type: Number,
    required: true,
    }
    },
    filters:{
    url: function(str){
    return str.substring(0, 2).toUpperCase();
    }
    }
    }
    </script>
    <style scoped>
    .item {
    border-radius: 5px;
    padding: 20px;
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    }
    .salepill {
    background: rgb(232, 35, 25);
    color: white;
    font-family: 'Barlow', sans-serif;
    position: absolute;
    right: 30px;
    top: 60px;
    padding: 2px 10px 4px;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
    border-radius: 1000px;
    }
    .author{
    color: #FFF;
    border-radius: 10px;
    background: teal;
    }
    .own-url{
    font-size: .8rem;
    color: black;
    }
    .story {
    background-color: #fff;
    padding: 20px 30px 20px 80px;
    border-bottom: 1px solid #eee;
    position: relative;
    line-height: 20px;
    }
    .score {
    color: #f60;
    font-size: 1.1em;
    font-weight: 700;
    position: absolute;
    top: 50%;
    left: 0;
    width: 80px;
    text-align: center;
    margin-top: -10px;
    }
    .story a {
    color: #34495e;
    font-weight: 600;
    text-decoration: none;
    }
    .story a span {
    font-size: 0.85em;
    margin-left: 10px;
    color: #828282;
    }
    .story .meta {
    font-size: 0.85em;
    color: #828282;
    }
    </style>

This component is created with flexibility in mind, it accepts the ‘item’ and ‘Index’ as props. Props in vue.js are used to pass data from one component to the other. We won't dive really deep into veu.js as it is beyond the scope of this tutorial.

The singleStoryItem.vue component:

copy and paste the code below to create the component.



<template>
    <div class="comment-container">
    <h2 class="story-title">{{ item.title }}</h2>
    <p class="score">Votes: {{ item.score }}</p>
    <p class="author-url">{{ item.url }}</p>
    <div v-for="(comment, index) in comments" :key="index">
    <div class="comment-wrap">
    <div class="comment-block">
    <p class="comment-text">{{ comment.text }}</p>
    <div class="bottom-comment">
    <div class="comment-author">{{ comment.by }}</div>
    <div class="comment-date">{{ comment.time }}</div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </template>
    <script>
    export default {
    name: "single-story",
    props:{
    item: {
    type: Object,
    required: true,
    },
    comments:{
    type: Array,
    required: true,
    }
    }
    }
    </script>
    <style scoped>
    .comment-container{
    width: 60%;
    margin: 0 auto;
    color: #000;
    }
    .story-title, .score, .author-url{
    padding: 1rem;
    }
    .story-title{
    text-transform: uppercase;
    font-weight: 900;
    }
    .author-url{
    font-size: .8rem;
    font-weight: 900;
    }
    .score{
    font-weight: 900;
    }
    .comment-wrap {
    margin-bottom: 1.25rem;
    display: table;
    width: 100%;
    min-height: 5.3125rem;
    }
    .photo {
    padding-top: 0.625rem;
    display: table-cell;
    width: 3.5rem;
    }
    .photo .avatar {
    height: 2.25rem;
    width: 2.25rem;
    border-radius: 50%;
    background-size: contain;
    }
    .comment-block {
    padding: 1rem;
    background-color: #fff;
    display: table-cell;
    vertical-align: top;
    border-radius: 0.1875rem;
    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
    }
    .comment-block textarea {
    width: 100%;
    resize: none;
    }
    .comment-text {
    margin-bottom: 1.25rem;
    }
    .bottom-comment {
    color: #acb4c2;
    font-size: 0.875rem;
    }
    .comment-date {
    float: left;
    }
    .comment-actions {
    float: right;
    }
    .comment-actions li {
    display: inline;
    margin: -2px;
    cursor: pointer;
    }
    .comment-actions li.complain {
    padding-right: 0.75rem;
    border-right: 1px solid #e1e5eb;
    }
    .comment-actions li.reply {
    padding-left: 0.75rem;
    padding-right: 0.125rem;
    }
    .comment-actions li:hover {
    color: #0095ff;
    }
    </style>

The singleStoryItem.vue component is similar to singleItem.vue the difference is that I removed the index prop and added the comment prop with the ‘type: Array’. You will understand why I have chosen to build this component this way in the next section.

Building the Home and SingleStory View:
Home view:

copy and paste the code below to create the home view:



<template>
    <div class="home">
    <div class="banner">
    <h2 class="header">Hacker News API Implementation</h2>
    <img class="home-img" src="../assets/bk-sale.png">
    </div>
    <storyItem v-for="(story, index) in stories" :key="index" :item="story" :index="index"></storyItem>
    </div>
    </template>
    <script>
    // @ is an alias to /src
    import storyItem from '@/components/storyItem.vue';
    import { storiesWithItems, sortByScore } from '../services/storyService';
    export default {
    name: 'Home',
    components: {
    storyItem
    },
    data(){
    return{
    stories: [],
    }
    },
    created(){
    storiesWithItems().then(res => {
    this.stories = res.sort(sortByScore);
    });
    },
    }
    </script>
    <style scoped>
    .content {
    /*no grid support*/
    float: left;
    width: 79.7872%;
    /* grid */
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    padding: 0 !important;
    margin: 30px;
    }
    .banner{
    display: flex;
    flex-direction: row;
    align-content:space-between;
    background-color: teal;
    }
    .header{
    font-weight: 900;
    margin: 4rem;
    width: 60%;
    }
    .home-img{
    width: 40%;
    }
    </style>

You noticed I imported the singleItem component as a child component and the storiesWithItem() function from the storyService into the home view. The data supplied to the props is the response from storiesWithItems() function. This is part of the reason why it was wise to make our App rousable, so we ended up making only one request with the ‘created block’ to execute this task.

SingleStory View:

copy and paste the code below to create the home view:



<template>
    <div class="home">
    <div class="banner">
    <h2 class="header">Hacker News API Implementation</h2>
    <img class="home-img" src="../assets/bk-sale.png">
    </div>
    <div class="container">
    <singleStoryItem :item="story" :comments="comments"></singleStoryItem>
    </div>
    </div>
    </template>
    <script>
    // @ is an alias to /src
    import singleStoryItem from '@/components/singleStoryItem.vue';
    import {getSingleItem, getSingleStoryComments } from '../services/storyService';
    export default {
    name: 'Home',
    components: {
    singleStoryItem
    },
    data(){
    return{
    story: {},
    comments: [],
    }
    },
    created(){
    getSingleItem(this.$route.params.id).then(res => {
    this.story = res;
    });
    getSingleStoryComments(this.$route.params.id).then(res => {
    this.comments = res;
    })
    },
    }
    </script>
    <style scoped>
    .content {
    /*no grid support*/
    float: left;
    width: 79.7872%;
    /* grid */
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    padding: 0 !important;
    margin: 30px;
    }
    .banner{
    display: flex;
    flex-direction: row;
    align-content:space-between;
    background-color: teal;
    }
    .header{
    font-weight: 900;
    margin: 4rem;
    width: 60%;
    }
    .home-img{
    width: 40%;
    }
    </style>

The output for the above code will result in the screenshot below:

Finally, update the ‘App.vue’, ‘router.js’ and ‘main.css’ like so:

router.js:



import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Home from '../views/Home.vue'
    import Single from '../views/SingleStory.vue';
    Vue.use(VueRouter)
    const routes = [
    {
    path: '/',
    name: 'Home',
    component: Home
    },
    {
    path: '/story/:id',
    name: 'single',
    component: Single,
    }
    ]
    const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
    })
    export default router

You noticed the story path has a parameter “/story/:id” which will be passed to the getSingleStoryComments(id) to fetch the current “item” associated with the “id”. This is really helpful thanks to the vue.js “$router.params” object.

App.vue:



<template>
    <div id="app">
    <div id="nav">
    <router-link to="/"> Home
    </router-link>
    </div>
    <router-view/>
    </div>
    </template>
    <style>
    @import url('./assets/css/main.css');
    </style>

main.css:



/* ---- global styles ---- */
    body,
    html {
      padding: 0;
      margin: 0;
      background: #f3f3f3;
      font-size: 16px;
      word-spacing: 1px;
      -ms-text-size-adjust: 100%;
      -webkit-text-size-adjust: 100%;
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      box-sizing: border-box;
      font-family: Avenir, Helvetica, Arial, sans-serif;
    }
    #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      color: white;
    }
    h1,
    h2,
    h3,
    h4 {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      font-weight: 700;
    }
    p,
    li {
      font-family: 'Barlow', sans-serif;
    }
    #nav{
      background-color: teal;
      height: 40px;
    }
    #nav a {
      text-decoration: none;
      color: #ffffff;
      margin: .7rem;
      margin-top: .8rem;
    }


    *,
    *:before,
    *:after {
      box-sizing: border-box;
      margin: 0;
    }

    .container {
      padding-right: 15px;
      padding-left: 15px;
      margin-right: auto;
      margin-left: auto;
    }

The full codebase for this tutorial will be available here.

Constrain:

While I appreciate the API’s simplicity, I’ve found out that the API requires making a lot of network requests to achieve a single task which I feel isn’t right considering the runtime. Take for instance, in order to pull all comments associated with a particular ‘item’ requires making iterative requests to the ‘item’ endpoint, imagine an item that has up to 300 comments, it will take a lot of time to load.

The Hackernews API is read-only, which limits the kind of request you can make to read-only. Despite the simplicity of the API, it is good at some things and not for others.

Conclusion:

There is a lot of approaches you can leverage to implement this API especially to improve runtime. You can cache the item objects in the browser and only have to make a network request to get the current top 50 ‘ids’, then only request the ones that aren’t currently cached, and then order the ‘items’ by the order in the top 50 list. Feel free to dig deep into this API and explore other concepts. I’ll like to hear from you please drop a comment below. Thank you for reading.

Server-Side Testing with Jest

Emmanuel Etukudo — Wed, 13 Jan 2021 11:30:18 +0000

This is the last tutorial for the Test-driven Development with Nodejs, Express, Mongoose & Jest series, in this tutorial we will focus on writing unit tests for the endpoints we built in the previous tutorial; Understanding MVC pattern in Nodejs.

Recall that we had covered installing of the Jest package via npm, and writing our first test in Jest. If you are reading this series for the first time, please follow the first tutorial here to get up and running.

Before we proceed, let's look at the topics covered in this tutorial.

Unit Testing
Mocking Technique
Parameterized testing
Configuring Jest to work with Nodejs

Unit Testing

Unit testing is a software testing technique where individual units (components) of software is tested. The purpose of unit testing is to validate that each unit of the software performs individual tasks as designed. A unit is the smallest testable part of any software.

Mocking Technique

Mocking is a technique where dummy values are referenced during testing to emulate an actual scenario or real code. Mocking helps achieve isolation of tests. Mocking is applicable to unit testing.

Parameterized testing

Parameterized tests allow us to run the same test multiple times using different values. This approach will help our code to test for different cases and seniors. In jest the must popular function used in Parameterized Testing is the each() global function.

Configuring `Jest` to work with `Nodejs`

Because Jest is primarily designed for testing React application so using Jest to test server-side applications (e.g: Nodejs) reacquires some configurations. Jest uses the jsdom test environment by default, it attempts to create a browser-like test environment in Node.js. Mongoose does not support jsdom in general and is not expected to function correctly in the jsdom test environment.

To change your testEnvironment to Node.js, create a new file name jest.config.js within the root directory of your tdd-with-nodejs project, and copy-paste the code below to add testEnvironment to your jest.config.js file:



module.exports = {
  testEnvironment: 'node'
};

Here we have explored a very basic config, you can read more about testing MongoDB with Jest here.

Testing the DB Connection

Now that you are familiar with our todo-list, let's begin the business of the day. First, open your "tdd-with-nodejs" project in your favorite code editor, navigate into the test directory, Delete the sum.test.js, and create a new file named db-connection.test.js.

Copy-paste the code below into your db-coonection.test.js file.



require("dotenv").config();
const mongoose = require("mongoose");
const ArticleService = require("../services/ArticleService");

describe("Connection", () => {
  beforeAll(async () => {
    await mongoose.connect(process.env.mongoURI, {
        useNewUrlParser: true,
        useCreateIndex: true,
        useUnifiedTopology: true,
    })
  });

  test("Retrieve article by Id", async () => {
    const id = "5ff2454f94eeee0a7acb5c30";
    const article =  await ArticleService.getArticlebyId(id);
    expect(article.title).toBe("This is another post example");
  });

  afterAll(async done => {
    mongoose.disconnect();
    done();
});

});

To test our DB connection, we have to initiate a connection to our MongoDB database then subsequently testing if the connection was successful by attempting to retrieve data from our "articles" collection. We are using the Mocking Technique to test if the article with the specified id is in our database. Since the beforeAll() is the block of code that runs before the rest of our code, it is the right place to actually perform the DB connection. This line of code; expect(article.title).toBe("This is another post example"); checks if the article returned from our DB has the title "This is another post example"; Similarly the afterAll() function executes a code block after all the test have passed.

Testing the `apiGetAllArticles` endpoint

Create a new file called get-all-articles.test.js in the test directory, and copy-paste the code below.



require("dotenv").config();
const mongoose = require("mongoose");
const ArticleService = require("../services/ArticleService");

describe("Get all Articles", () => {
    beforeAll(async () => {
        await mongoose.connect(process.env.mongoURI, {
            useNewUrlParser: true,
            useCreateIndex: true,
            useUnifiedTopology: true,
        })
    });

    test("Get all Articles", async() => {
        const articles = await ArticleService.getAllArticles();
        expect(articles).toEqual(expect.arrayContaining(articles)); 
    });

    afterAll(async done => {
        mongoose.disconnect();
        done();
    });
})

To validate if the output of our getAllArticles() endpoint returns an array, we make use of the expect(articles), toEqual(), and expect.arrayContaining(Array) function in Jest. Even as these functions come in handy, there's a great benefit to understand the logic behind their combination. Here, we are checking to see if the articles are returned from the database grouped in Array, what if there are no articles returned? The result will be an empty array []. Open your terminal, cd into your tdd-with-nodejs directory, copy-paste the code below to run the test.



$ npm test

You should get a response similar to the screenshot below

Testing for CRUD operation



require("dotenv").config();
const mongoose = require("mongoose");
const ArticleService = require("../services/ArticleService");

describe("Should perform CRUD on article Service", () => {
    beforeAll(async() => {
        await mongoose.connect(process.env.mongoURI, {
            useNewUrlParser: true,
            useCreateIndex: true,
            useUnifiedTopology: true,
        })
    });

    test("Creat article", async() => {
        const newArticle = {
            title: "All the test must pass",
            body: "Should the test fail, we should work had to improve our code",
            avartar: "https://dev-to-uploads.s3.amazonaws.com/i/blaf4ke2xt3j08mlx4ca.png",
        }
        const article =  await ArticleService.createArticle(newArticle);
        expect(article).toEqual(expect.objectContaining(article));
    });

    test("Update article", async() => {
        const articleToUpdate = {
            title: "All the tests get passed",
            body: "Should the test fail, we should work had to improve our codebase",
            avartar: "https://dev-to-uploads.s3.amazonaws.com/i/blaf4ke2xt3j08mlx4ca.png",
        };
        const article = await ArticleService.updateArticle(articleToUpdate);
        expect(article).toEqual(expect.objectContaining(article));
    });

    test("Get article by Id", async() => {
        const articleId = "5ffcc8b0d7556519346f3bd8"
        const article = await ArticleService.getArticlebyId(articleId);
        expect(article).toEqual(expect.objectContaining(article));
    });

    test("Delete article", async() => {
        const articleId = "5ffcc8fcb6f631195c9a3529";
        const article =  await ArticleService.deleteArticle();
        expect(article).toEqual(expect.objectContaining(article));
    })

    afterAll(async (done) => {
        mongoose.disconnect();
        done()
    })
})

Here we have put together all the testing techniques we have explored so far to perform a complete test of the article endpoint. Type the following command on your terminal for mac users or command-prompt for windows users.



$ npm test

If you got everything set up correctly, you should have a response on your terminal similar to the one below:

Conclution

We have been able to perform unit-testing all thanks to our MVC and Layered Structure design pattern we explored in our previous tutorial. The benefits of using clean architecture are enormous, it helps you to write easy readable, testable, and efficient code. Feel free to dive deeper into the Jest official Documentation, the developers at Facebook have done a lot of work there.

The source-code for this series can be accessed here

Thank you for reading, I will love to hear from you, please drop a comment.

Test-Driven Development with Nodejs, Express, Mongoose & Jest

Emmanuel Etukudo — Thu, 07 Jan 2021 11:55:33 +0000

Introduction

In this series, you will learn how to build and test a restful API with Nodejs, Express, and Mongoose using the TDD approach. You will also learn how to Architect your API-driven application from the ground up using the Layered-architecture approach. At the end of this series, you will be more confident writing code using the TDD approach.

Prerequisites:

To follow along in this tutorial you need to have basic knowledge of Javascript, Nodejs & Express as well as a good knowledge of how Restful API works.

Definition of terms

- Test-Driven Development (TDD)

Test-driven development (TDD) is a development technique where you must first write a test that fails before you write new functional code. TDD is being quickly adopted by agile software developers for the development of application source code and is even being adopted by Agile DBAs for database development.

- Jest

Jest is a JavaScript testing framework maintained by Facebook, Inc. designed and built by Christoph Nakazawa with a focus on simplicity and support for large web applications. It works out of the box with minimal configuration, although there are other testing frameworks, I find jest easy to follow along. you can dive deeper by reading through the official doc here

- Mongoose

Mongoose provides a straight-forward, schema-based solution to model your application data. It includes built-in type casting, validation, query building, business logic hooks, and more, out of the box all written to communicate with the MongoDB database. you can read about Mongoose here and MongoDB as well here.

Now that we are familiar with the technologies we will be working with while building our API, let's take look at our project overview.

Build a restful API
Testing the endpoints using Jest
Configure Jest to automatically run the test
Folder structure
MVC pattern (Model, View, Controller)
Layered-architecture

Next, let's proceed to set up our development environment. Copy-paste the code below in terminal for Mac users, and command prompt for Windows users, to set up a new project directory.

$ mkdir tdd-with-nodejs
$ cd tdd-with-nodejs
$ npm init -y

If you got everything set up properly you should have the result below:

{
  "name": "tdd-with-nodejs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Next, let's install the required dependencies for the development of our project. In your terminal cd into the root directory of your project, and copy-paste the code below:

$ npm i --save-dev express mongoose jest

Your package.json file should now look like the code below:

{
  "name": "tdd-with-nodejs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest",
    "start": "nodemon index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "express": "^4.17.1",
    "jest": "^26.6.3",
    "mongoose": "^5.11.9"
  },
  "dependencies": {
    "body-parser": "^1.19.0",
    "dotenv": "^8.2.0",
    "nodemon": "^2.0.6"
  }
}

Now that we're all set, let's create a file named sum.js with a function named sum that sums up the value passed to its parameters (a,b), we will then proceed to create "sum.test.js**. to test the output of the function. These will help us to validate our Jest configuration.

Note: Jest behind the sense read test file in the test folder. so do well to put your **sum.test.js* file in the test folder.*

Creat a sum.js file within the root of your project directory and Copy-paste the code below into the file:

const sum = (a, b) =>{
    return a + b;
}

module.exports = sum;

Create a new folder named test, navigate into the folder, create a file named sum.test.js, and Copy-paste the code below into the file to create your fest test:

const sum = require("../sum");

test('adds 2 + 2 to equal 4', () =>{
    expect(sum(2,2)).toBe(4);
});

First test:

Open your terminal and cd into the root directory of your project, and copy-paste the code below to run your first test:

$ npm run test

if your got everything set up properly you should have a similar result to the screenshot below:

Congratulations, you just successfully wrote your first test using Jest! That all for the [Part I] of this tutorial, see you in [Part II], where we will be building the API endpoints using the Layered-architecture approach.

Creating Flipping Cards Using HTML & CSS

Emmanuel Etukudo — Wed, 06 Jan 2021 19:05:19 +0000

In this article, we will learn how to create, flipping cards using just HTML and CSS. This tutorial assumes you have basic knowledge of HTML and CSS as we won’t go into detail about the introduction of the duo.

Prerequisite:

Laptop/desktop computer
Code editor of your choice — my case PhpStorm·
Attention
File Structure

In this tutorial, we are going to maintain the following folder structure

├── html-css-flipping-cards
 ├── css
     ├── style.css
 ├── img
     ├── html-css-flipping-card-1.png
     ├── html-css-flipping-card-2.png
     ├── html-css-flipping-card-3.png
 ├── index.html

In order to build our flipping cards, we will maintain the above folder structure.

· css-folder this folder is where the stylesheet for the project resides, although we would have left it at the root level but is wise to maintain a good folder structure irrespective of the project.

· img-folder this folder is where images of our flipping cards will reside as seen on the screenshot above.

· index.html-file this is the starter file for our project once you open the “html-css-flipping-cards” folder in your webroot directory, it will fire up the project.

Setting the folder structure creating the files needed

Step 1:

In your webroot directory, create a folder called “html-css-flipping-cards”.

Step 2:

Open the folder you just created and create two new folders CSS and IMG respectively. Open the CSS folder and create a new file called style.css, this is the stylesheet for the project, we will make use of it as we progress.

Step 3:

Create index.html in the root level of the “html-css-flipping-cards” you just created.

Building the HTML Markup

In this tutorial we will maintain the BEM naming convention for our CSS classes, The BEM approach ensures you write easily maintainable code, using proper naming will ensure changes in future design are achieved swiftly.

Open Index.html, paste the flowing code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>HTML & CSS flipping cards</title>
        <link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>

    </body>
</html>

You noticed I added the link to the CSS file like so: I am also using a google web font: the google web font is called Rebuk.

Copy the code below, paste it under the opening body tag: to create the HTML Markup needed to create the flipping card.

```

Hello I am learning how to create flipping cards using HTML & CSS, will you mind joining me?

</div>
<p class="copyright">© 2020, all rights reserved, designed by: Emmanuel Etukudo</p>




I am using the default HTML section tag **“<section>…</section>”** to wrap the flipping cards.

The **”.flipping-cards”** class is used to wrap the entire section.

The **“.flipping-card-wrapper”** class wraps the flipping cards siblings.

The **“.flipping-card-item-wrapper”** class wraps both the back and front views of the cards.

The **“.flipping-card-item-side”** class ensures both sides of the cards are the same size.

The **“.flipping-card-item-side-front”** class applies different CSS properties to the front view of the card while the **“.flipping-card-item-side-front”** handles the back view of the card.

**Let’s write some CSS code**




```*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

This will initially set all default margins and padding to zero.

Next, we have to style the section, write CSS code to style the flipping card using the CSS classes you created when we were creating the markup.

Copy-paste the following code below the code block above.

/* style for flipping card starts here */

.flipping-cards{
    margin-top: -3rem;
    padding: 2rem 0;
    background-image: linear-gradient(to left bottom, #ffa41b, #ff5151);
    font-family: 'Rubik', sans-serif;
}

.flipping-card-wrapper{
    padding: 2rem;
    margin: 2rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
}

.flipping-card-item-wrapper{
    perspective: 150rem;
    position: relative;
    width:   340px;
    height:  400px;
    margin: 1rem;
}

.flipping-card-item-side{
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    margin:  1.5rem;
    width: 100%;
    height: 100%;
    background-position: center;
    background-color: #ffffff;
    box-shadow: 0 .5rem .5rem rgba(0, 0, 0, 0.18);
    transition: all 1s;
}

The result from the above code should look like the screenshot below, it looks horrible right? Don’t worry we will tidy things up in the upcoming sections.

Some CSS selectors you should take note of, First of all, have added this block “background-image: linear-gradient(to left bottom, #ffa41b, #ff5151);” to create a nice looking gradient for the flipping card section background.

Secondly, I have added this block “backface-visibility: hidden;” to ensure the reverse of the card remains hidden by default.

Lastly, I added the “box-shadow” to create a subtle shadow for the card item.

Next, let’s make our UI look more amazing, copy-paste the code below the previous CSS code you have written above.

    color: #000;
    transform: rotateY(180deg);
}


.flipping-card-item-wrapper:hover .flipping-card-item-side-front{
    transform: rotateY(-180deg);
}

.flipping-card-item-wrapper:hover .flipping-card-item-side-back{
    transform: rotateY(0);
}

.flipping-card-item-img{
    width: 100%;
    height: 100%;
    background-size: cover;
    background-blend-mode: color;
}

.flipping-card-back-wrapper{
    font-weight: 200;
    position: relative;
    top: 25%;
    left: 0;
    margin: 2rem;
    text-align: center;
}

.flipping-card-back-wrapper__btn {
    margin-top: 2rem;
    padding: .7rem;
    text-align: center;
    color: #ffffff;
    border: 0;
    background-image: linear-gradient(to right bottom, #ffa41b, #ff5151);
    transition: all .5s;
}

.flipping-card-back-wrapper__btn:hover {
    background-image: none;
    color: #ffa41b;
    border: 1px solid #ffa41b;
}

You noticed I set the “.flipping-card-item-side-back” default state to** ”transform: rotateY(180deg);”** this will ensure the reverse of the card is rotated in Y-axis by default, and with the “backface-visibility: hidden;” property, it will remain hidden until hover.

So literary the whole trick happens within this block.

The result should be like the screenshot below. If you have followed this tutorial up to this point, congratulations in advance, you are almost there.

To achieve the final result as the gif image you saw at the beginning of this tutorial you have to ensure you add three images with width: 340px; and height: 400px respectively, the result should look like the screenshot below.

Please refer to the sample code section to get the complete code for both the HTML & CSS.

Download source code below:

https://bit.ly/38nifZz

Conclusion:

This is all about how to create flipping cards using HTML and CSS. Thank you for reading. I wish you success as you advance your career. If you had fun reading this article, please share it with your co-workers. Don’t forget to leave your comments below.

Understanding MVC pattern in Nodejs

Emmanuel Etukudo — Wed, 06 Jan 2021 18:52:44 +0000

This is part two of the Test-driven Development with Nodejs, Express, Mongoose & Jest, in part one, we set up our development environment and ran our first test. In this tutorial, we will focus on building the endpoints using the MVC Architecture.

Definition of terms

MVC - Model View Controler

Model View Controller is a software architectural pattern that involves the separation of the application logic into three interconnected elements the Model, View, and Controller.

Restful API

REST is an acronym for Representation State Transfer, API on the other hand is an acronym for Application Programme Interface. A RESTful API is an architectural style for an application program interface (API) that uses HTTP requests to access and use data.

I surmised you are familiar with the terms involved in this tutorial. Let's get started.

In the previous tutorial, we had a very basic folder structure, with few dependencies. Let's install the required dependencies for our API development.



$ npm i --save-dev body-parser dotenv nodemon

After installation, your package.json file should look like the one below.



{
  "name": "tdd-with-nodejs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest",
    "start": "nodemon index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "body-parser": "^1.19.0",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "jest": "^26.6.3",
    "mongoose": "^5.11.9",
    "nodemon": "^2.0.6"
  }
}

You notice we have configured our initialization script to run with nodemon, nodemon will keep track of every change made to our index.js file and refresh our application accordingly. Next, Let's set up a server. create a new file within the root directory of your application named** index.js** and paste the code below.



require('dotenv').config();
const mongoose =  require("mongoose");
//const articles = require("./routes/article.routes");
const bodyParser =  require("body-parser");

const app = exepress();
const port = 8000;

mongoose.connect(process.env.mongoURI, {useNewUrlParser: true, useCreateIndex: true, useUnifiedTopology: true })
.then(res => console.log(`Connection Succesful ${res}`))
.catch(err => console.log(`Error in DB connection ${err}`));

//body-parser config;
app.use(exepress.json());
app.use(bodyParser.urlencoded({extended: true }));
app.use(bodyParser.json());

app.get("/", (req, res) => {
    res.send(`<h1>Hello!</h1>`)
});

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

//register the enpoints
//app.use("/api/v1/articles", articles);

Don't forget to create a .env file and add your database URI like so: mongoURI=mongodb+srv://your-db-uri. Next, start the application by typing the command below on your terminal.



$ npm run start

You should get a response on your terminal that reads: Application is listening at port 8000 & Connection Succesful [object Object]. If you open http://localhost:8000 you should get "Hello!" logged to your screen as well.

This tutorial intends to teach you how to properly structure your Nodjs application to fit into the MVC pattern, so, we would be separating our business logic from our controller and routes files. We will learn more about this in the Layered Structure tutorial which is the final tutorial for this series.

Building the Model (Article.js)

Next, let's create our Model. Create a new folder within the root directory of the project, navigate into the folder, and create a new file named Article.js, and copy-paste the code below to create the model for our API.



const mongoose = require("mongoose");
const Schema = mongoose.Schema;


const articleSchema = Schema({

    title:{
        type: String,
        required: true,
    },

    body:{
        type: String,
        required: true,
    },

    article_image: {
        type: String,
        required: false,
    },

    date:{
        type: Date,
        default: Date.now(),
    }

});


module.exports = Article = mongoose.model("Article", articleSchema);

Our model is very basic, it has a title, body, and date object. You can learn more about building MongoDB Schemas using Mongoose by reading the official doc here.

Building the Article Service (ArticleService.js)

To build the ArticleService.js you need to create a folder named services to house our ArticleService.js file. Copy-paste the code below into your ArticleService.js.



const Article = require("../models/Article");

module.exports = class ArticleService{
    static async getAllArticles(){
        try {
            const allArticles = await  Article.find();
            return allArticles;
        } catch (error) {
            console.log(`Could not fetch articles ${error}`)
        }
    }

    static async createArticle(data){
        try {

            const newArticle = {
                title: data.title,
                body: data.body,
                article_image: data.article_image
            }
           const response = await new Article(newArticle).save();
           return response;
        } catch (error) {
            console.log(error);
        } 

    }
    static async getArticlebyId(articleId){
        try {
            const singleArticleResponse =  await Article.findById({_id: articleId});
            return singleArticleResponse;
        } catch (error) {
            console.log(`Article not found. ${error}`)
        }
    }

    static async updateArticle(title, body, articleImage){
            try {
                const updateResponse =  await Article.updateOne(
                    {title, body, articleImage}, 
                    {$set: {date: new Date.now()}});

                    return updateResponse;
            } catch (error) {
                console.log(`Could not update Article ${error}` );

        }
    }

    static async deleteArticle(articleId){
        try {
            const deletedResponse = await Article.findOneAndDelete(articleId);
            return deletedResponse;
        } catch (error) {
            console.log(`Could  ot delete article ${error}`);
        }

    }
}

Building the controller (article.controller.js)

Next, lets' start writing our API endpoints, create a new folder within your root directory named controllers, navigate into the folder, and create a new file named article.controller.js. copy-paste the code below.



const ArticleService = require("../services/ArticleService");

module.exports = class Article{

   static async apiGetAllArticles(req, res, next){
       try {
         const articles = await ArticleService.getAllArticles();
         if(!articles){
            res.status(404).json("There are no article published yet!")
         }
         res.json(articles);
       } catch (error) {
          res.status(500).json({error: error})
       }

   }

   static async apiGetArticleById(req, res, next){
      try {
         let id = req.params.id || {};
         const article = await ArticleService.getArticlebyId(id);
         res.json(article);
      } catch (error) {
         res.status(500).json({error: error})
      }
   }

   static async apiCreateArticle(req, res, next){
      try {
         const createdArticle =  await ArticleService.createArticle(req.body);
         res.json(createdArticle);
      } catch (error) {
         res.status(500).json({error: error});
      }
   }

   static async apiUpdateArticle(req, res, next){
      try {
         const comment = {}
         comment.title        = req.body.title;
         comment.body         = req.body.body;
         comment.articleImage = req.body.article_image

         const updatedArticle = await ArticleService.updateArticle(comment);

         if(updatedArticle.modifiedCount === 0){
            throw new Error("Unable to update article, error occord");
         }

         res.json(updatedArticle);

      } catch (error) {
         res.status(500).json({error: error});
      }
   }

   static async apiDeleteArticle(req, res, next){
         try {
            const articleId = req.params.id;
            const deleteResponse =  await ArticleService.deleteArticle(articleId)
            res.json(deleteResponse);
         } catch (error) {
            res.status(500).json({error: error})
         }
   }

}

Building the routes (article.routes.js)

To communicate with our endpoints we need to set up our routes with corresponding requests. Create a new folder named routes, inside the folder, create a new file named article.routes.js. You can choose to name the folder whatever you like but it is always nice to maintain meaningful directory and file names.



const  express =  require("express");
const router = express.Router();
const ArticleCtrl = require("../controllers/article.controller");


router.get("/", ArticleCtrl.apiGetAllArticles);
router.post("/", ArticleCtrl.apiCreateArticle);
router.get("/article/:id", ArticleCtrl.apiGetArticleById);
router.put("/article/:id", ArticleCtrl.apiUpdateArticle);
router.delete("/article/:id", ArticleCtrl.apiDeleteArticle);

module.exports =  router;

If you've followed the tutorial up to this point, your folder structure should actually look like the snippet below.



├── tdd-with-nodejs

 ├── controllers

     ├── article.controller.js

 ├── models

     ├── Article.js

 ├── routes

     ├── article.routes.js

 ├── services

     ├── articleService.js

├── test

Putting it all together

When working with the MVC pattern always ensure you maintain the Separation of Concern (SoC) technique. Separation of concerns (SoC) is a design principle for separating software applications into distinct sections such that each section addresses a separate concern. A concern is a set of information that affects the code of a Software Application. We will dive deeper into this topic in the next tutorial which is the last for this series.

Before we conclude let's test one of the endpoints. Send a POST request to the /api/v1/articles endpoint using an API testing tool of your choice. In my case, Postman You should get the response object as a response for your newly created article similar to the snippet below.

That's all for this tutorial. congratulations on making it thus far in this series. See you in the next tutorial.

DEV Community: Emmanuel Etukudo

Build automatic URL shortener with react and Emly

Setting up an Emly account

Building the frontend

Building the back-end server

Conclusion

Best Free URL Shortener

marketing #emly

How to implement an API using Vuejs & Axios

Server-Side Testing with Jest

Unit Testing

Mocking Technique

Parameterized testing

Configuring Jest to work with Nodejs

Testing the DB Connection

Testing the apiGetAllArticles endpoint

Testing for CRUD operation

Conclution

Test-Driven Development with Nodejs, Express, Mongoose & Jest

Introduction

Prerequisites:

Definition of terms

First test:

Creating Flipping Cards Using HTML & CSS

Download source code below:

Understanding MVC pattern in Nodejs

Definition of terms

Building the Model (Article.js)

Building the Article Service (ArticleService.js)

Building the controller (article.controller.js)

Building the routes (article.routes.js)

Putting it all together

Configuring `Jest` to work with `Nodejs`

Testing the `apiGetAllArticles` endpoint