08 enero 2017

Consumir un Web Services API Rest con AngularJS

  6 comentarios

Actualización 12 de Julio de 2018

En vista de que algunas personas me comentaron que no funcionaba este tutorial en Windows, quiero aclarar que cuando lo realice, lo trabaje en Ubuntu, distribución GNU/Linux, por lo tanto, no me di cuenta de los errores que pudiera generar en Windows, esto ha sido corregido, y el código ha sido actualizado para funcionar en cualquier plataforma.

Como lo prometido es deuda y quiero saldar esta deuda con ustedes, ayer mas o menos a esta misma hora hice publica una entrada sobre como Crear un Web Service API Rest con PHP y MySQL en el que prometí traer pronto como consumir dicho servicio y he aquí el tutorial, por eso, si no has visto el tutorial anterior, te recomiendo leerlo antes de empezar con este, créeme, tendrás una mejor comprensión del mismo y así vamos al ritmo.

Tal cual mencione el dia de ayer, los API Rest o Web Service no son mas que archivos en formato JSON (JavaScript Object Notation) o XML (eXtended Markup Language) que nos sirven información con respecto a una entidad en una base de datos haciendo uso de los métodos HTTP (GET, POST, PUT y DELETE), justo ayer, hacíamos las pruebas básicas del API Rest creado con la aplicación de tipo extensión de Chrome Insomnia, pero, eso es solo para efectos de pruebas, valga la redundancia.

Los Web Service API Rest son usualmente consumidos desde JavaScript en el cliente, usando librerías como jQuery o el framework AngularJS, por efectos de facilidad y ademas, de visibilidad, usare AngularJS en este tutorial específicamente.

Aspecto de nuestro API Rest Visual Client


Ahora, recordemos la estructura que llevabamos anteriormente, donde teniamos completado el Web Service

Esta no es mas que la estructura básica del back-end donde podemos encontrar con los archivos de Web Services y que explique en el tutorial anterior.

Habíamos quedado pendiente con los archivos de la carpeta public_html, donde podemos encontrar el archivo index.html que sera el archivo de nuestra pagina principal y su carpeta parent sera la carpeta del Front-end específicamente.

Todo lo que este en la carpeta public_html pertenece única y exclusivamente a código estructura y maquetado del cliente, mientras que lo que este fuera de ella, pertenece al código que corre en el servidor, por lo tanto, hoy nos enfocaremos específicamente en dicha carpeta ya que haremos un cliente visual para el consumo del Web Services que realizamos previamente.

Antes de comenzar, quiero acotar que voy a dejar todos los archivos del proyecto en un enlace para descargar al final, asi que no se preocupen, presten atencion al tutorial y luego, hacen lo que deseen con el codigo.

Se ubican dentro de la carpeta public_html y crean el siguiente directorio

Donde tenemos los archivos básicos de todo proyecto web.

Es importante destacar, que ahora que tenemos mas archivos, lógicamente vamos a tener mas URL's a donde ir, entonces, antes de empezar, en el archivo .htaccess que ya tenemos creado, vamos a agregar las siguientes lineas para controlar estas direcciones

# Acortar URL
RewriteRule ^([a-zA-Z]+)/([a-zA-Z0-9-.]+)$ public_html/$1/$2
RewriteRule ^([a-zA-Z]+)/([a-zA-Z]+)/([a-zA-Z0-9-.]+)$ public_html/$1/$2/$3

Esto con el fin de que los usuarios comunes no puedan ver el ingresar directamente a la carpeta public_html desde su navegador si no que mas bien, nos genere una URL mas estilizada y amigable.

Una vez realizado esto, empezamos a crear nuestro API Rest Visual Client (Como lo he llamado).

Para empezar, en el archivo index pegaramos el siguiente codigo


core/public_html/index.html

<!DOCTYPE html>
<html lang="es" ng-app="crud" >
<head>
 <meta charset="UTF-8">
 <title>Rest API Visual Client</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!-- Incluimos el CND de Materialize CSS -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
 <!-- Nuestro CSS personalizado -->
 <link rel="stylesheet" href="css/custom.css">
 <!-- Incluimos el CND de AngularJS -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
 <!-- Incluimos el CND de Angular Route -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js"></script>
 <!-- Incluimos el CND de la libreria jQuery -->
 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
 
</head>
<body ng-controller="mainCtrl">

    <nav>
      <div class="nav-wrapper blue">
        <a href="#!/" class="brand-logo">Friki Bloggeo</a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
         <li><a href="#!/">Home</a></li>
          <li><a href="#!/usuario">Usuario</a></li>
          
        </ul>
      </div>
    </nav>
          
 <div class="container">
  <!-- ng-view renderiza nuestras views y las muestra en el index -->
  <div ng-view></div>
 </div>
     
 <!-- Nuestro codigo JavaScript personal -->
 <script src="js/custom.js"></script> 
 <!-- Incluimos el CND de Materialize JS -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
