Aplicación de chat sin servidor con Jetpack Compose y Huawei Mobile Services – Parte 1 | de Francesco Stranieri | noviembre 2022

¡Hola gente! Quizás la mayoría de nosotros, los desarrolladores, hemos estado involucrados en el desarrollo de aplicaciones de chat al menos una vez, desde el lado frontal o posterior. Pero, ¿cuántos lograron desarrollar todo el asunto con poco esfuerzo? Entonces, veamos cómo desarrollar un servicio de chat simple adecuado para múltiples plataformas, comenzando con una aplicación de Android desarrollada con Jetpack Compose.

• Juntos veremos cómo gestionar el flujo de registro/inicio de sesión con terceros de forma sencilla y sin servidor propio.

• Cómo desarrollar un chat (enviar, recibir, editar y borrar mensajes).

• ¡Cómo crear una encuesta para organizar un almuerzo con nuestros amigos/colegas!

El proyecto en sí NO requieren ciertos servicios a bordo en el dispositivo y un dispositivo HUAWEI, pero con 2 excepciones para servicio de autenticación:

• IDENTIFICADOR DE HUAWEI Inicio de sesión: si desea integrarlo en su aplicación, REQUIERE Núcleo HMS a bordo, una aplicación que puede encontrar e instalar Tienda AppGallery (no se requiere dispositivo HUAWEI);
• Google Inicio de sesión: si desea integrarlo en su aplicación, GMS REQUERIDO a bordo.

En su lugar, podría probar un enfoque OAUTH2 independiente personalizado que pasa el token al SERVICIO AUTH:Todo comienza desde el sitio web oficial de Huawei Developers donde nos registramos y accedemos a la consola del desarrollador -> enlace. Aquí puede seguir la guía básica para configurar su proyecto y aplicación -> enlace. Luego habilite los siguientes servicios: servicio de autenticación y si desea soporte para el inicio de sesión de ID de HUAWEI, kit de cuenta.linkSolo necesitamos tres elementos del arsenal de HMS para crear este proyecto:- servicio de autenticaciónpara administrar el flujo de registro/inicio de sesión con proveedores externos y/o tokens de inicio de sesión personalizados y/o cuentas anónimas en caso de que deseemos acceder a funciones de servicio autenticadas sin inicio de sesión de usuario;- base de datos en la nubecomo una base de datos en la nube para almacenar y recuperar datos sin problemas;- caracteristicas de la nubepara orquestar la lógica empresarial entre las plataformas, el servicio de autenticación y la base de datos en la nube.En la consola del desarrollador, en la sección «Servicio de autenticación», podemos habilitar los proveedores de inicio de sesión que queremos admitir. En este proyecto logré usar ID de HUAWEI, inicio de sesión de Google y Facebook.Aquí simplemente haga clic en «Activar» y agregue la información solicitada para asociar el servicio de autenticación con el proveedor de inicio de sesión específico.Para almacenar y recuperar los datos de nuestra aplicación de chat, utilizamos el servicio Cloud DB. En la sección correspondiente creamos el nuestro. tipos de objetosque podemos llamar tablas en términos relacionados con la base de datos.Aquí podemos agregarlos tipo de objeto Campos que admiten todos los tipos comunes y luego al menos 1 clave principal obligatoria y, opcionalmente, decidir si ese campo en particular debe cifrarse o no, un valor predeterminado y si es anulable.Aquí tenemos que decidir qué tipo de usuario puede acceder a él. tipo de objeto y qué operaciones se pueden gestionar.Finalmente haciendo clic ‘Exportar’ botón podemos exportar el tipo de objeto en el formato soportado por nuestro proyecto donde ‘Androide’ es para nuestra aplicación de Android y ‘servidorSDK’ es para nosotros caracteristicas de la nube.Con la función «Exportar», no solo exportamos los tipos de objetos, sino también ObjectTypeInfoHelper, una clase contenedora que recopila la información de todos los tipos de objetos en nuestro proyecto. Agruparemos todos estos archivos en nuestro proyecto en la misma carpeta. Entonces el ‘agconnect-servicios.json’ Descargue desde la consola del desarrollador y colóquelo en la carpeta raíz de su proyecto.Ahora que tenemos los tipos de objetos, necesitamos crearlos. ‘Zona’ donde se almacenan y se accede a los datos. Podemos crear múltiples zonas. Simplemente haga click ‘Añadir’ botón y elija el nombre de la Zona de base de datos en la nube.Finalmente podemos proceder a revisar los datos que tenemos almacenados ‘entradas de datos’ pestaña, seleccione la Zona de base de datos en la nube y el especial tipo de objeto. Opcionalmente, también podemos cambiar y eliminar registros.Finalmente, podemos explorar el último servicio que necesitamos para este increíble chat sin servidor: el caracteristicas de la nube. Los necesitamos para orquestar la lógica empresarial entre la aplicación, la base de datos y el servicio de autenticación. Así que accedemos a la sección correspondiente en la consola del desarrollador y hacemos clic en ‘Añadir’ Botón para crear una nueva función.Aquí podemos elegir opcionalmente la memoria para servir la función, el tiempo de ejecución (para este proyecto usé nodejs, pero Java y Python también son compatibles) y si lo desarrollamos con el editor integrado en la consola o el proyecto de función en la nube que queremos cargar. a través de la consola o CLI.Una vez que hayamos desarrollado y subido el nuestro función de nubepodemos probarlo agregando un parámetro de prueba personalizado.También podemos agregar un Deducción a la función de la nube para dispararlos automáticamente con uno específico Evento.Se admiten muchos disparadores, por ejemplo combinados con servicio de autenticación, base de datos en la nube y también CRON Disparadores que disparan en cada intervalo que configuramos.Por ejemplo, con los disparadores de Cloud DB, podemos elegir la zona de Cloud DB y el tipo de objeto en el que queremos trabajar, así como el tipo de evento específico. Los tipos de eventos admitidos son ‘en Upsert’ que se dispara cada vez que hay un registro nuevo o actualizado; ‘onDelete’ y ‘onDeletAll’ para borrar registros y finalmente ‘en escritura’ para operaciones de creación/actualización/eliminación en Cloud DB.Así que veamos el primer flujo, el flujo de autenticación, en términos de inicio de sesión/registro, comenzando por el lado de la aplicación. Al principio creamos una instancia de AGConnectAuth poder utilizar todas las funciones del servicio de autenticación. Luego, cuando el usuario hace clic en el botón de un proveedor de inicio de sesión como el inicio de sesión de Google, llamamos a la función de inicio de sesión que solicita las credenciales del servicio de autenticación que administra todo el flujo del proveedor de inicio de sesión.

