You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -12,103 +13,38 @@ Este proyecto fue generado con las siguientes caracteristicas:
12
13
|Java JDK |`20`|
13
14
|Gradle |`9.0.0`|
14
15
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.
16
+
## Important note
17
+
18
+
The source code documentation and project structure were generated using the compodoc library, which generates a static web page that can be deployed on a server. In this case, it was deployed on GitHub. [Documentation](https://dev-shelvin-batista.github.io/ionic-sqlite-tasks/)
19
+
20
+
## Instructions for running on a PC
21
+
22
+
To run the frontend project, follow these steps:
23
+
24
+
- Clone the project, either with the command git clone `https://github.com/dev-shelvin-batista/ionic-sqlite-tasks.git` or using a GitHub graphical tool.
25
+
26
+
- After cloning the repository, install the node dependencies using the command `npm install` inside the `ionic-sqlite-tasks` project folder. If an error occurs, add the --force option.
27
+
28
+
- Run the command `ng serve` to start the server. By default, the url `http://localhost:8100` is used.
29
+
30
+
- In the browser, you can emulate how it would look on a mobile phone, but in this case, the database would not work, as it is a native dependency. That is why local storage is used in this test to perform tests from a PC.
31
+
32
+
## Instructions for running with a cell phone
33
+
34
+
To run the frontend project, follow these steps:
35
+
36
+
- Ensure that Java JDK, Gradle, and Android Studio are installed and configured on your PC.
37
+
38
+
- Clone the project, either with the command git clone `https://github.com/dev-shelvin-batista/ionic-sqlite-tasks.git` or using a GitHub graphical tool.
39
+
40
+
- After cloning the repository, install the node dependencies using the command `npm install` inside the `ionic-sqlite-tasks` project folder. If an error occurs, add the --force option.
41
+
42
+
- Your mobile phone must be in developer mode. To check this, select the Settings option on your mobile phone, find the About option, and select the mobile phone version or model six times.
43
+
44
+
- After activating developer mode, USB debugging must be enabled in Developer Options. The location of this option varies depending on the brand and model of the mobile phone being used.
45
+
46
+
Verify that the mobile phone connected via USB is recognized as a device by running the command `ionic cordova run android --list` in a command terminal. This command generates two types of devices: Connected via cable or Wi-Fi and Emulators. In this case, the mobile phone should appear in the first list.
47
+
48
+
- If there is only one device connected in the list above, you can run the command `ionic cordova run android --device`. But if there is more than one device connected, run the command `ionic cordova run android --target=<device_id>`. <device_id> is the ID generated in the list in the previous point. If an error occurs, use the **--verbose** option at the end of the command to display detailed information about the execution, the error, and its cause.
49
+
50
+
- When you run the above command, the application will be compiled and installed on your mobile phone, eliminating the need to compile the project, find the apk file, and transfer it to your mobile phone to install the application. When you install the application for the first time, you will be asked to authorize the installation of the application on your mobile phone. You must select the OK button each time it is displayed for installation.
0 commit comments