¿Cómo crear un proyecto de estado sabio del país Covid19 usando la API REST?

Posted on by Rudeus Greyrat

Hoy, Todos los Países del mundo luchando contra el Coronavirus. Todos los días, los casos de coronavirus aumentan rápidamente. Es importante que todos hagan un seguimiento diario de los casos de COVID y deben tratar de mantenerse a salvo. Hemos creado pequeñas aplicaciones web que le indicarán al usuario un número total de casos, nuevos casos, nuevas muertes, recuperación, etc. Solo tienes que introducir el nombre del país y hacer clic en buscar.

Esta aplicación también está protegida contra secuencias de comandos del lado del cliente y utiliza la API gratuita de Covid19. El siguiente es el enlace API:
https://covid19api.com/

Pasos para ejecutar el programa: Estamos mostrando archivos JavaScript y HTML en este artículo. Todos los códigos, incluidos HTML, CSS, js, están en mi perfil de Github. El siguiente es el enlace completo del proyecto:
https://github.com/rohitdhonicsk/covid19webapp

  1. Clona Git https://github.com/rohitdhonicsk/covid19webapp , para copiar el archivo del proyecto GitHub en tu computadora.
  2. Ahora abra el archivo Index.html.
  3. Escriba el nombre del país y haga clic en buscar.

Archivo de proyecto y módulo requerido:

  1. Debe tener tres archivos principales index.html (debajo del código del archivo index.html), CSS (solo es necesario si desea diseñar, puede descargar CSS desde mi archivo de proyecto de repositorio de GitHub ). Y el tercer archivo más importante es el archivo JavaScript (hemos proporcionado el código completo a continuación) que se necesita para obtener datos de COVID y responder a la búsqueda del usuario.
  2. Necesita jQuery, que es una biblioteca de JavaScript. Puede poner CDN Script en su código HTML desde el sitio web oficial de Jquery O usando el comando a continuación:

    Nota: Asegúrese de tener NODE y NPM instalados en la máquina; de lo contrario, vaya al sitio web oficial del Node para descargarlo e instalarlo.

    En primer lugar, debe escribir el siguiente comando en el directorio del proyecto. Creará un archivo package.json.

    npm init

    Ahora escriba el siguiente comando para instalar jQuery .

    npm install jquery

Directorio de proyectos:
Project Directory

El proyecto se verá así:
Página de inicio:
full image of webapp

Búsqueda de estadísticas de COVID19 para el país de INDIA:
working example INDIA

Pasos para construir la aplicación:

  1. El primer paso es ir a la API y copiar el enlace de la API a la aplicación de cartero y visualizar el formato JSON de los datos. Estamos utilizando los datos de resumen de la API.
  2. Cree un formulario en un archivo HTML con el campo de entrada es el nombre del país.
  3. Asigne Id al encabezado, formulario, entrada y etiqueta que se debe usar en JavaScript. A continuación se muestra el archivo HTML de demostración donde se utilizan la clase y la identificación para el estilo y la llamada de acción.

    <h1 class='section-heading'>COVID RESULT</h1>
    <h2 class='section-subheading'>SEARCH COUNTRY NAME</h2>
      
    <div class="section-description">
      
      <p class="section-subheading">
      <form id="query-form">
        <div>
          <label for="ingredients">Country :</label>
            <input class="textfield" id="ingredients" 
              type="text" name="ingredients"
              placeholder="e.g.India, chiNA" 
              onChange="sanitizeInputs()" />
        </div>
      
        <div class="button">
          <br />
          <input class="button" type="button" 
            value="Reset" id="resetButton" 
            onClick="this.form.reset();resetResults()" />
          <input class="button" type="submit" 
            value="Search ..." id="searchButton" />
        </div>
      </form>
      </p>
      
      <div class="section-subheading" 
        id="search-results-heading"></div>
      <div class="results-div" id="results"></div>
    </div>
  4. Ahora incluye tu archivo CSS (es opcional).
  5. Recuerde incluir las dos cosas siguientes en el código HTML:
    • Enlace CDN de jQuery
    • Su archivo JS
  6. Ahora, agregue el siguiente código en su archivo JS:

    // This Code calls function name performSearch()
    // on clicking submit button of form 
      
    $(document).ready(function() {
      
      // Add an event listener (performSearch) 
      // to the form
      $("#query-form").submit(function(event) 
        { performSearch(event); });
    });
  7. Ahora crea la función performSearch() usando el siguiente código:

    function performSearch(event) {
      
      // Variable to hold request
      var request;
      
      // Prevent default posting of form 
      // put here to work in case of errors
      event.preventDefault();
      
      // Abort any pending request
      if (request) {
          request.abort();
      }
      
      // Setup some local variables
      var $form = $(this);
      
      // Disable the inputs and buttons 
      // for the duration of the request.
      setFormDisabledProps(true);
      
      // It will show heading searching during the request
      $("#search-results-heading").text("Searching ...");
      $("#results").text("");
      
      // Send the request to API for data
      request = $.ajax({
          url:"https://api.covid19api.com/summary",
          type: "GET",
          // data: { i:, q: $("#contains").val()}
      });
      
    // Taking country name from input box that we created
    pat=$("#ingredients").val(); 
      
      // Callback handler for success
      request.done(function (response, textStatus, jqXHR) {
          
        // Calling formal search after getting data from api
        formatSearchResults(response);
      });
      
      // Callback handler for failure
      request.fail(function (jqXHR, textStatus, errorThrown) {
       $("#search-results-heading").
         text("Unable to fetch Covid Data, Try again")
       $("#results").text("");
      });
      
      // Callback handler that will be called in any case
      request.always(function () {
      
          // Reenable the inputs
          setFormDisabledProps(false);
      });
    }
  8. Creando la función formatSearchResults que le dará al usuario el resultado de búsqueda deseado.

    var pat, flag = 0;
    function formatSearchResults(jsonResults) {
      
        // Storing Json Data in jsonobject variable
        var jsonObject = jsonResults;
      
        $("#search-results-heading").text("Search Results");
        var formatedText = "";
      
        jsonObject.Countries.forEach(function (item, index) {
      
            // Matching user search data with api data 
            if (item.Country.toLowerCase() == pat.toLowerCase()) {
                var thumbnail = item.NewConfirmed;
      
                // Printing the result
                formatedText += 
    "<div class='dish-ingredients-div'><h3>TotalConfirmed: " +
                    item.TotalConfirmed + "<h3></div>";
      
                formatedText += 
    "<div class='dish-ingredients-div'><h3>NewDeaths: " +
                    item.NewDeaths + "<h3></div>";
      
                formatedText += 
    "<div class='dish-ingredients-div'><h3>NewConfirmed: " +
                    item.NewConfirmed + "<h3></div>";
      
                formatedText += 
    "<div class='dish-ingredients-div'><h3>NewRecovered: " +
                    item.NewRecovered + "<h3></div>";
      
                flag = 1;
                return;
            }
        });
      
        // If result not found
        $("#results").html(formatedText);
      
        if (!flag) {
            $("#search-results-heading")
                .text("Dont Fun With it.Please Enter"
                + " Correct Country Name e.g-India");
            $("#results").text("");
        }
    }
  9. Y el último paso es proteger los datos de las secuencias de comandos del lado del cliente y la función de reinicio.

    function resetResults() {
      $("#search-results-heading").text("");
      $("#results").text("");
      flag=0;
    }
      
    // This function checks the user input fields
    // for any unacceptable characters and removes
    // them if found
    function sanitizeInputs() {
      var str = $("#ingredients").val();
      str = str.replace(/[^a-zA-Z 0-9, ]/gim, "");
      str = str.trim();
      $("#ingredients").val(str);
    }

