MiReal.me MiReal.me – Tu blog tecnológico con la más actualizada información
Publicado por París Hsu – Gerente de Producto, Android Studio
Compartimos una emocionante demostración en vivo de la conferencia magistral para desarrolladores en Google I/O 2024 donde Gemini transformó un boceto de estructura alámbrica de la interfaz de usuario de una aplicación en código Jetpack Compose, directamente en Android Studio. Si bien todavía estamos perfeccionando esta función para garantizar que tengas una excelente experiencia en Android Studio, se basa en las funciones principales de Gemini que puedes experimentar hoy en día. Estudio de inteligencia artificial de Google.
Específicamente exploraremos:
- Convierta diseños en código de interfaz de usuario: Convierta una imagen simple de la interfaz de usuario de su aplicación en código de trabajo.
- Correcciones de interfaz de usuario inteligente con Gemini: Obtenga sugerencias sobre cómo mejorar o arreglar su interfaz de usuario.
- Integración de sugerencias de Gemini en su aplicación: Simplifique tareas complejas y optimice la experiencia del usuario con instrucciones personalizadas.
Nota: Google AI Studio ofrece varias plantillas de Gemini para uso general, mientras que Android Studio utiliza una versión personalizada de Gemini que ha sido optimizada específicamente para tareas de desarrollador. Si bien esto significa que estos modelos genéricos pueden no ofrecer el mismo conocimiento profundo de Android que Gemini en Android Studio, brindan un campo de juego divertido y atractivo para experimentar y obtener información sobre el potencial de la IA en el desarrollo de Android.
Experimento 1: convertir diseños en código de interfaz de usuario
Primero, convertir los proyectos en Para componer Código de interfaz de usuario: abra la sección de mensajes de chat de Google AI Studio, cargue una imagen de la pantalla de interfaz de usuario de su aplicación (consulte el ejemplo a continuación) e ingrese el siguiente mensaje:
“Actúe como desarrollador de aplicaciones de Android. Para la imagen proporcionada, use Jetpack Compose para crear la pantalla de modo que la vista previa de Compose sea lo más cercana posible a esta imagen. También asegúrese de incluir importaciones y usar Material3”.
Luego, haga clic en “Ejecutar” para ejecutar la consulta y ver el código generado. Puede copiar el resultado generado directamente a un nuevo archivo en Android Studio.
Imagen cargada: maqueta del diseñador de la pantalla de detalles de una aplicación
Estudio de inteligencia artificial de Google Mensaje de chat personalizado: Imagen → Redactar
Ejecutar el código generado (con correcciones menores) en Estudio Android
Con este experimento, Gemini pudo inferir detalles de la imagen y generar los elementos de código correspondientes. Por ejemplo, la imagen de pantalla de detalles de la planta original presentaba una sección de “Instrucciones de cuidado” con un ícono expandible: el código generado por Gemini incluía una pestaña expandible específicamente para las instrucciones de cuidado de la planta, que mostraba su comprensión contextual y capacidades de generación de código.
Experimento 2: correcciones de la interfaz de usuario inteligente con Gemini en AI Studio
Inspirado por “Círculo para buscar“, otro experimento divertido que puedes probar es “encerrar en un círculo” las áreas problemáticas en una captura de pantalla, junto con el contexto de código de Redacción relevante, y pedirle a Gemini que sugiera correcciones de código apropiadas.
Puedes explorar este concepto en Google AI Studio:
1. Cargue el código de redacción y la captura de pantalla: Cargue el archivo de código de composición para una captura de pantalla de la interfaz de usuario y una captura de pantalla de vista previa de la composición, con un contorno rojo que resalta el problema: en este caso, los elementos de la barra de navegación inferior que deben estar espaciados uniformemente.
Ejemplo: vista previa con el área del problema resaltada
Google AI Studio: correcciones de interfaz de usuario inteligente con Gemini
Ejemplo: código generado correcto desde Gemini
Ejemplo: vista previa con correcciones aplicadas
Experimento 3: integración de sugerencias de Gemini en su aplicación
Gemini puede facilitar la experimentación y el desarrollo de funciones de aplicaciones personalizadas. Imagine que desea crear una función que brinde a los usuarios ideas de recetas basadas en una imagen de los ingredientes que tienen a mano. En el pasado, esto habría implicado tareas complejas como albergar una biblioteca de reconocimiento de imágenes, entrenar su modelo de receta de ingredientes y administrar la infraestructura para respaldarlo todo.
Ahora, con Gemini, puedes lograrlo con un consejo sencillo y personalizado. Veamos cómo agregar esta función “Ayudante de cocina” en su aplicación de Android como ejemplo:
1. Explorar el Galería de consejos de Géminis: Consulte sugerencias de muestra o cree las suyas propias. Usaremos el mensaje “Ayudante de cocina”.
La inteligencia artificial de Google para desarrolladores: Galería de sugerencias
2. Abrir y experimentar Estudio de inteligencia artificial de Google: Pruebe el mensaje con diferentes imágenes, configuraciones y plantillas para asegurarse de que la plantilla responda como se esperaba y que el mensaje se alinee con sus objetivos.
Estudio de inteligencia artificial de Google: mensaje del asistente de chef
3. Generar el código de integración– Una vez que esté satisfecho con el desempeño de la solicitud, haga clic en “Obtener código” y seleccione “Android (Kotlin)”. Copie el fragmento de código generado.
Estudio de inteligencia artificial de Google: obtener el código – Android (Kotlin)
4. Integre la API de Gemini en Android Studio: Abra su proyecto de Android Studio. Puedes usar el archivo nuevo modelo de aplicación API Gemini proporcionado en Android Studio o siga este tutorial. Pegue el código de solicitud generado copiado en su proyecto.
Eso es todo: su aplicación ahora tiene una función Cook Helper funcional basada en Gemini. Le invitamos a experimentar con varios consejos de muestra o incluso a crear sus propios consejos personalizados para mejorar su aplicación de Android con potentes funciones de Gemini.
Nuestro enfoque para llevar la IA a Android Studio
Si bien estos experimentos son prometedores, es importante recordar que la tecnología del modelo de lenguaje grande (LLM) todavía está evolucionando y estamos aprendiendo a lo largo del camino. Los LLM pueden ser no deterministas, lo que significa que a veces pueden producir resultados inesperados. Es por eso que estamos adoptando un enfoque cauteloso y reflexivo para integrar las capacidades de IA en Android Studio.
Nuestra filosofía hacia la IA en Android Studio es apoyar al desarrollador y garantizar que se mantenga “informado”. En particular, cuando la IA hace sugerencias o escribe código, queremos que los desarrolladores puedan revisar cuidadosamente el código antes de ponerlo en producción. Por eso, por ejemplo, la nueva Consejos de código La función Canary abre automáticamente una vista diferencial para permitir a los desarrolladores obtener una vista previa de cómo Gemini propone cambiar el código, en lugar de aplicar los cambios directamente a ciegas.
Queremos asegurarnos de que estas características, como Gemelos en Android Studio En sí mismos, están minuciosamente probados, son confiables y verdaderamente útiles para los desarrolladores antes de insertarlos en el IDE.
¿Que sigue?
Lo invitamos a probar estos experimentos y compartir con nosotros sus consejos y ejemplos favoritos utilizando el #AndroidGeminiEra Etiquétanos en X y LinkedIn mientras continuamos explorando juntos esta emocionante frontera. Además, asegúrese de seguir al desarrollador de Android en LinkedIn, medio, YouTubeO X para más actualizaciones! La IA tiene el potencial de revolucionar la forma en que creamos aplicaciones para Android y estamos ansiosos por ver qué podemos crear juntos.
