Groupd Mobile Application
1.0.0
Eine mobile Anwendung, die mit dem Ionic 2 -Framework entwickelt wurde, das als ein weiteres Front -End für GroupD fungiert - eine Anwendung für soziale Netzwerke, um Teamkollegen für Startprojekte zu finden. Drittes Jahr, Softwareentwicklung.
Die Anwendung von Groupd-Mobile-Anwendungen wurde als Auftrag für ein Semester-Projekt aus dem dritten Jahr durchgeführt. Diese Aufgabe wurde als Gruppenprojekt mit Imervin entwickelt und entwickelt. GruppeD-Mobile-Anwendung, die mobile Cross-Plattform-Anwendung, ist eine von drei Repositorys. Zu den beiden anderen Repositorys gehören GroupD-Backend, die Gruppe der GruppeD-API mit Beiträgen von beiden Parteien und GroupD-Frontend, die von Imervin entwickelte Webanwendung. Weitere Informationen zu GroupD finden Sie in den Abschnitt "About GroupD".
Punkte zu berücksichtigen:
GroupD ist eine Social -Networking -Site, mit der Benutzer Teamkollegen finden können, die an einer Projektidee arbeiten können, die sie möglicherweise haben. GroupD wurde für Entwickler entwickelt. Groupd ermutigt und begrüßt Benutzer aller Berufe und muss diese Plattform nutzen, um Teamkollegen zu finden. Zusammen entwickelten Ervin und ich eine gemeinsam genutzte Datenbank (siehe, warum GroupD für Datenbankschema) und eine erholsame API zur Verwaltung unserer Datenbank und zur Verwaltung unserer CRUD-Funktionen, um unsere beiden Frontendungen zu unterstützen (siehe GroupD-Backend für die vollständige Dokumentation). Wir wollten, dass GroupD den Benutzern es ermöglicht, ihre gewünschten Projekte zu veröffentlichen, mit anderen Benutzern zu kommunizieren und an Projekten mit anderen Benutzern zu arbeiten. GroupD kann verwendet werden, um Erfahrungen zu sammeln und/oder Erfahrungen zu sammeln und schließlich ein Portfolio aus Projekten zu erstellen, an denen sie gearbeitet haben. GroupD ist auch nützlich, um Teammitglieder für ein Start -up -Geschäft zu finden.
In der Webanwendung finden Sie eine vollständige Belegung der Webanwendung.
Nach meiner Ablösung von meiner ursprünglichen Idee schien ich mich dem Projekt eines Klassenkameradens, IMervin, dessen Projekt für mich sehr freundlich zu sein schien. Wir waren auch bestrebt, in der Gruppe zu arbeiten, um die Zusammenarbeit mit Github zu erleben und zu üben. Ervin begrüßte die Idee einer mobilen Anwendung, die seiner Webanwendung entspricht. Wenn wir uns einer Gruppe anschließen, können wir zusätzliche Funktionen hinzufügen. Gemeinsam haben wir ein neues Datenbankschema entwickelt, das unten angehängt wurde, und die API aktualisiert, um diesen Änderungen zu entsprechen.
Meine ursprüngliche Idee war es, eine Windows -Desktop -Sicherheits -App zu erstellen, Verschlüsselung.
Verschlüsselnde Keeper würde:
Probleme:
Obwohl ich diese Idee als mein Projektende aufgegeben habe, möchte ich die Implementierung dieses Projekts nicht aufgeben, vielleicht nicht als Windows Store -Anwendung. Ich habe bereits die Gesichtserkennung für eine Aufgabe implementiert, bei der wir in diesem Semester eine Windows Universal-Plattformanwendung erstellen mussten. Diese WUP-Anwendung finden Sie in GitHub: Safe-Note und im Windows Store: Notiz sicher (der Name sicher war zum Zeitpunkt der Einreichung nicht verfügbar).
Hauptmerkmale:
Zusätzliche Funktionen
Ich habe die Gruppe von GroupD-Mobile-Anwendung mit einem Sidemenu entwickelt, das intelligent weiß, wann sich Daten ändern. Der Benutzerdatenanbieter wird aufgerufen, einen Benutzer ein- oder auszuzeichnen, und löst eine angemeldete im Ereignis aus, um das Seitenmenü zu ändern. Die Benutzerdaten legt den Benutzer außerdem fest, indem der aktuelle Benutzer im lokalen Speicher gespeichert und ein Ereignis ausgelöst wird, um alle Ressourcen der Änderung aufmerksam zu machen. Auf jeder Seite wird der aktuelle Benutzer von der API geladen und neu laden, und der Benutzerdatenanbieter alarmiert alle Ressourcen der Änderungen, wobei die Ressourcen asynchron die neuen Daten aus dem Speicher erhalten.
Das angemeldete Menü besteht aus zwei Abschnitten:
Das protokollierte Menü besteht aus drei Abschnitten:
Melden Sie sich an
Die Anmeldeseite besteht aus einer Reihe von Folien, wobei eine Form in jeder Folie die Anmeldedaten aufnehmen kann. Ich habe den Formbuilder von Angular 2 verwendet, um die Eingabe in Echtzeit mit integrierten Validatoren und benutzerdefinierten Validatoren zu validieren. Leider konnte ich nicht den asynchronen benutzerdefinierten Benutzernamenverfügbarkeitsvalidator zum Laufen bringen, da die Methoden des Validators statisch sind. Ich konnte nicht herausfinden, wie man einen HTTP-Aufruf im Validator verwendet. Die Validierung für die Verfügbarkeit des Benutzernamens erfolgt, sobald die Daten eingereicht werden. Wenn der Benutzername bereits aufgenommen wurde, wird der Benutzer automatisch auf die erforderliche Folie gebracht und alarmiert, dass der Benutzername genommen wird. Wenn der Benutzername verfügbar ist, werden Daten als Benutzer gespeichert, das Formular wird zurückgesetzt, und der Benutzer wird auf den Erfolg aufmerksam gemacht und die Möglichkeit, direkt zum Anmeldung auf Seite zu gehen.
Einloggen
Die Anmeldeseite ist ziemlich selbsterklärend, der Benutzer kann sich mit seinem Benutzernamen und seinem Passwort anmelden. Wenn der Benutzername nicht vorhanden ist, wird der Benutzer darauf hingewiesen, dass der Benutzername nicht gefunden wurde. Wenn der Benutzername vorhanden ist und das Kennwort ungültig ist, wird der Benutzer auch darüber alarmiert. Wenn der Benutzername und das Kennwort eine Übereinstimmung sind, wird der Benutzer wie oben beschrieben vom Benutzeranbieter angemeldet und als angemeldete Benutzer auf die Startseite verlegt. Der Anmeldungsstatus wird im Speicher gespeichert, damit der Benutzer bereits bei den folgenden Anwendungsstarts angemeldet ist, sofern sich der Benutzer nicht anmeldet.
Tutorial
Eine Reihe von Folien, die GroupD erklärt und eine kurze Beschreibung der Verwendung von ihnen.
Heim
Die Homepage besteht aus einer Liste aller in separaten Karten angezeigten Projekte. Jede Projektkarte enthält den Projektnamen, die Beschreibung des Projekts, die erstellte Zeit und die Anzahl der verfügbaren Positionen. Jede Karte hat auch zwei Tasten; Eine, um das Projekt zu oder von den Favoriten/Lesezeichen des Benutzers hinzuzufügen oder zu entfernen, und eine, um das Projekt auf der Projektseite anzuzeigen.
Projektseite
Die Projektseite nimmt die Projekt -ID als Parameter ein. Von dort aus werden die Daten und die Daten des Projekts und die Daten des Erstellers erhalten. Diese Seite besteht aus zwei Karten, der Projektkarte und der Creator Card. Wenn der Schöpfer des Projekts sein Konto gelöscht hat oder nicht gefunden wurde, erscheint die Schöpferkarte nicht.
Die Schöpferkarte besteht aus dem Platzhalter -Symbol, das durch das Geschlecht des Schöpfers (männlich oder weiblich - standhaut ist), dem Schöpfernamen und einem Knopf. Wenn der Betrachter der Ersteller ist, bringt die Schaltfläche den Betrachter auf die Seite "Bearbeitungsprojekt". Wenn der Betrachter nicht der Schöpfer ist, würde die Schaltfläche den Benutzer zum Profil des Erstellers bringen.
Die Projektkarte besteht aus dem Projektnamen, der Beschreibung des Projekts, der Projektbeschreibung, der maximalen Positionen, den verfügbaren Positionen, den Tags und den Mitgliedern. Wenn das Projektmitglied angeklickt wird, prüft Groupd, ob dieses Mitglied noch vorhanden ist (das Mitglied hat möglicherweise sein Profil gelöscht, dann hat ein anderer neuer Benutzer möglicherweise seinen Namen genommen). Wenn das Mitglied existiert, wird der Betrachter in das Profil des Mitglieds verlegt. Die Projektkarte verfügt auch über zwei Tasten an der Fußzeile der Karte. Der Kommentarschaltfläche, der den Kommentarbereich angezeigt und verbirgt, und die bevorzugte Schaltfläche zum Hinzufügen oder Entfernen des Projekts zu oder aus den Projekten des Betrachters.
Der Kommentarbereich besteht aus einer Liste der Projektkommentare mit einem Eingabefeld, um einen Kommentar darunter hinzuzufügen.
Projekt bearbeiten
Auf der Seite "Projekt" bearbeiten project einfach ein Formular mit den zuvor eingegebenen/gespeicherten Projekten, die in die Eingabefelder geladen wurden. Das Formular der Projektseite bearbeiten das Formular der Projektseite sehr ähnlich, wobei der Unterschied auf der Projektseite bearbeiten, der Ersteller kann Mitglieder hinzufügen. Der Schöpfer kann nur Mitglieder hinzufügen, die in der Datenbank existieren. Der Schöpfer erhält zwei Optionen, speichern Änderungen oder löschen. Beide Optionen werden beim Klicken mit einer Warnwarnung empfangen. Bei Änderungen speichern werden das Benutzerdokument der geänderten Mitglieder aktualisiert und das Projektdokument wird ebenfalls aktualisiert. Beim Löschen wird jede Instanz des Projekts im Schöpfer und der Mitglieder entfernt und das Projekt dauerhaft gelöscht.
Neues Projekt
Ähnlich wie bei der Seite "Projekt" ist die neue Projektseite ein Formular mit Echtzeit -Ladung. Es hat eine einzige Taste, um das neue Projekt hinzuzufügen.
Suchen
Die Suche ist eine Registerkartenseite, wobei die Registerkarten: Suchprojekt und Suchbenutzer suchen.
Suchprojekte verwenden eine benutzerdefinierte Pipe, um nach Projektnamen oder Tags in Echtzeit nach Projekten zu suchen. Dies ist ideal für Benutzer, an denen Projekte suchen, an denen sie arbeiten können. Das Layout der Projektliste entspricht der Startseite.
Suchbenutzer verwenden eine benutzerdefinierte Pipe, um nach Benutzern nach Benutzername oder Fähigkeiten in Echtzeit zu suchen. Dies ist ideal für Benutzer, die Benutzer suchen, um an ihren Projekten zu arbeiten. Jeder angezeigte Benutzer wird in einer Karte mit den folgenden Details angezeigt: Geschlechtsymbol, Beruf, E -Mail und Tags. Die Karte verfügt auch über eine Schaltfläche zur Seite des ausgewählten Benutzers.
Profil
Die Profilseite nimmt den Benutzernamen als Parameter ein. Er erhält das Benutzerdokument und prüft, ob es sich um das Profil des Betrachters handelt. Das Profil zeigt den Benutzernamen, den Standort, den Beruf, die E -Mail, die Bewertung und die Fähigkeiten des Benutzers. Wenn es sich um das Profil des Zuschauerprofils handelt, wird dem Betrachter eine Schaltfläche Bearbeiten angezeigt, mit der auf die Seite "Bearbeitungskonto) (unten beschrieben) und eine Schaltfläche für die Showbewerter verlegt wird, die ein modales Pop -up mit einer Liste aller Bewerter und deren Raten enthält. Der Betrachter kann auch auf die Benutzernamen des Raters klicken, um in ihre Profile umzuziehen. Wenn es nicht das Profil des Zuschauers ist, wird dem Betrachter eine Rate -Schaltfläche angezeigt. Wenn auf die Schaltfläche Tarif geklickt wird, wird eine Warnung mit einem Eingangsfeld zur Eingabe der Bewertung angezeigt. Wenn der Betrachter diese Person zuvor bewertet hat, überschreibt er seine letzte Rate. Die Projekte des Benutzers, ob Mitglied oder Ersteller, werden ebenfalls im selben Format wie die Projekte auf der Homepage angezeigt.
Favoriten
Auf der Lieblingsseite werden alle in den Favoriten des Benutzers gespeicherten Projekte angezeigt. Das Layout der Projektliste entspricht der Startseite.
Konto bearbeiten
Auf der Seite "Bearbeitungskonto" handelt es sich lediglich um ein Formular mit den zuvor eingegebenen/gespeicherten Projekten, die in die Eingabefelder geladen wurden. Der Betrachter erhält zwei Optionen, speichern Änderungen oder löschen. Beide Optionen werden beim Klicken mit einer Warnwarnung empfangen. Bei Änderungen speichern wird das Benutzerdokument aktualisiert. Beim Löschen werden die Bewertungen des Benutzers aus den Bewertungen eines anderen Benutzers entfernt (wenn die Bewertung nicht gelöscht wurde, können die Bewertungen problematisch werden, wenn ein anderer Benutzer denselben Benutzernamen nach verfügbaren Benutzern nimmt) und das Benutzerdokument aus der Datenbank gelöscht wird.
Melden Sie sich aus
Auf der Seite "Anmeldung" enthält eine Schaltfläche, auf der der Benutzerdatenanbieter das Anmeldem -Ereignis aufgerufen hat, um das Menü zu ändern, den lokalen Speicher zu löschen und auf die Anmeldeseite umzuziehen.
Ionisch
Das ionische Framework kann verwendet werden, um Cross -Plattform -mobile Anwendungen oder Webanwendungen mit HTML, CSS und JavaScript (Angular) zu erstellen.
Ionic 1 vs Ionic 2
Ionic 1 verwendet Angular 1, HTML und CSS, während Ionic 2 Angular 2, HTML und SCSS verwendet.
Warum Ionic 2?
Als Ervin bereits mit Angular 1 begonnen hatte, konnte es als vernünftiger angesehen werden, Ionic 1 zu verwenden, um meine mobile Anwendung zu erstellen, da er bereits einen Großteil der Arbeit erledigt hatte. Ich habe jedoch Ionic 2 ausgewählt, da ich lieber völlig würdig als meine eigene sein würde, und der Hauptgrund dafür ist, dass Ionic 2 viele Verbesserungen bietet. Josh Morony beschreibt diese Verbesserungen hier effektiv. Meiner Meinung nach wird Ionic 2, der die neuere und verbesserte Version von Ionic ist, weiter verbessert und im Mittelpunkt des Ionic -Teams stehen. Gleiches gilt für das AngularJS -Team in Angular 2s Fall. Ich war auch sehr bestrebt, mit TypeScript zu erfahren.
Befolgen Sie die Schritte in GroupD-Backend: So rennen.
Wenn Sie nicht ionic 2 installiert sind, befolgen Sie die Installationsschritte auf der hier gefundenen Ionic -Website.
Klonen Sie dieses Repository und führen Sie den Befehl aus:
npm install
Sobald alles andere eingerichtet ist. Stellen Sie sicher, dass Ihr aktuelles Verzeichnis: GroupD-Mobile-Application (ein Unterabweis des Repositorys) ist. Führen Sie dann den folgenden Befehl aus:
ionic lab
Abschließend war dieses Projekt eine lohnende Erfahrung. In einer Gruppe zu arbeiten und zum ersten Mal Ionic 2 zu verwenden, sind beide großartige Mitwirkende dazu. Wenn ich das Projekt erneut machen würde, würde ich von Anfang an mit dieser Projektidee beginnen und nicht nach einem anderen Projektideeversuch. Ich würde auch auf ein separates Kommentardokument verweisen, anstatt die Kommentare in das Projektdokument einzubeben, da die Kommentare verwandte Daten zum Projekt sind. Kommentare können auch schnell auf eine möglicherweise unendliche Menge wachsen und sollten das Projektdokument nicht mit seiner großen Größe belasten. Schließlich würde ich in Betracht ziehen, eine einzigartige ID an der Stelle des einzigartigen Benutzernamens zu verwenden, und ich würde definitiv eine Eigenschaft wie "Ruhe" hinzufügen: True/False. Diese Eigenschaft würde an der Stelle des tatsächlichen Löschens des Benutzerdokuments verwendet, das Problem der referenzierten Benutzernamen (oder IDs, wenn sich dies geändert würde) mit alten/neuen Benutzern verwechselt und dient nützlich, um alten Benutzern eine Wiederherstellungsoption anzubieten.
Referenzen:
Ionischer Rahmen
http://stackoverflow.com/questions/13935733/mongoose-limit-count-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/repeat-background-task-ionic-framework
https://github.com/yannbf/ionic2-components
http://stackoverflow.com/questions/17616624/detect-if-string-contains-anyspaces
https://www.joshmorony.com/advanced-forms-validation-in-ionic-2/
http://stackoverflow.com/questions/35039610/angular2-manuell-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-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/diftyco/ionic2-starter-sidemenu
https://ionicframework.com/docs/v2/api/components/menu/menu/
https://blog.khophi.co/ionic-2-sside-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-real-pices/
Tara O'Kelly - [email protected]
