Consume APIs con JavaScript y Google Cloud Endpoints

Contenido del curso

Introducción a Google App Engine

Publicando una aplicación en App Engine

Integrando servicios de almacenamiento

Arquitectura y optimización

Creando servicios REST

Seguridad y control de accesos

Servicios de apoyo (BONUS)

Conclusiones

29
Conclusiones del curso
01:43 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:009:38

Consume APIs con JavaScript y Google Cloud Endpoints

Curso de Google App Engine

Clase 19 de 29

Clase 19 / 29

Recursos

Conecta tu front-end en JavaScript con Google Cloud Endpoints de forma segura y ordenada. Aquí verás cómo cargar la librería de Google APIs, estructurar un servicio en AngularJS y migrar de peticiones HTTP tradicionales a endpoints REST reutilizables y claros.

¿Cómo consumir APIs con JavaScript y Google APIs client?

Para habilitar el consumo de endpoints desde el navegador, primero se carga la librería de Google APIs en el archivo base de templates. Este archivo concentra los recursos de front-end.

Carga la librería al final del template base.
Centraliza scripts y estilos en un único lugar.
Prepara el proyecto para consumir endpoints con un servicio.

Ejemplo de inclusión del script en templates/base:

<!-- templates/base -->
<script src="https://apis.google.com/js/client.js?onload=init"></script>

Claves que se destacan:

Uso de una URL de cliente: googleapis y parámetro onload para inicializar.
El objetivo es consumir endpoints de forma consistente desde el navegador.

¿Cómo cargar y estructurar el servicio en Angular?

El corazón está en un servicio de AngularJS (services.js). Aquí se define un método que recibe nombre del API y versión, y construye la discovery URL bajo el estándar de Google: .../discovery/v1/apis/{api}/{version}/rest. Este método “hace la magia” de conectar el back-end con el front-end y puede reutilizarse en todo el proyecto.

El servicio expone un método load que recibe apiName y version.
Construye la ruta de consumo con discovery/v1/apis/.../rest.
Tras el cargue, permite revisar recursos disponibles y dejar lista la conexión.

Ejemplo orientativo de services.js:

// static/js/angular/services.js
angular.module('app').factory('endpointService', function($q) {
  var builder = {}; // Datos del navegador u otros auxiliares.

  function loadService(apiName, version) {
    var deferred = $q.defer();
    var apiRoute = window.location.origin + '/discovery/v1/apis/' + apiName + '/' + version + '/rest';

    // Cargar la librería y conectar front-end con back-end mediante la URL de discovery.
    // ... lógica de carga ...
    // deferred.resolve() cuando el API esté cargado y disponible.

    return deferred.promise;
  }

  return {
    load: loadService
    // Aquí pueden exponerse atajos a los recursos/métodos del API una vez cargado.
  };
});

¿Cómo inicializar desde el controlador en Angular?

En el controlador (controllers.js) se inyecta el servicio y se llama a load pasando el nombre del API (por ejemplo, solicitudesApi) y la versión. Al finalizar, se muestra un log confirmando que las APIs están cargadas.

// static/js/angular/controllers.js
angular.module('app').controller('MainCtrl', function($scope, endpointService) {
  function loadAPIs() {
    endpointService.load('solicitudesApi', 'v1').then(function() {
      console.log('APIs cargadas.');
    });
  }

  loadAPIs();
});

¿Cómo migrar de HTTP tradicional a endpoints REST?

Antes se enviaba un JSON a una vista en Python mediante una petición HTTP directa. Ahora, con endpoints, se replica el cuerpo del mensaje, pero se invoca directamente el método del API expuesto por el servicio. Se gestiona la respuesta y los errores con una lógica más simple.

// Método moderno: guardar datos usando endpoints
$scope.saveDataEndpoints = function(payload) {
  // Llamar el método definido en el API cargado.
  // Reemplaza <nombreDeLaApi> y <metodo> por los reales.
  endpointService.<nombreDeLaApi>.<metodo>(payload)
    .then(function(resp) {
      // Caso exitoso: manejar la respuesta como de costumbre.
    })
    .catch(function(err) {
      // Caso de error: mostrar warning o mensaje al usuario.
    });
};

Beneficios de este cambio:

Código más corto y claro.
Consumo estándar bajo REST y discovery.
Reutilización del método load en múltiples pantallas.

¿Qué habilidades, conceptos y keywords debes dominar?

Dominar estos puntos acelera el desarrollo y reduce errores al integrar JavaScript con Google Cloud Endpoints.

Librería de Google APIs: script para habilitar el consumo de endpoints desde el navegador.
Templates base: lugar central para cargar librerías de front-end que usa toda la app.
Servicio en AngularJS: capa que abstrae la conexión y la reutiliza mediante load(apiName, version).
Discovery URL: patrón .../discovery/v1/apis/{api}/{version}/rest que estandariza la descripción de recursos.
Nombre del API y versión: parámetros clave para resolver rutas y compatibilidad.
Controlador en AngularJS: inicializa el servicio, carga el API y registra logs de estado.
Migración de HTTP a endpoints: de un POST manual a una invocación directa del método del API.
Manejo de respuestas y errores: mostrar mensajes de éxito o warning según el resultado.
API Explorer: entorno para probar rápidamente los recursos del API y validar entradas/salidas.
Reutilización: un único método load sirve para múltiples APIs y vistas.

¿Ya probaste a crear nuevos endpoints y a llamarlos desde API Explorer? Comparte en comentarios tus avances, dudas y mejoras que te gustaría implementar.

