DEV Community: Carlos Magno

Building a URL Shortener from Scratch with NodeJS

Carlos Magno — Fri, 07 Aug 2020 00:56:00 +0000

Hey there! In today's post we're going to build a URL Shortener API with NodeJs from zero. Wanna join us?

Notes

So you can find the final API source code in this repository and I also have the full project, frontend and backend running here. Be sure to check it out!

By the way, if you're going to follow through this tutorial and want to reproduce it on your machine (which is best), you'll need to have nodejs installed.

I also recommend you to have a REST Client like postman or insomnia to make tests on the API's routes.

Planning
Setting up
MVC Architecture
Configuring package file
Folder structure
Server File
Routes file
Writing up Models
Database Setup
Dotenv File
Database Connection
Writing up Controllers
Conclusion

Planning

Okay, we are going to build an Url Shortener API. But how do we do it?

Well, there are multiple ways we can approach this problem, but the way we are going to use it's quite simple.

The User is going to pass a URL they want to shorten, the API gonna take that URL, generate a random alias for it and store them both on a database.
When the user calls the API passing that alias as a parameter, the API will find the matching URL in the database and redirect the user to that URL.

Setting up

First of all, we need to setup our environment. I'm going to create a new folder for the project, open up my terminal inside it and start a node project with:

npm init -y

With our project initiated, let's install some cool packages we're going to need.

npm install express mongoose yup dotenv nanoid cors

Oh, we're also installing nodemon as dev dependecy to make our lives easier.

npm install --save-dev nodemon

So what are we going to use all these packages for? Well, in summary:

express: it'll provide us with the methods to handle http requests.
mongoose: we're going to use it to make a connection with the database (yes, we're gonna have a database as well).
dotenv: it's going to help us with handling sensitive data like tokens and database uris.
yup: yup, we'll use it to make some cool parameters validations.
nanoid: that's how we are going to generate the short versions of the URLs.
cors: that's going to help us with handling Cross-Origin Resource Sharing.

MVC Architecture

For this tutorial sake, we're going to use the MVC architecture, but without the views in it. If you aren't familiar with the MVC pattern, don't worry because I'm going to give you a simple explanation of what this is. However, I do suggest you to make some outsite research to complement your knowledge and skills.

MVC Architecture Explanation

So to make it briefly, MVC stands for Model, View and Controllers. It's a design pattern that divides an application in three pieces:

View: That's where the User Interfaces resides. So basically UIs here are called Views.
Model: These are representations of database entities. A user, per example, can be a model in many applications.
Controllers: They are the mediators/bridges between the Views and the Models.

When we make this separation of concerns in software development, things become way easier to maintain, understand and develop as well.

In the case of MVC, a user interacts with the User Interface, which is the View, the view then contacts the Controller that is going to call the Model. The Model then is going to pass the database data to the Controller that is going to manipulate it in order to be presentable to the user, and finally the Controller passes it to the View that is going to render all of it in the User Interface.

Folder Structure

Now that we made sure you are familiar with the concept of the MVC architecture, we can start working in our file structure so things doesn't get too messy when we really start coding stuff.

So, with the concept of Models, Views and Controllers in mind, that's how our folder structure is going to look like:

.
+-- node_modules/
+-- src/
|   +-- controllers/
|   +-- models/
|   +-- database/
+-- package.json
+-- package-lock.json

Configuring package file

In the package.json file, we're going to change the "main" field from "index.js" to "src/server.js". That's going to be our entry file.

We're also going to add a few scripts. That's how it should look like:

{
  "name": "linkshortener",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node src/server.js",
    "dev": "nodemon src/server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "mongoose": "^5.9.27",
    "nanoid": "^3.1.12",
    "yup": "^0.29.3"
  },
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

Server file

Enough of talkin', let's start to coding! Inside of src folder, make a new file named server.js. That's the entry point file and where the server is going to take place.

For now, we are going to setup the simplest HTTP server we can, so server.js is going to look like this:

const express = require('express'); //imports express module to file
const cors = require('cors');//imports cors module

const app = express();//makes a new server instance

app.use(cors());//makes server allow cross-origin
app.use(express.json());//enables server to understand json requests

app.get('/', (req, res) => { //listens to the route '/' and returns a text to it
    res.send('This is awesome!');
});

//if PORT number are defined as a environment variable, use it, if not, use 3000
const PORT = process.env.PORT || 3000;

//puts the server to listen
app.listen(PORT, () => {
    console.log(`Listening at ${PORT}`);
});

This code setups a simple server for us, so if you want to test it, you can run npm run dev on terminal and open up the browser with localhost:3000.

Routes File

Alright, now that we have a simple server running, it's time to make our routes script. That's the file where we are going to set up all the routes for our URL Shortener API.

The contents of routes.js should be something like that for now:

const router = require('express').Router();//gets express Router

//sets up routes
router.get('/', (req, res) => {
    res.send('Shortening URLs for ya');
});

router.get('/:id', (req, res) => {

});

router.post('/url', (req, res) => {

});

//exports routes
module.exports = router;

This code simply import the Router method from ExpressJS, defines a few routes and exports all of it at the end. Take note that I left two empty routes for now. We're going to need them later.

We can now update our server.js file and make it use the routes defined in this file.

So here's our updated server.js file:

const express = require('express'); //imports express module to file
const cors = require('cors');//imports cors module

const routes = require('./routes'); //imports routes file 

const app = express();//makes a new server instance

app.use(cors());//makes server allow cross-origin
app.use(express.json());//enables server to understand json requests
app.use(routes);//use routes defined on routes file here

//if PORT number are defined as a environment variable, use it, if not, use 3000
const PORT = process.env.PORT || 3000;

//puts the server to listen
app.listen(PORT, () => {
    console.log(`Listening at ${PORT}`);
});

That essentially finishes server.js.

If you are asking yourself why separated the routes from the server file, that's because it makes the code easier to debug and understand. If you now look into server.js or routes.js you'll realize the code is way simpler to read. You take a look into routes.js and instantly realize that's a file that defines all API's routes. It's a lot more intuitive this way.

Writing up Models

I think it's time we start to working on our models. Like I said before, models are a representation/abstraction of a database entity.

Our app though, only needs a single entity, which also means it only needs 1 model: the ShortUrl Model.

With that said, make a new file named ShortUrl.js inside the Model folder and open it on your favorite IDE.

const mongoose = require('mongoose');

const ShortUrl = mongoose.Schema({
    alias: {
        type: String,
        unique: true,
        required: true
    },
    url: {
        type: String,
        required: true
    }
})

module.exports = mongoose.model('ShortUrl', ShortUrl);

Alright, lemme explain what's going on. The database we are going to use for this project is MongoDB, and that's why we've installed mongoose in the first place.

In order to make a model of a Database Entity, you first have to make a Schema of that entity. It's like a blueprint describing what fields and values does the entity have. That's essentially what we are doing with mongoose.Schema() method.

As I already told you, our ShortUrl entity only needs two values, the alias and the original url. The url is a String and is required but doesn't need to be unique (that would mean it cannot repeat in the database), however, alias is also a String, a required field, but has to be unique. That's why we ensured that with unique:true.

At the end of the code we are exporting the ShortUrl schema as a model.

Database Setup

