App con Ejemplos de Jetpack Compose

-


📋 Proyecto de Prácticas - Jetpack Compose

 Comparto repositorio con los ejemplos basicos de blog solo que ahora usando Jetpack Compose, donde realizamos las siguientes practicas:


FuncionalidadEstado
Ejemplos Basicos(suma,par o impar,for)
Cambiar a modo oscuro/manual toggle		✅
✅
Paginación automática en blog✅
Búsqueda En Apis (Pendiente)🔜
Carga de imágenes desde red (en blogs)✅
Autenticación persistente (Pendiente)🔜
Animaciones simples✅
Formulario avanzado con validaciones y snackbar✅
Navegación Drawer elegante✅


Este proyecto es una colección de ejemplos prácticos utilizando Jetpack Compose, pensado como una introducción sólida para el desarrollo de apps modernas en Android.

✅ Funcionalidades Implementadas

1. Login con API

  • Pantalla de Login que consume un API REST.

  • Uso de ViewModel, State, manejo de errores y navegación segura.

2. CRUD de Categorías

  • Listado de categorías consumidas desde API.

  • Crear, ver, editar y eliminar categorías.

  • Confirmaciones y Snackbar de feedback.

3. Modo Oscuro (Dark Mode)

  • Cambio de tema en tiempo real usando botón desde Home.

  • Gestión de tema global usando MaterialTheme.

4. Consumo de API de Blog (con paginación y búsqueda)

  • Listado de publicaciones de un blog en Blogger.

  • Implementación de paginación automática al llegar al final.

  • Búsqueda de publicaciones por palabra clave.

5. Carga de imágenes desde la red

  • Imágenes de autor e imágenes de contenido traídas y mostradas usando AsyncImage de Coil.

6. Autenticación Persistente

  • Mantenimiento de sesión usando DataStore Preferences (guardar token localmente).

7. Animaciones en Compose

  • Animaciones simples aplicadas a formularios y listas (fade in y animación al entrar).

8. Formulario Avanzado

  • Formulario validando:

    • Campos de texto normales

    • Selección de fecha (DatePicker)

    • Selección de opciones (DropdownMenu)

  • Mostrar Snackbar de éxito al enviar.

9. Navigation Drawer

  • Reemplazo de Bottom Navigation por Navigation Drawer.

  • Menú lateral que permite moverse entre todas las pantallas importantes de la app.

10. Cambio de Icono de la App

  • Se configuró un icono personalizado usando un .png propio.

  • Configuración en Image Asset de Android Studio.

🛠️ Tecnologías y Librerías Usadas

  • Kotlin

  • Jetpack Compose

  • Navigation-Compose

  • ViewModel + State Management

  • Retrofit 2 (HTTP client)

  • Coil (Carga de imágenes)

  • Material 3 (Componentes UI)

  • DataStore (Persistencia local)

🚀 ¿Qué sigue?

  • Testing básico de pantallas y ViewModels (pendiente).

  • Optimización de paginación infinita avanzada.

  • Agregar efectos más elaborados (shimmer, transitions).

  • Manejo de errores más completo con Retrofit y Compose.

Repo: https://github.com/carlosdarioio/appletenhtmlJetpackCompose/

Comentarios

Publicar un comentario

Entradas más populares de este blog

Ejemplo de suma Pascal

-
Imagen
Aquí muestro un ejemplo simple de suma en pascal en el cual pide introducir dos números para luego sumarlos y mostrar el resultado : Program P3AE4 (input,output); uses crt; Var num1, num2, total: Integer; Begin writeln('Suma'); writeln('Ingrese el primer numero:'); readln(num1); writeln('Ingrese el segundo numero:'); readln(num2); total:= num1+num2; writeln('El total de la suma es: ',total); readkey; End. Si quiere restar, multiplicar o dividir solo deberían cambiar el símbolo "+" por el deseado. Descargar código: link Turbo Pascal
Read more »

Solucion al error collation desconocida: 'utf8mb4_0900_ai_ci'

-
Imagen
Exportando una base de datos en Ubuntu al querer impórtala por medio de phpmyadmin no se importa y muestra el siguiente error: collation desconocida: 'utf8mb4_0900_ai_ci' Para solucionar el problema y poder importar la base de datos deberás de abrirla por medio de tu editor de código y remplazar el texto " utf8mb4_0900_ai_ci " por " utf8mb4_general_ci " guardas la base de datos y al intentar importarla de nuevo ya te tiene que pasar. Solución hallada en:  https://www.freakyjolly.com/resolved-when-i-faced-1273-unknown-collation-utf8mb4_0900_ai_ci-error/#.X5wu14hKiUk
Read more »

Ejemplo calculando area y perimetro del rectangulo javascript

-
Imagen
En este ejemplo de programacion mostrare en javascript el codigo con el cual se podra calcular el area y perimetro de  un rectangulo. explicando un poco: El área de un cuadrado es igual al cuadrado de la longitud del lado.  El perímetro de un cuadrado es cuatro veces el valor del lado     aqui el codigo   <html> <body> <script> //ingresando base Base=prompt('Ingrese el valor de la Base',''); //Ingresando altura Altura=prompt('Ingrese el valor de la Altura',''); //Calculando Area Area=Base*Altura; //Calculando Perimetro Perimetro=(2*Altura)+(2*Base); //Mostrando resultados alert("El Area del Rectangulo es: "+Area); alert("El Perimetro del Rectangulo es:"+Perimetro); </script> </body> </html> Descargar ejemplo: calculando area y perimetro del rectangulo javascript Javascript
Read more »