Interfaz de usuario de ANDROID

Veamos la parte de la interfaz de usuario en la que usé Jetpack Compose. Simplemente usamos el SDK específico del proveedor de inicio de sesión con su propio botón de marca. Por ejemplo, usaremos Google para instanciar un SignInButton en Compose AndroidView que se usará para instanciar vistas personalizadas. @ComposablePrivate diversión GoogleLoginButton(…) {AndroidView(modifier = Modifier.wrapContentSize(),factory = { contexto ->SignInButton(contexto).aplicar {setOnClickListener { onClickIniciar sesión() }}})} Debido a que la aplicación utiliza un patrón MVVMtenemos una Ver modelo para administrar todo el flujo de autenticación y su nombre es AuthViewModel. Una vez que se ha hecho clic en el botón, se llama a la función de inicio de sesión para pasar el contexto de la actividad para administrar los resultados de la actividad y un valor constante del servicio de autenticación relacionado con Proveedor de inicio de sesión de Google.Botón de inicio de sesión de Google {authViewModel.login(actividad = actividad actual, tipo de credencial = AGConnectAuthCredential.Google_Provider)}Creamos el AGConnectAuth Instancia al principio de app.var authInstance: AGConnectAuth = AGConnectAuth.getInstance()private setLa función de inicio de sesión pasa los parámetros a la función signIn.fun login(actividad: Actividad, credentialType: Int) {authInstance.signIn(actividad, credentialType ) .addOnSuccessListener {updateState(state.value.copy(loggedIn = true))}.addOnFailureListener {updateState(state.value.copy(failureOutput = eso))}} Para administrar los cambios en la interfaz de usuario, tengo el MutableStateFlowMutableStateFlow que se actualiza en la función signIn callbacks.private val mState = MutableStateFlow(value = AuthState())val state: StateFlowget() = mState… clase de datos AuthState(val logIn: Boolean = false,val failureOutput: Exception? = null, val previousInstanceAlive: Boolean = false)

BACKEND

Ahora es el momento de la parte de backend. Cuando recibimos las credenciales de Auth-Service para iniciar sesión correctamente en la aplicación, se activa una función de nube (agregar usuario) gracias al AUTH TRIGGER previamente configurado con el evento onLoginSuccess. Este disparador se llama con cada inicio de sesión exitoso. La función de agregar usuario en la nube almacena los datos del usuario en el tipo de objeto de usuarios de Cloud DB junto con un color aleatorio para distinguir a los usuarios en el chat. Finalmente, la aplicación verifica si Cloud DB tiene estos datos disponibles y, de ser así, el usuario se une al chat.Veamos cómo desarrollar un función de nube. Al igual que con la aplicación, debe tener todos los archivos de tipos de objetos y el archivo de credenciales de AGC en una carpeta del proyecto. Entonces tenemos un ‘manejador.js‘ y que contendrá la función de lanzamiento de nuestro proyecto. La función tiene 4 parámetros: evento con todos los datos relacionados con el disparador cuya referencia se puede encontrar en la documentación oficial; contexto de la función; devolución de llamada para enviar resultados; registrador para escribir mensajes de registro.en el ‘Agregar usuario’ Característica de la nube, necesitamos acceder al tipo de objeto Usuarios de base de datos en la nube, que solo tiene permisos de acceso de usuario autenticado. De hecho, necesitamos inicializar el AGCCliente con la ruta a nuestro archivo de credenciales AGC en el proyecto. Una vez que tenemos la instancia de AGCClient, la pasamos a Cloud DB para acceder a ella. Ahora todo lo que tenemos que hacer es configurar Cloud DB Zone para el acceso y estamos listos para comenzar.if (!AGCClient.INSTANCES.has(AGCClient.DEFAULT_INSTANCE_NAME)) {var credential = CredentialParser.toCredential(credentialPath);AGCClient.initialize(credential);}const agcClient = AGCClient.getInstance();clouddb.AGConnectCloudDB.initialize(agcClient) ;const cloudDBZoneConfig = new clouddb.CloudDBZoneConfig(‘ChatDemo’);this.cloudDBZoneClient = clouddb.AGConnectCloudDB.getInstance(agcClient).openCloudDBZone(cloudDBZoneConfig);Una vez que hayamos terminado con nuestra lógica comercial, queremos almacenar los datos de usuario obtenidos de la DISPARADOR DE AUTORIZACIÓN en el cual usuario tipo de objeto, por lo que solo necesitamos llamar ‘EjecutarUpsert‘ sobre datos del usuario as array.async addUser(userData) {…let users = [];users.push(userData);try {const resp = esperar this.cloudDBZoneClient.executeUpsert(userData);this.logger.info(‘El número de usuarios upsert es: ‘+ resp);} catch (error) {this. registrador.error(‘añadirUsuario=> ‘+ error);}}