We're using MongoDB for the database in this project. At this point, you have two options for dealing with it, you can either install MongoDB Community Server and work store the database locally or use a Cloud Hosted database like MongoDB Atlas (which gives you a free simple sandbox database).

After you set up the database, you are going to need the database URI string, which comes in a format similar to mongodb://<username>:<password>@host:port/<defaultdb>. That is what you are going to need to connect to the database.

If you are using a local server, the default URI string is mongodb://localhost:27017, you can pass a default database as well, for example: mongodb://localhost:27017/urlshortener.

Now if you are using a Cloud Hosted Database, look for Connection methods and they should give you the URI String.

Dotenv File

Alright, we've got the database connection URI string. But that's a sensitive data and should be plainly written on ours scripts. That would be too risky and a insecure way of handling it.

So in order to make things more secure, we are going to put that URI String inside a .env file. Then we are going to use dotenv package to import the data in .env file as environment variables.

That way, when you want to upload the project to the cloud or a github repository for example, you don't need to upload .env file as well.

Enough talking, let's make a new file named .env at the root of our project. Inside it, write:

MONGODB_URI=mongodb://localhost:27017/urlshortener

You can replace the URI string for the URI string for your database.

Database Connection

Now that we have settled up our database and got the URI String in a .env file, we are going to make a new script for handling the database connection as well.

So, make a new file named index.js inside the database folder and open it on the IDE.

const mongoose = require('mongoose');

require('dotenv').config();

const connect = async () => {
    return mongoose.connect(process.env.MONGODB_URI, {
        useNewUrlParser: true,
        useUnifiedTopology: true,
        useCreateIndex: true
    })
}

module.exports = { connect }

We are basically importing mongoose package, invoking dotenv config() method so we can import our MONGODB_URI variable defined in .env to the script, making a asynchronous function to return the database connection and exporting it.

You don't have to worry too much about the other parameter we're passing to the mongoose.connect() method because they are only necessary because of the depreciation of some mongoose inner methods.

We can now call this function inside our server.js file.

const express = require('express');
const cors = require('cors');

const routes = require('./routes');
require('./database').connect(); //connects to database

const app = express();

app.use(cors());
app.use(express.json());
app.use(routes);

const PORT = process.env.PORT || 3000;

app.listen(PORT, () => {
    console.log(`Listening at ${PORT}`);
});

Writing up Controllers

With our database settled up, we'll now code our controller. I said controller instead of controllers because we'll only need 1 of them. This Controller is going to take care of the 2 routes we care about.

So make a new file named ShortUrlController.js inside controllers folder and let's code!

const ShortUrl = require('../models/ShortUrl');

const redirect = async (req, res) => {

}

const store = async (req, res, next) => {
}

module.exports = { redirect, store }

You already know Controllers are kinda like the bridge between the Model and the View. That means ShortUrlController is going to have 2 methods for handling our 2 routes. We're calling one method redirect and the other store. We declared and exported them, but we won't code their functionalities yet.

Updating routes.js

Now let's go back to our routes.js file and pass the ShortUrlController methods as handlers for the routes.

const router = require('express').Router();

const ShortUrlController = require('./controllers/ShortUrlController');

router.get('/:id', ShortUrlController.redirect);

router.post('/url', ShortUrlController.store);

module.exports = router;

Take a look in how our code is now so much cleaner. It's easy to get to understand what those routes are for even without knowing the 'specificities' of ShortUrlController. That's the power of Concerns Separation and MVC.

We can now start working on the methods of our controller.

Store Method

We are first going to worry about our store method.

const ShortUrl = require('../models/ShortUrl');

const { nanoid } = require('nanoid');
const yup = require('yup');

const newUrlSchema = yup.object().shape({
    slug: yup.string().trim().matches(/^[\w\-]+$/i),
    url: yup.string().trim().url().required()
});

const redirect = async (req, res) => {

}

const store = async (req, res, next) => {
    let { alias, url } = req.body;
    try {
        await newUrlSchema.validate({alias, url});
        if ( !alias ) {
            alias = nanoid(5);
        } else {
            const existing = await ShortUrl.findOne({alias});
            if (existing) {
                throw new Error('Alias already in use');
            }
        }
        alias = alias.toLowerCase();
        const newShortUrl = {alias, url};
        const created = await ShortUrl.create(newShortUrl);
        res.json(created);
    } catch (error) {
        next(error);
    }
}

module.exports = { redirect, store }

Okay, we've got a lot to cover now. From the very start, we imported nanoid and yup packages.

I've told you yup is a package that allows us to easily validate objects. In our case, we're going to use it to see if the User is sending use the right parameters. If it's a valid URL and a valid Alias, for example.

That's precisely what we did with:

const newUrlSchema = yup.object().shape({
    slug: yup.string().trim().matches(/^[\w\-]+$/i),
    url: yup.string().trim().url().required()
});

In that case, newUrlSchema is the blueprint of the parameters we are expecting the user to give us.

Let's move to the store method itself.

We received the parameters from the request.
Validated them with our newUrlSchema.
Verified if alias parameter was sent as well
- If it wasn't sent, we generate a random one using nanoid(5).
- If it was sent, we verify if the alias is already in use. We made it with ShortUrl.findOne({alias}), which uses our model to look for a matching alias in database.
  - If it do exists, a error will be thrown.
  - if not, that Shortened Url will be stored in database with ShortUrl.create(newShortUrl). We then returns the database data to the request as a response.

