Integración de servicios de almacenamiento virtual

Transcripción

1 TRABAJO FIN DE GRADO Integración de servicios de almacenamiento virtual Autor: Pablo Parejo Camacho Tutor: Gregorio Robles 1

2 ÍNDICE Introducción Desarrollo Servidor Desarrollo Cliente Conclusiones 2

3 INTRODUCCIÓN 3

4 MOTIVACIÓN Reciente aparición de distintos servicios de almacenamiento online Limitación por espacio en todos los almacenamientos Uso de múltiples cuentas por generación automática Gran oportunidad de mercado 4

5 onedrive Google Drive - Activos Dropbox MOTIVACIÓN II Usuarios por servicio de almacenamiento online onedrive Google Drive - Activos Dropbox

6 OBJETIVOS Integrar varios servicios de almacenamiento en una sola aplicación Decidimos integrar sólo Dropbox y Google Drive por número de usuarios Para el usuario, esta agrupación será transparente Hacer uso de las tecnologías más avanzadas en desarrollo web Mantener un flujo de trabajo profesional 6

7 METODOLOGÍA DE TRABAJO Utilizamos GIT para mantener un flujo de trabajo adecuado GIT: sistema de control de versiones Permite guardar todos nuestros cambios y avances Podemos retroceder cuando queramos y mantener versiones separadas de nuestro trabajo (branches) 7

8 DESARROLLO SERVIDOR Introducción a Django Luchando contra las APIs OAuth2 Dropbox y Google Drive Creando un API Estructura del servidor 8

9 DJANGO The web framework for perfectionists with deadlines. Construido en Python y partícipe de su filosofía Nos permite centrarnos en nuestra aplicación y obviar lo repetitivo Basado en el Patrón MVC: Modelo: Información que manejamos Controlador: Donde reside la lógica y puente de comunicación entre modelo y vista Vista: Representación de los datos ofrecidos por el controlador 9

10 LUCHANDO CONTRA LAS APIS OAuth2 Permite a un usuario autorizar a una aplicación el acceso a sus datos Tanto Dropbox como Google Drive lo implementan El usuario podrá revocar la autorización cuando lo desee 10

11 LUCHANDO CONTRA LAS APIS OAuth2 Redirección a URL de autorización Usuario Django Token de acceso Redirección a Petición URL de al la API aplicación autorización con token? Login y autorización Respuesta Servicio 11

12 LUCHANDO CONTRA LAS APIS Dropbox y Google Drive SDKs de desarrollo en Python Permiten abstracción de los detalles del API Documentación y ejemplos muy útiles 12

13 ESTRUCTURA DEL SERVIDOR Supervisor Django Web Worker Django web worker NGINX GUNICORN Django urls API mwc_dropbox mwc_drive Dropbox G Drive Django Web Worker 13

14 DESARROLLO CLIENTE Diseño de la aplicación Primera iteración: CSS Segunda iteración: Responsive design, Mobile First y Foundation JavaScript: Single Page App jquery AngularJS 14

15 DISEÑO DE LA APLICACIÓN Primera iteración: CSS 15

16 DISEÑO DE LA APLICACIÓN Primera iteración: CSS No teníamos en cuenta todos los dispositivos Teníamos un diseño elástico Aunque había algunos problemas con dispositivos móviles La solución: Responsive Design y Mobile First 16

17 DISEÑO DE LA APLICACIÓN Segunda iteración: Responsive Design, Mobile First y Foundation Responsive Design: Diseño adaptado a cada dispositivo Media queries: Diseño para distintos tamaños de pantalla Mobile first: Comenzamos a diseñar por el dispositivo de menor tamaño Nos ayuda a priorizar en lo realmente importante 17

18 DISEÑO DE LA APLICACIÓN Segunda iteración: Responsive Design, Mobile First y Foundation Foundation: Framework de diseño web Elementos predefinidos y reutilizables Diseño de cuadrícula: Indicamos qué porcentaje de pantalla queremos que ocupe cada elemento 18

19 DISEÑO DE LA APLICACIÓN Segunda iteración: Responsive Design, Mobile First y Foundation 19

20 JAVASCRIPT Single Page App El objetivo es crear aplicaciones lo más parecidas a las nativas Utilizamos peticiones asíncronas para cargar contenido adicional En lugar de cargar toda la página, cargamos lo que ha cambiado 20

21 JAVASCRIPT jquery Framework JavaScript más utilizado Incluye una librería de animaciones y efectos Muy bien documentado y con muchos recursos disponibles online No organiza el código de nuestra aplicación 21

22 JAVASCRIPT AngularJS Framework al alza actualmente Desarrollado por Google Nos permite reutilizar código y elementos de la página de una manera sencilla Curva de aprendizaje con altibajos 22

23 JAVASCRIPT AngularJS Podemos ordenar el código siguiendo MVC Modelo Services Controladores Controllers Vista Directivas y HTML Código mucho más limpio y ordenado que con jquery 23

24 CONCLUSIONES Estructura final y resumen HTML Cliente Acción Renderizado AngularJ S Petición HTTP Respuesta HTTP Servidor Django Petición HTTP Respuesta HTTP Servicio Externo API 24

25 CONCLUSIONES Valoración final Integrar varios servicios de almacenamiento en una sola aplicación Para el usuario, esta agrupación será transparente Hacer uso de las tecnologías más avanzadas en desarrollo web Mantener un flujo de trabajo profesional 25

26 CONCLUSIONES Tecnologías empleadas JSON 26

27 Demo

28 Preguntas

29 Integración de servicios de almacenamiento virtual Muchas gracias Autor: Pablo Parejo Camacho 29 Tutor: Gregorio Robles

30

31 GITFLOW Metodología de trabajo III Master HotFix Release Develop Feature v0.1 v0.1. v1.0 31