使用Ionic 2框架開發的移動應用程序,它是GroupD的另一個前端 - 一種社交網絡應用程序,可以找到啟動項目的團隊伴侶。第三年,軟件開發。
作為一個學期的第三年項目的任務,進行了GroupD-Mobile-application。這項任務是由Imervin設計和開發的。跨平台移動應用程序GroupD-Mobile-Application是三個存儲庫之一。其他兩個存儲庫包括groupd-backend,groupD API,並由雙方貢獻,以及由Imervin開發的Web應用程序GroupD-Frontend。有關GroupD的更多詳細信息,請訪問有關GroupD部分。
要考慮的要點:
GroupD是一個設計的社交網站,旨在幫助用戶找到團隊伴侶來研究他們可能擁有的項目想法。 GroupD是考慮到開發人員的設計,但是GroupD鼓勵並歡迎所有專業的用戶,並且需要使用此平台來尋找隊友。我和Ervin一起開發了一個共享數據庫(請參閱為什麼用於數據庫模式的GroupD)和Restful API來管理我們的數據庫並管理我們的CRUD功能以幫助我們的兩個前端(請參閱GroupD-Backend以獲取完整文檔)。我們希望GroupD允許用戶發布所需的項目,與其他用戶溝通並與其他用戶一起從事項目。 GroupD可用於娛樂和/或獲得經驗,並最終從他們從事的項目中建立投資組合。 GroupD也可用於尋找啟動業務的團隊成員。
有關Web應用程序上的完整文檔,請參見GroupD-Frontend。
在與最初的想法分離之後,我加入了同學的項目Imervin,他的項目對我來說似乎很友好。我們都渴望在小組中工作,以體驗和實踐Github合作。 Ervin歡迎與他的Web應用程序相當的移動應用程序的想法。加入組成一個組,我們可以添加額外的功能。我們一起設計了一個新的數據庫架構,並在下面附上,並更新了API以與這些更改相對應。

