Integración de la API del mercado de valores en Node.js

En este artículo, vamos a crear una aplicación web simple, en la que aprenderemos cómo podemos integrar una API simple con NodeJS y obtener datos del servidor usando esa API.

Aquí, aprenderemos qué es la API , cómo obtener datos del servidor usando esa API y todo lo relacionado con eso, y cómo puede integrar cualquier API con su aplicación web.

Cosas que cubriremos en este artículo:

• Aprenderemos un poco sobre qué es realmente la API, por qué se usa y el proceso que ocurre cuando usamos la API.
• Obtendremos algunos conocimientos sobre el formato JSON (que es una notación para almacenar y transportar datos) y todo lo relacionado con eso.
• Buscaremos la API de Bolsa que usaremos en nuestra Aplicación
• Aprenderemos cómo podemos obtener datos llamando a una API.
• Luego, crearemos una aplicación simple de Nodejs, y paso a paso (en la que integraremos la API de Stock Market), le haremos mejoras y llegaremos a nuestra aplicación final.

La aplicación que vamos a realizar va a ser muy sencilla. Permitirá al usuario obtener los datos de cualquier acción en particular, y usaremos nuestra API para obtener los datos del servidor del mercado de valores y mostrárselos a nuestro usuario. La aplicación es básica, pero, una vez que aprenda cómo podemos crear una aplicación mediante la integración de la API, puede crear aplicaciones complejas y probar diferentes API de su elección.

Requisito previo: Entonces, antes de continuar, debe conocer algunos conceptos básicos sobre los siguientes términos.

API: considere un ejemplo simple de un restaurante. Cuando visitas un restaurante, no haces el pedido directamente a los cocineros en la cocina. Más bien, le decimos nuestros requisitos al mesero que eventualmente comunica y entrega el mensaje al chef en el comedor. Los camareros sirven como interfaz entre usted y los cocineros en la cocina. El trabajo de API es similar al de los camareros del restaurante.

API significa interfaz de programación de aplicaciones, lo que significa que es una interfaz o un middleware que nos permite conectar dos computadoras o servicios diferentes.  

Las aplicaciones/sitios web móviles se utilizan ampliamente para reservar billetes de tren y de avión en la actualidad. Estas aplicaciones básicamente utilizan API para enviar y recibir datos de la base de datos.

Considere un ejemplo de la base de datos del mercado de valores, que contiene los datos relacionados con el rendimiento de las acciones de varias empresas (incluido el precio actual, el precio más alto del día, etc.). Nuestra aplicación web no puede solicitar y obtener datos directamente de la base de datos, sino que tenemos que usar alguna API para comunicarnos con la base de datos. Entonces, si queremos obtener los datos relacionados con cualquier acción en particular, el proceso que ocurre se puede dividir en cuatro pasos:

• Nuestra aplicación le dice a la API que queremos datos relacionados con una acción en particular.
• La API acepta la solicitud y la envía al Servidor/Base de datos.
• Los datos relacionados con el stock se envían de vuelta a la API desde el servidor/base de datos.
• La API finalmente nos entrega los datos requeridos.

Así es como la API actúa como un intermediario entre nosotros (el usuario de la aplicación móvil/web) y el Servidor/Base de datos.

JSON (Notación de objetos de JavaScript): JSON o Notación de objetos de JavaScript es un formato para representar, almacenar y transportar datos. Los datos JSON son muy fáciles de entender y son legibles por humanos. Los datos se almacenan en forma de pares clave-valor , similares a los objetos JavaScript y estos pares clave-valor están separados por comas.

Ejemplo: un ejemplo simple de objeto JSON.

{
    "name" : "YourName",
    "age"  : 22,
    "isMarried" : false,
    "education" : [
                    {"BTech" : "College1"},
                    {"MTech" : "College2"}
                  ]
}

Este es un ejemplo simple de datos almacenados en formato JSON. Aquí, “ nombre ”, “ edad ”, “ está casado ” y “ educación ” son las claves y los datos escritos después de un punto y coma (:) son los valores correspondientes a las claves.

Las claves deben ser de tipo String, pero los valores pueden ser de cualquier tipo. (Número, carácter, string, array, booleano u otro objeto de JavaScript)

Se usa un punto (.) para obtener el valor asociado con cualquier tecla. Por ejemplo, si queremos obtener el valor asociado a la clave “nombre”, escribiríamos “elObjetoDadoArriba.nombre”.  

 var name = theObjectGivenAbove.name;

De manera similar, si queremos obtener el valor asociado con la clave «edad», escribiríamos «theObjectGivenAbove.age» para obtener el valor asociado con la clave «edad».

Nota: Aquí, el valor correspondiente a la clave «educación» es una Array de Objetos. Entonces, » theObjectGivenAbove.education » devolverá una array de objetos (que contienen pares clave-valor) y no un solo valor . Supongamos que queremos obtener el valor correspondiente a la clave «BTech». Aquí tendremos que seguir estos pasos:

