Crea un clon de WhatsApp de Android en tiempo real con Jetpack Compose | de Jae Woong Eum | agosto 2022

En las aplicaciones de mensajería social, la función de chat confiable y robusta es la parte esencial. En este artículo, aprenderá a crear su propio proyecto de WhatsApp para Android en tiempo real utilizando Jetpack Compose y el versátil Compose Chat SDK de Stream. También aprenderá sobre la arquitectura general, cada capa y el tema utilizado. Redacción de clones de WhatsApp proyecto Antes de sumergirse, recomendamos clonar el Redacción de clones de WhatsApp en su dispositivo local con el siguiente comando y abra el proyecto con su clon de Android Studio.git https://github.com/GetStream/WhatsApp-clone-compose.gitSi está construyendo Clonar WhatsApp Redactar El resultado se ve así en su dispositivo:Clonar WhatsApp Redactar sigue la guía de arquitectura de aplicaciones de Google, que es la arquitectura recomendada para crear una aplicación robusta y de alta calidad. En esta publicación, aprenderá cómo se diseñó la arquitectura de la aplicación y cómo fluyen los datos entre diferentes capas. Como puede ver en la imagen a continuación, cada nivel tiene componentes dedicados que están muy poco acoplados entre sí. La flecha significa que el componente tiene una restricción en el componente de destino a lo largo de la direcciónBásicamente, la arquitectura consta de dos capas: capa de interfaz de usuario y una capa de datos.Cada capa tiene diferentes responsabilidades como se define a continuación:

  • Cada capa sigue un evento unidireccional/flujo de datos; La capa de la interfaz de usuario emite eventos de usuario a la capa de datos y la capa de datos transmite datos a otras capas.
  • La capa de datos está diseñada para funcionar independientemente de otras capas y debe ser pura, lo que significa que no tiene dependencias con las otras capas.

Con esta arquitectura débilmente acoplada, puede aumentar la reutilización de los componentes y la escalabilidad de su aplicación. Ahora veamos cómo funciona cada capa.Clonar WhatsApp Redactar está construido con Jetpack Compose al 100 % para dibujar elementos de la interfaz de usuario y configurar pantallas mediante la observación de los estados de la interfaz de usuario que provienen del ViewModel que contiene los estados de la interfaz de usuario y restaura los datos cuando cambia la configuración.ViewModel transforma los datos comerciales de la capa de datos en estados de la interfaz de usuario, y los elementos de la interfaz de usuario configuran pantallas que siguen los estados de la interfaz de usuario para el éxito, la carga o el error. Los estados de la interfaz de usuario representan los datos empresariales o las excepciones que siguen el principio de fuente única de la verdad. Puede centrarse en cómo se dibujan los elementos de la interfaz de usuario en función de los estados de la interfaz de usuario en la capa de la interfaz de usuario. La capa de datos consta de repositorios que están expuestos a otras capas como interfaces públicas. Los repositorios contienen lógica empresarial que se ejecuta principalmente en el subproceso en segundo plano, p. B. consultar datos de bases de datos locales y recuperar datos remotos de la red.Al exponer la interfaz de los repositorios, otras capas pueden observar los datos comerciales como un flujo como Flow de Kotlin. Los repositorios tienen múltiples fuentes de datos, como la base de datos local y la red. Para garantizar la única fuente de verdad de múltiples recursos, los repositorios se implementan como la primera fuente de lógica comercial fuera de línea, como se muestra en la figura anterior.Clonar WhatsApp Redactar está construido con estrategias de múltiples módulos para mejorar el desarrollo de aplicaciones.

  • reutilización: La modularización del código reutilizable permite el uso adecuado del código compartido y restringe el acceso al código desde otros módulos.
  • construcción paralela: Cada módulo puede ejecutarse en paralelo, lo que reduce el tiempo de compilación.
  • Descentralizar el enfoque del equipo: Cada equipo de desarrollo puede asignar su módulo dedicado y centrarse en sus propios módulos.

La modularización le permite crear su función de forma independiente y escribir código de prueba sin depender de otras funciones. Esto le permite lograr un acoplamiento débil entre módulos y una alta cohesión, lo que significa que cada módulo tiene responsabilidades bien definidas para su propia lógica de dominio.Clonar WhatsApp Redactar tiene componentes temáticos en el módulo del sistema de diseño central. El módulo contiene componentes reutilizables que se utilizan en los módulos de funciones de la interfaz de usuario y definiciones de temas como: tema, antecedentesy tipografía.Esta publicación te dice cómo Clonar WhatsApp Redactar diseña el fondo y el tema de los elementos generales de la interfaz de usuario. El estilo de fondo es una parte clave del diseño de aplicaciones. Para que los elementos de la interfaz de usuario tengan un color de fondo uniforme, Clonar WhatsApp Redactar implementó su propio fondo componible llamado WhatsAppCloneBackground: el BackgroundTheme contiene dos propiedades a continuación:

  • color: Esta propiedad determina el color de fondo de la superficie.
  • aumento tonal: La elevación tonal de la superficie resalta los componentes en función de los niveles de altura. Las superficies en las elevaciones +1 a +5 se tiñen mediante superposiciones de color basadas en el color primario, p. B. Barras o menús de aplicaciones. Consulte Sistema de 3 colores de Material Design para obtener más información.