</body>
</html>

Al igual que el tutorial anterior, no hare mucho enfasis en explicar los codigos ya que los mismos estan documentados. Continuamos.

Bien, hasta ahora tenemos solo nuestra pagina básica donde llamaremos las vistas o templates. Entonces, para continuar vamos a agregar los siguientes códigos a nuestros templates

core/public_html/templates/home.html


<div class="row">
 <div class="col s6">
  <h1>{{message}}</h1>
  <p>{{subtitle}}</p>
 </div>
</div>


core/public_html/templates/usuario.html


<div class="row">
  <div class="col s6">
   <h1>{{message}}</h1>
   <p>{{subtitle}}</p>
  </div>
 </div>

 <div class="row">   
      <div class="col s4">
    <form>
     <div class="row">
      <div class="input-field col s12">
              <input required id="Usuario" type="text" class="validate" ng-value="nuevo.Usuario" ng-model="nuevo.Usuario">
              <label for="Usuario">Usuario</label>
            </div>
     </div>

     <div class="row">
      <div class="input-field col s12">
              <input required id="Clave" type="password" class="validate" ng-value="nuevo.Clave" ng-model="nuevo.Clave">
              <label for="Clave">Clave</label>
            </div>
     </div>

     <div class="row">
      <div class="input-field col s12">
              <input required id="Estatus" type="text" class="validate" ng-value="nuevo.Status" ng-model="nuevo.Status">
              <label for="Estatus">Estatus</label>
            </div>
     </div>

     <div class="row">
      <div class="col-s4" ng-if="nuevo.Id == null">
       <button class="btn waves-effect blue" ng-click="post()">Submit</button>
      </div>

      <div class="col-s4" ng-if="nuevo.Id != null">
       <button class="btn waves-effect blue" ng-click="put(nuevo.Id)">Submit</button>
      </div>
     
     </div>
       </form>


      </div>
      <div class="col s8">
      <input type="text" ng-model="search" placeholder="Buscar">
    


       <table class="highlight responsive-table">
        <thead>
         <tr>
          <th>ID</th>
          <th>Usuario</th>
          <th>Clave</th>
          <th>Estatus</th>
          <th></th>
          <th></th>
         </tr>
        </thead>

        <tbody ng-if="lista.length != null">
         <tr ng-click="get(x.Id)" ng-repeat="x in lista | filter : search">
          <td>{{x.Id}}</td>
          <td>{{x.Usuario}}</td>
          <td>{{x.Clave}}</td>
          <td>{{x.Status}}</td>
          <td><button class="btn btn-small waves-effect red" ng-click="delete(x.Id)">eliminar</button></td>
         </tr>
        </tbody>

        <tbody ng-if="lista.length == null">
         <tr>
          <td colspan="4">No hay datos dispobibles</td>
         </tr>
        </tbody>


       </table>
      </div>
     </div>

