Groupd Mobile Application
1.0.0
Une application mobile, développée à l'aide du cadre Ionic 2, qui agit comme un autre front-end pour GroupD - une application de réseautage social pour trouver des coéquipiers pour les projets de démarrage. Troisième année, développement logiciel.
Groupd-Mobile-Application a été entrepris comme une affectation pour un projet de troisième année de semestre. Cette affectation a été conçue et développée en tant que projet de groupe avec IMervin. GroupD-Mobile-Application, l'application mobile croisée, est l'un des trois référentiels. Les deux autres référentiels incluent GroupD-Backend, l'API GroupD avec les contributions des deux parties, et GroupD-Fontend, l'application Web développée par IMervin. Pour plus de détails sur GroupD, veuillez accéder à la section About GroupD.
Points à considérer:
GroupD est un site de réseautage social conçu pour aider les utilisateurs à trouver des coéquipiers à travailler sur une idée de projet qu'ils peuvent avoir. GroupD a été conçu en pensant aux développeurs, cependant, GroupD encourage et accueille les utilisateurs de toutes les professions et doit utiliser cette plate-forme pour trouver des coéquipiers. Ensemble, Ervin et moi avons développé une base de données partagée (voir pourquoi GroupD pour le schéma de base de données) et RESTful API pour gérer notre base de données et administrer nos fonctionnalités CRUD pour aider nos deux frontaux (voir GroupD-Backend pour la documentation complète). Nous voulions que GroupD permette aux utilisateurs de publier leurs projets souhaités, de communiquer avec d'autres utilisateurs et de travailler sur des projets avec d'autres utilisateurs. GroupD peut être utilisé pour les loisirs et / ou pour acquérir de l'expérience et éventuellement construire un portefeuille à partir de projets sur lesquels ils ont travaillé. GroupD est également utile pour trouver des membres de l'équipe pour une entreprise de démarrage.
Voir GroupD-FRONTEND pour une docmentation complète sur l'application Web.
Après mon détachement de mon idée originale, j'ai rejoint le projet d'un camarade de classe, Imervin, dont le projet de qui m'a semblé très amical. Nous étions également tous les deux désireux de travailler en groupe pour vivre et pratiquer la collaboration sur Github. Ervin a accueilli l'idée d'une application mobile équivalente à son application Web. Rejoindre pour former un groupe, nous pourrions ajouter des fonctionnalités supplémentaires. Ensemble, nous avons conçu un nouveau schéma de base de données, joint ci-dessous, et mis à jour l'API pour correspondre à ces modifications.
Mon idée originale était de créer une application de sécurité Windows Desktop, Encrypt Keeper.
Encrypt Keeper serait:
Problèmes:
Bien que j'aie abandonné cette idée comme mon projet de fin d'année, je ne souhaite pas abandonner la mise en œuvre de ce projet, peut-être pas comme une application Windows Store. J'ai déjà implémenté la reconnaissance faciale pour une affectation où nous avons dû créer une application de plate-forme universelle Windows ce semestre, cette application WUP peut être trouvée sur GitHub: Safe Note, et sur le magasin Windows: Remarque SAFE (le nom de la note de sécurité n'était pas disponible au moment de la soumission).
Caractéristiques principales:
Fonctionnalités supplémentaires
J'ai conçu l'application GroupD-Mobile avec un Sidememenu qui sait intelligemment quand les données changent. Le fournisseur de données de l'utilisateur est appelé pour enregistrer un utilisateur dans ou l'extérieur et déclenche un événement enregistré pour modifier le menu latéral. Les données de l'utilisateur définissent également l'utilisateur en stockant l'utilisateur actuel dans le stockage local et en déclenchant un événement pour alerter les ressources du changement. Sur chaque page de chargement et rechargez, l'utilisateur actuel est rechargé de l'API et le fournisseur de données de l'utilisateur alertera toutes les ressources des modifications, où les ressources obtiendront de manière asynchrone les nouvelles données du stockage.
Le menu déconnecté est composé de deux sections:
Le menu enregistré est composé de trois sections:
S'inscrire
La page d'inscription se compose d'un ensemble de diapositives, avec un formulaire dans chaque diapositive à adopter les données d'inscription. J'ai utilisé Formbuilder d'Angular 2 pour valider l'entrée en temps réel avec des validateurs intégrés et des validateurs personnalisés. Malheureusement, je n'ai pas pu faire fonctionner le validateur asynchrone personnalisé de nom d'utilisateur personnalisé, car les méthodes du validateur sont statiques, je ne pouvais pas comprendre comment utiliser un appel HTTP à l'intérieur du validateur. La validation de la disponibilité du nom d'utilisateur est effectuée une fois les données soumises. Si le nom d'utilisateur est déjà pris, l'utilisateur sera automatiquement pris à la diapositive nécessaire et sera alerté que le nom d'utilisateur soit pris. Si le nom d'utilisateur est disponible, les données sont enregistrées en tant qu'utilisateur, les formulaires sont réinitialisés et l'utilisateur est alerté du succès et étant donné la possibilité d'aller directement à la page de connexion.
Se connecter
La page de connexion est assez explicite, l'utilisateur peut se connecter avec son nom d'utilisateur et son mot de passe. Si le nom d'utilisateur n'existe pas, l'utilisateur sera alerté que le nom d'utilisateur n'a pas été trouvé. Si le nom d'utilisateur existe et que le mot de passe n'est pas valide, l'utilisateur en sera également alerté. Si le nom d'utilisateur et le mot de passe correspond, l'utilisateur sera connecté par le fournisseur d'utilisateurs comme décrit ci-dessus et déménagé sur la page d'accueil comme un utilisateur connecté. L'état de connexion sera enregistré en stockage afin que l'utilisateur soit déjà connecté aux start-ups d'application suivantes, à moins que l'utilisateur ne se déconnecte.
Tutoriel
Un ensemble de diapositives expliquant GroupD et une brève description de la façon de l'utiliser.
Maison
La page d'accueil consiste en une liste de tous les projets affichés dans des cartes séparées, chaque carte de projet a le nom du projet, la description de la miniature du projet, le temps créé et la quantité de positions disponibles. Chaque carte a également deux boutons; Un pour ajouter ou supprimer le projet vers ou des favoris / signets de l'utilisateur, et un pour afficher le projet dans la page du projet.
Page du projet
La page du projet prend l'ID du projet en tant que paramètre, à partir de là, il obtient les données du projet et les données du créateur. Cette page se compose de deux cartes, de la carte de projet et de la carte créatrice. Si le créateur du projet a supprimé son compte ou n'a pas été trouvé, la carte du créateur n'apparaît pas.
La carte Créateur se compose de l'icône d'espace réservé déterminée par le genre du créateur (homme ou femme - par défaut est une femme), le nom du créateur et un bouton. Si le spectateur est le créateur, le bouton apportera la visionneuse à la page du projet d'édition. Si la visionneuse n'est pas le créateur, le bouton apporterait l'utilisateur au profil du créateur.
La carte de projet comprend le nom du projet, la description de la miniature du projet, la description du projet, les positions maximales, les positions disponibles, les étiquettes et les membres. Si le membre du projet est cliqué, GroupD vérifiera si ce membre existe toujours (le membre peut avoir supprimé son profil, un autre nouvel utilisateur peut avoir pris son nom). Si le membre existe, le spectateur sera déplacé sur le profil du membre. La carte de projet dispose également de deux boutons situés au pied de page de la carte; Le bouton des commentaires, qui montre et masque la section des commentaires, et le bouton préféré pour ajouter ou supprimer le projet vers ou des projets de la visionneuse.
La section des commentaires se compose d'une liste des commentaires du projet, avec une boîte d'entrée pour ajouter un commentaire en dessous.
Modifier le projet
La page Modifier le projet est simplement un formulaire avec les projets de données précédemment entrées / enregistrées chargées dans les cases d'entrée. Le formulaire de la page du projet Edit est très similaire au formulaire de la page du projet, la différence étant dans la page Modifier le projet, le créateur peut ajouter des membres. Le créateur ne peut qu'ajouter des membres qui existent dans la base de données. Le créateur reçoit deux options, enregistre des modifications ou supprimez. Les deux options sont reçues avec un avertissement d'alerte lors du clic. Sur les modifications de sauvegarde, le document utilisateur de tout membre modifié est mis à jour et le document de projet est également mis à jour. Sur Supprimer, toute instance du projet dans le Créateur et les membres est supprimée et le projet est supprimé en permanence.
Nouveau projet
Semblable à la page Modifier le projet, la nouvelle page du projet est un formulaire avec valitation en temps réel. Il a un seul bouton pour ajouter le nouveau projet.
Recherche
La recherche est une page à onglets, les onglets étant: Rechercher le projet et les utilisateurs de recherche.
Les projets de recherche utilisent un tuyau personnalisé pour rechercher des projets par nom de projet ou balises en temps réel. Ceci est idéal pour les utilisateurs à la recherche de projets sur lesquels travailler. La disposition de la liste des projets est la même que la page d'accueil.
Les utilisateurs de recherche utilisent un tuyau personnalisé pour rechercher des utilisateurs par nom d'utilisateur ou compétences en temps réel. Ceci est idéal pour les utilisateurs à la recherche d'utilisateurs pour travailler sur leurs projets. Chaque utilisateur affiché s'affiche dans une carte, avec les détails suivants: icône de genre, profession, e-mail et balises. La carte a également un bouton pour accéder à la page de l'utilisateur sélectionné.
Profil
La page de profil prend le nom d'utilisateur en tant que paramètre, il obtient ensuite le document utilisateur et vérifie s'il s'agit du profil de la visionneuse. Le profil affiche le nom d'utilisateur, l'emplacement, l'occupation, l'e-mail, la notation et les compétences de l'utilisateur. S'il s'agit du profil des visionneurs, la visionneuse est affichée un bouton d'édition, qui déménagera sur la page du compte Edit (décrit ci-dessous), et un bouton Show Raters, qui aura une pop up modale avec une liste de tous les évaluateurs et de leurs taux. Le spectateur peut également cliquer sur les noms d'utilisateur du Rater pour déménager dans leurs profils. S'il ne s'agit pas du profil de la visionneuse, la visionneuse sera affichée un bouton de taux. Si le bouton de vitesse est cliqué, une alerte apparaîtra avec une zone d'entrée pour entrer la note. Si le spectateur a déjà évalué cette personne, elle écrasera son dernier taux. Les projets de l'utilisateur, que ce soit un membre ou un créateur, est également affiché dans le même format que les projets de la page d'accueil.
Favoris
La page préférée affichera tous les projets enregistrés dans les favoris de l'utilisateur. La disposition de la liste des projets est la même que la page d'accueil.
Modifier le compte
La page du compte Edit est simplement un formulaire avec les projets de données précédemment entrées / enregistrées chargées dans les cases d'entrée. La visionneuse reçoit deux options, enregistrez des modifications ou supprimez. Les deux options sont reçues avec un avertissement d'alerte lors du clic. Sur SAVE modifications, le document utilisateur est mis à jour. Sur Supprimer, les notes de l'utilisateur sont supprimées des notes de tout autre utilisateur (si la note n'a pas été supprimée, les notes peuvent devenir problématiques si un autre utilisateur prend le même nom d'utilisateur une fois disponible) et le document utilisateur est supprimé de la base de données.
Déconnecter
La page de connexion a un bouton qui appelle le fournisseur de données utilisateur pour déterminer l'événement de déconnexion pour modifier le menu, pour effacer le stockage local et déménager sur la page de connexion.
Ionique
Le cadre ionique peut être utilisé pour créer des applications mobiles multiplateforme ou des applications Web avec HTML, CSS et JavaScript (Angular).
Ionic 1 vs ionic 2
Ionic 1 utilise Angular 1, HTML et CSS tandis que Ionic 2 utilise Angular 2, HTML et SCSS.
Pourquoi ionic 2?
Comme Ervin avait déjà commencé à utiliser Angular 1, il pouvait être considéré comme plus judicieux d'utiliser Ionic 1 pour construire mon application mobile car il avait déjà une majeure partie de l'œuvre effectuée. Cependant, j'ai choisi Ionic 2 car je préfère que mon travail soit complètement digne comme le mien, et la principale raison étant que Ionic 2 offre de nombreuses améliorations . Josh Morony décrit efficacement ces améliorations ici. À mon avis, Ionic 2, étant la version plus récente et améliorée d'Ionic, continuera d'être améliorée et sera au centre de l'équipe d'Ionic. La même chose peut être dite pour l'équipe AngularJS, dans le cas d'Angular 2. J'étais également très impatient de vivre l'utilisation de TypeScript.
Suivez les étapes de GroupD-Backend: Comment exécuter.
Si vous n'avez pas installé Ionic 2, suivez les étapes d'installation sur le site Web ionique trouvées ici.
Clone ce référentiel et exécutez la commande:
npm install
Une fois que tout le reste est configuré et en cours d'exécution. Assurez-vous que le répertoire actuel est: GroupD-Mobile-Application (un sous-répertoire du référentiel). Puis exécutez la commande suivante:
ionic lab
Pour conclure, ce projet a été une expérience enrichissante. Travailler dans un groupe et utiliser Ionic 2 pour la première fois pour la première fois, les deux contributeurs. Si je devais refaire le projet, je commencerais sur cette idée de projet dès le début, plutôt qu'après une autre idée d'idée de projet. Je ferais également référence à un document de commentaires séparés, plutôt que d'intégrer les commentaires dans le document des projets, car les commentaires sont des données liées au projet, mais les commentaires changent avec une volatilité différente par rapport au reste des données du projet. Les commentaires peuvent également croître assez rapidement à une quantité éventuellement infinie et ne devraient pas accrocher le document du projet avec sa grande taille possible. Enfin, j'envisagerais d'utiliser un ID unique à la place du nom d'utilisateur unique, et j'ajouterais certainement une propriété comme "Dormant": True / False. Cette propriété serait utilisée à la place de la suppression du document utilisateur, résoudrait le problème des noms d'utilisateur référencés (ou des identifiants si cela serait modifié) étant confondus avec les anciens / nouveaux utilisateurs, et servirait utile pour offrir aux anciens utilisateurs une option de récupération.
Références:
Cadre ionique
http://stackoverflow.com/questions/13935733/mongoose-limitoffset-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/Repeatly-Background-Task-ionic-Framework
https://github.com/yannbf/ionic2-components
http://stackoverflow.com/questions/17616624/Detect-If-string-Contains-Ay Spaces
https://www.joshmorony.com/advanced-formes-validation-in-ionic-2//
http://stackoverflow.com/questions/35039610/angular2-manual-set-value-for-formilder-ctrestrol
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/lesons/javascript-introduging-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-2-tabs-at-the-bottom-or-top-of-the-screen/
http://www.neilberry.com/how-to-run-your-ionic-app-on-real-devices/
Tara O'Kelly - [email protected]
