Functions Plataforma de IBM cloud de programacion poliglota FaaS (Functions-as-a-Service) para desarrollo de codigo ligero que escala dependiendo de la demanda.
GitHub de Serverless para desplegar con githubpages:
Para mayor informacion:
AppId Servicio de IBM cloud que de manera sencilla agrega autentificacion, asegura backends y APIs, y gestiona datos de usuarios especificos en una aplicacion web y movil.
Para mayor informacion:
Es una base de datos completamente administrable para aplicaciones multinube hibrida con una completa compatibilidad de API.
Para mayor informacion:
- Cuenta de IBM Cloud
- Instalar CLI de IBM Cloud (para descargar la versión “STANDALONE” aquí)
- Cuenta en GitHub
- Instalar CLI de GitHub o instalar GitHub Desktop
- Instalar NodeJS
- Utilizar safari, chrome, firefox, edge
- Acceder al portal de IBM Academic Initiative y seleccionar la opción "Register now" si aun no tienes cuenta.
- Realizar el registro correspondiente utilizando la cuenta de correo académica y confirma tu cuenta.
- Despues de confirmar tu cuenta, y con la sesion iniciada en IBM Academic Initiative, en la parte de "Most Popular Topics covered", encontraremos IBM Cloud y damos click en "Learn more".
- Bajamos de la pagina hasta encontrar "Software". Le damos click, nos dara un apartado que se llama "Request Feature Code".
- Nos dara nuestro codigo. Lo copiamos y lo llevamos a IBM Cloud.
- En la parte superior derecha, buscaremos la parte de "MANAGE"/"GESTIONAR", nos desplegara una lista y seleccionaremos "Account"/"Cuenta".
- De lado izquierdo, tendremos una opción "Account settings"/"Configuracion de cuenta".
- Bajamos un poco hasta encontrar "Subscription and feature codes"/"Codigos de suscripción y carateristicas".
- Da click en "Apply code"/"Aplicar codigo".
- Ingresamos el codigo y click en "Apply"/"Aplicar".
app.js Usa Express para establecer rutas.
public/index.html La pagina de destino de la aplicacion. Hacer click en Iniciar sesion para iniciar.
protected/protected.html La pagina protegida de la aplicacion. Despues de hacer click en el boton de Iniciar sesion, el usuario es redrigido aqui. Aqui es donde se revisa si el usuario esta autorizado o no. En el caso en el que el usuario no este autorizado, se envia una solicitud al servidor de autenticacion para iniciar el flow de el OAuth. Si el usuario esta autorizado, se muestra la pagina y la informacion protegida.
En esta seccion iniciaremos un servicio de Base de Datos no relacional.
- Buscaremos en nuestro catalogo Cloudant.
- Seleccionaremos el Plan Lite, le asignamos un nombre y en los metodos de autentificacion seleccionamos Use both legacy credentials and IAM y creamos el servicio.
- Ya que el servicio este suministrado, ingresamos al servicio y guardamos las credenciales del servicio para usarlas mas tarde. Estas se encuentran en la parte izquierda en la pestaña credenciales del servicio.
- Damos click en Launch Cloudant Dashboard en la pestaña de gestionar para que nos abra una pestaña nueva donde podremos ver nuestra base de datos, podemos tener mas de una base de datos con difernete nombre dentro del servicio.
- Crearemos una base de datos nueva en el apartado superior derecho Create Database, crearemos 3 que son:
- guestbook: Donde guardaremos los comentarios en vivo
- institucion: Donde cargaremos una lista que es parte de el Registro de Actividades
- teach_adv: Donde se guardaran las actividades
Comentarios en Vivo
En esta sección configuraremos nuestra plataforma de IBM Cloud Functions.
-
Secuencia de acciones para escribir a la base de datos
- Vamos al catálogo y buscamos Cloud Functions
- Una vez dentro seleccionamos Actions
- Damos click en Create
- Damos click en Create action
- Ponemos el nombre prepare-entry-for-save y seleccionamos Node.js 10 como el Runtime, damos click en Create
- Cambiamos el código por el siguiente:
function main(params) { if (!params.nombre || !params.comentario) { return Promise.reject({ error: 'no nombre o comentario'}); } return { doc: { createdAt: new Date(), nombre: params.nombre, correo: params.correo, comentario: params.comentario } }; }
- Lo salvamos
- Para añadir nuestra acción a una secuencia primero nos vamos al tab “Enclosing Secuences” y damos click en “Add to Sequence”
- Para el nombre de la secuencia ponemos save-guestbook-entry-sequence y posteriormente damos click en Create and Add
- Una vez que esta creada nuestra secuencia le damos click y damos click en Add posteriormente
- Damos click en Use Public y seleccionamos Cloudant
- Seleccionamos la acción "creare-document", damos click en New Binding, en "name" ponemos de nombre de nuestro paquete binding-for-guestbook y en Cloudant Instance seleccionamos Input Your Own Credentials
- Para llenar todos los datos posteriores copiamos y pegamos lo que teníamos en el servicio de Cloudant que seria "Username", "Password", "Host", y llenamos "Database" con el nombre que tiene nuestra base de datos "guestbook" y damos click en Add, luego en Save
- Para probar que esté funcionando, damos click en change input e ingresamos nuestro siguiente JSON y damos click en Apply y luego en Invoke
{ "nombre": "John Smith", "correo": "[email protected]", "comentario": "Este es mi comentario" }Una vez hecho esto debemos verlo escrito en nuestra base de datos de Cloudant en la sección Documents
-
Secuencia de acciones para obtener las entradas de la base de datos Esta secuencia la usaremos para tomar las entradas de cada usuario y sus respectivos comentarios
- En nuestra tab de functions creamos una acción Node.js 10 y le ponemos el nombre set-read-input, siguiendo el mismo proceso que en la acción anterior
- Reemplazamos el código que viene, esta acción pasa los parámetros apropiados a nuestra siguiente acción
function main(params) { return { params: { include_docs: true } }; }
- Damos click en Save
- Damos click en Enclosing Sequences, Add to Sequence y Create New con el nombre read-guestbook-entries-sequence damos click en Create and Add
- Damos click en Actions y damos click en read-guestbook-entries-sequence
- Damos click en Add para crear una segunda acción en la secuencia
- Seleccionamos Public y Cloudant
- Seleccionamos list-documents en actions y seleccionamos el binding binding-for-guestbook y posteriormente damos click en Add
- Damos click en Add para añadir una acción más a la secuencia, esta es la que va a dar el formato de los documentos cuando regresen de Cloudant
- La nombraremos format-entries y posteriormente damos click en Create and add
- Damos click en format-entries y reemplazamos el código con:
const md5 = require('spark-md5'); function main(params) { return { entries: params.rows.map((row) => { return { nombre: row.doc.nombre, correo: row.doc.correo, comentario: row.doc.comentario, createdAt: row.doc.createdAt, icon: (row.doc.correo ? `https://secure.gravatar.com/avatar/${md5.hash(row.doc.correo.trim().toLowerCase())}?s=64` : null) }}) }; }
- Salvamos y damos click en invoke, debe sacar lo que tenemos en esa base de datos.
-
Configurar el API
-
Dentro de nuestras acciones seleccionamos ambas secuencias y en la tab de Endpoints damos click en Enable Web Action y damos click en Save
-
Nos vamos a Functions y damos click en API
-
Damos click en Create Managed API
-
En el API name ponemos guestbook y en el path ponemos /guestbook y damos click en create operation
-
Creamos un path que sea /entries ponemos el verbo a GET y seleccionamos la secuencia read-guestbook-entries-sequence y damos click en Create
-
Realizamos la misma acción pero ahora con un POST y la secuencia save-guestbook-entries-sequence y damos click en Create
-
Salvamos y exponemos la API
-
Copiamos el link expuesto y lo cambiamo en ./protected/javascript/guestbook.js
const apiUrl = '<url-api-functions>';
en la linea 4
-
Para el registro de Actividades
-
Secuencia de acciones para escribir a la base de datos
- Regresamos a IBM Cloud Functions
- Seleccionamos Actions
- Damos click en Create
- Damos click en Create action
- Ponemos el nombre prepare-entry y seleccionamos Node.js 10 como el Runtime, damos click en Create
- Cambiamos el código por el siguiente:
function main(params) { console.log(params) return { doc: { createdAt: new Date(), user: params.user, activityType: params.actType, hours: parseInt(params.hours), location: params.loc, students: params.students, institucion: params.ins, rating: params.rating, comments: params.comment } }; }
- Lo salvamos
- Añadimos nuestra acción a una secuencia con la tab “Enclosing Secuences” y damos click en “Add to Sequence”
- Para el nombre de la secuencia ponemos save-entry y posteriormente damos click en Create and Add
- Una vez que esta creada nuestra secuencia le damos click y damos click en Add posteriormente
- Damos click en Use Public y seleccionamos Cloudant
- Seleccionamos la acción "creare-document", damos click en New Binding, en "name" ponemos de nombre de nuestro paquete binding-for-Activities y en Cloudant Instance seleccionamos Input Your Own Credentials
- Para llenar todos los datos posteriores copiamos y pegamos lo que teníamos en el servicio de Cloudant que seria "Username", "Password", "Host", y llenamos "Database" con el nombre que tiene nuestra base de datos "teach_adv" y damos click en Add, luego en Save
- Para probar que esté funcionando, damos click en change input e ingresamos nuestro siguiente JSON y damos click en Apply y luego en Invoke
{ "user": "[email protected]", "actType": "Taller o Workshop", "hours": "3", "loc": "pach", "students": "10", "ins": "Universidad", "rating": "4", "comment": "Todo bien" }Una vez hecho esto debemos verlo escrito en nuestra base de datos de Cloudant en la sección Documents
-
Secuencia de acciones para obtener las entradas de la base de datos Esta secuencia la usaremos para tomar las entradas de cada usuario y sus respectivos comentarios
- En nuestra tab de functions creamos una acción Node.js 10 y le ponemos el nombre set-read, siguiendo el mismo proceso que en la acción anterior
- Reemplazamos el código que viene, esta acción pasa los parámetros apropiados a nuestra siguiente acción
function main(params) { return { params: { include_docs: true } }; }
- Damos click en Save
- Damos click en Enclosing Sequences, Add to Sequence y Create New con el nombre read-guestbook-entries-sequence damos click en Create and Add
- Damos click en Actions y damos click en read-entries
- Damos click en Add para crear una segunda acción en la secuencia
- Seleccionamos Public y Cloudant
- Seleccionamos list-documents en actions y seleccionamos el binding binding-for-Activities y posteriormente damos click en Add
- Damos click en Add para añadir una acción más a la secuencia, esta es la que va a dar el formato de los documentos cuando regresen de Cloudant
- La nombraremos format y posteriormente damos click en Create and add
- Damos click en format y reemplazamos el código con:
const md5 = require('spark-md5'); function main(params) { return { entries: params.rows.map((row) => { return { name: row.doc.user, hours: row.doc.hours, institucion: row.doc.institucion,}}) }; }
- Salvamos y damos click en invoke, debe sacar lo que tenemos en esa base de datos.
-
Configurar el API
-
Dentro de nuestras acciones seleccionamos ambas secuencias y en la tab de Endpoints damos click en Enable Web Action y damos click en Save
-
Nos vamos a Functions y damos click en API
-
Damos click en Create Managed API
-
En el API name ponemos teachADV y en el path ponemos /entries y damos click en create operation
-
Creamos un path que sea /entries ponemos el verbo a GET y seleccionamos la secuencia read-entries y damos click en Create
-
Realizamos la misma acción pero ahora con un POST y la secuencia save-entries y damos click en Create
-
Salvamos y exponemos la API
-
Copiamos el link expuesto y lo cambiamo en ./protected/javascript/cloudant.js
const apiUrl = '<url-api-functions>';
en la linea 4
-
- En IBM Cloud en el catalogo buscamos App ID y le damos click.
- Asignamos la Region mas cercana, nombre del servicio, etiquetas y la version Lite, le damos click a crear.
-
Nos llevará a la pagina principal del Servicio, donde encontraremos de lado derecho la lista de opciones del servicio. Nos dirigiremos a "Manage Authentication" y en el apartado de "Identity Providers" para asignar como los usuarios pueden crear su cuenta. Se puede elegir entre las siguientes:
-
En la otra pestaña "Authentification Settings" podemos agregar URL para la redireccion de nuestra aplicacion. Los tokns de seguridad para mantenerse con la sesion iniciada, con el codigo de acceso y el codigo de la cuenta anonima si es que esta activo.
-
En "Cloud Directory" debajo de "Manage Authentication" encontraremos diversas opciones, seleccionaremos "Workflow Templates" en "Email Verification" se puede cambiar el correo que llega para la verificación del mismo y permitir si los usuarios pueden ingresar a la parte protegida o no si la cuenta ya esta verificada.
-
En la opcion de "Login Customization" podemos cambiar ligeramente la pantalla en donde se inicia sesion, se puede modificar el logo que puede ser png o jpg no mayor a 100kb, el color del encabezado, y tenemos una vista previa en web y movil.
-
En la pestaña de "Applications" podremos agregar nuestra aplicacion con el boton Add application donde nos arrojara una ventana para asignar nombre, tipo, y por si queremos agregar un "Scope". Asiganmos nombre y lo dejaremos como Regular web application.
-
Eso nos dara unas credenciales que usaremos en nuestra aplicacion. Las cambiaremos en el archivo llamado "localdev-congfig.json"
Primero regresamos a "Authentification Settings" donde ingresamos en el punto 4 de la configuración, para agregar la URL "http://localhost:3000/*
Ejecuta los siguientes comandos en la terminal, en la carpeta clonada:
npm install
node appUsa el link http://localhost:3000 para cargar la aplicacion web en el navegador.
IMPORTANTE: Antes de desplegarlo de manera global, quite "http://localhost:3000/*" de la lista de URLs de redirección WEB en "Manage Authentication" en la pestaña "Authentication Settings".
-
Iniciar sesión en IBM Cloud CLI.
ibmcloud login
- Elegimos la Region, que sea la mas cercana, como us-south o us-east.
-
Seleccionar una organización y un espacio de Cloud Foundry en el cual tengas acceso de desarrollador:
Utiliza:ibmcloud target --cf
para seleccionar la org/space interactivamente de Cloud Foundry.
-
Revisar que tengamos tambien seleccionado el grupo de recursos, si no, utilizaremos:
ibmcloud resource groups
para que nos muestre los que tenemos disponibles y seleccionamos uno con:
ibmcloud target -g {{el nombre del recurso}}
-
-
Enlazamos la app a la instancia de App ID:
ibmcloud resource service-alias-create "{{El nombre Alias de la instancia}}" --instance-name "{{El nombre del servicio ya creada en IBM Cloud}}" -s {{space}}
Nos creara una instancia de Cloud Foundry conectada a nuestro servicio de AppID.
-
Cambiaremos el nombre del Alias de la instancia en el archivo manifest.yml
applications: - name: [el nombre de la app] memory: 256M services: - {{El nombre Alias de la instancia}} -
Desplegamos la aplicacion directamente en IBM Cloud, desde la carpeta de la app ejecutamos:
ibmcloud app pushNos entregara algo como esto:
Cambiamos las rutas que se encuentran en ./protected/javascript/cloudant.js en las lineas 5 y 6, por: https://{la ruta que copiamos}/protected/api/idPayload y https://{la ruta que copiamos}/protected/api/inst.
- Ahora configuraremos la URL de redirection de OAuth en nuestro servicio de AppID en para que pueda aprobar el acceso. Copiamos la routa que nos dio el paso anterio en la parte
routes: *********.mybluemix.net.
Nos dirigimos a nuestro servicio de AppID. En Manage Authentication despues en Authenticaiton Settings veremos un boton que dice de + que es que nos permitira agregar una URL nueva, que sera la siguiente:
https://{la ruta que copiamos}/ibm/cloud/appid/callback
Ahora podemos encontrar nuestra app en Cloud Foundre Apps en la pagina inicial de IBM Cloud: https://cloud.ibm.com/resources
- Al entrar veremos un botón que nos permitira visitar la URL de la app.