Bien, nos restan tan solo dos archivos, el custom.css y custom.js los cuales contienen codigo personalizado, cada uno en su respectivo lenguaje, pero basicamente, custom.css es tu estilo personal asi que no hare ningun codigo para ello, continuamos con el siguiente archivo.
core/public_html/js/custom.js

  var app = angular.module('crud',['ngRoute']);

  // Configuracion de las rutas y sus respectivas plantillas
  app.config(function($routeProvider) {
    $routeProvider
              .when('/', {
                  templateUrl : 'templates/home.html',
                  controller  : 'mainCtrl'
              })
              .when('/usuario', {
                  templateUrl : 'templates/usuario.html',
                  controller  : 'usuario'
              })

            
      });

  // Controlador principal de nuestra pagina
  app.controller('mainCtrl', function($scope) {
         $scope.message = 'Friki Bloggeo';
         $scope.subtitle = "Ejemplo de consumo de un API Rest con AngularJS";
     });


  // Controlador de la entidad Usuario donde se incluiran cada una de sus funciones
  app.controller('usuario', function($scope,$http) {

   $scope.message = 'Friki Bloggeo';
         $scope.subtitle = "Gestion de Usuario";

   // Al cargar la pagina, ejecutamos la funcion get() para rellenar la tabla
      angular.element(document).ready(function () {
       $scope.get("");
       
      });

      // La funcion get() que hace la solicitud para obtener los datos
      $scope.get = function(id){
       // Si la Id esta en blanco, entonces la solicitud es general
       if(id=="") {
        $http.get("api/usuario").then(function (response) {
            $scope.lista = response.data.data;
            Materialize.toast(response.data.statusMessage, 4000);
            
        }, function(response) {
         // Aqui va el codigo en caso de error
        });
    // Si la Id no esta en blanco, la solicitud se hace a un elemento especifico
       } else {
        $http.get("api/usuario/" + id).then(function (response) {
            $scope.nuevo = response.data.data[0];
            Materialize.toast(response.data.statusMessage, 4000);
        }, function(response) {
         // Aqui va el codigo en caso de error
        });
       }
      }

      // La funcion post() que hace la solicitud para publicar un nuevo elemento
      $scope.post = function() {
       $http.post("api/usuario", $scope.nuevo)
        .then(function (response){
               Materialize.toast(response.data.statusMessage, 4000);
               $scope.nuevo = null;
               $scope.get("");
           }, 
           function(response) {
            // Aqui va el codigo en caso de error
           });
      }

      // La funcion put() que hace la solicitud para modificar un elemento especifico
      $scope.put = function(id) {
   
       $http.put("api/usuario/" + id, $scope.nuevo)
        .then(
         function (response){
               Materialize.toast(response.data.statusMessage, 4000);
               $scope.nuevo = null;
               $scope.get("");
           }, 
           function(response) {
            // Aqui va el codigo en caso de error
           });

      }

      // La funcion delete() que hace la solicitud para eliminar un elemeto esepecifico
      $scope.delete = function(id) {
       $http.delete("api/usuario/" + id)
       .then(
           function (response){
             console.log(response);
             Materialize.toast(response.data.statusMessage, 4000);
             $scope.nuevo = null;
             $scope.get("");
           }, 
           function (response){
             // Aqui va el codigo en caso de error
           }
        );
      }

  });

Con esto, ya tenemos listo nuestro cliente visual, y ya podremos empezar a crear cuantas templates o views deseemos para consumir cada tabla especifica. Ademas, dejo el archivo del proyecto (con archivos script locales) para su uso.


Demo Descargar - 1.1 MB

Enlaces para compartir en tu blog o pagina web.




Widget por Friki Bloggeo


6 comentarios :

  1. In may tag Gemini double error code this problem is regarding the door latch. You simply pull the door and check the switch and motor if any defective part is found replace it . when you open and close the door and you thought that you lose something The error code F9-2 we can face various types of issues latch motor failure/jammed, latch motor switch failure and electronic control failure press clear key if clear cannot solve this issues. feel free and simply call it on our Gemini support number at 1-800-861-8259 and wait for sometime they help you as soon as possible.
    Gemini Number
    Gemini Contact Number
    Gemini Toll Free Number
    Gemini Support Number
    Gemini Phone Number
    Gemini Helpline number
    Gemini Support Phone number
    Gemini Customer Support
    Gemini Customer Service
    Gemini Customer Service Number
    Gemini Wallet phone Number

    ResponderEliminar
  2. Do you experience inconvenience while sending and purchasing Bitcoin in your Gemini account? Mistakes can be effectively evacuated in the event that they are dealt with and settled by the experts who know about the Gemini. All you have to do is , simply take your telephone and dial Gemini Helpline Number +1 (800)861-8259 which is the best approach to connect with the specialists who have arrangements identified with your blunders and inconveniences

    ResponderEliminar
  3. Is your Blockchain account got frozen? Is your Blockchain account working properly? To fix or eliminate any kind of problems and errors of Blockchain, you can always speak to the team of certified executives by dialing Blockchain support number at 1-800-861-8259 or you may write down your queries over chat box or an email. The professionals attend every user and take plenty of time so that users can tell their query in detail without any hesitation.
    Blockchain Number
    Blockchain Contact Number
    Blockchain Toll Free Number
    Blockchain Support Number
    Blockchain Phone Number
    Blockchain Helpline number
    Blockchain Support Phone number
    Blockchain Customer Support

    ResponderEliminar
  4. Are you having trouble in receiving digital currency from another in Blockchain ? If you don’t know how to handle all troubles and looking for instant solutions, you can always call on Blockchain customer service number which is always active and the team is always in operational state to help you. You can always look for solutions to deal with queries that Blockchain Customer Service Number would help in fixing troubles from the roots in the fraction of time. Contact them anytime and get verified remedies from the skilled professionals who are there to help you.

    ResponderEliminar
  5. Hola excelente trabajo disculpa cual es la características de ka base de datos para este proyecto

    ResponderEliminar
  6. Buen trabajo, bastante claro, gracias!

    ResponderEliminar