• Primero obtendremos el Array asociado a la clave “educación”.

  var educationArray = theObjectGivenAbove.education;

• Ahora que tenemos el Array, obtendremos el primer elemento del Array obtenido arriba.

  var firstElementOfEducationArray = educationArray[0];

• El elemento que tenemos es un objeto(“BTech”: “College1”), y para obtener el valor correspondiente a la clave “BTech” se utilizará el punto(.).

  var requiredValue = firstElementOfEducationArray.BTech;

El valor asociado a la clave BTech se obtiene siguiendo los pasos que se muestran arriba. Combinando los tres, obtenemos:

var educationArray = theObjectGivenAbove.education;
var firstElementOfEducationArray = educationArray[0];
var requiredValue = firstElementOfEducationArray.BTech;

Considere un ejemplo más:

{
    "nameOfPerson" : "Mike",
    "age"          : 29,
    "isEmployed"   : "Birla Innovation Group",
    "partner"      : {
                        "name" : "Jenny",
                        "age"  : 28,
                        "isEmployed" : "BlueRay Technologies"
                        }
}

En la preetiqueta anterior, se muestra un objeto JSON con algunos pares clave-valor. Una cosa a tener en cuenta aquí es que el valor asociado con la clave «socio» es un objeto en sí mismo . Supongamos que queremos encontrar el nombre del socio de «Mike» (obteniendo el valor de la clave «nombre» del objeto socio), podemos seguir los pasos que se detallan a continuación:

• Obtener el Objeto asociado a la clave “partner”

  var partnerObject = objectGivenAbove.partner;

• Ahora que tenemos el objeto correspondiente a la clave «socio», usaremos el punto (.) nuevamente para obtener el valor correspondiente a la clave «nombre» de partnerObject.

  var nameOfPartner = partnerObject.name;

Del mismo modo, podemos obtener el valor correspondiente a cualquier clave en todo el objeto.

La razón por la que nos centramos en JSON es que los datos que se obtienen mediante la API están en formato JSON, por lo que es mejor tener algunos conocimientos sobre cómo leer y obtener datos en este formato. Ahora que estamos familiarizados con estos términos básicos, sigamos adelante.

Construyendo nuestra aplicación: ahora sabemos qué hace una API, pero dónde está la API que podríamos usar en nuestra aplicación. Afortunadamente, hay muchas API gratuitas disponibles en Internet que nos permiten comunicarnos con el servidor o la base de datos de una gran organización o empresa.

La API que vamos a utilizar aquí es del sitio web denominado RapidAPI.com , y el nombre de la API es «Último precio de las acciones», que nos permitirá obtener los datos de las acciones que cotizan en la Bolsa Nacional de Valores. (NSE).

Debe seguir los pasos que se detallan a continuación para obtener acceso a la API:

Paso 1: navegue al sitio web de RapidAPI o abra RapidAPI.com , inicie sesión y busque la última API de precios de acciones en la barra de búsqueda

Iniciar sesión en RapidAPI.com y encontrar la API que vamos a utilizar. 

Paso 2: Accederá a la página de juegos de la API donde se enumerarán los detalles necesarios de la API . (Una página que se muestra en la imagen de abajo)

Tablero de API

Paso 3: para cada desarrollador que usa la API para integrarse con el código, se asigna una clave de API única . Por ejemplo, si deseo integrar la última API de precios de acciones en mi aplicación web, se me proporcionará una clave de API única, que será necesaria para comunicarme desde el servidor o la base de datos mediante esa API.

En la esquina inferior derecha, hay una sección como se muestra en la imagen a continuación:

1. Este cuadro negro combinado representa todos los detalles relacionados con la API, incluida la clave de API, sobre la API y cómo nos comunicaremos con la base de datos.

2. ‘ GET ‘ Representa que solo vamos a obtener los datos de la base de datos y no vamos a enviar ni publicar ningún dato en el Servidor/Base de datos.

3. Representa la URL de la API, que es la dirección o enlace que nos permite acceder a la API y sus características y funcionalidades.

4. Representa que vamos a obtener datos relacionados con NIFTY50 o 50 empresas que cotizan en la Bolsa Nacional de Valores.

5. Representa nuestra clave API única.

Ahora que tenemos nuestra API y clave de API, podemos usar estos detalles en nuestra aplicación web.

Configuración de nuestra aplicación NodeJS: si no está familiarizado con los conceptos básicos de NodeJS, puede consultar el siguiente artículo https://www.geeksforgeeks.org/introduction-to-node-js/

Siga los pasos que se indican a continuación para configurar nuestra aplicación.

1. Cree una nueva carpeta llamada «StockMarketAPI».

2. Cree un nuevo archivo con el nombre » Server.js «.

3. Abra terminal/GitBash en la carpeta y ejecute el comando que se indica a continuación.

   npm init -y

   Estructura del proyecto: el comando anterior se usa para inicializar npm en nuestra carpeta de proyectos. A partir de ahora, la estructura del proyecto debería verse así:

   

   Estructura del proyecto