El código Javascript completo:

// This Code call function name performSearch()
// on clicking submit button of form 
$(document).ready(function () {
  
    // Add an event listener (performSearch)
    // to the form
    $("#query-form").submit(function (event) 
        { performSearch(event); });
});
  
var pat, flag = 0;
function formatSearchResults(jsonResults) {
  
    // Storing Json Data in jsonobject variable
    var jsonObject = jsonResults;
  
    $("#search-results-heading").text("Search Results");
    var formatedText = "";
  
    jsonObject.Countries.forEach(function (item, index) {
  
        // Matching user search data with api data 
        if (item.Country.toLowerCase() == pat.toLowerCase()) {
            var thumbnail = item.NewConfirmed;
            // Printing the result
            formatedText += 
"<div class='dish-ingredients-div'><h3>TotalConfirmed: " +
                item.TotalConfirmed + "<h3></div>";
  
            formatedText += 
"<div class='dish-ingredients-div'><h3>NewDeaths: " +
                item.NewDeaths + "<h3></div>";
  
            formatedText += 
"<div class='dish-ingredients-div'><h3>NewConfirmed: " +
                item.NewConfirmed + "<h3></div>";
  
            formatedText += 
"<div class='dish-ingredients-div'><h3>NewRecovered: " +
                item.NewRecovered + "<h3></div>";
  
            flag = 1;
            return;
        }
    });
  
    $("#results").html(formatedText);
  
    // If result not found
    if (!flag) {
        $("#search-results-heading")
            .text("Dont Fun With it.Please Enter"
                + " Correct Country Name e.g-India");
        $("#results").text("");
    }
}
  
function performSearch(event) {
  
    // Variable to hold request
    var request;
  
    // Prevent default posting of form - 
    // put here to work in case of errors
    event.preventDefault();
  
    // Abort any pending request
    if (request) {
        request.abort();
    }
  
    // Setup some local variables
    var $form = $(this);
  
    // Disable the inputs and buttons 
    // for the duration of the request.
    setFormDisabledProps(true);
  
    // It will show heading searching
    // during the request
    $("#search-results-heading")
            .text("Searching ...");
    $("#results").text("");
  
    // Send the request to API for data
    request = $.ajax({
        url: "https://api.covid19api.com/summary",
        type: "GET",
        // data: { i:, q: $("#contains").val() }
    });
  
    // Taking country name from input
    // box that we created
    pat = $("#ingredients").val();
  
    // Callback handler for success
    request.done(function (response, 
        textStatus, jqXHR) {
        formatSearchResults(response);
    });
  
    // Callback handler for failure
    request.fail(function (jqXHR, 
            textStatus, errorThrown) {
  
        // Calling formal search after 
        // getting data from api
        $("#search-results-heading").text(
"Sorry We Unable to fetch Covid Data.Try again.");
        $("#results").text("");
    });
  
    // Callback handler that will be
    // called in any case
    request.always(function () {
  
        // Reenable the inputs
        setFormDisabledProps(false);
    });
}
  
// This function clears the search results
// and the heading "Search Results"
function resetResults() {
    $("#search-results-heading").text("");
    $("#results").text("");
    flag = 0;
}
  
// This function checks the user input
// fields for any unacceptable characters
// and removes them if found
function sanitizeInputs() {
    var str = $("#ingredients").val();
    str = str.replace(/[^a-zA-Z 0-9, ]/gim, "");
    str = str.trim();
    $("#ingredients").val(str);
}

Publicación traducida automáticamente

Artículo escrito por karnalrohit y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *