|
1 | | -# app-tasks |
| 1 | +# Proyecto |
| 2 | + |
| 3 | +Este proyecto fue generado con las siguientes caracteristicas: |
| 4 | +| |Versión | |
| 5 | +|----------------|-------------------------------| |
| 6 | +|Angular|`20.0.0` | |
| 7 | +|NPM |`11.5.2` | |
| 8 | +|Node.js |`22.14.0`| |
| 9 | +|Ionic CLI |`5.4.6`| |
| 10 | +|SQLite || |
| 11 | +|Android Studio |`21.0.4`| |
| 12 | +|Java JDK |`20`| |
| 13 | +|Gradle |`9.0.0`| |
| 14 | + |
| 15 | +## Cambios Realizados |
| 16 | + |
| 17 | + - Se agregó tanto en el componente que lista las tareas y categorías: |
| 18 | + |
| 19 | + 1. Un campo de texto que realiza una búsqueda por la descripción. |
| 20 | + 2. Un componente llamado `ion-refresher` que permite generar nuevamente el listado de datos cuando se desliza la pantalla hacia abajo estando al principio del scroll. Muchas aplicaciones usan este componente al mostrar un listado de datos. |
| 21 | + 3. Un componente llamado `ion-infinite-scroll` que permite realizar la paginación del listado, agregando 10 registros mas al listado cuando se desliza hacia lo ultimo del scroll del componente. Muchas aplicaciones usan este componente al mostrar un listado de datos. |
| 22 | + 4. Los componentes `ion-action-sheet` y `ion-item-sliding` a los componentes de listado con el objetivo de mostrar opciones que el usuario pueda seleccionar. En este caso fueron `Editar` y `Eliminar` para el listado de categorías y `Completar` y `Eliminar` para el listado de tareas. |
| 23 | + 5. Un componente llamado `ion-fab` que permite generar un botón flotante, el cual ejecuta un metodo que se configure para relizar alguna acción, por ejemplo mostrar un listado de acciones (por ejemplo listado de opciones: Categorías, Nueva Tarea) o mostrar un modal (Registrar categoría). Muchas aplicaciones usan este componente al mostrar un listado de datos. |
| 24 | + - Se agregó la verificación del botón atrás del teléfono celular para generar una alerta de confirmación en el componente que lista las tareas, ya que este es la pagina inicial de la aplicación. Si el usuario selecciona el botón `Aceptar` la aplicación se cierra, sino solo se cierra la ventana de confirmación. Estas alertas se agregaron como un servicio con métodos reutilizables mediante programación orientada a objetos. |
| 25 | + - En los modal que registran una tarea y una categoría el botón `Guardar` se activa si los campos de texto han sido llenados y han seleccionado alguna opción en los listados. Se pudo haber optado por renderizar o no el botón `Guardar` cumpliendo dichas condiciones pero en este caso solo se desactiva y activa. |
| 26 | + |
| 27 | +## Instrucciones Generales |
| 28 | + |
| 29 | +- Descargar e instalar node.js para ejecutar comandos npm |
| 30 | +- Instalar Angular CLI con el siguiente comando `npm install -g @angular/cli` |
| 31 | +- Clonar proyecto desde el repositorio en GitHub con el comando `git clone https://github.com/dev-shelvin-batista/app-tasks.git` o bien puede usar la herramienta visual de GitHub que le permita clonar el proyecto en su equipo. |
| 32 | +- Después de clonar el proyecto acceder a la carpeta con el comando `cd app-tasks` desde una terminal de comandos. |
| 33 | +- Instalar las dependencias de node usa el comando `npm install` |
| 34 | +- Ejecutar comando `ionic serve` para verificar la app en el navegador. Por defecto se usa la url `http://localhost:8100/`. |
| 35 | + |
| 36 | +## Configuraciones Importantes |
| 37 | + |
| 38 | +### Configuración de Java JDK |
| 39 | + |
| 40 | + - Se debe descargar Java JDK de internet e instalarlo en su equipo. |
| 41 | + - Verificar si se agregó la variable de entorno `JAVA_HOME` después de la instalación. Esto se hace siguiendo las siguientes instrucciones: |
| 42 | + 1. Abrir el explorador de Windows. |
| 43 | + 2. Presionar click derecho en `Este Equipo` y seleccionar la opción `Propiedades`. |
| 44 | + 3. En el listado de la parte derecha seleccionar la opción `Configuración avanzada del sistema` |
| 45 | + 4. Se abre una ventana con el titulo `Propiedades del sistema`. En esta ventana se selecciona el botón `Variables de entorno` de la pestaña `Opciones avanzadas` |
| 46 | + 5. Se abre otra ventana con las variables de entorno del usuario actual y del sistema. |
| 47 | + 6. Verificar si esta agregada la variable`JAVA_HOME` |
| 48 | + - Si el instalador no agregó la variable de entorno `JAVA_HOME` se debe agregar manualmente. Para esto se debe hacer los mismos pasos del punto anterior y en ambas secciones se siguen las siguientes instrucciones: |
| 49 | + 1. Seleccionar el botón `Nueva...`y se abre una ventana llama `Nueva variable de usuario` |
| 50 | + 2. Se debe agregar en el campo `nombre de la` el valor `JAVA_HOME` y en el campo `Valor de la` el valor `C:\Program Files\Java\jdk-20`. El 20 es la versión de JDK usada en la demostración. Se debe reemplazar por la versión en el equipo a verificar. |
| 51 | + 3. Se selecciona el botón `Aceptar` para guardar los datos. |
| 52 | + |
| 53 | +### Configuración de Gradle |
| 54 | + |
| 55 | +Esta herramienta es necesaria para la compilación de la app en Android. |
| 56 | + |
| 57 | + - Se debe descargar gradle de internet. Es un archivo comprimido zip. [Descargar](https://gradle.org/next-steps/?version=9.0.0&format=all) |
| 58 | + - Extraer el archivo comprimido en el disco local C. Se genera una carpeta llamada `gradle-9.0.0`. Renombrar esta carpeta a `Gradle`. |
| 59 | + - Se debe agregar esta ruta en la variable de entorno llamada `Path`. Para hacer esto se deben seguir los siguientes pasos. |
| 60 | + 1. Abrir el explorador de Windows. |
| 61 | + 2. Presionar click derecho en `Este Equipo` y seleccionar la opción `Propiedades`. |
| 62 | + 3. En el listado de la parte derecha seleccionar la opción `Configuración avanzada del sistema` |
| 63 | + 4. Se abre una ventana con el titulo `Propiedades del sistema`. En esta ventana se selecciona el botón `Variables de entorno` de la pestaña `Opciones avanzadas` |
| 64 | + 5. Se abre otra ventana con las variables de entorno del usuario actual y del sistema. |
| 65 | + 6. En ambos tipos de variables se selecciona la opción `Editar`, el cual abre una ventana llamada `Editar variable de entorno` y se agrega al final la ruta de la carpeta que se descomprimió en los pasos anteriores, es decir la ruta `C:\Gradle\bin`. |
| 66 | + 7. Se selecciona el botón `Aceptar` para guardar los datos. |
| 67 | + 8. Se puede verificar si quedó agregado correctamente ejecutando el comando `gradle --version` en una terminal de comandos. Se genera un texto con la versión de gradle. |
| 68 | + |
| 69 | +### Configuración de Android Studio |
| 70 | + |
| 71 | +Para instalar y configurar el editor Android Studio se debe seguir los pasos anteriores. Si ya lo ha hecho puede omitirlos. |
| 72 | + |
| 73 | + - Se debe descargar el editor Android Studio de internet e instalarlo en su equipo. |
| 74 | + - - Verificar si se agregó la variable de entorno `ANDROID_HOME` después de la instalación. Esto se hace siguiendo las siguientes instrucciones: |
| 75 | + 1. Abrir el explorador de Windows. |
| 76 | + 2. Presionar click derecho en `Este Equipo` y seleccionar la opción `Propiedades`. |
| 77 | + 3. En el listado de la parte derecha seleccionar la opción `Configuración avanzada del sistema` |
| 78 | + 4. Se abre una ventana con el titulo `Propiedades del sistema`. En esta ventana se selecciona el botón `Variables de entorno` de la pestaña `Opciones avanzadas` |
| 79 | + 5. Se abre otra ventana con las variables de entorno del usuario actual y del sistema. |
| 80 | + 6. Verificar si esta agregada la variable`ANDROID_HOME` |
| 81 | + - Si el instalador no agregó la variable de entorno `ANDROID_HOME` se debe agregar manualmente. Para esto se debe hacer los mismos pasos del punto anterior y en ambas secciones se siguen las siguientes instrucciones: |
| 82 | + 1. Seleccionar el botón `Nueva...`y se abre una ventana llama `Nueva variable de usuario` |
| 83 | + 2. Se debe agregar en el campo `nombre de la` el valor `ANDROID_HOME` y en el campo `Valor de la` el valor `C:\Users\Usuario\AppData\Local\Android\Sdk`. |
| 84 | + 3. Se selecciona el botón `Aceptar` para guardar los datos. |
| 85 | +- Después de verificar la variable de entorno, se debe agregar configurar gradle en Android Studio. Esto se hace siguiendo las siguientes instrucciones: |
| 86 | + 1. Se selecciona la opción `File` del menú principal y la opción `Settings`. |
| 87 | + 2. Se abre una ventana de configuración. |
| 88 | + 3. En la ventana de configuración seleccione la opción `Build, Execution, Deployment`, `Build Tools` y `Gradle`. |
| 89 | + 4. En esta sección se modifica la ruta en el campo `Gradle user home` a `C:/Gradle`. |
| 90 | + |
| 91 | +## Instrucciones para compilar y ejecutar en Android |
| 92 | + |
| 93 | +### Navegador |
| 94 | + |
| 95 | +- Acceder a la carpeta con el comando `cd app-tasks` desde una terminal de comandos. |
| 96 | +- Ejecutar comando `ionic serve` para verificar la app en el navegador. Por defecto se usa la url `http://localhost:8100/`. |
| 97 | +- En el navegador se puede emular como se vería en un teléfono celular pero en este caso no funcionaría la base de datos, ya que esto en un dependencia nativa. Por eso en esta prueba se usa el Local Storage para realizar pruebas desde PC. |
| 98 | + |
| 99 | +### Compilación en Android & Ios |
| 100 | + |
| 101 | +- Acceder a la carpeta con el comando `cd app-tasks` desde una terminal de comandos. |
| 102 | +- Ejecutar el comando `ionic cordova build android` para Android y `ionic cordova build ios` |
| 103 | + |
| 104 | +### Ejecutar app en Android |
| 105 | + |
| 106 | +Para la ejecución de la app se puede realizar de dos formas: con un emulador o un teléfono celular con el modo desarrollador activo y conectado por el puerto USB. Para esta prueba se usó la segunda opción para realizar una prueba real. |
| 107 | + |
| 108 | +- Se debe tener el teléfono celular en modo desarrollador. Para verificar se debe seleccionar la opción Configuración o Ajuste del celular, buscar la opción Acerca de y seleccionar 6 veces la versión o modelo del celular. |
| 109 | +- Después de activar el modo desarrollador, se debe activar la depuración USB en la opción `Opciones de desarrollador`. La ubicación de esta opción varía dependiendo de la marca y el modelo de celular a usar. |
| 110 | +- En la sección `Opciones de desarrollador` se deben activar las opciones `Depuración USB`, `instalar vía USB` y `Depuración USB (ajustes de seguridad)` |
| 111 | +- Verificar si el teléfono celular conectado por USB se reconoce como dispositivo ejecutando en una terminal de comandos ``ionic cordova run android --list``. Con este comando se generan dos tipos de dispositivos: |
| 112 | +Conectados por cable o Wi-fi y Emuladores. Para este caso el teléfono celular debe aparecer en el primer listado. |
| 113 | +- Si en el listado anterior solo hay un dispositivo conectado se puede ejecutar el comando `ionic cordova run android --device`. Pero si hay mas de un dispositivo conectado se ejecuta el comando `ionic cordova run android --target=<device_id>`. <device_id> es el id generado en el listado del punto anterior. Si se genera un error use la opción --verbose al final del comando para que se muestre de manera detallada toda la ejecución, el error y su causa. |
| 114 | +- Al momento de ejecutar el comando anterior se realiza la compilación e instalación en su teléfono celular, evitando así la necesidad de compilar el proyecto, buscar el archivo apk y pasarlo al teléfono celular para instalar la app. En la primera instalación de la app se pedirá autorización de la instalación de la app en su teléfono celular. Se debe seleccionar el botón Aceptar las veces que se muestre esto para la instalación. |
0 commit comments