4. Ahora, hemos inicializado npm. El siguiente paso es instalar los módulos de Node que necesitaríamos en nuestro proyecto. Para usar la API en nuestro proyecto, usaríamos un paquete de Nodes llamado » axios «. Ejecute el siguiente comando para instalar el paquete.

   $npm i axios

   Estructura del proyecto: ahora la carpeta del proyecto debería verse así:

   

   Estructura del proyecto después de instalar el paquete «axios»

Ahora que tenemos los detalles de la API, inicializamos npm e instalamos axios, ahora podemos avanzar para escribir un código que nos permita obtener los detalles de la base de datos del mercado de valores, utilizando nuestra API.

Siga los pasos que se indican a continuación:

1. Primero tendríamos que decirle a nuestra NodeApp que vamos a requerir el paquete de Nodes “ axios ”. Para eso, tenemos que escribir el código que se muestra a continuación en nuestro archivo Server.js. Al escribir esta simple línea que se muestra a continuación, permitimos que Node use el paquete llamado «axios» en nuestra aplicación.

   var axios = require(“axios”).default;

2. 2. Ahora, después de este paso, tenemos que copiar y pegar la variable de opciones que se proporcionó en el panel de la API .

   

   Detalles relacionados con la API en una variable llamada «opciones»

   Puede copiar el código que se proporciona a continuación o copiarlo desde el panel de la API. El siguiente código no es más que una variable simple llamada «objeto» , que contiene los detalles de la API que estamos usando. Hemos creado una variable llamada «opciones», que contiene todos los detalles relacionados con la API que estamos usando.

   JavaScript

   var options = {  method: 'GET',  url: 'https://latest-stock-price.p.rapidapi.com/price',  params: {Indices: 'NIFTY 50'},  headers: {    'x-rapidapi-host': 'latest-stock-price.p.rapidapi.com',    'x-rapidapi-key': 'YOUR API KEY’  } };

3. Ahora tenemos que escribir un código que nos permita obtener los datos de la base de datos mediante la API. El siguiente código es básicamente la parte en la que obtenemos la respuesta de la base de datos después de realizar una solicitud a través de la API .

   Estamos utilizando el paquete «axios» para solicitar al servidor los datos relacionados con diferentes acciones utilizando nuestra API.

   JavaScript

   axios.request(options).then(function (response) {  var dataFromResponse = response.data;  console.log(dataFromResponse); }).catch(function (error) {  console.error(error); });

En el código anterior, estamos usando la variable de opciones para realizar una solicitud al servidor/base de datos usando el paquete instalado llamado axios.  

‘ .then ‘ representa que después de haber realizado la solicitud a través de axios, se llama a una función de devolución de llamada que tiene la «respuesta» como parámetro, que hemos obtenido del servidor/base de datos, y registra todos los datos que hemos obtenido de la respuesta.

‘ .catch ‘ es para detectar si hay algún error en la petición que hemos hecho, o si hay algún problema en la respuesta del servidor, y registrar el error que se haya producido.

Server.js: el código completo en el archivo Server.js se vería así.

var axios = require("axios").default;
var options = {
 method: 'GET',
 url: 'https://latest-stock-price.p.rapidapi.com/price',
 params: {Indices: 'NIFTY 50'},
 headers: {
   'x-rapidapi-host': 'latest-stock-price.p.rapidapi.com',
   'x-rapidapi-key': 'YOUR API KEY'
 }
};
  
  
axios.request(options).then(function (response) {
  var dataFromResponse = response.data;
  console.log(dataFromResponse);
 }).catch(function (error) {
  console.error(error);
 });

Ejecutar código: ahora, inicie el servidor ejecutando el comando que se indica a continuación:  

$node server.js

Tan pronto como presionemos Enter, veremos que se registran datos muy grandes de la respuesta recibida de la base de datos en la línea de comando. Esto se debe a que cuando iniciamos el servidor, se ejecutó todo el código escrito en Server.js, que incluía nuestra comunicación con la base de datos/servidor mediante la API, y también escribimos el código para registrar todos los datos de respuesta que hemos obtenido del servidor, por lo que los datos que obtuvimos de la llamada a la API se registran en la consola.

Verá una respuesta similar a esta en su línea de comando/terminal

Los datos se verían como se muestra en la imagen de arriba.

Hay dos cosas a tener en cuenta:

1. Los datos que obtuvimos del servidor/base de datos son una array JSON, y ahora, según nuestro conocimiento previo, podemos obtener valores correspondientes a cualquier clave en toda la array.

2. El Array obtenido de la respuesta de la API incluye los detalles relacionados con las acciones de las empresas listadas en la Bolsa Nacional de Valores.

Cada objeto en el Array tiene una clave llamada » símbolo «, cuyo valor representa el símbolo del Stock al que se relacionan los datos.

Entonces, por ejemplo, queremos obtener los detalles solo relacionados con ‘ CONFIANZA ‘ (i ^-ésimo elemento de Array en el objeto) para el día de hoy, entonces tenemos que escribir dataFromResponse[i] para obtener los detalles requeridos. Ahora, si volvemos a ejecutar el servidor usando el comando «node server.js» en la línea de comando, esta vez, en lugar de datos más grandes, obtendremos solo los datos relacionados con ‘RELIANCE’.  

Si queremos ver el precio de apertura de alguna otra acción, digamos WIPRO (k ^-ésimo elemento en el Array), primero tenemos que buscar el objeto completo usando:

var wiproObject = dataFromResponse[k];

Luego, usando el punto (.), podemos obtener el valor correspondiente a la tecla «abrir», usando:

var openingPrice = wiproObject.open;

Podemos registrar el precio de apertura usando:

console.log(openingPrice);

Del mismo modo, podemos encontrar cualquier dato relacionado con cualquier acción que cotiza en la Bolsa Nacional de Valores obteniendo el valor asociado con diferentes claves en nuestros datos que tenemos como respuesta del Servidor.

Proporcionar una interfaz de usuario simple:   para eso, tenemos que hacer una página HTML con una etiqueta de formulario simple , que tendrá un menú desplegable donde se enumerarán todas las acciones . Una vez que el usuario selecciona cualquier acción y hace clic en el botón de búsqueda, se generará una solicitud de publicación y tendremos que escribir código para manejar esa solicitud de publicación y proporcionar los datos apropiados al usuario.

Cree una nueva carpeta llamada » StockMarketAPIIntegration «. A continuación se muestra el procedimiento detallado que debe seguir. El primer paso está relacionado con la configuración de nuestra aplicación Node (instalación de npm y los paquetes necesarios), y los pasos 2 a 8 incluyen la finalización de nuestra aplicación web:

Paso 1:

1. Cree una nueva carpeta llamada «StockMarketAPIIntegration».

2. Cree un nuevo archivo con el nombre «Server.js».

3. Abra terminal/GitBash en la carpeta y ejecute el comando que se indica a continuación:

   npm init -y

El comando anterior se usa para inicializar npm en nuestra carpeta de proyectos.

Estructura del proyecto: a partir de ahora, la estructura del proyecto debería verse así.

Estructura del proyecto: después de crear el archivo Server.js y ejecutar el comando npm init -y

Paso 2: crear una página HTML con un formulario simple, que contenga un menú desplegable donde se enumerarán las acciones. En el código a continuación, hemos escrito el código HTML, donde hemos creado un menú desplegable, desde donde el usuario puede elegir una acción y obtener los detalles relacionados con ella.

Como la lista de las 50 acciones principales en NIFTY50 cambia con frecuencia, solo hemos enumerado algunas de esas acciones (en el menú desplegable a continuación) que han estado constantemente presentes en la lista de las 50 acciones principales de NIFTY. (Por ejemplo, TCS , Infosys, Banco ICICI, etc.)

Estamos creando un archivo HTML, que contiene un formulario que tiene un menú desplegable con solo unas pocas acciones enumeradas (para facilitar las cosas) desde donde el usuario puede elegir cualquier acción y encontrar datos relacionados con eso, y cuando el usuario hace clic en el botón Enviar, el formulario envía una solicitud de publicación a la ruta «/ datos».

<!DOCTYPE html>
<html lang="en" dir="ltr">
 <head>
   <meta charset="utf-8">
   <style media="screen">
     body{
       text-align: center!important;
     }
   </style>
 </head>
 <body>
   <h1>Fetch the Data Related to Any Stock</h1>
   <br>
     <h2>Select the Stock</h2>
     <form class="" action="/data" method="post">
         <select class="" name="stockSelected">
             <option value="RELIANCE">
               RELIANCE
             </option>
             <option value="INFY">
               INFOSYS
             </option>
             <option value="TCS">
               TCS
             </option>
             <option value="WIPRO">
               WIPRO
             </option>
             <option value="ICICIBANK">
               ICICI Bank
             </option>
             <option value="ITC">
               ITC
             </option>
         </select>
         <button type="submit" 
                 name="button">
           Fetch Data
         </button>
     </form>
 </body>
</html>

Paso 3:   ahora que hemos creado el menú desplegable en el formulario (que realiza una solicitud de publicación en la ruta /data), ahora podemos manejar la respuesta asociada con la solicitud de publicación en la ruta de datos.

Para manejar las requests de obtención/publicación , necesitamos instalar el paquete Express , y para obtener datos de la API (como se muestra en el artículo anterior), se requerirá el paquete Axios y podemos instalarlos ejecutando el comando que se indica a continuación en la línea de comando :

También puede usar «npm i axios express» en lugar de «npm install express axios»

Paso 4: ahora que hemos instalado los paquetes necesarios, ahora podemos escribir código en el archivo Server.js para manejar las requests. Ahora, escribiremos el siguiente código en nuestro archivo Server.js.

En el código escrito a continuación, permitimos que nuestra aplicación escuche en el puerto 3000. Además, manejamos una solicitud simple de «obtención» en nuestra ruta principal y una solicitud de «publicación» en nuestra ruta /data.

Estamos escribiendo código dentro del archivo Server.js, donde primero le estamos diciendo a NodeJS que incluya los paquetes requeridos (axios y express) en nuestra aplicación. Luego, manejamos una solicitud de obtención simple en la ruta principal («/») y enviamos una respuesta simple. Luego, hemos escrito el código para la solicitud de publicación que usaremos más adelante en nuestra aplicación web.

// Add express in our project
var express = require('express');
  
// Creating the express app
var app = express();
  
// The requirement of this package is 
// in the later part of the application
// where we will have to fetch data from server
var axios = require("axios").default;
  
  
// WE ARE MAKING A SIMPLE GET REQUEST ON HOME ROUTE 
// JUST TO MAKE SURE THAT EVERYTHING IS GOING FINE.
  
app.get("/", function(req, res) {
   res.send("We are getting a get request on home(/) route.")
})
  
  
  
// A SIMPLE POST REQUEST ON /DATA ROUTE.
// WE WILL USE THIS IN A WHILE.
app.post("/data",  function(req, res) {
   res.send("We have got the post request on /data route");
})
  
// WE ARE ALLOWING OUR APP TO LISTEN ON PORT 3000
var port = 3000;
app.listen(port, function() {
   console.log("Server started successfully at port 3000!");
})

Puede probar si todo está bien reiniciando el servidor. Presione “ Ctrl+C ” o “ Comando+C ” para detener el servidor, y nuevamente escriba el comando “ node server.js ” para reiniciar el servidor.

Salida: ahora abra su navegador y escriba «localhost: 3000 » en la barra de direcciones y presione Entrar. Si todo salió bien, verá un resultado como el que se muestra a continuación:

Escriba «localhost:3000» en su navegador y debería ver la siguiente respuesta.

Paso 5: Ahora estamos seguros de que todo está bien, nuestro objetivo es adjuntar el Index.html que hemos creado en el Paso 2, a la solicitud de obtención, o básicamente cuando un usuario llega a la ruta de inicio, debería poder vea nuestro archivo Index.html (que contiene un menú desplegable desde donde puede seleccionar cualquier acción que le interese) que hemos creado anteriormente. Ahora, tenemos que escribir el siguiente código mientras manejamos la solicitud de obtención en la ruta de inicio.

Este código enviará el archivo «Index.html» (que hemos creado en el paso 2) como respuesta, para que el usuario pueda seleccionar cualquier acción del menú desplegable.

Anteriormente, enviamos una respuesta de texto simple en la solicitud de obtención en la ruta principal («/’). Ahora estamos enviando nuestro archivo Index.html (que creamos en el paso 2, incluido un menú desplegable en el que se enumeran las acciones) como respuesta al usuario para que pueda seleccionar la acción sobre la que desea buscar información.

El resto del código es el mismo que antes, solo la sección en la que manejamos la solicitud de obtención es diferente.

app.get("/", function(req, res) {
  
 // This will send the index.html file
 // (containing a dropdown where all stocks are listed) 
 // on our home page as response  
  
       res.sendFile(__dirname + "/index.html");
})

Una vez más, reinicie el servidor presionando “Ctrl+C” o “Comando+C” para detenerlo, y nuevamente escriba “node server.js” para iniciar.

Salida: ahora, si va a la ruta principal, es decir, «localhost: 3000» en su navegador, verá nuestro archivo Index.html (que creamos en el Paso 2, que incluye un menú desplegable donde se muestran todas las existencias). listado.

En la página de inicio, veremos un menú desplegable desde donde podemos seleccionar cualquier acción.

Ahora, en nuestra ruta de inicio, estamos obteniendo nuestro archivo Index.html, donde hay un menú desplegable, donde se enumeran todas las acciones. Básicamente, estamos manejando la solicitud «obtener» correctamente. Ahora, si hacemos clic en el botón «Obtener datos», nuestro formulario hará una solicitud de publicación en la ruta «/ datos», y si se da cuenta, ya hemos escrito el código para manejar la solicitud de «publicación» en «/ data” en el Paso 3 , por lo que ahora, si hacemos clic en el botón “Obtener datos”, nuestro archivo Index.html realizará una solicitud posterior en la ruta /data, y se ejecutará el código dentro de la ruta /data, es decir, veremos una respuesta como en la siguiente imagen:

Paso 6: ahora nuestra aplicación funciona bien, pero la cosa es que no sucede nada cuando el usuario hace clic en el botón «Obtener datos» de la ruta de inicio, excepto que se realiza una solicitud posterior que muestra el mensaje de muestra. Ahora, lo que tenemos que hacer es buscar qué acciones ha seleccionado el usuario, y luego tenemos que llamar a nuestra API y extraer los datos relacionados con las acciones (que el usuario seleccionó) de la respuesta que se ha devuelto. por la API.

Para buscar lo que el usuario ha seleccionado del formulario, debemos instalar el paquete «body-parser» y escribir el siguiente código a continuación para que body-parser funcione bien.

Para instalar el paquete » body-parser «, ejecute el comando que se indica a continuación en la línea de comando:

$npm install body-parser

Escriba el código en la parte superior del archivo Server.js, pero debajo del código donde hemos escrito la declaración «requerir» para el paquete express. Aquí, en el código a continuación, solo le estamos diciendo a node que incluya el paquete body-parser en nuestra aplicación ; de lo contrario, todo se mantiene igual que antes .

El código en Server.js es casi el mismo que en el paso anterior. Hemos agregado código para incluir y usar body-parser en nuestra aplicación

// SERVER.JS
  
  
// WE HAVE TO TELL NODE THAT WE REQUIRE 
// EXPRESS PACKAGE IN OUR PROJECT.
var express = require('express');
  
// CREATING OUR APP.
var app = express();
  
  
// TELLING NODE THAT WE REQUIRE BODY-PARSE
// R PACKAGE IN OUR PROJECT.
var bodyParser = require('body-parser');
  
  
// Allowing our app to use the body parser package.
app.use(bodyParser.urlencoded({extended:false}))
  
  
// TELLING NODE THAT WE REQUIRE AXIOS PACKAGE IN OUR PROJECT.
var axios = require("axios").default;
  
// Code below is same as that as shown in the prev step.

Hemos instalado el paquete body-parser, ahora podemos escribir código (en la sección donde hemos manejado la solicitud de publicación en / ruta de datos) para encontrar qué usuario de stock ha seleccionado del menú desplegable .

• En el código que se proporciona a continuación, en primer lugar, estamos creando una variable denominada opciones (también podemos copiar y pegar desde el panel de API como hicimos anteriormente), que contiene todos los detalles de la API. 
• Luego, estamos usando el paquete body-parser para extraer qué símbolo bursátil ha seleccionado el usuario del menú desplegable. 
• Y, por último, estamos haciendo una llamada API (usando el paquete «axios») y extrayendo los datos requeridos de la respuesta (en formato JSON) devuelta por la API e imprimiéndola en la consola.

// OPTIONS VARIABLE THAT CONTAINS THE INFO 
// RELATED TO THE API WE ARE GOING TO USE 
// TO FETCH DATA OF THE STOCK THAT USER HAS SELECTED.
var options = {
  method: 'GET',
  url: 'https://latest-stock-price.p.rapidapi.com/price',
  params: {Indices: 'NIFTY 50'},
  headers: {
    'x-rapidapi-host': 'latest-stock-price.p.rapidapi.com',
    'x-rapidapi-key': 'YOUR-UNIQUE-API-KEY'
  }
};
  
  
  
  
  
// EVERYTHING EXCEPT THE POST REQUEST 
// SECTION IS SAME AS EARLIER.
app.post("/data",  function(req, res) {
  
// res.send("We have got the post request on /data route");
  
  
  
// req.body represents the data we have got from
// the post request that has been made
//.stockSelected is the “name” property of
// dropdown(in Index.html)
// which represents that we want the data that
// is selected from the dropdown.
  
  
  
var itemSelectedFromDropdown = req.body.stockSelected;
  
  
  
  
  
// WE LEARNT HOW WE CAN MAKE API CALL USING AXIOS
// BELOW WE ARE MAKING THE API CALL AGAIN TO FETCH
// THE DATA THAT IS REQUIRED BY THE USER
// BASED ON THE STOCK SELECTED.
axios.request(options).then(function (response) {
  
  
        var dataFromResponse = response.data;
        // dataFromResponse variable is a complete
        // array containing list of all stocks
        // listed in NIFTY50
  
        for(var i = 0; i<dataFromResponse.length; i++){
               // we iterate through the whole array to find
            // the index of the stock which is
            //selected by the user from the drop-down.
  
          if(dataFromResponse[i].symbol == itemSelectedFromDropdown){
            // We have got the index of stock which user has selected
            // logging the data in the console related to that stock
                      console.log(dataFromResponse[i]);
          }
        }
          
}).catch(function (error) {
console.error(error);
});
});

Una explicación detallada de lo que hemos escrito en el código anterior.

• En primer lugar, hemos agregado la variable de opciones a nuestro archivo Server.js, que contiene todos los detalles relacionados con la API.
• Luego hemos usado app.post(“/data”, function(){}) para manejar la solicitud de publicación en la ruta /data.
• Luego, hemos obtenido los datos del formulario que vienen con la solicitud de publicación (usando req.body), y .stockSelected indica el valor que el usuario ha ingresado en el menú desplegable (o básicamente seleccionado del menú desplegable).
• El valor de esa acción en particular (en el formulario HTML que creamos en el paso 2) se nombra de acuerdo con su símbolo respectivo (para facilitarle el trabajo). Por ejemplo, (en el archivo Index.html), la segunda opción del desplegable es del stock “ INFOSYS ”, representado por “ <option value=”INFY”>INFOSYS</option> ”. Aquí, el valor de INFOSYS se da como INFY , que es el símbolo de la acción respectiva. De manera similar, la quinta opción en el menú desplegable es «ICICI Bank», que tiene el símbolo de acción » ICICIBANK «, por lo tanto, llamamos el valor correspondiente a la acción como su nombre de símbolo (» <option value =»ICICIBANK»>ICICI Bank </opción> “).

Hemos escrito intencionalmente todos los valores (en la etiqueta de opción desplegable) de acuerdo con sus símbolos para que todo sea simple para usted.

En resumen, cuando escribimos req.body.stockSelected, básicamente representa el símbolo de esa acción correspondiente y podemos usar ese símbolo para extraer los datos requeridos de la respuesta de la API.

• Finalmente, hacemos una solicitud de API, buscamos los datos de stock que el usuario ha seleccionado (que se determina mediante el paso anterior) y registramos esos datos en la consola.

Puede volver a reiniciar el servidor realizando los pasos similares que hemos realizado anteriormente.

Ahora, en la página de inicio, si selecciona cualquier acción y hace clic en el botón «Obtener datos», verá los datos relacionados con la acción que ha seleccionado en la consola/terminal como se muestra en la imagen a continuación:

Hemos seleccionado la confianza en el menú desplegable y, al hacer clic en el botón de obtención de datos, esta respuesta se registró en la consola.

Paso 7: ahora tenemos que escribir el código de tal manera que la respuesta dada por la solicitud de publicación esté en forma de HTML, que contenga todos los datos que hemos obtenido en función del stock que el usuario ha seleccionado.

Para eso, tenemos que modificar un poco nuestra sección de manejo de requests posteriores (por última vez aquí). Estamos escribiendo código HTML simple en el método res.send() de Nodejs .

Todo es igual en el archivo Server.js excepto la sección de manejo de requests posteriores, donde estamos escribiendo código HTML adjunto con los datos requeridos de Stock en nuestro método res.send() (que se usa para devolver la respuesta al usuario ).

// EVERYTHING EXCEPT THE POST REQUEST 
// SECTION IS SAME AS EARLIER.
// HANDLING THE POST REQUEST ON /DATA ROUTE.
app.post("/data",  function(req, res) {
  
        var itemSelectedFromDropdown = req.body.stockSelected;
        axios.request(options).then(function (response) {
  
                var dataFromResponse = response.data;
                for(var i = 0; i<dataFromResponse.length; i++){
                  if(dataFromResponse[i].symbol == itemSelectedFromDropdown){
                          
                        var dataOfStock = dataFromResponse[i];
                        res.send("<html><body> <h1><strong> " + dataOfStock.symbol + "</strong></h1>"+
                        "<h1> Open: " + dataOfStock.open + "</h1>" +
                        "<h1> Day High: "+ dataOfStock.dayHigh + "</h1>" +
                        "<h1> Day Low: "+ dataOfStock.dayLow + "</h1>" +
                        "<h1> Last Price: "+ dataOfStock.lastPrice + "</h1>" +
                        "<h1> Previous Close: "+ dataOfStock.previousClose + "</h1>" +
                        "<h1> Year Low: "+ dataOfStock.yearHigh + "</h1>" +
                        "<h1> Year Low: "+ dataOfStock.yearLow + "</h1>" +
                        "<h1> Last Update Time: "+ dataOfStock.lastUpdateTime + "</h1>" +
  
                        "</body></html>")
                  }
                }
          
          }).catch(function (error) {
          console.error(error)
          });
});

Aquí está la explicación completa de lo que hemos hecho en el código anterior:

• Hemos creado la variable denominada dataOfStock que tiene los datos del stock que el usuario ha seleccionado. Ahora podemos obtener cualquier atributo de la acción (por ejemplo, apertura, máximo del día, mínimo del día, etc.) usando el punto (.).  
• Además, estamos tratando de presentar los datos al usuario de manera sistemática, por lo que hemos escrito el atributo, junto con su valor (obteniendo de la variable dataOfStock creada anteriormente usando puntos (.)).

Una cosa a tener en cuenta aquí es que también podemos enviar código HTML en el método res.send() mientras manejamos una solicitud de publicación, escribiendo el código HTML entre comillas dobles . (Asegúrese de no cometer ningún error al escribir el código HTML). Ahora que hemos escrito todo el código, es hora de ejecutar nuestra aplicación.

Ahora hemos completado nuestra aplicación, que obtiene datos de la base de datos del mercado de valores y se los proporciona a nuestro usuario final.  

Código completo:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <style media="screen">
      body{
        text-align: center!important;
      }
    </style>
  </head>
  
  <body>
    <h1>Fetch the Data Related to Any Stock</h1>
    <br>
      <h2>Select the Stock</h2>
      <form class="" action="/data" method="post">
          <select class="" name="stockSelected">
              <option value="RELIANCE">
                RELIANCE
              </option>
              <option value="INFY">
                INFOSYS
              </option>
              <option value="TCS">
                TCS
              </option>
              <option value="WIPRO">
                WIPRO</option>
              <option value="ICICIBANK">
                ICICI Bank
              </option>
              <option value="ITC">
                ITC
              </option>
          </select>
          <button type="submit" name="button">
            Fetch Data
          </button>
      </form>
  </body>
</html>

var express = require('express');
var app = express();
  
var bodyParser = require('body-parser');
  
// Allowing our app to use the body parser package.
app.use(bodyParser.urlencoded({extended:false}))
  
var axios = require("axios").default;
  
var options = {
  method: 'GET',
  url: 'https://latest-stock-price.p.rapidapi.com/price',
  params: {Indices: 'NIFTY 50'},
  headers: {
    'x-rapidapi-host': 'latest-stock-price.p.rapidapi.com',
    'x-rapidapi-key': '9c4324e513mshdd7f131fa562556p1c3a3fjsnf8baf6f4993d'
  }
};
  
app.get("/", function(req, res) {
      res.sendFile(__dirname + "/index.html");
});
  
// HANDLING THE POST REQUEST ON /DATA ROUTE.
app.post("/data",  function(req, res) {
  
        var itemSelectedFromDropdown = req.body.stockSelected;
  
        axios.request(options).then(function (response) {
  
                    var dataFromResponse = response.data;
                for(var i = 0; i<dataFromResponse.length; i++){
                  if(dataFromResponse[i].symbol == itemSelectedFromDropdown){
   
                        var dataOfStock = dataFromResponse[i];
  
                        res.send("<html><body> <h1><strong> " + dataOfStock.symbol + "</strong></h1>"+
                        "<h1> Open: " + dataOfStock.open + "</h1>" +
                        "<h1> Day High: "+ dataOfStock.dayHigh + "</h1>" +
                        "<h1> Day Low: "+ dataOfStock.dayLow + "</h1>" +
                        "<h1> Last Price: "+ dataOfStock.lastPrice + "</h1>" +
                        "<h1> Previous Close: "+ dataOfStock.previousClose + "</h1>" +
                        "<h1> Year Low: "+ dataOfStock.yearHigh + "</h1>" +
                        "<h1> Year Low: "+ dataOfStock.yearLow + "</h1>" +
                        "<h1> Last Update Time: "+ dataOfStock.lastUpdateTime + "</h1>" +
                        "</body></html>")
                  }
                }
          
          }).catch(function (error) {
          console.error(error)
          });
});
  
  
var port = 3000;
app.listen(port, function() {
    console.log("Server started successfully at port 3000!");
});

Ahora podemos obtener los datos mediante la API, ahora podemos crear aplicaciones más complejas (por ejemplo, podemos usar los datos para proporcionar un análisis completo de cualquier acción en función de su rendimiento en años anteriores), y también podemos probar diferentes API. también.

Como el artículo fue un poco largo, aquí hay un resumen rápido de todo lo que hemos hecho:

• Primero, aprendimos qué es la API y la notación de objetos JSON o JavaScript.
• Luego buscamos una API del mercado de valores gratuita (API del último precio de las acciones), que podría proporcionarnos la funcionalidad para obtener detalles de la base de datos del mercado de valores, y también obtuvimos nuestra clave de API única que usamos en la variable de opciones más adelante en el artículo.
• Luego aprendimos cómo podemos obtener datos usando el paquete de Nodes llamado » axios «. Instalamos ese paquete y lo usamos para hacer una solicitud simple a través de API, y registramos los resultados en la consola.
• Luego creamos una nueva carpeta, instalamos npm y los paquetes necesarios y comenzamos a construir nuestra aplicación web. Para eso, primero creamos un formulario HTML simple y, en el lado del servidor, instalamos Express para manejar las requests de obtención y publicación, Axios para realizar llamadas a la API y un analizador de cuerpo para extraer el stock que el usuario seleccionó del menú desplegable en el Índice. .html.
• Luego, escribimos el código para las requests «obtener» y «publicar», donde, en la solicitud de obtención en la ruta de inicio, enviamos un formulario HTML que creamos, y en la solicitud de publicación en la ruta de datos, usamos body-parser para saber qué acciones había seleccionado el usuario y enviar los datos relacionados con esa acción en particular.

Salida: reinicie el servidor una vez más y luego ejecute «localhost: 3000» en su navegador web. Verá nuestra aplicación ejecutándose como se muestra a continuación.

Nuestra aplicación final está lista. Puede ver que los precios actuales de las acciones (obtenidos de la API) son prácticamente iguales a los precios reales.