Documentación Final Proyecto 6° TIC B Integrantes: Marco L., Kenneth W.W., Gastón E. e Iñaki Y.B. Proyecto: DefyMe Mobile. Tutores: Martha S. y Rubén K. Curso: 6° TIC B. Fecha de presentación: 18/11/2014 Proyecto Final Carpeta Técnica Especificaciones Técnicas. Desarrollo de prototipo. A nivel de diagrama de Bloque, Principio de funcionamiento , interfases, requerimientos, plataforma de ejecución, requerimientos de software, medio, navegabilidad, funciones y diagramas de flujo, objetos gráficos, planos, despiece, etc). • Objetivo: Responde a la pregunta ¿Qué se debe hacer?. En este capítulo se detalla exactamente el título del proyecto, las características técnicas más relevantes y su entorno de aplicación. • Antecedentes: Responde a la pregunta ¿Qué hay hecho?. El capítulo recoge la evolución tecnológica y científica en el ámbito del proyecto. Se discuten y critican realizaciones semejantes existentes en el mercado. • Planteamiento del problema -Ingeniería de Concepción: Responde a la pregunta ¿De qué forma puede hacerse?. Se exponen distintas alternativas de realización (no más de tres), y se discuten y critican intentando orientar la elección hacia la alternativa más favorable (la que posteriormente se desarrollará). Si procede, se puede incluir al principio del capítulo toda la teoría que determina la filosofía del proyecto (principios de medición, prestaciones operacionales, construcción, etc.) pero sin bajar al nivel de cálculo. • Supuestos, puntos de partida, preguntas planteadas -Especificaciones / Ingeniería de Desarrollo: Responde a la pregunta ¿Cómo implementar la solución adoptada?. Es el capítulo más importante de la Memoria Técnica. En el se justifican, critican, discuten y calculan todos y cada uno de los elementos que intervienen en el Proyecto. Deben abundar los gráficos, esquemas, características técnicas y resultados de simulación. • • Planificación temporal. • Resultados obtenidos ­ Discusión ­Soluciones: • o Hardware del sistema: Incluye todo lo referente a la parte material del proyecto. Se presentan, analizan, justifican y discuten todas y cada una de las etapas en las que se subdivide el proyecto. • o Software del sistema: Incluye la descripción funcional del programa, presentando y discutiendo los módulos o rutinas más importantes mediante notación simbólica o diagramas de flujo. Se debe evitar incluir el listado puro y duro del programa en este apartado. • Sumario y conclusiones: Responde a la pregunta ¿Lo realizado responde a lo previsto?. Este capítulo es el resultado de una reflexión sobre los resultados obtenidos, donde se especifican las diferencias funcionales de lo realizado justificando toda modificación realizada respecto a la idea original. • Diagramas, planos: En esta sección se adjuntan, debidamente numerados, la totalidad de los planos que incluye el proyecto. Los planos mecánicos, además, deben presentarse acotados, con escala, etc. • Costos. • Fuentes de información (Bibliografía, Sitios, Entrevista a especialista) Carpeta Técnica ● Objetivo: Responde a la pregunta ¿Qué se debe hacer?. En este capítulo se detalla exactamente el título del proyecto, las características técnicas más relevantes y su entorno de aplicación. El objetivo de nuestro proyecto es crear una aplicación para el sistema operativo Android, en la que el usuario, primero y principal, pueda iniciar sesión con su cuenta de Facebook, tomando su foto de perfil, nombre, lista de amigos e información personal, para poder usarlos dentro de la aplicación y que el nuevo usuario de DefyMe pueda obtener la cuenta con muy pocos y simples pasos. Si el usuario no desea realizar esto, puede crear una cuenta dentro de la aplicación, con lo cual será un poco más largo el tiempo en registrarse, pero lo hará independientemente de otras redes sociales. Los usuarios se realizan desafíos entre ellos, de cualquier índole, y éstos, para responder dicho desafío, deben subir un vídeo (que será filmado con la cámara del celular) demostrando que cumplieron el desafío propuesto por el otro usuario. Los demás usuarios que sigan a alguno de los dos usuarios involucrados en la acción previamente mencionada podrán comentar y puntuar esta respuesta, entregándole así puntos para poder utilizar posteriormente en algunos premios u otros elementos a definir más adelante. Además, los desafíos serán separados en categorías previamente creadas por nosotros, pero permitiendo el ingreso de nuevas categorías por usuarios bien calificados en la red social, (como por ejemplo: Deportes, Aire Libre, Habilidades, Etc.), para que los usuarios puedan encontrar desafíos y usuarios según sus gustos y preferencias. La aplicación también incluye la opción de que, si al usuario no lo siguen o no sigue suficientes usuarios para poder tener una interacción importante en la aplicación, que pueda obtener desafíos predeterminados que le entrega el usuario oficial de la red social, para poder responderlos, empezar a hacerse más conocido y que tenga más interacción con otros usuarios dentro de la red social. Además, contamos con una página web en la que le brindamos información al usuario acerca de nuestro proyecto, le contamos las características y funciones que posee, quiénes somos y le permitimos ir al Play Store para que descargue nuestra aplicación. ● Antecedentes: Responde a la pregunta ¿Qué hay hecho?. El capítulo recoge la evolución tecnológica y científica en el ámbito del proyecto. Se discuten y critican realizaciones semejantes existentes en el mercado. Hoy en día existen miles de redes sociales de muchos tipos, siendo las más conocidas Facebook, Twitter, Instagram, Snapchat, Tumblr, etc. Un común denominador entre ellas, además de que nuclean millones de usuarios, es que se basan en las fotos o los videos que los usuarios suben. Un usuario común de estas redes sociales puede pasarse horas y horas solamente mirando contenido ajeno, contenido con el que no tiene ninguna relación, sino que simplemente lo mira. DefyMe introduce una nueva forma de interactuar con las redes sociales, ya que los usuarios deben participar activamente en los desafíos que se les propone. No pueden quedarse sentados mirando una pantalla, sino que participan y ellos mismos construyen la actividad de la red. Esta es la innovación que introduce DefyMe en las redes, con la forma o excusa de un desafío. Luego de una gran investigación en los principales mercados de aplicaciones del mundo (Google Play Store, AppStore, Blackberry World, Microsoft Apps, etc) no encontramos ninguna que se relacione con los usuarios de la misma forma que nuestro proyecto. ● Planteamiento del problema -Ingeniería de Concepción: Responde a la pregunta ¿De qué forma puede hacerse?. Se exponen distintas alternativas de realización (no más de tres), y se discuten y critican intentando orientar la elección hacia la alternativa más favorable (la que posteriormente se desarrollará). Si procede, se puede incluir al principio del capítulo toda la teoría que determina la filosofía del proyecto (principios de medición, prestaciones operacionales, construcción, etc.) pero sin bajar al nivel de cálculo. En el final del año 2013 tuvimos un encuentro con un experto en marketing, con el que discutimos sobre como hacer que el proyecto tenga la forma más cómoda y redituable. Primero, se propuso hacer la red social en forma web, como ya lo habíamos realizado. Esto tenía como ventajas que era bastante fácil de hacer y ya teníamos una buena base. La principal desventaja es que los usuarios cada día usan menos sus computadoras para darle tiempo a los smartphones, por lo que estaríamos ingresando en un mercado en decadencia. Por otra parte, nos propuso crear un complemento de Facebook, es decir, una aplicación que corre dentro de esa plataforma. Esto tenía como ventaja que podíamos aprovechar las herramientas de facebook, además de su popularidad, por lo que seria en teoria mas facil llegar a los usuarios, pero no seríamos una aplicación propia, y dependeríamos de facebook en muchos aspectos. Por último, decidimos realizarlo para el sistema operativo Android, porque es el más usado a nivel mundial, es el que nos enseñaban este año y seria mucho mas comodo para los usuarios poder grabar sus desafíos desde un dispositivo móvil, sabiendo que en la mayoría de los desafíos estos tendrán que moverse mucho, correr, saltar, o por ejemplo estar en la calle,y todo esto no podría hacerlo con una computadora. Supuestos, puntos de partida, preguntas planteadas -Especificaciones / Ingeniería de Desarrollo Responde a la pregunta ¿Cómo implementar la solución adoptada?. Es el capítulo más importante de la Memoria Técnica. En el se justifican, critican, discuten y calculan todos y cada uno de los elementos que intervienen en el Proyecto. Deben abundar los gráficos, esquemas, características técnicas y resultados de simulación. La solución que encontramos a esta duda fue realizar una aplicación para sistemas operativos móviles, más específicamente Android, ya que es un sistema ideal para nuestra idea: Se puede vincular con otras aplicaciones, hacemos uso de la camara del telefono para grabar los videos, y por sobre todas las cosas la movilidad permite a los usuarios mayor flexibilidad y creatividad a la hora de responder los desafíos que se les plantean. Con este pensamiento, comenzamos a buscar informacion de como desarrollar una aplicación para Android. Para poder llevar a cabo nuestro proyecto, necesitábamos varios conocimientos que no teníamos, por eso nos volcamos al Internet para poder adquirirlos. Primero que nada, el lenguaje principal en el que la aplicación está desarrollada, Java: En un principio, comenzamos leyendo los documentos que nos ofrecían diferentes páginas como por ejemplo, la página oficial de Android para Desarrolladores (developer.android.com) de donde obtuvimos el IDE Eclipse y la biblioteca de herramientas SDK para aplicaciones Android, junto con tutoriales y diferentes puntos (cómo armar un logo para la aplicación, especificaciones sobre las diferentes versiones de Android, etc) para saber un poco más acerca de Java y Android, y de cómo utilizarlos en nuestro proyecto de una manera correcta y eficaz para lograr los objetivos planteados. Una vez que concluimos la etapa de investigación, ya teníamos conocimiento sobre varios de los aspectos de Android que serían fundamentales para el desarrollo de proyecto. Para la programación, Android trabaja con el lenguaje Java, el cual tiene una biblioteca muy grande para este sistema operativo. Entre otras cosas, descubrimos que hay funciones para el uso de la cámara, para las transiciones entre páginas, para la base de datos, etc. Debido a que nuestra aplicación iba a ser una red social, necesitábamos que todos los datos estén guardados en un servidor para que cualquier usuario desde cualquier dispositivo android pueda ver los mismos. Es por eso que utilizamos un servidor web que cuenta con BBDD MySql en la cual guardamos toda la información de los usuarios y también en la sección de archivos guardamos todos los videos e imágenes subidas por los mismos. Para las consultas a la base de datos se hace una petición POST a un archivos php en el servidor y este es el encargado de realizarla y luego devolverle la respuesta a la app. A partir de esto decidimos dividir el proyecto en bloques: Diseño(Iñaki Yabar Bilbao), Programación (Gaston Eisenstein, Marco Luquer) y Base de datos (Kenneth Weinberg Waks). La aplicación contará con 5 bloques principales, que serán : Login, Inicio, Notificaciones, Descubre y Perfil. Ademàs, hay varias partes complementarias, como registro, pagina de likes, pagina de comentarios de un desafío, perfil ajeno, resultados de búsqueda, configuración, administrar bloqueos. Un primer boceto que realizamos de la pantalla de Inicio: Otra de las cosas que buscamos crear para nuestro proyecto fue una página web que le permite a los usuarios obtener la información que quieran acerca de nuestro proyecto, enterarse de quiénes son los autores de este, y acceder al Play Store de Google para descargar nuestra aplicación gratuitamente y empezar a usarla. Nuestros principales objetivos en cuanto al desarrollo de la misma fueron que cada usuario pudiera acceder a la página web desde cualquier dispositivo que quisiese, ya sea una computadora de escritorio o un smartphone. Además quisimos crear una interfaz sencilla y fácil de manejar por el usuario. Para lograr esto, utilizamos las distintas herramientas que nos brindaron distintas páginas. Estas son Bootstrap que nos brinda un sistema de “grids adaptativas” que permiten que nuestra página sea visible de la misma manera desde cualquier pantalla, Modernizar para utilizar distintas herramientas que trae HTML5 de manera más sencilla y MixItUp para trabajar más fácil con algunos aspectos de Jquery. Los lenguajes que utilizamos para el desarrollo de la página web fueron HTML5, CSS3 y JQuery/JS. Planificacion Temporal: Integrante: 1º Entrega Creación de la Base de Datos con todas las tablas que se deban usar en el proyecto a lo largo del año. Esta base de datos contendrá en esta primera entrega 6 tablas: la tabla de la información del usuario, de los desafíos, de likes, de comentarios, de seguimientos y de bloqueos Kenneth Weinberg Waks 2º Entrega Creación de un archivo/función Config, que contendrá los puntos necesarios para que los demás del grupo puedan conectarse con la BBDD y empezar a interactuar. Probar búsquedas sobre registros simulados. 3º Entrega Finalizar armado del reproductor que se utilizará para ver los vídeos de los desafíos. 4º Entrega Inicio. Feed, que aparezcan los desafíos de gente que seguís. 5º Entrega Programar el envío de desafíos, junto con la creación de los desafíos predeterminados. 6º Entrega Programar la subida de vídeos para contestar los desafíos. Entrega Final Base de Datos y sus modificaciones, tanto las búsquedas como la ejecución de Insert,Delete y Edit dentro de ella y la conexión eficaz con la app, finalizado. Envío de desafíos, desafíos predeterminados y subida de vídeos para responder desafíos, finalizado. Reproducción de vídeos en un | reproductor simple, finalizado. Inicio(Feed) con los desafíos de gente que sigo, finalizado. Integrante: 1º Entrega Edición del perfil del Usuario. Actualización de su información personal( Fecha de nacimiento,donde vive, ocupación, descripción,etc.). Cambiar foto de perfil. Configurar cuenta. Desactivar cuenta 2º Entrega Social. Multimedia. Filmar y guardar Marco Luquer videos para poder subirlos a la app. 3º Entrega Social. Sistema de Likes y Comentarios. 4º Entrega Inicio. Feed, que aparezcan los desafíos de gente que seguís. 5º Entrega Página Web. 6º Entrega Inicio. Feed y Desafíos más Populares Entrega Final El usuario podrá modificar su foto de perfil, cuenta y configuración, como eliminar la cuenta, finalizado. Los comentarios y los likes, junto con la carga de vídeos y multimedia, finalizado. Crear un Inicio(Feed y Más Populares) para mostrar desafíos de gente que sigo y populares, finalizado Página Web básica, con contenidos documentativos de la aplicación en Android y el link para descargar la aplicación, finalizado. Integrante: 1º Entrega Logueo mediante cuenta de Facebook, o registro como nuevo usuario y logueo. 2º Entrega Social (Seguir usuarios). Creación del sistema de seguimiento de usuarios, en el que aparecera un boton de seguir usuario en el perfil, y en el caso de estar siguiendolo que aparezca "Dejar de seguir". Gastón Eisenstein 3º Entrega Social (Bloquear usuarios). Creacion del sistema de bloqueo de usuarios en el que el usuario tendra todo el tiempo la opcion de ingresar al perfil de un usuario que no desee que conozca su existencia en la red social y presionar el boton "Bloquear Usuario". 4º Entrega Crear sistema de categorización de desafíos, que le aparecerá al usuario al momento de publicar. 5º Entrega Crear sistema de reportes en el que si un usuario ve un desafío inapropiado, lo reporta como tal y se enviará un e-mail correpondiente a los moderadores para su verificacion. 6º Entrega Desarrollar una función que permita filmar un video para responder el desafío, utilizando la cámara del dispositivo Android. Entrega Final Todas las entregas fusionadas trabajando en conjunto con toda la aplicación para Android. Integrante: 1º Entrega Maquetado y estructurado general de la aplicación, Logo, botones creados en photoshop. 2º Entrega Pantallas de la aplicación terminadas, plantillas de los desafíos terminadas, creación e implementación en el diseño de los videos (reproducir en el feed), incorporar fotos en los usuarios,reproduccion en pantalla completa. 3º Entrega Programación de las transiciones entre las páginas, animaciones de recarga y apertura de un video. Iñaki Yabar Bilbao 4º Entrega Creación del sistema de notificaciones que se relacione con la aplicación cada vez que el usuario es desafiado, comentan o likean uno de sus videos 5º Entrega Maquetado y diseño de la página web informativa con videos de los usuarios de fondo. 6º Entrega Reestructuración y escalado de la aplicación en su totalidad para que esta se pueda usar en todos los tipos de dispositivos que tiene Android. Entrega Final Aplicación totalmente diseñada con 4 pantallas principales: Inicio, Desafios, Descubre y Perfil y una de configuración, que el usuario pueda navegar entre ellas mediante un "swype" que reproduce la transición entre las pantallas, diseño de la página web infromativa terminada, sistema de notificaciones funcional, posibilidad de usar la aplicación en todos los tipos de pantalla de Android, etc. ● ● • Resultados obtenidos ­ Discusión ­Soluciones: o Software del sistema: Incluye la descripción funcional del programa, presentando y discutiendo los módulos o rutinas más importantes mediante notación simbólica o diagramas de flujo. Se debe evitar incluir el listado puro y duro del programa en este apartado. Gaston Eisenstein: Al principio me enfoque en cómo integrar Facebook dentro de una aplicación para Android, por lo que leí mucha documentación del SDK en su página oficial (developers.facebook.com) y tambien mire varios videotutoriales en YouTube. Luego de haberlo hecho funcionar me di cuenta que si un usuario se logueaba mediante Facebook no tenía nombre de usuario por eso hice que cuando se loguea compruebe si el mail existe en la BBDD y si no es asi lo lleva a una activity donde le pide que ingrese el nombre de usuario deseado y luego lo guarda junto al mail y la información de Facebook. Además desarrolle las siguiente funcionalidades de la app en Java y PHP: -Registro de usuario. -Logueo. -Subir foto al servidor y guardarla en una carpeta específica. -Seguir y dejar de seguir. -Bloquear y desbloquear. -Reportar desafio via e-mail directo a los moderadores. -Cargar informacion personal dentro del perfil. Iñaki Yabar Bilbao: Mi parte del proyecto fue diseñar los archivos .xml que luego tomarían los programadores, haciendo uso de los elementos como Edittext, Videoview, etc ordenados por layouts para mostrar la información en pantalla. Un aspecto importante de mi trabajo es que este se pueda apreciar de la misma forma independientemente del dispositivo en el que se estaba mostrando, que tendría diferente relación de PPi y tamaño de pantalla. Para esto, utilice, en vez de LinearLayouts que muestran el contenido estáticamente, Relative Layouts, que muestran el contenido de manera relativa. A lo largo del proyecto, cree los layouts necesarios para todos los módulos. Diseño de las pantallas de Login y Registro, en las que el usuario puede Iniciar Sesión con su cuenta de DefyMe, con su cuenta de Facebook o registrarse. Pantalla de Inicio, donde aparecen los desafíos de los seguidos, se muestra el desafiador, el desafiado y el desafío junto con el video. También se puede acceder a los Likes y Comentarios Lista en la que se muestran las personas que le dieron Like al desafio. Lista en la que se muestran los comentarios al desafío Pantalla donde aparecen las notificaciones que el usuario recibe Pestaña en la que se pueden buscar usuarios, ver los desafios por categoría o las tendencias. Perfil en el que se muestra la información del usuario, como seguidores, seguidos, desafíos, etc. Si es tu propio perfil puede acceder a la página de configuración, mientras que si es un perfil ajeno se puede seguir o desafiar. Página de configuraciòn en la que el usuario puede editar su informaciòn o cerrar sesión. Por otra parte, también me encargue de realizar la programación de las notificaciones, cuando hay actividad sobre el usuario, es decir, lo desafían, comentan o likean una de sus publicaciones. Un poco del código que lanza la notificación: Código para obtener la información de activity. notificación en la otra ● Kenneth Weinberg Waks: Como primer entrega, me encargué de estructurar la base de datos que utilizaría la aplicación, con todas sus tablas y campos bien definidos. Tabla de bloqueos: Tabla de comentarios: Tabla de desafíos: Tabla de likes: Tabla de login: Tabla de perfil: Tabla de seguidores: Además, me encargué de diagramar y programar un reproductor de vídeos, que sea por streaming, parecido a los que hoy en día se ven en las aplicaciones de redes sociales: Otra de mis entregas se basó, en armar el envío de desafíos. Esto incluyo programación tanto en Java como en PHP con sentencias SQL. Código PHP: Luego, tuve que realizar, también mediante Java, PHP y sentencias SQL, la subida de vídeos para responder los desafíos: Código PHP: Por último, me encargué de armar el código PHP de lo que sería el Feed de inicio, en el cual combine dos tablas de la base de datos (seguidores y desafíos) para poder obtener los desafíos de la gente que sigo, para luego combinar con Marco Luquer lo que el había hecho de la parte Java: Marco Luquer: Me encargue de que los usuarios puedan tomar fotos y modificar su información en el perfil desde el lado del cliente. Para lo que use Intents para abrir la cámara de fotos, una función para resizear las fotos al tamaño que quiera el usuario y que el usuario tambien pueda elegir la foto que quiere subir, seleccionarla en la galería y mostrarla en la pantalla. Despues en la entrega del video, es parecido lo que hice, que el usuario pueda filmar y guardar el video. la estructura del codigo es la misma pero lo que varía es el Intent utilizado y el resultado devuelto. Luego en conjunto con Iñaki Yabar Bilbao nos ocupamos de la página web informativa que hicimos. Acá se pueden ver los resultados: Acá una imágen de una parte del código fuente del index.html: En la entrega del Feed me ocupe del código para conectar la aplicación con el servidor web y entregar y devolver valores para trabajar con ellos: • Costos. El proyecto este año no tiene NINGÚN costo, ya que no precisamos de componentes externos a los que habían en los laboratorios, y los programas con los que desarrollamos son enteramente gratuitos, y tampoco precisamos de ningún componente electrónico, por lo cual no hubo costos. El único costo que puede verse a futuro, será el de registrar la aplicación en la tienda de Android, que costará U$S 25. ● Conclusiones: Nos dimos cuenta que a lo largo del año pudimos cumplir con el proyecto que nos planteamos los integrantes del grupo. Arrancamos de cero este proyecto con conocimientos casi nulos de Android en general, pero a partir de nuestra investigación, trabajo en clase y casa, y esfuerzo pudimos llegar a superar esta adversidad y terminar lo planteado. Creemos que nos organizamos bien con nuestras tareas para llegar a presentarlas a tiempo la mayoría de las veces, que generamos una buena relación de trabajo tanto entre nosotros cómo con los tutores. Lo que más nos gustó aparte de poder terminar nuestra aplicación es todos los conceptos que aprendimos nuevos y profundizamos este año, muchos de esos aprendidos por nuestra cuenta. Aprendimos tanto de diseño en android y web, programar en java para android, conexiones entre aplicación y servidor web, manejo de multimedia, bbdd, etc. Utilizamos pdf´s, videotutoriales e información a lo largo de internet para poder aprender, y los problemas que encontramos los pudimos solucionar por el mismo medio. La aplicación que nos propusimos realizar es casi exacta a la que hicimos, salvo algun que otro detalle cómo el hecho de que no le agregamos la opción de compartir los desafíos en otras redes sociales. A la aplicación que creamos le vemos un buen futuro para un emprendimiento en el que se establezca este tipo de red social,tanto en una página web como en aplicación movil. • Fuentes de información (Bibliografía, Sitios, Entrevista a especialista) ● Primero y principal, las clases tomadas en la materia “Taller de Desarrollo de los Sistemas” en el módulo Android. ● developers.android.com ● Videotutoriales de Youtube de los siguientes usuarios: “codigofacilito” “androidjava” etc. ● Consultas de diferentes problemas que ibamos teniendo en la programación y diseño mediante el foro de preguntas “StackOverflow” ● Drivers Motorola ● Entrevistas con Federico Nusen, especialista en Marketing, que nos incentivó a realizar este proyecto.