我最初的想法是構建Windows桌面安全應用程序,加密守門員。
加密管理員將:
問題:
儘管我將這個想法放在了年底項目中,但我不想放棄實施該項目,也許不是作為Windows Store應用程序。我已經實現了面部識別的作業,我們必須在本學期創建Windows Universal Platform應用程序,可以在Github上找到此WUP應用程序:Safe Note,在Windows Store:Note Safe(Note Safe)(Note Safe Note(在提交時不可用)名稱安全說明)。
主要功能:
其他功能
我用側符設計了groupD-mobile-application,該sidemenu明智地知道數據何時更改。用戶數據提供商被調用以記錄用戶進出,並觸發登錄以更改側面菜單的登錄。用戶數據還通過將當前用戶存儲在本地存儲中並觸發事件以提醒更改的任何資源來設置用戶。在每個頁面加載並重新加載時,當前用戶將從API中重新加載,用戶數據提供商將警告任何更改的資源,其中資源將異步從存儲中獲取新數據。
已登錄的菜單由兩個部分組成:
菜單中登錄的菜單由三個部分組成:
報名
註冊頁面由一組幻燈片組成,每張幻燈片中都有一個表格,以獲取註冊數據。我使用Angular 2的FormBuilder通過內置驗證器和自定義驗證器實時驗證輸入。不幸的是,由於驗證器的方法是靜態的,因此我無法使異步自定義用戶名 - 可用性瀏覽器起作用,因此我無法弄清楚如何在驗證器中使用HTTP調用。提交數據後,完成了用戶名的可用性驗證。如果已獲取用戶名,則用戶將自動轉到必要的幻燈片,並提醒您獲取用戶名。如果可用的用戶名,則將數據保存為用戶,則復位表格,並將用戶提醒成功,並給出了直接轉到登錄頁面的選項。
登入
登錄頁面是非常自我解釋的,用戶可以使用其用戶名和密碼登錄。如果不存在用戶名,則將未找到用戶名稱。如果存在用戶名,並且密碼無效,則還將對此提醒用戶。如果用戶名和密碼是匹配的,則用戶提供商將如上所述登錄用戶,並將用戶重新定位到主頁作為登錄用戶。狀態中的日誌將保存在存儲中,以便除非用戶註銷,否則將在以下應用程序啟動中登錄用戶。
教程
一組幻燈片解釋了GroupD,並簡要說明瞭如何使用它。
家
主頁由單獨卡中顯示的所有項目的列表組成,每個項目卡都有項目名稱,項目縮略圖說明,創建的時間和可用位置的數量。每張卡也有兩個按鈕;一個是要添加或刪除該項目訪問或從用戶的收藏夾/書籤中添加或從項目頁面中查看項目。
項目頁面
項目頁面將項目ID作為一個參數,從那裡獲取項目的數據和創建者的數據。此頁面由兩張卡組成,即項目卡和創建者卡。如果該項目的創建者刪除了他們的帳戶或未發現創建者卡。
創建者卡由由創作者的性別(男性或女性 - 默認為女性),創建者名稱和按鈕確定的佔位符圖標組成。如果查看器是創建者,則按鈕將將查看器帶到編輯項目頁面。如果觀看者不是創建者,則按鈕將將用戶帶到創建者的個人資料。
項目卡由項目名稱,項目縮略圖說明,項目描述,最大位置,可用位置,標籤和會員組成。如果單擊項目成員,則GroupD將檢查此成員是否仍然存在(該成員可能已刪除其配置文件,然後另一個新用戶可能已經以其名字命名)。如果成員確實存在,則將查看者移至會員的個人資料。該項目卡還在卡的頁腳上有兩個按鈕。註釋按鈕顯示並隱藏了評論部分,以及添加或從查看者項目中添加或刪除項目的喜愛按鈕。
評論部分由項目註釋的列表組成,並帶有一個輸入框來添加下面的評論。
編輯項目
編輯項目頁面只是一個表單,其先前輸入/保存的數據已加載到輸入框中。編輯項目頁面的表單與項目頁面的表單非常相似,在“編輯項目”頁面中的差異,創建者可以添加成員。創建者只能添加存在數據庫中的成員。為創建者提供了兩個選項,保存更改或刪除。單擊時,都會收到兩個選項。在保存更改上,更新了任何成員更改的用戶文檔,並且還更新了項目文檔。在DELETE上,創建者中項目的任何實例和成員都將被刪除,並將項目永久刪除。
新項目
與“編輯項目”頁麵類似,新項目頁面是帶有實時載荷的表單。它有一個按鈕添加新項目。
搜尋
搜索是一個選項卡頁面,標籤為:搜索項目和搜索用戶。
搜索項目使用自定義管道實時搜索項目名稱或標籤。這是尋找可以從事項目的用戶的理想選擇。項目列表的佈局與主頁相同。
搜索用戶使用自定義管道實時搜索用戶或技能。這是尋找用戶從事其項目的用戶的理想選擇。顯示的每個用戶都顯示在卡中,其中包含以下詳細信息:性別圖標,職業,電子郵件和標籤。該卡還有一個按鈕可以轉到所選用戶的頁面。
輪廓
配置文件頁面將用戶名作為參數輸入,然後獲取用戶文檔並檢查它是否是查看器的配置文件。該配置文件顯示用戶的用戶名,位置,職業,電子郵件,評級和技能。如果是查看者配置文件,則顯示查看器的編輯按鈕,它將遷移到“編輯帳戶”頁面(如下所述)和一個節目評估者按鈕,其中將彈出一個模式,並帶有所有評分者及其費率的列表。觀看者還可以單擊評估者的用戶名以搬遷到其配置文件中。如果不是觀看者的配置文件,則將向查看器顯示一個速率按鈕。如果單擊“速率”按鈕,則將彈出一個警報,其中包含輸入框以輸入評分。如果觀看者以前對此人進行了評分,則將覆蓋他們的最後匯率。用戶的項目,無論是成員還是創建者,也以與主頁中的項目相同的格式顯示。
最愛
最喜歡的頁面將顯示所有保存在用戶收藏夾中的項目。項目列表的佈局與主頁相同。
編輯帳戶
編輯帳戶頁面只是一個表單,其先前輸入/保存的數據已加載到輸入框中。給查看器提供了兩個選項,保存更改或刪除。單擊時,都會收到兩個選項。在保存更改上,用戶文檔已更新。在DELETE上,用戶的評分將從任何其他用戶的評分中刪除(如果未刪除評級,則如果其他用戶在可用的情況下獲取相同的用戶名,則評級可能會成為問題),並且從數據庫中刪除了用戶文檔。
註銷
登錄頁面具有一個按鈕,該按鈕調用用戶數據提供商來敲擊註銷事件以更改菜單,清除本地存儲並將其遷移到頁面上的登錄。
離子
離子框架可用於使用HTML,CSS和JavaScript(Angular)創建跨平台移動應用程序或Web應用程序。
離子1與離子2
離子1使用角1,HTML和CSS,而離子2使用角2,HTML和SCSS。
為什麼要離子2?
由於Ervin已經開始使用Angular 1,因此使用離子1來構建我的移動應用程序可能更為明智,因為他已經完成了大部分工作。但是,我選擇了Ionic 2,因為我寧願我的作品完全尊嚴自己,而主要原因是Ionic 2提供了許多改進。喬什·莫尼(Josh Morony)在這裡有效地描述了這些改進。我認為,Ionic 2是Ionic的新版本,將繼續改善,並將成為Ionic團隊的重點。在Angular 2的情況下,AngularJS團隊也可以這樣說。我也很渴望使用打字稿體驗。
請按照GroupD-Backend的步驟進行操作:如何運行。
如果您沒有安裝離子2,請按照Ionic網站上的安裝步驟操作。
克隆此存儲庫並運行命令:
npm install
一旦設置並運行所有其他內容。確保當前目錄是:groupD-mobile-application(存儲庫的子目錄)。然後運行以下命令:
ionic lab
總而言之,這個項目是一種有意義的經歷。在小組中工作,並首次使用離子2是對此的重要貢獻者。如果我要重新進行項目,我將從一開始就開始這個項目想法,而不是在其他項目想法嘗試之後開始。我還將引用一個單獨的評論文檔,而不是將評論嵌入項目文檔中,因為評論是與項目相關的數據,但是評論會隨著項目數據的其餘部分而有所不同。評論也可以很快增長到可能的無限量,並且不應以可能的規模來負擔項目文件。最後,我將考慮在唯一用戶名代替獨特的ID,並且我肯定會添加類似於“休眠”的屬性:true/false。該屬性將用於實際刪除用戶文檔的位置,將解決引用的用戶名(或ID如果會更改的ID)的問題與舊用戶混淆,並且有助於為舊用戶提供恢復選項。
參考:
離子框架
http://stackoverflow.com/questions/13935733/mongoose-limit-offset-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/repeatsy-background-task-ionic-framework
https://github.com/yannbf/ionic2-components
http://stackoverflow.com/questions/17616624/detect-if-string-contains-any空間
https://www.joshmorony.com/advanced-forms-validation-in-ionic-2/
http://stackoverflow.com/questions/35039610/angular2-manaly-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-indroducing-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-the-creen/
http://www.neilberry.com/how-to-run-your-ionic-ionic-app-on-real-devices/
Tara O'Kelly [email protected]