Groupd Mobile Application
1.0.0
Una aplicación móvil, desarrollada utilizando el marco Ionic 2, que actúa como otro front -end para Groupd, una aplicación de redes sociales para encontrar compañeros de equipo para proyectos de inicio. Tercer año, desarrollo de software.
La aplicación Groupd-Mobile se realizó como una tarea para un proyecto de tercer año semestre largo. Esta tarea fue ideada y desarrollada como un proyecto grupal con IMervin. La aplicación Groupd-Mobile, la aplicación móvil de la plataforma cruzada, es uno de los tres repositorios. Los otros dos repositorios incluyen Groupd-Backend, la API Groupd con contribuciones de ambas partes y Groupd-Frontend, la aplicación web desarrollada por IMervin. Para obtener más detalles sobre Groupd, vaya a la sección Acerca de Groupd.
Puntos a considerar:
Groupd es un sitio de redes sociales diseñadas para ayudar a los usuarios a encontrar compañeros de equipo para trabajar en una idea de proyecto que puedan tener. Groupd fue diseñado con los desarrolladores en mente, sin embargo, Groupd fomenta y da la bienvenida a los usuarios de todas las profesiones y necesita usar esta plataforma para encontrar compañeros de equipo. Juntos, Ervin y yo desarrollamos una base de datos compartida (vea por qué Groupd para el esquema de la base de datos) y la API RESTFUL para administrar nuestra base de datos y administrar nuestras funciones de CRUD para ayudar a nuestros dos front-end (consulte GroupD-Backend para la documentación completa). Queríamos que Groupd permitiera a los usuarios publicar sus proyectos deseados, comunicarse con otros usuarios y trabajar en proyectos con otros usuarios. Groupd puede usarse para recreativa y/o ganar experiencia y eventualmente construir una cartera de proyectos en los que han trabajado. Groupd también es útil para encontrar miembros del equipo para un negocio inicial.
Consulte Groupd-Frontend para obtener una documentación completa en la aplicación web.
Después de mi destacamento de mi idea original, me uní al proyecto de un compañero de clase, IMervin, cuyo proyecto me pareció muy amigable. También estábamos ansiosos por trabajar en grupo para experimentar y practicar colaboración en Github. Ervin dio la bienvenida a la idea de una aplicación móvil equivalente a su aplicación web. Uniéndose para formar un grupo, podríamos agregar características adicionales. Juntos, diseñamos un nuevo esquema de base de datos, adjunto a continuación y actualizamos la API para corresponder con estos cambios.
Mi idea original era construir una aplicación de seguridad de escritorio de Windows, Cintpt Keeper.
Cifrypt Keeper lo haría:
Asuntos:
Aunque he abandonado esta idea como mi proyecto de fin de año, no deseo renunciar a la implementación de este proyecto, tal vez no como una aplicación de la tienda de Windows. Ya he implementado el reconocimiento facial para una tarea en la que tuvimos que crear una aplicación de plataforma universal de Windows este semestre, esta aplicación WUP se puede encontrar en GitHub: Safe-Note, y en la tienda Windows: Note Safe (la nota de nombre de nombre no estaba disponible en el momento de la presentación).
Características principales:
Características adicionales
Diseñé la aplicación GroupD-Mobile con un sidemenu que sabe de manera inteligente cuándo cambia los datos. Se llama al proveedor de datos del usuario para iniciar un usuario en o salida, y desencadena un evento registrado en el evento para cambiar el menú lateral. Los datos del usuario también establecen al usuario almacenando al usuario actual en almacenamiento local y activando un evento para alertar cualquier recurso del cambio. En cada carga y recarga, el usuario actual se vuelve a cargar de la API y el proveedor de datos del usuario alertará cualquier recurso de los cambios, donde los recursos obtendrán de manera asincrónica los nuevos datos del almacenamiento.
El menú registrado está compuesto por dos secciones:
El menú registrado está compuesto por tres secciones:
Inscribirse
La página de registro consiste en un conjunto de diapositivas, con un formulario en cada diapositiva para tomar los datos de registro. Utilicé FormBuilder de Angular 2 para validar la entrada en tiempo real con validadores incorporados y validadores personalizados. Desafortunadamente, no pude hacer que funcione el validador de disponibilidad de nombre de usuario personalizado asincrónico, ya que los métodos del validador son estáticos, no pude descubrir cómo usar una llamada HTTP dentro del validador. La validación para la disponibilidad del nombre de usuario se realiza una vez que se envían los datos. Si el nombre de usuario ya está tomado, el usuario se llevará automáticamente a la diapositiva necesaria y se alertará de que se toma el nombre de usuario. Si el nombre de usuario está disponible, los datos se guardan como un usuario, los formales se restablecen y se alerta al usuario sobre el éxito y se le da la opción de ir directamente a la página Iniciar sesión.
Acceso
La página de inicio de sesión se explica por sí misma, el usuario puede iniciar sesión con su nombre de usuario y contraseña. Si el nombre de usuario no existe, el usuario será alertado de que no se encontró el nombre de usuario. Si el nombre de usuario existe y la contraseña no es válida, el usuario también será alertado de esto. Si el nombre de usuario y la contraseña son una coincidencia, el usuario será registrado por el proveedor del usuario como se describió anteriormente, y se trasladará a la página de inicio como un usuario iniciado. El estado de inicio de sesión se guardará en el almacenamiento para que el usuario ya haya iniciado sesión en los siguientes inicio de la aplicación, a menos que el usuario se inicie.
Tutorial
Un conjunto de diapositivas que explican Groupd y una breve descripción de cómo usarlo.
Hogar
La página de inicio consiste en una lista de todos los proyectos que se muestran en tarjetas separadas, cada tarjeta de proyecto tiene el nombre del proyecto, la descripción de la miniatura del proyecto, el tiempo creado y la cantidad de posiciones disponibles. Cada tarjeta también tiene dos botones; uno para agregar o eliminar el proyecto hacia o desde los favoritos/marcadores del usuario, y otro para ver el proyecto en la página del proyecto.
Página del proyecto
La página del proyecto lleva la ID del proyecto como parámetro, desde allí obtiene los datos del proyecto y los datos del creador. Esta página consta de dos tarjetas, la tarjeta del proyecto y la tarjeta Creator. Si el creador del proyecto ha eliminado su cuenta o no se encontró, la tarjeta Creator no aparece.
La tarjeta Creadora consiste en el icono de marcador de posición determinado por el género del creador (masculino o femenino, predeterminado es mujer), el nombre del creador y un botón. Si el espectador es el creador, el botón llevará al espectador a la página Editar proyecto. Si el espectador no es el creador, el botón llevaría al usuario al perfil del creador.
La tarjeta del proyecto consiste en el nombre del proyecto, la descripción de la miniatura del proyecto, la descripción del proyecto, las posiciones máximas, las posiciones disponibles, las etiquetas y los miembros. Si se hace clic en el miembro del proyecto, Groupd verificará si este miembro aún existe (el miembro puede haber eliminado su perfil, entonces otro nuevo usuario puede haber tomado su nombre). Si el miembro existe, el espectador se reubicará en el perfil del miembro. La tarjeta del proyecto también tiene dos botones ubicados en el pie de página de la tarjeta; El botón de comentarios, que muestra y oculta la sección de comentarios, y el botón favorito para agregar o eliminar el proyecto hacia o desde los proyectos del espectador.
La sección de comentarios consiste en una lista de los comentarios del proyecto, con un cuadro de entrada para agregar un comentario debajo.
Editar proyecto
La página Editar proyecto es simplemente un formulario con los proyectos de datos ingresados/guardados anteriormente cargados en los cuadros de entrada. El formulario de edición de la página del proyecto es muy similar al formulario de la página del proyecto, la diferencia en la página Editar proyecto, el creador puede agregar miembros. El creador solo puede agregar miembros que existen en la base de datos. El creador recibe dos opciones, guarda cambios o elimina. Ambas opciones se reciben con una advertencia de alerta cuando se hacen clic. Al guardar los cambios, el documento del usuario de cualquier miembro cambiado se actualiza y el documento del proyecto también se actualiza. En Delete, se elimina cualquier instancia del proyecto en el creador y los miembros y el proyecto se elimina de forma permanente.
Nuevo proyecto
Similar a la página Editar proyecto, la nueva página del proyecto es un formulario con valitación en tiempo real. Tiene un solo botón para agregar el nuevo proyecto.
Buscar
La búsqueda es una página con pestañas, con las pestañas: el proyecto de búsqueda y los usuarios de búsqueda.
Search Projects utiliza una tubería personalizada para buscar proyectos por nombre o etiquetas del proyecto en tiempo real. Esto es ideal para los usuarios que buscan proyectos para trabajar. El diseño de la lista de proyectos es el mismo que la página de inicio.
Los usuarios de búsqueda usan una tubería personalizada para buscar usuarios por nombre de usuario o habilidades en tiempo real. Esto es ideal para los usuarios que buscan usuarios para trabajar en sus proyectos. Cada usuario que se muestra se muestra en una tarjeta, con los siguientes detalles: icono de género, ocupación, correo electrónico y etiquetas. La tarjeta también tiene un botón para ir a la página del usuario seleccionado.
Perfil
La página de perfil toma el nombre de usuario como parámetro, luego obtiene el documento del usuario y verifica si es el perfil del espectador. El perfil muestra el nombre de usuario, ubicación, ocupación, correo electrónico, calificación y habilidades del usuario. Si es el perfil de los espectadores, el espectador se le muestra un botón de edición, que se trasladará a la página de edición de la cuenta (que se describe a continuación), y un botón de show de evaluadores, que tendrá una ventana modal con una lista de todos los evaluadores y sus tarifas. El espectador también puede hacer clic en los nombres de usuario del evaluador para reubicarse con sus perfiles. Si no es el perfil del espectador, al visor se le mostrará un botón de velocidad. Si se hace clic en el botón de velocidad, aparecerá una alerta con un cuadro de entrada para ingresar la calificación. Si el espectador ha calificado a esta persona antes, sobrescribirá su última tarifa. Los proyectos del usuario, ya sean miembro o creador, también se muestran en el mismo formato que los proyectos en la página de inicio.
Favoritos
La página favorita mostrará todos los proyectos guardados en los favoritos del usuario. El diseño de la lista de proyectos es el mismo que la página de inicio.
Cuenta de edición
La página Editar Cuenta es simplemente un formulario con los proyectos de datos ingresados/guardados anteriormente cargados en los cuadros de entrada. El espectador recibe dos opciones, guarda cambios o elimina. Ambas opciones se reciben con una advertencia de alerta cuando se hacen clic. En los cambios guardados, se actualiza el documento del usuario. En Delete, las clasificaciones del usuario se eliminan de las clasificaciones de cualquier otro usuario (si la calificación no se eliminó, las clasificaciones pueden volverse problemáticas si otro usuario toma el mismo nombre de usuario una vez que está disponible) y el documento del usuario se elimina de la base de datos.
Finalizar la sesión
La página de cierre de sesión tiene un botón que llama al proveedor de datos del usuario a Tiver el evento de inicio de sesión para cambiar el menú, para borrar el almacenamiento local y reubicarse en la página Iniciar sesión.
Iónico
El marco Ionic se puede utilizar para crear aplicaciones móviles de plataforma o aplicaciones web con HTML, CSS y JavaScript (Angular).
Ionic 1 vs Ionic 2
Ionic 1 usa Angular 1, HTML y CSS, mientras que Ionic 2 usa Angular 2, HTML y SCSS.
¿Por qué Ionic 2?
Como Ervin ya había comenzado a usar Angular 1, podría verse como más sensato usar Ionic 1 para construir mi aplicación móvil, ya que ya tenía una mayor parte del trabajo. Sin embargo, elegí Ionic 2, ya que preferiría que mi trabajo sea completamente digno como mío, y la razón principal es que Ionic 2 ofrece muchas mejoras . Josh Morony describe efectivamente estas mejoras aquí. En mi opinión, Ionic 2, siendo la versión más nueva y mejorada de Ionic, continuará mejorando y será el foco del equipo de Ionic. Lo mismo puede decirse del equipo AngularJS, en el caso de Angular 2. También estaba muy ansioso por experimentar el uso de TypeScript.
Siga los pasos en GroupD-Backend: Cómo ejecutar.
Si no tiene instalado IONIC 2, siga los pasos de instalación en el sitio web Ionic que se encuentra aquí.
Clone este repositorio y ejecute el comando:
npm install
Una vez que todo lo demás está configurado y en funcionamiento. Asegúrese de que el directorio actual es: Aplicación Groupd-Mobile (un subdirectorio del repositorio). Luego ejecute el siguiente comando:
ionic lab
Para concluir, este proyecto ha sido una experiencia gratificante. Trabajar en un grupo y usar Ionic 2 por primera vez, ambos contribuyen a esto. Si tuviera que volver a hacer el proyecto, comenzaría con esta idea del proyecto desde el principio, en lugar de después de otro intento de idea del proyecto. También haría referencia a un documento de comentarios separados, en lugar de incorporar los comentarios en el documento de los proyectos, ya que los comentarios son datos relacionados con el proyecto, sin embargo, los comentarios cambian con diferentes volátiles al resto de los datos del proyecto. Los comentarios también pueden crecer bastante rápidamente a una cantidad posiblemente infinita, y no deben cargar el documento del proyecto con su gran tamaño. Finalmente, consideraría usar una identificación única en el lugar del nombre de usuario único, y definitivamente agregaría una propiedad como "latente": verdadero/falso. Esta propiedad se utilizaría en el lugar de eliminar realmente el documento del usuario, resolvería el problema de los nombres de usuario referenciados (o IDS si eso se cambiaría) confundir con los usuarios antiguos/nuevos, y serviría útil para ofrecer a los usuarios antiguos una opción de recuperación.
Referencias:
Marco iónico
http://stackoverflow.com/questions/13935733/mongoose-limitfsetset-and-count-Query
https://www.w3schools.com/jsref/jsref_indexof.asp
https://ionicframework.com/docs/storage/
http://ionicframework.com/docs/ionicons/
https://www.joshmorony.com/custom-pipes-in-ionic-2/
https://www.npmjs.com/package/ng2-search-filter
https://www.youtube.com/watch?v=-zw1zhqsdyc
https://www.youtube.com/watch?v=8gz-kbbddxm
http://stackoverflow.com/questions/32069388/repeatedly-background-task-ionframework
https://github.com/yannbf/ionic2 componentes
http://stackoverflow.com/questions/17616624/detect-if-string-contains- any spaces
https://www.joshmorony.com/advanced-forms-validation-in-ionic-2/
http://stackoverflow.com/questions/35039610/angular2-manation-set-value-for-formbuilder-control
https://ionicframework.com/docs/v2/cli/generate/
https://www.youtube.com/watch?v=-ynj-qrhvgc
https://ionicframework.com/docs/v2/resources/forms/
https://www.youtube.com/watch?v=-O_VGPJP-Q0
http://blog.ionic.io/10-minutes-with-ionic-2-adding-pages-and navigation/
https://www.joshmorony.com/a-simple-guide-to-navigation-in-ionic-2/
http://reactivex.io/documentation/observable.html
https://www.youtube.com/watch?v=ei7fsoxkpl0
https://egghead.io/lessons/javascript-introducing-the-observable
https://www.youtube.com/watch?v=_frphse2pzk
http://stackoverflow.com/questions/36655379/ionic-2-templates
https://github.com/driftyco/ionic2-starter-sidemenu
https://ionicframework.com/docs/v2/api/components/menu/menu/
https://blog.khophi.co/ionic-2-side-menu-tabs/
https://developer.mozilla.org/en/docs/web/javascript/reference/global_objects/string/trim
http://pointdeveloper.com/how-to-place-ionic--tabs-at-the-bottom-or-pop-of-the-screen/
http://www.neilberry.com/how-to-run-your-ionic-app-on-realdevices/
Tara O'Kelly - [email protected]
