Como conectar una aplicación IONIC Angular a Google Cloud Platform

Nuestra aplicación SAE, es una aplicación capas de conectarse al servicio de Google cloud platform, esta aplicación esta desarrollada con el framework de angular.

Se utilizo el framework de strapi para administrar la base de datos y el api para la aplicación que hemos desarrollado, con el objetivo de que facilite el acceso a los datos del usuario desde un servicio.

Usamos la versión de strapi 3.6.8, podemos encontrar dentro de su documentación la instalación de este framework y se puede usar en cualquier sistema operativo configurando desde la terminal.

Usamos strapi para crear nuestra API y poder montarlo en un servidor con conexiona internet desde nuestra aplicación.

Este es la aplicación ejecutándose desde el navegador, se puede observar que podemos crear una tabla a nuestra base de datos y agregar campos con diferentes tipos de datos. Además, podemos modificar estos registros en cualquier momento sin afectar a las demás filas o columnas de nuestra base de datos que se encuentra en nuestro servidor.

 

STRAPI EN NUESTRO SERVIDOR LOCAL PARA CREAR APIS
STRAPI EN NUESTRO SERVIDOR LOCAL PARA CREAR APIS

Una vez creada las tablas se pueden ingresar manualmente los registros a cada campo dependiendo del tipo de datos asignado y su longitud esta guardara la información con un numero id autoincrementar que ayuda a la aplicación a que cada vez que agreguemos vayan apareciendo los registros.

Estos son los tipos de datos con los que podemos crear nuestra tablas y además nos permite relacionar entre cada una de ellas y posteriormente obtener los datos de una consulta por medio de la API.

Toda la información registrada se mostrará en nuestra aplicación con diversos arreglos de datos con nombres, pero además se podrán modificar, actualizar y dar de alta a nuevos usuarios con un formulario amigable listo para ingresar los datos de la manera más sencillo.

Al registrar un nuevo usuario podemos ver los campos de nuestra base datos, donde ingresamos nuestros datos al formulario, también se añadió una lista de campos donde podemos ingresar en que grupo va y semestre. Una ves registrado el usuario, podemos ver en el apartado de alumnos aparecen 2 botones uno para eliminar y otro para editar los datos del usuario. Si deseamos eliminar nos pedirá  una confirmación y se quitara de la base datos.

Si deseamos modificar los datos, seleccionamos el botón de modificar y aparecerán los datos que registramos al inicio, en cada uno de los campos correspondientes, si modificamos los datos solo damos en actualizar y en la base de datos se reflejarán los cambios al servidor de la base de datos.

Ahora vemos en la parte de nuestro código, están los métodos que manda a llamar los datos del api. Donde pasa los parámetros de la base de datos a la interfaz de la aplicación, asi mismo podemos trabajar los datos por medio de varios métodos asignados.

Se puede observar los registros del gestor de base de datos y los datos obtenidos desde la aplicación

Video de cómo funciona la app de ionic desde cloud platform con Apis

Dejar un comentario

Tu dirección de correo electrónico no será publicada.