08 enero 2017

Consumir un Web Services API Rest con AngularJS

 

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("http://localhost/api/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("http://localhost/api/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("http://localhost/api/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("http://localhost/api/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("http://localhost/api/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