Resumen

¿Cómo consumir APIs con JavaScript y Google APIs client?

Para habilitar el consumo de endpoints desde el navegador, primero se carga la librería de Google APIs en el archivo base de templates. Este archivo concentra los recursos de front-end.

Carga la librería al final del template base.
Centraliza scripts y estilos en un único lugar.
Prepara el proyecto para consumir endpoints con un servicio.

Ejemplo de inclusión del script en templates/base:

<!-- templates/base -->
<script src="https://apis.google.com/js/client.js?onload=init"></script>

Claves que se destacan:

Uso de una URL de cliente: googleapis y parámetro onload para inicializar.
El objetivo es consumir endpoints de forma consistente desde el navegador.

¿Cómo cargar y estructurar el servicio en Angular?

El servicio expone un método load que recibe apiName y version.
Construye la ruta de consumo con discovery/v1/apis/.../rest.
Tras el cargue, permite revisar recursos disponibles y dejar lista la conexión.

Ejemplo orientativo de services.js:

// static/js/angular/services.js
angular.module('app').factory('endpointService', function($q) {
  var builder = {}; // Datos del navegador u otros auxiliares.

  function loadService(apiName, version) {
    var deferred = $q.defer();
    var apiRoute = window.location.origin + '/discovery/v1/apis/' + apiName + '/' + version + '/rest';

    // Cargar la librería y conectar front-end con back-end mediante la URL de discovery.
    // ... lógica de carga ...
    // deferred.resolve() cuando el API esté cargado y disponible.

    return deferred.promise;
  }

  return {
    load: loadService
    // Aquí pueden exponerse atajos a los recursos/métodos del API una vez cargado.
  };
});

¿Cómo inicializar desde el controlador en Angular?

// static/js/angular/controllers.js
angular.module('app').controller('MainCtrl', function($scope, endpointService) {
  function loadAPIs() {
    endpointService.load('solicitudesApi', 'v1').then(function() {
      console.log('APIs cargadas.');
    });
  }

  loadAPIs();
});

¿Cómo migrar de HTTP tradicional a endpoints REST?

// Método moderno: guardar datos usando endpoints
$scope.saveDataEndpoints = function(payload) {
  // Llamar el método definido en el API cargado.
  // Reemplaza <nombreDeLaApi> y <metodo> por los reales.
  endpointService.<nombreDeLaApi>.<metodo>(payload)
    .then(function(resp) {
      // Caso exitoso: manejar la respuesta como de costumbre.
    })
    .catch(function(err) {
      // Caso de error: mostrar warning o mensaje al usuario.
    });
};

Beneficios de este cambio:

Código más corto y claro.
Consumo estándar bajo REST y discovery.
Reutilización del método load en múltiples pantallas.

¿Qué habilidades, conceptos y keywords debes dominar?

Dominar estos puntos acelera el desarrollo y reduce errores al integrar JavaScript con Google Cloud Endpoints.

Librería de Google APIs: script para habilitar el consumo de endpoints desde el navegador.
Templates base: lugar central para cargar librerías de front-end que usa toda la app.
Servicio en AngularJS: capa que abstrae la conexión y la reutiliza mediante load(apiName, version).
Discovery URL: patrón .../discovery/v1/apis/{api}/{version}/rest que estandariza la descripción de recursos.
Nombre del API y versión: parámetros clave para resolver rutas y compatibilidad.
Controlador en AngularJS: inicializa el servicio, carga el API y registra logs de estado.
Migración de HTTP a endpoints: de un POST manual a una invocación directa del método del API.
Manejo de respuestas y errores: mostrar mensajes de éxito o warning según el resultado.
API Explorer: entorno para probar rápidamente los recursos del API y validar entradas/salidas.
Reutilización: un único método load sirve para múltiples APIs y vistas.

¿Ya probaste a crear nuevos endpoints y a llamarlos desde API Explorer? Comparte en comentarios tus avances, dudas y mejoras que te gustaría implementar.

Introducción a Google App Engine

Bienvenidos al curso de Google App Engine

¿Qué es google AppEngine?

App Engine Standard vs App Engine Flexible

Servicios de App Engine

Publicando una aplicación en App Engine

Cloud SDK vs Cloud Shell: cuándo usar cada uno

Hola mundo en App Engine

Manejo de versiones en App Engine

Dominios personalizados en App Engine

Configuración de certificados SSL y dominios personalizados

Integrando servicios de almacenamiento

Integración de Google Cloud Datastore con NDB

Reto de DataStore, crea tu primer query

Cloud Storage

Google Cloud Storage helper para App Engine

Arquitectura y optimización

Tipos de instancias en App Engine

Colas de Tareas

Crear y gestionar tareas cron en App Engine

Creando servicios REST

Google Cloud Endpoints: APIs REST fáciles

Creación de servicios WEB usando Google Cloud Endpoints

Consume APIs con JavaScript y Google Cloud Endpoints

Seguridad y control de accesos

Análisis de Seguridad

Reglas de Firewall

Identity Access Proxy

Servicios de apoyo (BONUS)

Subir código a Google Cloud Source Repositories

Stackdriver Debugger

Uso de Stack Driver Debugger en Google Cloud Platform

Error Reporting

Cómo filtrar logs con Stackdriver Logging

Detecta cuellos de botella con StackDriver Trace

Conclusiones

Conclusiones del curso

Consume APIs con JavaScript y Google Cloud Endpoints