Al envolver los elementos de la interfaz de usuario con WhatsAppCloneBackground Composable como en el ejemplo a continuación, los descendientes del contenido componible tendrán el mismo color de fondo. La temática es una de las partes más importantes del diseño de la aplicación y puede lograrlo fácilmente en Jetpack Compose.Clonar WhatsApp Redactar utiliza Material Theme para diseñar los elementos generales de la interfaz de usuario y definir esquemas de color personalizados con los métodos lightColorSceme y darkColorSceme: Clonar WhatsApp Redactar define su propio tema, WhatsAppCloneComposeTheme, como se muestra a continuación: Los temas de color se aplican a diferentes combinaciones de colores y colores de fondo dependiendo de si el dispositivo del usuario está en modo oscuro o no. Al envolver los elementos de la interfaz de usuario con WhatsAppCloneComposeTheme como en el ejemplo a continuación, puede ver el resultado de los elementos de la interfaz de usuario que se colorean de acuerdo con el esquema de color definido. Si necesita aplicar diferentes colores para ciertos elementos de la interfaz de usuario, simplemente extraiga el valor de color definido del esquema de color y use: Cree lo anterior en su Android Studio, puede ver el tema definido aplicado a los elementos de la interfaz de usuario, como se muestra en la siguiente figura:¡Creemos una función de chat de WhatsApp en tiempo real ahora!Clonar WhatsApp Redactar creó la función de chat usando el versátil Compose Chat SDK de Stream. Stream Chat SDK proporciona potentes soluciones de chat que miles de millones de usuarios finales han utilizado en miles de aplicaciones diferentes en todo el mundo. Puede registrarse rápidamente para obtener un plan de prueba de chat de transmisión gratuito con su cuenta de GitHub. Los equipos pequeños y los individuos también pueden solicitar una cuenta de Maker, que le permite usar el Plan de inicio de forma gratuita. Una vez que tenga una cuenta, cree un proyecto en su panel de flujo.Después de crear su proyecto, tome nota de su Clave API.Finalmente, vamos a deshabilitar la autenticación en aras de la simplicidad, así que actívela Deshabilitar controles de autenticación botón y haga clic en el Enviar botón en tu proyecto visión general Lado. Tenga en cuenta que esto solo debe hacerse en entornos de desarrollo.Antes de implementar la función de chat, importa el SDK de Stream para Jetpack Compose a tu proyecto. Agregue las siguientes dependencias para su módulo y nivel de aplicación construir.gradle file:Stream SDK es un proyecto de código abierto, por lo que puede ver todos los códigos fuente, el historial de confirmaciones y los lanzamientos en GitHub.

Nota: Si eres completamente nuevo en Stream Chat Android, también puedes consultar el Tutorial de redacción de chat.

Cliente de chat es el punto de entrada principal para todas las operaciones de chat de bajo nivel, como conectar y desconectar usuarios del servidor de transmisión o enviar y responder mensajes.Clonar WhatsApp Redactar inicializa el Cliente de chat con App Startup y conecta a un usuario al instante para mayor comodidad. Tenga en cuenta que usamos un token de desarrollo para conectar a un usuario ya que la autenticación está deshabilitada. Como estamos usando un inicializador, necesitamos definirlo en el tuyo AndroidManifest.xml archivo y se iniciará cuando se inicie su aplicación. Ahora vamos a crear una pantalla de lista de canales.Transmitir SDK proporciona componentes de interfaz de usuario de alto nivel que puede usar para crear pantallas de chat sin mucho esfuerzo. Puede crear fácilmente su pantalla de lista de canales utilizando la función ChannelsScreen componible: como ve en el ejemplo anterior, debe envolver ChannelsScreen con ChatTheme, que diseña los componentes de la interfaz de usuario de chat como el color principal, la tipografía y la pantalla de formas o iniciar actividades para envolver el Muestra la pantalla de la lista de mensajes con el parámetro Lambda onItemClick cuando los usuarios hacen clic en el elemento del canal. Cree lo anterior en su Android Studio, verá el resultado a continuación:Puede crear fácilmente la pantalla de la lista de mensajes usando la función componible MessagesScreen de la siguiente manera: A continuación, debe crear una TopAppBar que contenga información del canal, p. B. una imagen y un nombre. Para obtener la información del canal, necesitamos obtener los datos de la red usando ChatClient de esta manera: puede inyectar ChatClient en su ViewModel con una herramienta de inyección de dependencia como Hilt o simplemente puede obtener la instancia con ChatClient.instance() . Método. Después de recuperar la información del canal a través de una llamada de red, WhatsAppMessagesViewModel transforma el resultado en estados de IU definidos de la siguiente manera:Clonar WhatsApp Redactar modela cada interacción del usuario como eventos para su procesamiento en ViewModel. Entonces, solo tiene que exponer el método handleEvents en los elementos de la interfaz de usuario y aplanar las superficies de la API como en el ejemplo a continuación: Finalmente, puede dibujar sus funciones componibles según los estados de la interfaz de usuario que provienen de ViewModel, como éxito, carga y error:

Nota: Para cargar una imagen de red en TopAppBar, Clonar WhatsApp Redactar utiliza Landscapist, que le permite recuperar y ver imágenes de red Deslizar, Fregaderoy fresco.

Ahora verás el resultado a continuación:En este tutorial tienes la arquitectura general del Clonar WhatsApp Redactar Project y cómo desarrollar la funcionalidad de chat usando el versátil Compose Chat SDK de Stream. Para obtener más información sobre el SDK de Compose Chat, pruebe el Tutorial de Compose Chat o consulte los proyectos de código abierto en GitHub a continuación: Puede encontrar al autor de este artículo en Twitter @github_skydoves o GitHub si tiene preguntas o comentarios. Si quieres estar al día de Stream, síguenos en Twitter @getstream_io para obtener más contenido técnico excelente. Como siempre, ¡feliz codificación! — JaewoongPublicado originalmente en GetStream.io/blog.

Deja una respuesta

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