Aplicación con Angular, Ionic y PHP Por: Luis Salvador.

Presentación del tema: "Aplicación con Angular, Ionic y PHP Por: Luis Salvador."— Transcripción de la presentación:

1 Aplicación con Angular, Ionic y PHP Por: Luis Salvador

2 Utilizar UsbWebServer 8.6

3 Extraer UsbwebServer

4 Iniciar el UsbWebServer 1. – Ejecutar “UsbWebServer”

5 Ejecutar UsbWebServer 1. –Seleccionar botón “Ejecutar”

6 Configurar UsbWebServer 1. –Utilizar puerto “8090” 2. –Selecionar el botón “Guardar”

7 Confirmar configuración de UsbWebServer 1. –Seleccionar el botón “Aceptar”

8 Verificar funcionamiento de servidor UsbWebServer 1. –Observar ejecución de “Apache” 2. –Observar ejecución de “Mysql”

9 Verificar versión de PHP, Mysql y Apache 1. –Verificar versiones de PHP: 5.4.17, MySql: 5.6.13 y Apache: 2.4.6. 1. –Ingresar a la dirección “http://127.0.0.1:8090”

10 Herramienta: Netbeans 8.1

11 Crear una aplicación PHP 1. –Crear proyecto PHP 2. –Crear aplicación “PHP Aplication” 3. –Seleccionar botón “Siguiente”

12 Configurar proyecto PHP 3. –Seleccionar versión “PHP 5.4” 1. –Especificar nombre del proyecto “ionic” 2. –Especificar ubicación del proyecto “ionic” 4. –Seleccionar ubicación de los metadatos

13 Registrar configuración de proyecto PHP 1. –Seleccionar botón “Siguiente”

14 Indicar url del proyecto 1. –Especificar “Run As:” 2. –Especificar “Project URL:” 3. –Seleccionar botón “Siguiente>”

15 No utilizar Frameworks 1. –Seleccionar botón “Siguiente”

16 Terminar configuración de proyecto PHP 1. –Seleccionar botón “Terminar”

17 Descargar biblioteca de IONIC

18 Seleccionar enlace

19 Mover ionic a la carpeta del proyecto 1. –Mover paquete “ionic v1.3.1”

20 Descomprimir biblioteca IONIC 1. –Seleccionar archivo “ionic-v1.3.1” dentro de carpeta UsbWebserver v8.6/root/ionic 2. –Seleccionar botón “Extraer”

21 Observar directorio de trabajo 1. –Observar directorio “ionic-v1.3.1”

22 Crear archivo HTML 1. –Especificar nombre de archivo “index”

23 Terminar creación de archivo index.html 1. –Seleccionar botón “Terminar”

24 Añadir bibliotecas y módulo para manejo de ionic 1. –Especificar nombre de aplicación: “mpai” 2. –Especificar hoja de estilos: “ionic.css” 3. –Especificar biblioteca: “ionic.bundle.js” 5. –Especificar módulo: “miApp” 6. –Incluir uso de ‘ionic’ 7. –Incluir código de prueba 4. –Especificar nombre del controlador: “control1”

25 Probar código 1. –Seleccionar archivo de prueba: “index.html” 2. –Seleccionar botón: “Aceptar”

26 Observar resultado 1. –Observar texto sin llaves “Hola ionic”

27 Diseñar la interface básica 1. –Insertar un panel: “ion-pane” 2. –Insertar un barra de cabecera: “ion-header-bar” 3. –Insertar un título de clase “title” 3. –Insertar un área de contenido “ion-content” 4. –Insertar formulario y una tabla 5. –Insertar una barra inferior: “ion-footer-bar”

28 Probar la interface 1. –Observar barra de cabecera 2. –Observar área de contenido 3. –Observar barra de mensaje

29 Alinear el título a la izquierda 1. –Usar align-title para alinear el título

30 Agregar un control de ingreso de datos 1. –insertar un elemento de clase “list” 2. –insertar una etiqueta de clase “item” 3. –insertar una etiqueta input de tipo “text” 4. –insertar una función de validación “validar…()”

31 Insertar un botón para añadir registros 1. –insertar un elemento de clase “buttons” 2. –insertar una etiqueta button de clase “button” 3. –insertar una etiqueta i de clase “ion-android-add” 4. –insertar el texto “Agregar

32 Añadir función agregar() 1. –insertar un elemento ng-click y la función “agregar()”

