conceptualización y diseño de una app híbrida para amigos...
TRANSCRIPT
![Page 1: Conceptualización y diseño de una app híbrida para Amigos ...openaccess.uoc.edu/webapps/o2/bitstream/10609/42626... · 2. El botón llama el controlador de Angular, que a su vez](https://reader034.vdocuments.co/reader034/viewer/2022050502/5f949ec4cc8c64540d239357/html5/thumbnails/1.jpg)
CONCEPTUALIZACIÓN Y DISEÑO DE UNA APP. HÍBRIDA PARA AMIGOS DE SILVA ONGD
Autor: Andrés Camacho Verdejo Consultor: Sergio Schvarstein Liuboschetz Profesor: David García Solórzano
![Page 2: Conceptualización y diseño de una app híbrida para Amigos ...openaccess.uoc.edu/webapps/o2/bitstream/10609/42626... · 2. El botón llama el controlador de Angular, que a su vez](https://reader034.vdocuments.co/reader034/viewer/2022050502/5f949ec4cc8c64540d239357/html5/thumbnails/2.jpg)
• Amigos de Silva • Estudio de las necesidades • Solución Front-end • Árbol de navegación • Diseño de la App
Conceptualización y diseño de una App. híbrida para Amigos de Silva ONGD
Andrés Camacho Verdejo
Índice
![Page 3: Conceptualización y diseño de una app híbrida para Amigos ...openaccess.uoc.edu/webapps/o2/bitstream/10609/42626... · 2. El botón llama el controlador de Angular, que a su vez](https://reader034.vdocuments.co/reader034/viewer/2022050502/5f949ec4cc8c64540d239357/html5/thumbnails/3.jpg)
Amigos de Silva ONGD
La Organización El Proyecto
• ONG para el desarrollo que trabaja en la Región de Afar, Etiopía
• Financiación privada/pública • Cerca de 500 socios que
aportan una cuota mensual/anual para financiar los proyectos
• Sedes en España • Se diferencia por realizar un
gestión empresarial de los proyectos.
• Aplicación móvil • Mínimo Android/iOS • Privada, sólo para socios • Enfocada en los socios • Aportar información sobre los
proyectos • Mantener la “visión” de gestión
empresarial de los proyectos • Proporcionar herramientas de
transparencia y rendición de cuentas hacia los socios.
![Page 4: Conceptualización y diseño de una app híbrida para Amigos ...openaccess.uoc.edu/webapps/o2/bitstream/10609/42626... · 2. El botón llama el controlador de Angular, que a su vez](https://reader034.vdocuments.co/reader034/viewer/2022050502/5f949ec4cc8c64540d239357/html5/thumbnails/4.jpg)
Estudio de las necesidades
Personal de la ONGD
• Ampliar base de socios • Marcar diferencia con otras
ONGs • Acercar a los socios a los
procesos internos de la ONG • Ganar difusión • Mantener a los socios
informados • Fidelizar socios • Lanzar campañas de
promoción
Socios
• Saber cómo se gestiona mi donación
• Actualidad de los proyectos en curso
• Resultados de proyectos pasados, evaluación.
• Gestionar mi colaboración • Contactar con miembros de la
Organización. • Acceso a documentación
![Page 5: Conceptualización y diseño de una app híbrida para Amigos ...openaccess.uoc.edu/webapps/o2/bitstream/10609/42626... · 2. El botón llama el controlador de Angular, que a su vez](https://reader034.vdocuments.co/reader034/viewer/2022050502/5f949ec4cc8c64540d239357/html5/thumbnails/5.jpg)
Solución Front-end
Aplicación Híbrida
• Cross platform. • Basado completamente
en programación web • Acceso al hardware del
dispositivo • Facilidad de desarrollo • Open Source
![Page 6: Conceptualización y diseño de una app híbrida para Amigos ...openaccess.uoc.edu/webapps/o2/bitstream/10609/42626... · 2. El botón llama el controlador de Angular, que a su vez](https://reader034.vdocuments.co/reader034/viewer/2022050502/5f949ec4cc8c64540d239357/html5/thumbnails/6.jpg)
Apache Cordova
• Cordova /PhoneGap son el framework que aloja el navegador web y que sirve de comunicador entre el terminal y nuestro código.
![Page 7: Conceptualización y diseño de una app híbrida para Amigos ...openaccess.uoc.edu/webapps/o2/bitstream/10609/42626... · 2. El botón llama el controlador de Angular, que a su vez](https://reader034.vdocuments.co/reader034/viewer/2022050502/5f949ec4cc8c64540d239357/html5/thumbnails/7.jpg)
Ionic
• Es un framework que aporta a HTML un conjunto de controles para la interfaz que son comunes en las aplicaciones móviles.
• Estos componentes están construidos con una combinación de CSS, HTML y JavaScript, y se comportan como los controles nativos
![Page 8: Conceptualización y diseño de una app híbrida para Amigos ...openaccess.uoc.edu/webapps/o2/bitstream/10609/42626... · 2. El botón llama el controlador de Angular, que a su vez](https://reader034.vdocuments.co/reader034/viewer/2022050502/5f949ec4cc8c64540d239357/html5/thumbnails/8.jpg)
1. El usuario toca un botón (Lo que es un componente de Ionic).
2. El botón llama el controlador de Angular, que a su vez llama a Cordova a través de la API de JavaScript.
3. Cordova se comunica con el dispositivo utilizando el SDK nativo, y solicita el acceso a un controlador nativo, por ejemplo la cámara.
4. El dispositivo abre la aplicación de la cámara (o pide permiso si es necesario), y el usuario es capaz de tomar una foto.
5. Cuando el usuario confirma la foto, la aplicación de la cámara se cierra y devuelve los datos de la imagen a Cordova.
6. Cordova pasa los datos de la imagen de nuevo al controlador de Angular.
7. Finalmente el usuario visualiza la imagen dentro de la interfaz gráfica de Ionic.
¿Cómo interactuan Ionic, Angular y Cordova?
Ionic Angular Cordova
Cordova Angular Ionic
![Page 9: Conceptualización y diseño de una app híbrida para Amigos ...openaccess.uoc.edu/webapps/o2/bitstream/10609/42626... · 2. El botón llama el controlador de Angular, que a su vez](https://reader034.vdocuments.co/reader034/viewer/2022050502/5f949ec4cc8c64540d239357/html5/thumbnails/9.jpg)
Árbol de navegación
![Page 10: Conceptualización y diseño de una app híbrida para Amigos ...openaccess.uoc.edu/webapps/o2/bitstream/10609/42626... · 2. El botón llama el controlador de Angular, que a su vez](https://reader034.vdocuments.co/reader034/viewer/2022050502/5f949ec4cc8c64540d239357/html5/thumbnails/10.jpg)
Sección Noticias
![Page 11: Conceptualización y diseño de una app híbrida para Amigos ...openaccess.uoc.edu/webapps/o2/bitstream/10609/42626... · 2. El botón llama el controlador de Angular, que a su vez](https://reader034.vdocuments.co/reader034/viewer/2022050502/5f949ec4cc8c64540d239357/html5/thumbnails/11.jpg)
Sección Noticias
![Page 12: Conceptualización y diseño de una app híbrida para Amigos ...openaccess.uoc.edu/webapps/o2/bitstream/10609/42626... · 2. El botón llama el controlador de Angular, que a su vez](https://reader034.vdocuments.co/reader034/viewer/2022050502/5f949ec4cc8c64540d239357/html5/thumbnails/12.jpg)
Sección Proyectos
![Page 13: Conceptualización y diseño de una app híbrida para Amigos ...openaccess.uoc.edu/webapps/o2/bitstream/10609/42626... · 2. El botón llama el controlador de Angular, que a su vez](https://reader034.vdocuments.co/reader034/viewer/2022050502/5f949ec4cc8c64540d239357/html5/thumbnails/13.jpg)
Sección Proyectos
![Page 14: Conceptualización y diseño de una app híbrida para Amigos ...openaccess.uoc.edu/webapps/o2/bitstream/10609/42626... · 2. El botón llama el controlador de Angular, que a su vez](https://reader034.vdocuments.co/reader034/viewer/2022050502/5f949ec4cc8c64540d239357/html5/thumbnails/14.jpg)
Sección Transparencia
![Page 15: Conceptualización y diseño de una app híbrida para Amigos ...openaccess.uoc.edu/webapps/o2/bitstream/10609/42626... · 2. El botón llama el controlador de Angular, que a su vez](https://reader034.vdocuments.co/reader034/viewer/2022050502/5f949ec4cc8c64540d239357/html5/thumbnails/15.jpg)
Sección Equipo
![Page 16: Conceptualización y diseño de una app híbrida para Amigos ...openaccess.uoc.edu/webapps/o2/bitstream/10609/42626... · 2. El botón llama el controlador de Angular, que a su vez](https://reader034.vdocuments.co/reader034/viewer/2022050502/5f949ec4cc8c64540d239357/html5/thumbnails/16.jpg)
Sección Mi Perfil
![Page 17: Conceptualización y diseño de una app híbrida para Amigos ...openaccess.uoc.edu/webapps/o2/bitstream/10609/42626... · 2. El botón llama el controlador de Angular, que a su vez](https://reader034.vdocuments.co/reader034/viewer/2022050502/5f949ec4cc8c64540d239357/html5/thumbnails/17.jpg)