En este tutorial, veremos con más detalle cómo se puede integrar Bubble y AppMaster. Supongamos que el front-end de la aplicación que se está desarrollando está hecho en Bubble, pero sus capacidades para trabajar con el back-end resultan insuficientes, y se quiere utilizar la funcionalidad de AppMaster.
Vamos a ver cómo:
- Utilizar AppMaster como base de datos para Bubble
- Enviar peticiones a la API Appmaster
- Realizar la autenticación del usuario
- Utilizar el token de autorización en las cabeceras de las peticiones
Configurar API Connector
En primer lugar, hay que crear la propia posibilidad de enviar peticiones a la API externa desde Bubble. Para ello, hay que añadir el API Connector plugin.
Vamos a configurarlo inmediatamente para enviar una solicitud de autenticación a AppMaster. Nuestra tarea es enviar un login y una contraseña para recibir un token de autorización como respuesta. Utilizaremos el endpoint estándar que se crea en todos los proyectos por defecto - POST /auth/ (Auth: Authentication). La información completa sobre el mismo, con la dirección exacta a solicitar en tu proyecto, se puede obtener de Swagger.
Para configurar el API Connector, haz clic en el botón Add Another API y establezca los parámetros de solicitud que se van a utilizar. Los parámetros clave son:
- Método de solicitud. POST
- URL. Igual que Request URL de Swagger
- Use as. Data. En respuesta, debe recibir los datos del token de autorización.
- Data type. JSON
- Body. La configuración más importante en ella es que necesita especificar los datos que se enviarán al servidor AppMaster. Al mismo tiempo, <> contiene valores dinámicos que deberán obtenerse de los campos de entrada correspondientes.
{
"login": "<login>",
"password": "<password>"
}
Una vez rellenado, hay que especificar los datos para la petición de prueba (rellenar los valores de login y password en el Body parameters), inicializar la petición y asegurarse de que funciona correctamente y la respuesta llega realmente.
Configuración de los campos de entrada
El siguiente paso es crear una interfaz para la aplicación. Nos limitamos al mínimo necesario. Necesitaremos crear 3 campos de entrada:
- Login
- Contraseña
- Token de autorización
Los dos primeros son bastante obvios. Indicarán el nombre de usuario y la contraseña del usuario para la autenticación. Lo más interesante es el tercer campo - el campo del token. El valor del token también puede ser introducido manualmente, pero nuestra tarea es hacer que sea posible recibir los datos del backend AppMaster y mostrarlo allí.
Para ello es necesario configurar el valor del contenido inicial:
- Get data from an External API con la selección de la solicitud creada previamente en el API Connector (en este ejemplo, su nombre es AppMaster Auth Call)
- En los campos (body) login y (body) password necesita especificar los valores de los campos de entrada correspondientes
- Seleccione el valor token (en la respuesta a la solicitud vienen muchos datos diferentes, pero en este ejemplo sólo interesa token )
El resultado puede ser probado. Al introducir los datos en los campos de nombre de usuario y contraseña, se realizará automáticamente una petición al backend AppMaster. Si los datos se introducen correctamente, y la petición devuelve un resultado satisfactorio, el token de autorización recibido aparecerá en el tercer campo.
GET solicitud a la base de datos
El siguiente paso es crear una nueva solicitud de API. Esta vez la tarea será obtener los datos de la base de datos. Al mismo tiempo, la situación se complica por el hecho de que estos datos no son de libre acceso, sino que sólo están disponibles para los usuarios autorizados.
Para ello, tendrá que añadir una cabecera especial a la solicitud. Debe llamarse Authorization y su valor debe ser "Bearer" y la clave de autorización que se obtuvo anteriormente.
Hagámoslo en la práctica. Tienes que volver al plugin API Connector y crear una nueva solicitud de API. En el ejemplo de la captura de pantalla, se trata de una llamada a la base de datos del restaurante para obtener una lista de platos y crear un menú.
Una diferencia importante respecto a la petición anterior es que en lugar de parámetros (aunque también se pueden añadir), se utiliza una cabecera:
- Key = Authorization
- Value = Bearer {authorization token} (para inicializar la solicitud, se debe especificar inmediatamente el token real que se recibió anteriormente)
Tenga en cuenta que en la configuración de la cabecera, debe desmarcar la casilla Private; de lo contrario, no será posible generarla dinámicamente. Por último, no olvides inicializar la petición y asegurarte de que funciona.
Repeating Group configuración
Ahora debemos volver al diseñador, añadir un nuevo elemento de Grupo de Repetición y configurarlo:
- Type of content - datos de la solicitud AppMaster Get Data.
- Data source - es importante especificar el Authorization cabecera correctamente. Consta de dos partes. La primera constante es "Bearer." La segunda variable debe contener un token de autorización y ser tomada del campo de entrada correspondiente.
Si todo se hace correctamente, los datos se recibirán, y sólo queda el último paso: hay que mostrarlos. Para ello, puede añadir dos campos de texto al Repeating Group y personalizarlos. Uno mostrará el nombre del plato, y el segundo su precio.
Puedes abrir la aplicación resultante y verificar que la integración de Bubble y AppMaster fue exitosa. El frontend está hecho en Bubble.io, y todo lo relacionado con el backend está alimentado por AppMaster.io:
- Se está realizando la autenticación del usuario
- Se muestra el token de autorización recibido
- Se realiza el trabajo con la base de datos
- Se muestran los datos que están disponibles sólo para los usuarios autorizados