33 Añadir la tabla y la implementación de las funciones agregar y ordenar 1. –insertar cabecera con la llamada a las función ordenar() 2. –insertar filtro para ordenar: “tipoOrdenar” 3. –insertar ítems a despelgar 4. –inicializar variables 5. –implementar función ordenar 6. –implementar función agregar 7. –es necesario crear un nuevo objeto cada inserción

34 Listar datos en una nueva ventana

35 Añadir lista a contenido de la ventana

36 Implementar el control de la ventana 1. –insertar la variable “$ionicModal”

37 Formatear ventana a pantalla completa 1. – estilo para el modal

38 Agregar mensaje a barra inferior

39 Insertar botón para envío de datos

40 Estrategia para evitar doble ingreso 1.–insertar una línea de código JavaScript: La repetición se inserta en blanco 2.- no permitir el ingreso de datos en blanco

41 Implementar el servidor

42 Código del servidor

43 Código del envío de la lista 1. –insertar variable $http 2. –insertar función de envío 3. –insertar función de recepción

44 Manejo de localStorage 1. –descargar e incluir biblioteca ngStorage.min.js

45 Incluir botones de prueba en la barra inferior 1. –incluir botones de prueba en la barra ion-footer-bar

46 Implementar funciones 1. –eliminarLista.- borra la lista 2. –agregarLocal.- almacena la lista en $localStorage.lista 3. –recuperarLocal.- recupera la lista de $localStorage.lista 4. –elimina la variable $localStorage.lista

47 Probar funcionalidad.- Ingresando datos 2. –presionar botón de ingreso 1. –ingresar varios datos

48 Almacenar la lista localmente y limpiar de memoria 2. –cerrar la lista después de observar 3. –almacenar la lista en forma local 1. –desplegar la lista 4. –eliminar lista

49 Cerrar el navegador o la pestaña y observar 1. –desplegar la lista, observar y cerrar 2. –cerrar pestaña y volver a abrir 3. –recuperar lista local 4. –mostrar lista 5. –observar y cerrar

50 Uso de factory Validación 1. –especificar método de validación en cada campo

51 Especificar uso de factory en el controlador 1. –especificar uso de factory ‘Validacion’ en los parámetros de la función del controlador

52 Definir métodos de validación usando el factory

53 Agregar validaciones en el método agregar 1. –especificar método Validacion.cedula

54 Especificar un factory elemental

55 Añadir el primer atributo y método al factory 1. –especificar atributo en el factory 2. –especificar método en el factory

56 Añadir otros métodos y atributos al factory

57 Comprobar el funcionamiento

58 Creación de carpetas 1. –especificar una barra de navegación sin contenido 2. –especificar las carpetas que se deseen manejar 3. –especificar el ui-sref que será utilizado para llamar a la vista desde el botón

59 Eliminar el ion-header-bar y crear una vista con el anterior 1. Eliminar ion-header-bar Poner sus botones en el ion-footer-bar

60 Nuevo ion-footer-bar

61 Añadir vista principal de carpeta info 1. Agregar botón para llamar a vista secundaria

62 Definir vista secundaria de carpeta info 1. Agregar botón para volver a vista principal

63 Añadir ruteo para las tres vistas 1. El nombre de la vista secundaria debe ser el mismo que el de la vista principal

64 Observar el resultado 1. Seleccionar carpeta Información

65 Carpeta Información.- Vista Principal 1. Seleccionar botón “Más Info…”

66 Carpeta Información.- Vista Secundaria 1. Seleccionar botón “Retornar”

67 Añadir menú lateral 1. Añadir 2. Añadir para el contenido 3. Añadir para ubicar el botón de apertura 4. Añadir método para abrir menú

68 Añadir sección con los elementos del menú 1. Añadir 2. Añadir para el título 3. Añadir para los elementos del menú 3. Especificar método abrirPagina(ítem.id) en cada botón del menú

69 Definir ventana modal para desplegar en el menú 1. Añadir botón para cerrar ventana 3. Añadir imágenes de acuerdo a opción de menú usando variable {{pagina}} 2. Añadir título a cada ventana {{tituloVentanaMenu}}

70 Implementar métodos 1. Definir variables para menú y páginas 2. Definir métodos 3. Definir ventana modal y sus métodos

71 Observar el resultado 1. Opción de navegación para desplegar menú 2. Botones para desplegar ventana modal

72 Despliegue de la ventana modal 1. Botón de cierre de la ventana modal