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

Utilizar UsbWebServer 8.6

Extraer UsbwebServer

Iniciar el UsbWebServer 1. – Ejecutar “UsbWebServer”

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

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

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

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

Verificar versión de PHP, Mysql y Apache 1. –Verificar versiones de PHP: , MySql: y Apache: –Ingresar a la dirección “

Herramienta: Netbeans 8.1

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

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

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

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

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

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

Descargar biblioteca de IONIC

Seleccionar enlace

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

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

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

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

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

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”

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

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

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”

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

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

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…()”

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

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

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

Listar datos en una nueva ventana

Añadir lista a contenido de la ventana

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

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

Agregar mensaje a barra inferior

Insertar botón para envío de datos

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

Implementar el servidor

Código del servidor

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

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

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

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

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

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

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

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

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

Definir métodos de validación usando el factory

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

Especificar un factory elemental

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

Añadir otros métodos y atributos al factory

Comprobar el funcionamiento

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

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

Nuevo ion-footer-bar

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

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

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

Observar el resultado 1. Seleccionar carpeta Información

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

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

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ú

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ú

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}}

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

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

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