*Web Application

*E-mail signup web application

Through APIs, parts of data can be got from a different application to another application,

Ex: Insta uses FB’s API to access to the data of friends and display on their APIs
APIs are basically a contract b/w the data providers and developers.

Basically, these are all the things that developers can access, and these are the methods , the
objects, the protocols to access them. And we as the website that host the data will try not to
change any of these methods or functions without notifying you.
Ex: Tinder is using an external API to interact with the FB system and databases.
Through APIs, we can interact with the menu of the data and interact with it.

 Every API that interacts with an external system, will have an endpoint.
The websites that have APIs tend to have more data, than just a bunch of random quotes.

 The paths and parameters can be used to specifically narrow down any piece of data from
any external server.

The endpoint is upto the last forward slash

When creating a path, we need to plan ahead of time, so they have to be able to catch when this
request is made to the url/*****

To provide flexibility, APIs allow to provide parameters, which need to be put at the end of the url.

API Authentication and Decoding:

Monetizing and limiting the use of the data is necessary for the APIs to set.

This is done through authentication.

API keys can be used to make requests, when to make any requests to the APIs

Structure of a sample API call.

The first parameter gets added after a ‘?’, and the subsequent parameters gets added after ‘&’
When a request is made, the data that we get is in the JSON format
JSON is so reqdily used is because not only it’s in a format that can be easily read by a human, but
because it can be easily collapsed down to take up as little space as possible.
JSON is much lighter weight and easy to turn into
Getting data from APIs:

The client browser, or our user is gonna be typing in the web address into their browser , and that is
going to make a request to our server. That is going to be a GET request, so that’s going to get the
HTML, CSS, JS from our servers.

At this point, our server should return all the data – html, css, js. That is going to be a reponse.

But in orde to be able to give them that response, that include the data from someone else’s server,
we have to make a request. This is also a GET request, so they are going to give a piece of response
in the form of data that we need.

This is all done via the API, so via the menu they provided. They are going to specify what are the
parameters to specify, so to get the data and incorporate into the files.
WeatherProject:

A new node module needs to be created.

To get the weather data, we need to make a GET request to the OpenWeather maps server, and
need to fetch the data as a JSON and parse it to get relevant data

Modules to make GET request ---

1. HTTPS ----------Native
2. Request -----------------------------------
3. SuperAgent ------------------------------ External
4. Axios --------------------------------------
5. Got ----------------------------------------

The https module is natively bundled within the node project.

Through this https native module, a GET request can be made across the internet using the https
protocol.
How to parse JSON:

JSON.parse() – converts a json into some string format. Hexadecimal or binary to text and then turn
it into an actual javascript object.

Example:
//jshint esversion:6

const express = require("express");

const https = require("https");

const app = express();

app.get("/", function (req, res) {

    const url = "https://api.openweathermap.org/data/2.5/weather?

q=London&appid=d7cdacf0ff97052931da09cdbcb3dcd3&units=metric";
   
    https.get(url, function(response) {
        console.log(response);
        console.log(response.statusCode);

        response.on("data", function(data) {
            const weatherData = JSON.parse(data);
            console.log(weatherData);

            // const object = {
            //     name: "Umang",
            //     favFood: "Bul-Dak"
            // }
            // console.log(JSON.stringify(object));
            const temp = weatherData.main.temp;
            console.log(temp);

            const weatherDesc = weatherData.weather[0].description;

            console.log(weatherDesc);
        });
    });

    res.send("Server up and running!!");

});

app.listen(3000, function() {
    console.log("Server running on port 3000");
});

Parsing the JSON helps to dig pieces of data that we want.

Using Express to render a website from Live API data:

Res.send() is the end, no multiple sends can be given in the app.get() method.
Using Body Parser to Parse POST requests to the server:

//jshint esversion:6

const express = require("express");

const https = require("https");
const bodyParser = require("body-parser");

const app = express();

app.use(bodyParser.urlencoded({extended: true}));

app.get("/", function (req, res) {

    res.sendFile(__dirname + "/index.html");
});

app.post("/", function (req, res) {

    const query = req.body.cityName;

    const apiKey = "d7cdacf0ff97052931da09cdbcb3dcd3";
    const unit = "metric";
    const url = "https://api.openweathermap.org/data/2.5/weather?q=" + query +
"&appid=" + apiKey + "&units=" + unit + "";
   
    https.get(url, function(response) {
        console.log(response);
        console.log(response.statusCode);

        response.on("data", function(data) {
            const weatherData = JSON.parse(data);
            const temp = weatherData.main.temp;
            const weatherDesc = weatherData.weather[0].description;
            const icon = weatherData.weather[0].icon;
            const imageURL = "http://openweathermap.org/img/wn/" + icon +
"@2x.png";

            res.write("<p>The weather is " + weatherDesc + ".</p>");

            res.write("<h1>The tempearture in " + query + " is: " + temp + "
degree Celcius.</h1>");
            res.write("<img src=" + imageURL + ">");
            res.send();
        });
    });
});

   

app.listen(3000, function() {
    console.log("Server running on port 3000");
});
News Letter Project:

<!-- Latest compiled and minified CSS -->

The CSS and the image need to be rendered by putting remote location on the html file, rather than
local link

app.use(express.static("public"));

A name of the folder has to be kept, that is going to be kept as a static folder.

Now, by referring to a path to the static files by using app.use(express.static()) by a relative url,
which in this case is the “public folder”. Now these css and image files can be accessed.

*through bodyParser, we can render data*.

1. Setting up the signup

2. Posting data to MailChimp’s servers via their API
3. Adding success and failure pages.
4. Deploying the server with Heroku
Deploying the Server with Heroku:

Buying and maintain own server stack is very difficult.

We rent some servers. (Upto 5 projects for free)

app.post("/", function(req, res) {

    const firstName = req.body.firstName;

    const lastName = req.body.lastName;
    const email = req.body.email;

    const data = {
        members: [
            {
                email_address: email;
                status: "subscribed";
                merge_fields: {
                    FNAME: firstName,
                    LNAME: lastName
                }
            }
        ]
    };

    const jsonData = JSON.stringify(data);

});

https.get(url, function() {});

Only makes get requests^

This allows to specify the type of request to make^

MailChimp has several servers running simultaneously.

After providing the url, options should be provided which will be a JS object.

Now specify the method as ”POST” , and next for this post to go through successfully, is to provide
some authentication