At this point you can actually test this route with a REST Client like Insomnia or Postman (in my case, I'm using Insomnia):

Take note I passed my website URL as a parameter and got the alias lefid in return.

Redirect method

Now let's code the redirect method, which is quite simple to be honest.

That's how redirect is gonna look like:

const redirect = async (req, res) => {
    const {id:alias} = req.params;
    try {
        const url = await ShortUrl.findOne({alias});
        if (url) {
            return res.redirect(url.url);
        } else {
            return res.status(404).send({message:'invalid url'});
        }
    } catch(error) {
        return res.status(404).send({message:'invalid url'});
    }
}

All we did was:

Get the alias as a URL parameter (that means we pass it like urlshortener.io/:alias).
Verify if that alias has a matching url in database.
- If it do, we redirect the request to that matching url.
- if don't, we send a 404 status with a invalid url message.

Finally you can also test this route, be it either on a Browser or inside a REST Client. In my case, I'm going to test this route with insomnia as well.

Last time, I've got the alias lefid for my website. Now when I pass that alias in a GET request, guess what? I'm actually redirected to my website. Perfectly!

Conclusion

Alright, after all these steps, we finished our URL Shortener API. You can test it now all you want and deploy it to the cloud!! Congrats!

Like I said before, you can check this API running behind a website here.

If you found any misspelled words, or other mistake I've made, contact me or leave a comment so I can fix it later.

Also, if you have any suggestion or something I should add/modify, I'd be glad to know your opinion.

Have a nice day!

Build a Slideshow Component with ReactJS

Carlos Magno — Tue, 24 Mar 2020 02:49:07 +0000

Hey there! In this tutorial we are going to build a simple but cool Slideshow component with ReactJS.

Basically, our Slideshow will be compost of three images. One image for the current slide, one for the previous and another for the next one. It'll also have controllers for advancing to the next or previous slide and it'll also be able to change the slide automatically every period of time.

You can find the result of the Slideshow component here.

Notes

If you're going to follow along with this post, you'll need to be familiarized with ReactJS and NodeJS.

Setting up
Basic Component
Structure
Adding Style
Functionality
Conclusion

Setting up

Alright, for this tutorial I'll use my Personal Website as the base project. Naturally, you can use any ReactJS project as the base of the project.

I'm going to use VS Code as IDE, but you can use any text editor or IDE you want.
With that said, this is how the directory tree of my website looks like.

As you can see, in some way, all the code is inside the src directory. Consequently, all the components are inside the components folder. For organization purposes, I'm going to create a folder named Slideshow, with a empty index.js and styles.css file inside.

Basic Component

First, we'll set up a simple component inside the index.js file.

import React from 'react';

import './styles.css';

export default function Slideshow(){
    return (
        <section className="slideshow">
            Slideshow
        </section>
    )
}

Now I'll start the project with yarn start (you can use npm as well). I want to add the slideshow component right below the bio in this page.

Now I'll import the Slideshow component into the web page and add it right below the bio.

import React from 'react';
import Box from '../../components/Box';
import Slideshow from '../../components/Slideshow';

import './styles.css';

export default function About(){
    return (
        <>
        <Box color="#e5e5e5" bgColor="#421567" title="Carlos Magno" column >
            <div className="bio-container">
                <img src="./assets/dev.jpg" alt="dev" id="dev-pic" title="Magno"/>
                <div className="bio-text">
                    <p id="bio">
                    Introvert, Geek, Web Developer, Horde Player and CS Student...<br/>
                    Also known as <span className="italic">Raymag</span>, his hobbies are watching animations, learning new stuff, reading useful books and running.
                    </p><br/>
                    <p>prayk11@gmail.com</p>
                    <p>prayk11@outlook.com</p>
                </div>
            </div>
        </Box>
        <Box title="Gallery">
            <Slideshow />
        </Box>
        </>
    )
}

The Box component is just a component I made to help me make those big sections with different colors, so it's not important to us. Anyway, this is the result.

Structure

It's time to make the HTML structure of the Slideshow component. So let's edit the index.js file.

(<section className="slideshow">
  <div className="slide-holder"></div>          
  <div className="slideshow-controller">
    <span>Previous</span>
    <span>Next</span>
   </div>
</section>)

Okay, we first have the section "slideshow" that hold the whole component. Inside this section we have two main elements, the div "slide-holder" (which will hold all the slides) and the div "slideshow-controller" (which will hold the buttons for going to the next or last slide).

Now, I'm going to add three sections inside the "slide-holder". Each section represents a slide: the last, current and next one.

(<section className="slideshow">
  <div className="slide-holder">
    <section className="slide previous-slide">
      <div className="slide-thumbnail"></div>
    </section>
    <section className="slide current-slide">
      <div className="slide-thumbnail"></div>
    </section>
    <section className="slide next-slide">
      <div className="slide-thumbnail"></div>
    </section>
  </div>          
  <div className="slideshow-controller">
    <span>Previous</span>
    <span>Next</span>
   </div>
</section>)

Adding Style

It's time for add some styles for this component. So let's modify the styles.css file. Since CSS and UI is not the focus here, I'll not explain much about this part.

section.slideshow{
    width: 80%;
}
section.slideshow div.slide-holder{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: row;
}
section.slideshow section.current-slide{
    width: 400px;
    height: 300px;
    margin: auto 10px;
}
section.slideshow section.previous-slide,
section.slideshow section.next-slide{
    width: 200px;
    height: 150px;
}
section.slideshow section.slide div.slide-thumbnail{
    width: 100%;
    height: 100%;
    background: #541d82;
    background-size: cover;
    background-position: center;
    border-radius: 6px;
    box-shadow: 5px 5px 6px #551d829c;
}

In short, all I've done is give all slides a purple background and made the current slide bigger. I'll also add some styles for the controllers as well.

section.slideshow div.slideshow-controller{
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
section.slideshow div.slideshow-controller span{
    padding: 10px;
    width: 100px;
    border: none;
    background: #541d82;
    color: #f5f5f5;
    cursor: pointer;
    text-align: center;
    box-shadow: 3px 3px 5px #551d8283;
    user-select: none;
}
section.slideshow div.slideshow-controller span:hover{
    color: #ffc200;
    text-shadow: 3px 3px 5px #ffc200;
}
section.slideshow div.slideshow-controller span:active{
    color: #541d82;
    text-shadow: 3px 3px 5px #541d82;
    background: #ffc200;
}

And that's the output.

Functionality

Now that we have added styles to it, we can finally start to code the functionalities of the component. For that purpose, we'll need a set of props and a few states.

I'm going to use a array of images and a interval of time as props and since we're not using classes, we'll need to use React Hooks for controlling the states of the component. Which is why I'll import useState and useEffect methods from React.

With that in mind, let's modify our index.js file.

import React, {useState, useEffect} from 'react';

import './styles.css';

export default function Slideshow({images=[], interval=3000}){
    const [thumbnails, setThumnails] = useState([]);
    const [currentSlide, setCurrentSlide] = useState(0);
    const [currentSlideStyle, setCurrentSlideStyle] = useState({});

    return (
        <section className="slideshow">
            <div className="slide-holder">
                <section className="slide previous-slide">
                    <div className="slide-thumbnail"></div>
                </section>
                <section className="slide current-slide">
                    <div style={currentSlideStyle} className="slide-thumbnail"></div>
                </section>
                <section className="slide next-slide">
                    <div className="slide-thumbnail"></div>
                </section>
            </div>

            <div className="slideshow-controller">
                <span>Previous</span>
                <span>Next</span>
            </div>
        </section>
    )
}

As you can see, I've also created a few states.

thumbnails: It holds the images array.
currentSlide: It holds the index of the current slide in the thumbnails array.
currentSlideStyle: We'll use it for setting the backgroung-image of the "slide-thumbnail" div.

Note that I've also assigned currentSlideStyle to the style property of the div inside the "current-slide".

Changing the background

Fine. Now we'll need to use the Effect Hook since we need to update the slides every time the component mounts or updates. So right below the state definitions we'll call our useEffect function passing our effect as a callback function.

useEffect(()=>{
        setThumnails(images);
        setCurrentSlideStyle({
            backgroundImage: "url('"+images[currentSlide]+"')"
        });
    }, [images, currentSlide]);

This simply assigns the images array to the thumbnails state and also uses the currentSlide state (which holds the image index of the current slide) to set the currentSlideStyle state. Consequently, it sets the background-image of the "current slide" section.

Now I'll just pass a array of images and a interval to the Slideshow component in the page I want it to appear.

<Slideshow
  interval={3000}
  images={[
    './assets/slideshow/img_1.jpg',
    './assets/slideshow/img_2.jpg',
    './assets/slideshow/img_3.jpg',
    './assets/slideshow/img_4.jpg',
    './assets/slideshow/img_5.jpg',
    './assets/slideshow/img_6.jpg'
  ]}
/>

This is how it is looking right now.

Making up the controllers

With that, we can now make the buttons start to working. For that, I'll just create two functions.

import React, {useState, useEffect} from 'react';

import './styles.css';

export default function Slideshow({images=[], interval=3000}){
    const [thumbnails, setThumnails] = useState([]);
    const [currentSlide, setCurrentSlide] = useState(0);
    const [currentSlideStyle, setCurrentSlideStyle] = useState({});

    useEffect(()=>{
        setThumnails(images);
        setCurrentSlideStyle({
            backgroundImage: "url('"+images[currentSlide]+"')"
        });
    }, [images, currentSlide]);

    function previous(){
        if(currentSlide>0){
            setCurrentSlide(currentSlide-1);
        }else{
            setCurrentSlide(thumbnails.length-1);
        }
    }

    function next(){
        if(currentSlide === thumbnails.length-1){
            setCurrentSlide(0);
        }else{
            setCurrentSlide(currentSlide+1);
        }
    }

    return (
        <section className="slideshow">
            <div className="slide-holder">
                <section className="slide previous-slide">
                    <div className="slide-thumbnail"></div>
                </section>
                <section className="slide current-slide">
                    <div style={currentSlideStyle} className="slide-thumbnail"></div>
                </section>
                <section className="slide next-slide">
                    <div className="slide-thumbnail"></div>
                </section>
            </div>

            <div className="slideshow-controller">
                <span onClick={previous}>Previous</span>
                <span onClick={next}>Next</span>
            </div>
        </section>
    )
}

So the previous function gets the current slide index, finds out what is the previous one and assigns it to the currentSlide state.
In case the current slide index is 0 (the first one) it will then use the last position of the array.

Now the next function works in a similar way, it will find out what is the next slide position and assign it to currentSlide state.
But in case the current slide index is the last one it will use the first position of the array.

Every time the currentSlide states changes, the component will update and the useEffect function will run again. In other words, it will change the background of the current slide.

Note that I've also assigned the previous and next functions to the onClick event of each controller inside the "slide-controller" div.

Automatically Advancing Slides

How to make the Slideshow component changes its slides every period of time? We just need to use the setInterval method inside the useEffect.

useEffect(()=>{
        setThumnails(images);
        setCurrentSlideStyle({
            backgroundImage: "url('"+images[currentSlide]+"')"
        });

        const loop = setInterval(()=>{
            if(currentSlide === images.length-1){
                setCurrentSlide(0);
            }else{
                setCurrentSlide(currentSlide+1);
            }
        }, interval);
        return () => clearInterval(loop); 
    }, [images, currentSlide, interval]);

I've made a constant and assinged it to the setInterval function, passing a callback function and a interval (which is a prop). The callback function is basically the copy of the next function and it just sets the currentSlide to the next position.
With that, every period of time, the callback function will be executed and since it changes the currentSlide state, the component will updates and the useEffect will run again. Consequently, updating the background.
Using the return of the useEffect, we then clear the constant of the interval function to prevent it to going crazy and causing a stack overflow.

If you run the component now, it will start to advance the slide every interval of time.

Next and Previous Slides

What about the other two "slides" sections we've got in the "slide-holder"? Very well, it's time for us to make them work as well.

With the same logic of the current slide, we'll need a state for holding the styles of the next and previous slides.
We'll also need to update the useEffect function to make it updates the next and previous slides as well.
As well, we can't forget to add each style state to the "slide-thumbnail" in its "slide" section.

Since the code for that follows the same principle of the next and previous functions, I don't see necessity of explaining it further.

import React, {useState, useEffect} from 'react';

import './styles.css';

export default function Slideshow({images=[], interval=3000}){
    const [thumbnails, setThumnails] = useState([]);
    const [previousSlideStyle, setPreviousSlideStyle] = useState({});
    const [currentSlide, setCurrentSlide] = useState(0);
    const [nextSlideStyle, setNextSlideStyle] = useState({});
    const [currentSlideStyle, setCurrentSlideStyle] = useState({});

    useEffect(()=>{
        setThumnails(images);
        setCurrentSlideStyle({
            backgroundImage: "url('"+images[currentSlide]+"')"
        });

        if(currentSlide>0){
            setPreviousSlideStyle({
                backgroundImage: "url('"+images[currentSlide-1]+"')"
            });
        }else{
            setPreviousSlideStyle({
                backgroundImage: "url('"+images[images.length-1]+"')"
            });
        }

        if(currentSlide === images.length-1){
            setNextSlideStyle({
                backgroundImage: "url('"+images[0]+"')"
            });
        }else{
            setNextSlideStyle({
                backgroundImage: "url('"+images[currentSlide+1]+"')"
            });
        } 

        const loop = setInterval(()=>{
            if(currentSlide === images.length-1){
                setCurrentSlide(0);
            }else{
                setCurrentSlide(currentSlide+1);
            }
        }, interval);
        return () => clearInterval(loop); 
    }, [images, currentSlide, interval]);

    function previous(){
        if(currentSlide>0){
            setCurrentSlide(currentSlide-1);
        }else{
            setCurrentSlide(thumbnails.length-1);
        }
    }

    function next(){
        if(currentSlide === thumbnails.length-1){
            setCurrentSlide(0);
        }else{
            setCurrentSlide(currentSlide+1);
        }
    }

    return (
        <section className="slideshow">
            <div className="slide-holder">
                <section className="slide previous-slide">
                    <div style={previousSlideStyle} className="slide-thumbnail"></div>
                </section>
                <section className="slide current-slide">
                    <div style={currentSlideStyle} className="slide-thumbnail"></div>
                </section>
                <section className="slide next-slide">
                    <div style={nextSlideStyle} className="slide-thumbnail"></div>
                </section>
            </div>

            <div className="slideshow-controller">
                <span onClick={previous}>Previous</span>
                <span onClick={next}>Next</span>
            </div>
        </section>
    )
}

Conclusion

After all the hard work, we finally made it! This is the final result of the Slideshow component we've built here.

If you've read until here, I'm really thankful for that.
If you have any suggestions, corrections and even doubts about something related to the post, feel free to leave a comment or contact me.

Deploying a NodeJS app to Heroku

Carlos Magno — Mon, 10 Feb 2020 16:00:42 +0000

Hello there! Some time ago I've made a post about how to build a quiz REST API with NodeJS. Now we are going to deploy it to heroku, for free. Heroku is a platform that allows developers to build, run and operate applications on the cloud. They also supports a bunch of languages, like python, php, go, java, etc.

If you just arrived here and doesn't have any kind of node app to deploy, I'd recommend you to take a look at my post about building a node API or cloning the repository. That way you can practice as we go.

Creating a account
Setting up a new app
Setting up package-json
Deploying
Testing
Conclusion

Creating a account

That being said, first create a account on heroku. After making and verifying your account, you'll be redirected to the dashboard.

This account of mine isn't new, that's why I've already got a few apps deployed. But yours will probably be empty.

Setting up a new app

Alright! Let's click on the New button at the top-right corner of the page and then create a new app. Give it a cool name and select the proper server region depending on your location.

You'll now be redirected to the deploy section of the app. You can choose the best deploy method for you, the instructions for using it will be right below. But in my case, I'll be choosing the Github method, since I've already have a github repository for the app and it'll allow me to enable automatic deploy afterwards.

I've connected the heroku app to the github repository. We can now make a manual deploy or enable automatic deploy. By enabling that, every time we make a new push or merge in the repository, it'll automatically deploy to heroku. That actually save us lots of time, so of course we're enabling it!

Environment Variables

Since our app uses a few environment variables like the PORT number and DATABASE_URL, we have to set up these variables in Heroku. For that purpose, we can open up the settings tab in the dashboard.

Let's now click on the Reveal Config Vars button. You'll now be able to add new variables. For the API we've built before, you'll just going to need the DATABASE_URL. The PORT number environment variable is provided by Heroku by default.

Setting up package json

Before we actually deploy, we have to configure our app. When deploying to Heroku, we can either use a Procfile or the package.json for settings. Since we'll not use a Procfile, we'll have to guarantee that our package.json has a start script. That have to be done because when Heroku doesn't find a Procile it'll try to use the start script in package.json.

In our case, the script key in package.json will be something like this:

  "scripts": {
    "start": "node src/server.js",
    "dev": "nodemon src/server.js"
  }

Deploying

Now that we've configured everything, we can manually deploy or make a new push to our github repository. You can then take a look at the overview tab on the app's dashboard. If you see something like that, it probably means that everything is properly working.

Testing

It's now the time to test our deployed app. If everything went well, you can click on Open app in the dashboard or access it with the URL. It should be something like the name_of_the_app.herokuapp.com.

Here's a picture from me testing one of the routes from our deployed API in the browser.

Conclusion

So that's how we deploy a node app to heroku! If you have any questions you can either leave comments here or read the documentation.

Thank you for reading until here, if you have any suggestions or corrections as well, I'd be really glad to know. See ya!

Build a Quiz REST API with NodeJS

Carlos Magno — Mon, 10 Feb 2020 00:47:27 +0000

Hi there! Today we are going to build a simple Quiz REST API using NodeJS and MongoDB. It means people will be able to retrieve, update, delete and create quiz questions in the database with this project.

You can find this project finished in its github repository.

Notes

I'm assuming you have already installed node and that you understand at least the basics of nodejs and javascript. But if that isn't the case, you can take a look at the node oficial guide before reading this article.

I'm also assuming you're familiarized with the concept of APIs (Application Programming Interfaces).

If you don't know anything about MongoDB but have experience with databases, you can follow this post without any struggle. However, if you're curious or doesn't know anything about it, you may want to check out the MongoDB Docs.

Setting up
Server Setup
Database Connection
Dotenv File
Routes File
Testing our Route
Building a Model
Routes - Create Questions
Routes - Get All questions
Routes - Get One Question
Routes - Update One Question
Routes - Delete One Question
Conclusion

Setting Up

Our first step is to open up a terminal and create a new directory for the project, then start a node application with npm init. You can answer all questions from the CLI the way you want to. After that, we can finally begin to install our dependencies. Here we're going to use express and mongoose modules. The first one will provide us the HTTP utility methods we need to construct our API. Now the second one, is going to allow us to interact with our database. We'll need a package named cors as well. It will help us to solve the cors problem. Run the following command to install them:

npm i express mongoose cors

Beyond these, we'll use nodemon to make the development process faster and dotenv to get our environment variables from a .env file. You can install these packages with:

npm i --save-dev nodemon

npm i dotenv

Now that we've installed nodemon, it's the time to set up our scripts in the package.json file, which was automatically created when we first ran npm init. So open up this file and look for the key scripts, if isn't any scripts key, you should add one. It should be something like this:



"scripts": {
  "dev": "nodemon src/server.js"
}

Now, when we wish to run the project, all we need is to execute the command npm run dev.

Server Setup

We now have installed all the packages we'll need. So on the root of the project, create a new directory named src and add a new file called server.js inside of it.

Inside our server.js file, we're going to import the express module and then create a instance of it.



const express = require('express')
const app = express()

Now we need to tell the app to listen to a given port.
But how do we do it?

We just call the listen method, passing the port number and a callback function as parameters. In this case, we're trying to get the port number from a environment variable.



app.listen(process.env.PORT, () => {
    console.log("The API is running...")
})

A piece of cake, isn't it?

Alright! At this point, the file should be looking like this:



const express = require('express')
const app = express()

app.listen(process.env.PORT, () => {
    console.log("The API is running...")
})
```


## Database Connection

We are now going to connect to a mongodb database. If you wish, you can run a local database with [MongoDB Community Server](https://www.mongodb.com/download-center/community). In this example, we're going to use [Atlas](https://www.mongodb.com/cloud/atlas), a cloud hosted database, which has a free plan with a 512MB storage limit.

Still in `server.js` file, we'll include the `mongoose` module and make the connection with... Guess what? The connect method!. It will result in something like this:



````javascript
const express = require('express')
const app = express()
const mongoose = require('mongoose')

mongoose.connect(process.env.DATABASE_URL, { useNewUrlParser: true, useUnifiedTopology: true })
const db = mongoose.connection
db.on('error', (error) => console.error(error))
db.once('open', () => console.log('database connected'))

app.listen(process.env.PORT, () => {
    console.log("The API is running...")
})
```


Okay! The `mongoose.connect` method receives two parameters, the database url and a object containing a few configurations. You don't have to worry much with the second parameter though. It was needed because the standard config is now depreceated. You can read more about it on the oficial [docs](https://mongoosejs.com/docs/guide.html) if you wish.

As you can see, the database URL is actually coming from a environment variable. So that's a good moment to set up our `.env` file.


## Dotenv File

So we'll now create a new file at root directory and name it `.env`. It's content should be something like the following:



```
DATABASE_URL=mongodb://xxxxxx/xxxxx
PORT=3333
```


So you can replace the variable value by the URL of your database. If you're using `Atlas` as well, you can find the database URL choosing the application connection method in [atlas](https://www.mongodb.com/cloud/atlas)'s dashboard section. We also defined our PORT number to 3333.

Now that we've created our `.env` file we must include it in `server.js`. This can be easily done by adding the line `require('dotenv').config()` right bellow the declaration of the mongoose constant.

So `server.js` should be similar to this:


```javascript
const express = require('express')
const app = express()
const mongoose = require('mongoose')

require('dotenv').config()

mongoose.connect(process.env.DATABASE_URL, { useNewUrlParser: true, useUnifiedTopology: true })
const db = mongoose.connection
db.on('error', (error) => console.error(error))
db.once('open', () => console.log('database connected'))

app.listen(process.env.PORT, () => {
    console.log("The API is running...")
})
```



If everything is fine, you can run `npm run dev` and should see a log saying you've connected to the database.


## Routes File  

It's now time to create our routes file. Inside the src folder, make a new file named `routes.js`. This file will be responsible for declaring all the routes in our API. So open it up and let's code:



```javascript
const express = require('express')
const router = express.Router()

module.exports = router
```



Until now, we've included the express module and made a router from its instance. In the end of the file, we've exported the router constant so we can import them in another file. It brings us to the routes themselves. The routes we're gonna build in this project are:

1. Route for getting all questions
2. Route for getting one question
3. Route for making one new question
4. Route for updating one question
5. Route for deleting one question

If you're not very familiar with http verbs and request methods, you can read about them [here](https://restfulapi.net/http-methods/#delete).

We're only going to make the **skeleton** of all the routes for now. That will make our `routes.js` file look like this:



```javascript
const express = require('express')
const router = express.Router()

// get all quiz questions
router.get('/questions', (req, res) => {

})

// get one quiz question
router.get('/questions/:id', (req, res) => {

})

// create one quiz question
router.post('/questions', (req, res) => {

})

// update one quiz question
router.put('/questions/:id', (req, res) => {

})

// delete one quiz question
router.delete('/questions/:id', (req, res) => {

})

// this one is just a test
router.get('/', (req, res) => {
    res.send('H3ll0 W0RlD')
})


module.exports = router
```



I'm going to explain all these routes later. For now, I've put a extra route for testing purposes at the end of the file. When we make a get request for the '/' path, we're going to get *H3ll0 W0RlD* as a response. 

But before we can test this route, we'll need to tell our server to use the routes in `routes.js`. That being said, let's modify our `server.js` file.



```javascript
const express = require('express')
const app = express()
const mongoose = require('mongoose')
const routes = require('./routes') // includes the routes.js file
const cors = require('cors') // includes cors module

require('dotenv').config()

app.use(cors()) // We're telling express to use CORS
app.use(express.json()) // we need to tell server to use json as well
app.use(routes) // tells the server to use the routes in routes.js

mongoose.connect(process.env.DATABASE_URL, { useNewUrlParser: true, useUnifiedTopology: true })
const db = mongoose.connection
db.on('error', (error) => console.error(error))
db.once('open', () => console.log('database connected'))

app.listen(process.env.PORT, () => {
    console.log("The API is running...")
})
```



## Testing our Route

We can now make a few tests to guarantee everything is going okay. For that purpose we'll need a REST client such as [Postman](https://www.postman.com/) or [Insomnia](https://insomnia.rest/download/). However, in my case I'm going to use Insomnia.

Here I've tested the 'localhost:3333/' route, which successfully returned me *'H3ll0 W0RlD'*. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wbqn87dlqmfabua7onsi.png)

After testing the '/' route, I've deleted it from `routes.js`, since it was only for testing purposes. By the way, you are free to test the others routes if you do wish. Just remember to use the right HTTP method to each route. 


## Building a Model

Now that we've got the `routes.js` file settled, we should worry about creating a model and its schema. For those who aren't aware of this, in this context, models are just a representation of a database entity. If that still doesn't make much sense, just follow along with this post. It'll become easier as we go.

So let's create a folder named `models`, inside of our `src` directory. I've already created a new collection (it's like the tables in MySQL) called `questions` in our database. That being said, let's create a new file inside the models folder with the name `Question.js`.

Inside this file, we'll make its schema. A Schema is like a blueprint of a database entity (in this specific case, a collection named `questions`). So the content of `Question.js` will be similar to these:



```javascript
const mongoose = require('mongoose')

const QuestionSchema = new mongoose.Schema({
    description: String,
    alternatives: [
        {
            text: {
                type: String,
                required: true
            },
            isCorrect: {
                type: Boolean,
                required: true,
                default: false
            }
        }
    ]
})

module.exports = mongoose.model('Question', QuestionSchema)
```



Basically, what we've done is describe how are the fields (or columns in MySQL) inside a document (similar to rows in MySQL) that belongs to Questions. In the end of the file, we exported the model using the specific method for exportation from mongoose. We've also gave the model the name *Question*.

This part is more or less self-explanatory, so I'm not going to dive into it. But if you want to read more about MongoDB Schemas, you can learn more [here](https://docs.mongodb.com/stitch/mongodb/document-schemas/).

## Routes - Create Questions

Alright! We made the necessary models and schemas, which means we can build up our routes for real this time. So back in our `routes.js` file, we first need to import the we've created. 



```javascript
const express = require('express')
const router = express.Router()
const Question = require('./models/Question') // includes our model
```



Now we're going to modify the route for creating a new question. Right now, this is how it looks:



````javascript
// create one quiz question
router.post('/questions', (req, res) => {

})
```



We're using the **post** method in this route because we want to create something new into the database.

This route will serve to insert a new question into the database, each question has its description and alternatives. So we'll consider the data we need for creating a new question will be sent as JSON in the request body. That being said we'll wrap our request with a try/catch statement and retrieve the request data. We'll also return a 500 status code (which means 'Internal Server Error') in case of a error.



```javascript
// create one quiz question
router.post('/questions', (req, res) => {
    try {
        const { description } = req.body
        const { alternatives } = req.body
    } catch (error) {
        return res.status(500).json({"error":error})
    }
})
```



Now that we've got the description and the alternatives for the question, we'll use the Question schema for creating a new question. In the end, we'll return a 201 status code (it means 'created') along with the the created question.



```javascript
// create one quiz question
router.post('/questions', async (req, res) => {
    try {
        const { description } = req.body
        const { alternatives } = req.body

        const question = await Question.create({
            description,
            alternatives
        })

        return res.status(201).json(question)
    } catch (error) {
        return res.status(500).json({"error":error})
    }
})
```



I've also turned the callback an asynchronous function, that way we could use promises inside it. By the way, we used **[Object Destructuring](https://codeburst.io/es6-destructuring-the-complete-guide-7f842d08b98f)** in the parameters of Question's create method to simplify our code. 

Now if we test this route with the help of a REST client we'll get something like this:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/iaepysfgw3nkmp2ntjcp.jpg)

If you look to the right side, you'll notice there are a few extra fields, such as _id and __v. You don't have to worry much about them, they are automatically included by MongoDB. The _id field is just a ID and __v is the document version counter, which counts how many times that document was changed. 


## Routes - Get All questions

It's now time to modify another route. This time will work with the route for getting all questions in the database. Since we're retrieving data from the database, we are using the get method. Right now, this is how the route is looking.



```javascript
// get all quiz questions
router.get('/questions', (req, res) => {

})
```



Just as the first one, we'll turn the callback a asynchronous function and wrap its inner side with a try/catch statement returning a 500 status code in case of error.



```javascript
// get all quiz questions
router.get('/questions', async (req, res) => {
    try {

    } catch (error) {
        return res.status(500).json({"error":error})
    }
})
```



With the same logic, we'll just use the Question schema to **find** all questions in the database. In the end, returning it to the client.



```javascript
// get all quiz questions
router.get('/questions', async (req, res) => {
    try {
        const questions = await Question.find()
        return res.status(200).json(questions)
    } catch (error) {
        return res.status(500).json({"error":error})
    }
})
```



Now when we make a get request to this route, this is what we get:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/x6flp6cmvmpy1164cyz4.jpg)

Since there were only one question in the database, just one was returned.


## Routes - Get One Question

Now that we've made a route for getting all questions, why not finish the route for getting just one specific question? Right now, this is how it's looking:



```javascript
// get one quiz question
router.get('/questions/:id', (req, res) => {

})
```



Notice that this route's path is a little bit different from the others, since it has *'/:id'* in the end. In a actual request, this part will be replaced by the question's id. So in some way it's similar to variables. We'll do the same process we've done in the other routes here. 



```javascript
// get one quiz question
router.get('/questions/:id', async (req, res) => {
    try {
        const _id = req.params.id 

        const question = await Question.findOne({_id})        
        if(!question){
            return res.status(404).json({})
        }else{
            return res.status(200).json(question)
        }
    } catch (error) {
        return res.status(500).json({"error":error})
    }
})
```



The difference here, is that we retrieved the request data from `req.params` since it's coming from the path. In contrast, we have used `Question.findOne` here considering we just one to get one question, we passed _id as the search parameter. So it'll look for a question with that specific _id. Below, we just tested if that question actually existis in the database and returned a properly answer.

When you make a request with a real _id, this should be the result:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6h7ufhsydo7b7besajb2.jpg)

Now, if you use a incorrect _id:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ocuuwyysib2l1csjfli5.jpg)


## Routes - Update One Question

Now we're going to build up the route for updating a specific question. So we're using the *put* method for this one. 



```javascript
// update one quiz question
router.put('/questions/:id', async (req, res) => {
    try {
        const _id = req.params.id 
        const { description, alternatives } = req.body

        let question = await Question.findOne({_id})

        if(!question){
            question = await Question.create({
                description,
                alternatives
            })    
            return res.status(201).json(question)
        }else{
            question.description = description
            question.alternatives = alternatives
            await question.save()
            return res.status(200).json(question)
        }
    } catch (error) {
        return res.status(500).json({"error":error})
    }
})
```



We've done the same alterations in this route as well. We got the _id from the path and the new description and alternatives for that question from the request body. As said in the [docs](https://mongoosejs.com/docs/documents.html#updating) mongoose tracks document changes. So we first tried to find the question with the given _id. If the question doesn't exists, we then create it and return the data along with a 201 status code. If it does exists, we update the description and alternatives of the found document and calls the `save` method to update the actual document in the database. Finally, we return a 200 status code along with the question data.

When you pass **nonexistent** _id, a new question should be created. So the results should be something like this:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hvd06wsq6xum3dl94ovn.jpg)

Now if you pass a **existing** _id, it will then update the contents of the question in the database. So it should end up like this:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/agoujh9vcgpp5jo9htjc.jpg)


## Routes - Delete One Question

It's finally the time for us to modify our last route. This route is responsible for deleting a specific question. 



```javascript
// delete one quiz question
router.delete('/questions/:id', async (req, res) => {
    try {
        const _id = req.params.id 

        const question = await Question.deleteOne({_id})

        if(question.deletedCount === 0){
            return res.status(404).json()
        }else{
            return res.status(204).json()
        }
    } catch (error) {
        return res.status(500).json({"error":error})
    }
})
```


So as always, we've made the callback an asynchronous function and wrapped its contents in a try/catch statement. We've got the _id from the request parameters and called the `deleteOne` method to delete the question with that given _id.

If the amount of deleted documents is equal to 0, it means the document doesn't exists. In that case, we return a 404 status code (not found):
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vqiemr360zvkgv262s1h.jpg)

But if the document was really deleted, we return a 204 status code (no content): 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/u1prmtvs1sbyvozvyflw.jpg)

## Conclusion

If you followed this article until here, it means we've finally **finished our API!**

Thank you for taking your time to read my post. I'm a newbie in writing articles, so if you have *any suggestions or corrections* about this post, I'd be glad to listen (read, in reality haha).

By the way, in **future**, I'll write another article about how to deploy this API to the cloud and another one for making a frontend to consume it.

Building a simple WebChat

Carlos Magno — Tue, 10 Sep 2019 00:22:07 +0000

Hello there. In this post, you are going to learn how to build a simple webchat using python and web sockets. Since that's the case, you are going to need to have python installed on your computer.

This project source code is available on this github repository and you can see it online at Papo Reto.

If you don't have the flask package, you can install it with the following command: pip install Flask. You'll also need flask_socketio and eventlet, so you can run pip install flask_socketio and pip install eventlet to install them.

Now that you have everything installed, this is how the files and directories of our project will look like:

templates
 - index.html
static
   css
    - style.css
- main.py

The core of our project is the main.py file, that's what will control our application. It will look like this:

#! -*- enconding: utf-8 -*-
from flask import Flask, render_template
from flask_socketio import SocketIO, emit

app = Flask(__name__, template_folder='templates', static_folder='static', static_url_path='/static/')
socketio = SocketIO(app)

@app.route('/')
def index():
    return render_template('index.html')

@socketio.on('client_message')
def receive_message (client_msg):
    emit('server_message', client_msg, broadcast=True)

if __name__ == '__main__':
    socketio.run(app)

The first two lines of code import the packages and modules we are going to use in this project.

from flask import Flask, render_template
from flask_socketio import SocketIO, emit

Flask is our web framework, and flask_socketio is a package that allows flask to use full-duplex low-latency communications protocols like websockets.

Then we instantiate our flask application and define where the templates and static files are going to be. We also instantiate our socketio object and pass the flask application as a argument.

app = Flask(__name__, template_folder='templates', static_folder='static', static_url_path='/static/')
socketio = SocketIO(app)

We now define our default route which is going to return the index.html page:

@app.route('/')
def index():
    return render_template('index.html')

When the user sends a message, it will emit the event client_message to the server, passing the nickname and the message as parameters. The server will then broadcast this message to every connected user:

@socketio.on('client_message')
def receive_message (client_msg):
    emit('server_message', client_msg, broadcast=True)

Finally, we'll start to run our application with the following lines:

if __name__ == '__main__':
    socketio.run(app)

That's it, our main.py file is now complete, and that take us to the index.html file. In this case, it will have 3 major parts: the message-box, the input-box and the nickname-box. The contents of this file will be:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Papo Reto</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js" integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I=" crossorigin="anonymous"></script>

</head>
<body>
<script type="text/javascript" charset="utf-8">
const socket = io();
socket.on('server_message', (data) => {
    let e = document.createElement('p');
    let sp = document.createElement('span');
    sp.innerHTML = data.nickname;
    e.appendChild(sp);
    e.innerHTML = e.innerHTML+'>> '+data.message;
    if(document.getElementById('message-box').children.length>20){
        document.getElementById('message-box').removeChild(document.getElementById('message-box').children[0]);
    }
    document.getElementById('message-box').appendChild(e);

    document.getElementById('message-box').scroll(0, document.getElementById('message-box').scrollHeight);
});
function htmlEntities(str) {
    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}
function sendMessage(){
    socket.emit('client_message', {'nickname': htmlEntities(document.getElementById('nickname-input').value), 'message':  htmlEntities(document.getElementById('message-input').value)});
    document.getElementById('message-input').value = '';
}
function isPressingEnter(e){
    let k;
    if(window.event){
        k = e.keyCode;
        if(k===13){
            sendMessage();
        }
    }else if(e.which){
        k = e.which;
        if(k===13){
            sendMessage();
        }
    }
}
</script>

<h1 id="title">Papo Reto</h1>
<section id="chat-box">
    <section id="message-box">
    </section>

    <section id="input-box">
        <input type="text" autofocus onkeypress="return isPressingEnter(event)" required placeholder="Digite sua mensagem aqui" id="message-input">
        <button type="button" id="send-button" onclick="sendMessage()" >>></button> 
    </section>
</section>

<section id="nickname-box">
    <label id="nickname-label" for="nickname-input">Nickname: </label>
    <input type="text" id="nickname-input" autocomplete="off" value="Guest">
</section>

</body>
</html>

We are using the SocketIO client side api to connect and take care of handling the websockets. So in this case, we are using a CDN to do so:

<script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js" integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I=" crossorigin="anonymous"></script>

Now, with javascript, we need to define our socket object, that will connect with the server:

const socket = io();

Since the websocket is on the same route, we don't need to pass anything as parameters.

When the user clicks on the send button, it will call the sendMessage function. But if the user types something on the input with the input-box id, it will call the isPressingEnter function, which will verify if the user is pressed enter. If so, it will also call sendMessage():

function isPressingEnter(e){
    let k;
    if(window.event){
        k = e.keyCode;
        if(k===13){
            sendMessage();
        }
    }else if(e.which){
        k = e.which;
        if(k===13){
            sendMessage();
        }
    }
}

The sendMessage function will then emit a client_message event to the server, passing the nickname and the message as data:

function sendMessage(){
    socket.emit('client_message', {'nickname': htmlEntities(document.getElementById('nickname-input').value), 'message':  htmlEntities(document.getElementById('message-input').value)});
    document.getElementById('message-input').value = '';
}

We're also using the htmlEntities function to remove the HTML tags from the inputs:

function htmlEntities(str) {
    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}

When the server receives the message, it will broadcast the message to everybody by emiting the server_message event. So we need to add this message to the message-box when the server_message event is received:

socket.on('server_message', (data) => {
    let e = document.createElement('p');
    let sp = document.createElement('span');
    sp.innerHTML = data.nickname;
    e.appendChild(sp);
    e.innerHTML = e.innerHTML+'>> '+data.message;
    if(document.getElementById('message-box').children.length>20){
        document.getElementById('message-box').removeChild(document.getElementById('message-box').children[0]);
    }
    document.getElementById('message-box').appendChild(e);

    document.getElementById('message-box').scroll(0, document.getElementById('message-box').scrollHeight);
});

If you now, run the server with python main.py, you'll see our webchat is already working.

But since it's looking terrible, we'll add some css to it. Flask templates uses jinja as its template engine, so it's a little bit different to add our css file path to the index page. We can do so adding the following lines of code inside the head tag:

<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='./css/stylxe.css') }}">

You can do as you please, but in this case, that's the contents of our CSS file:

*{
    margin: 0;
    padding: 0;
}
body{
    background: #202020;
    color: #eee;
    font-family: 'monospace';
    line-height: 1.4em; 
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 15px;
}
#title{
    font-size: calc(20px + 2vw + 1vh);
    padding: 40px;
}
#chat-box{
    border: 2px solid #ccc;
    border-radius: 10px;
    box-shadow: 3px 4px 4px #111;
}
@media only screen and (max-width: 600px){
    #chat-box{
        width: 95vw;
    }
}
@media only screen and (min-width: 600px){
    #chat-box{
        width: 80vw;
    }
}
#message-box{
    width: 100%;
    height: 60vh;
    background: #444;
    overflow-y: scroll;
    padding: 5px;
    font-size: calc(10px + 1vh + 2vw);
}
#message-box p{
    width: 100%;
    line-height: 1.5em;
    overflow-wrap: break-word;
    padding: 5px 2px;
    margin: 2px 0;
    background: #4f4f4f;
}
#message-box span{
    color: yellow;
    font-weight: 900;
}

#input-box{
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 90% 10%;
}
#message-input{
    height: 90%;
    font-size: calc(10px + 1vh + 2vw);
    border-radius: 0 0 0 6px;
}
#send-button{
    background: purple;
    color: #f0f0a0;
    height: 100%;
    font-size: calc(10px + 1vh);
    font-weight: 900;
}
#nickname-box{
    padding: 15px;
}
#nickname-input {
    border-radius: 5px;
    background: purple;
    color: white;
    padding: 2px;
    font-size: calc(10px + 1vh + 1vw);
}
#nickname-label{
    font-size: calc(10px + 1vh + 1vw);

}

And now, that's the result:

Thank you for your attention! That's one of the ways we can build a really simple webchat using python. Also, it's pretty easy to do so, but if you guys want, I can also show how to deploy it to heroku. So you can let it run online.

Getting Started with Flask

Carlos Magno — Sun, 08 Sep 2019 06:26:57 +0000

Hello there. Today we are going to take a look at Flask, which is a lightweight web application framework and it's really easy and quick to get started. Flask is really great for building APIs and Webapp's backend. So, first of all, you are going to need to have Python and Pip installed on your computer. If you don't have them installed, you can do so giving a look at the oficial website.

Now we need to install Flask. We can install it with Pip:
pip install Flask

Now that we have Flask installed, we can now create a folder to hold our project. In this project, we'll create a file named main.py. This file will be the heart and body of our flask application.

To build a Flask application, we are first going to import our dependencies and then instantiate our flask application:

from flask import Flask, request, jsonify
import time

app = Flask(__name__)

After all, we'll start to define our application's routes. In Flask, we define routes using the decorator @app.route() above a function and passing two arguments: the path and the allowed methods. In this case, we are providing '/' (root) as path and allowing only the GET method in this route. The function init, will then return H3ll0 W0rld which is exactly the request's response.

@app.route('/', methods=['GET'])
def init():
    return 'H3ll0 W0rld'

After all the routes, we must now start to run the application. It can be done with the run() method of the application instance.

if __name__ == '__main__':
    app.run(debug=True)

Now we can finally run our flask app and test out the routes. Save the file and run the script: python main.py. We can then open our browser and access localhost:5000 to see the output.

We can also return HTML code and pages when handling a request:

@app.route('/link', methods=['GET'])
def link():
    return '<a href="#">Link to nowhere</a>'

It's only that for today. Just like Python, Flask is very expressive and easy to get into. You don't need to learn much to start applying it in real problems and solutions. You can learn more at flask docs. Thank you for reading until the end!

Which project should I build now?

Carlos Magno — Wed, 28 Aug 2019 14:50:48 +0000

There are two side projects I want to get into now, but I don't know which one I should pick first.

The first one is similar to a social network, you can post stuff on different channels. The difference is that you can't identify yourself. The good side of this one is that I already know how to do it.

The second one is a webchat where you can talk with random people and discuss random themes. The hard side of it, is that I don't know much about websockets, so I also don't know how I'm going to build it.

So which one would you recommend me to build first?

DEV Community: Carlos Magno

Building a URL Shortener from Scratch with NodeJS

Notes

Table of Contents

Planning

Setting up

MVC Architecture

MVC Architecture Explanation

Folder Structure

Configuring package file

Server file

Routes File

Writing up Models

Database Setup

Dotenv File

Database Connection

Writing up Controllers

Updating routes.js

Store Method

Redirect method

Conclusion

Build a Slideshow Component with ReactJS

Notes

Table of Contents

Setting up

Basic Component

Structure

Adding Style

Functionality

Changing the background

Making up the controllers

Automatically Advancing Slides

Next and Previous Slides

Conclusion

Deploying a NodeJS app to Heroku

Table of Contents

Creating a account

Setting up a new app

Environment Variables

Setting up package json

Deploying

Testing

Conclusion

Build a Quiz REST API with NodeJS

Notes

Table of Contents

Setting Up

Server Setup

Building a simple WebChat

Getting Started with Flask

Which project should I build now?