Groupd Mobile Applicationダウンロード-GroupD Groupd Mobile Applicationソースコードダウンロード

Groupd Mobile Application

その他のソースコード

1.0.0

ダウンロード

GroupD-Mobile-Application

Ionic 2フレームワークを使用して開発されたモバイルアプリケーションは、GroupDの別のフロントエンドとして機能します。これは、スタートアッププロジェクトのチームメイトを見つけるためのソーシャルネットワーキングアプリケーションです。 3年目、ソフトウェア開発。

導入

GroupD-Mobile-Applicationは、学期の長い3年目のプロジェクトの割り当てとして行われました。この課題は、Imervinとのグループプロジェクトとして考案され、開発されました。 Cross PlatformモバイルアプリケーションであるGroupD-Mobile-Applicationは、3つのリポジトリの1つです。他の2つのリポジトリには、GroupD-Backend、両方の当事者からの寄付を伴うGroupD API、およびImervinが開発したWebアプリケーションであるGroupD-Frontendが含まれます。 GroupDの詳細については、About GroupDセクションにアクセスしてください。

考慮すべき点：

Ionic 2は私にとって新しいテクノロジーでした。詳細については、テクノロジーをご覧ください。
予期せぬ状況により、私の元の終わりのプロジェクトのアイデアはうまくいかなかったため、年末の新しいプロジェクトを開始して完了するために1か月しか残っていません。詳細については、オリジナルのアイデアをご覧ください。

GroupDについて

GroupDは、ユーザーがチームメイトを見つけてプロジェクトのアイデアに取り組むために考案されたソーシャルネットワーキングサイトです。 GroupDは開発者を念頭に置いて設計されていますが、GroupDはすべての職業のユーザーを奨励および歓迎し、このプラットフォームを使用してチームメイトを見つける必要があります。 Ervinと私は、データベースを管理し、2つのフロントエンドを支援するためにCRUD機能を管理するための共有データベース（データベーススキーマのGroupDの理由を参照）とRestful APIを開発しました（完全なドキュメントについてはGroupD-Backendを参照）。 GroupDが、ユーザーが希望するプロジェクトを投稿したり、他のユーザーとコミュニケーションをとったり、他のユーザーとプロジェクトに取り組むことを許可したかったのです。 GroupDは、レクリエーションおよび/または経験を獲得し、最終的に彼らが取り組んだプロジェクトからポートフォリオを構築するために使用できます。 GroupDは、スタートアップビジネスのチームメンバーを見つけるのにも役立ちます。

Webアプリケーションの完全なドキュメントについては、GroupD-Frontendを参照してください。

なぜGroupD

元のアイデアからの分離の後、私はクラスメートのプロジェクトであるImervinに参加しました。また、GitHubでのコラボレーションを体験し、実践するためにグループで働くことに熱心でした。アービンは、彼のWebアプリケーションに相当するモバイルアプリケーションのアイデアを歓迎しました。グループを結成するために参加すると、追加機能を追加できます。一緒に、以下に添付された新しいデータベーススキーマを設計し、これらの変更に対応するようにAPIを更新しました。

alt text

オリジナルのアイデア

私の最初のアイデアは、Windowsデスクトップセキュリティアプリの暗号化キーパーを構築することでした。

暗号化キーパーは次のとおりです。

C＃とVisual Studioで開発されます。
Windowsストアに公開されます。
ログアウト上の重要なファイルを暗号化します。
起動時にバックグラウンドプロセスを開始します。
Bluetoothを有効にし、Bluetoothデバイスを発見するインターフェイスを用意してください。
ユーザーのモバイルMACアドレスのBluetoothデバイス（以下で説明するGUIを使用して保存されます）を確認してください。
モバイルのMACアドレスが一致している場合、メッセージボックスがポップアップして管理者のパスワードを要求します。
パスワードが一致している場合、ファイルは復号化されます。
5秒ごとにデバイスを使用して握手プロトコルを実装します。
デバイスが見つからなかった場合、カメラのプレビューを使用してカメラにアクセスし、ユーザーには不明であり、顔認識を使用してユーザーの顔の写真と比較します。
顔が一致していない場合、ユーザーの写真はユーザーのメールアカウントに送信されます。
Bluetooth Authenicationのように、顔が一致している場合、メッセージボックスは管理者のパスワードを要求するように見えます。
顔認識が障害になっている場合、または電話が障害になっている場合、ユーザーが別のパスワードでGUIアプリケーションにログインするメカニズムがあります。 GUIは、暗号化するフォルダーとユーザーの資格情報を指定するためにも使用できます。繰り返しますが、ユーザーがGUIアプリケーションにログインした場合、これを通知する別のメールをユーザーに送信できます。

問題：

起動時にWindows Universalアプリを起動する方法を見つけることができませんでした。ユーザーは、スタートアップ後に1回アプリケーションを開き、バックグラウンドプロセスをアクティブにする必要がありました。
起動を起動するアプリは、Windowsストアによって承認されていないため、より電力効率が高くなります。
このアプリケーションは、Windowsサービスになるにはあまりにも要求が厳しいでしょう。

私はこのアイデアを年末のプロジェクトとして放棄しましたが、このプロジェクトの実装をあきらめたくありません。おそらく、Windowsストアアプリケーションとしてではありません。この学期にWindows Universalプラットフォームアプリケーションを作成する必要がある課題のフェイシャル認識をすでに実装しています。このWUPアプリケーションはGitHub：Safe-Note、およびWindows Store：Note Safe（Safe Noteは提出時には利用できませんでした）にあります。

特徴

主な機能：

追加機能

メンバーをクリックすると、メンバーのプロフィールページに移動します。
タグ/スキルをクリックすると、Alertがオプション、プロジェクト、ユーザーにポップアップ表示されます。次に、検索バーにタグをロードした状態で、検索ページの指定されたタブにリダイレクトします。
ユーザーからユーザーメッセージ
ホームページでの特集プロジェクト
PDFとしてプロファイルの詳細をダウンロードしてください

建築

私は、データがいつ変わるかを知的に知っているサイドメヌを使用して、グループD-Mobile-Applicationを設計しました。ユーザーデータプロバイダーが呼び出され、ユーザーの出入りをログアウトし、サイドメニューを変更するためにログインしたイベントをトリガーします。また、ユーザーデータは、現在のユーザーをローカルストレージに保存し、イベントをトリガーして変更のリソースに警告することにより、ユーザーを設定します。すべてのページのロードとリロードで現在のユーザーはAPIからリロードされ、ユーザーデータプロバイダーは変更のリソースを警告します。リソースはリソースがストレージから非同期に新しいデータを取得します。

ログアウトメニューは、2つのセクションで構成されています。

アカウント - ログイン、サインアップ。
概要 - チュートリアル。

ログインインメニューは、3つのセクションで構成されています。

ホーム、新しいプロジェクト、検索。
アカウント - プロフィール、お気に入り、編集アカウント、ログアウト。
概要 - チュートリアル。

サインアップ

サインアップページは、スライドのセットで構成され、各スライドにサインアップデータを取り込むためのフォームがあります。 Angular 2のFormBuilderを使用して、ビルドインバリデーターとカスタムバリエーターを使用してリアルタイムで入力を検証しました。残念ながら、バリデーターの方法は静的であるため、バリデーター内でHTTP呼び出しを使用する方法を理解できなかったため、非同期カスタムユーザー名の利用可能性 - バリダーターを動作させることができませんでした。データが提出されると、ユーザー名の可用性の検証が実行されます。ユーザー名が既に取得されている場合、ユーザーは必要なスライドに自動的に取得され、ユーザー名が取得されていることを警告されます。ユーザー名が利用可能な場合、データはユーザーとして保存され、フォームはリセットされ、ユーザーは成功にアラートされ、ログインページに直接移動するオプションが与えられます。

ログイン

ログインページはかなり自明であり、ユーザーはユーザー名とパスワードでログインできます。ユーザー名が存在しない場合、ユーザーはユーザー名が見つからなかったことを警告されます。ユーザー名が存在し、パスワードが無効な場合、ユーザーもこれについてアラートされます。ユーザー名とパスワードが一致している場合、ユーザーは上記のようにユーザープロバイダーによってログインされ、ユーザーに記録されたホームページに移動します。ログイン状態はストレージに保存され、ユーザーがログアウトしない限り、ユーザーが次のアプリケーションスタートアップに既にログインされるようにします。

チュートリアル

GroupDを説明するスライドのセットとそれを使用する方法の簡単な説明。

家

ホームページは、Seperateカードに表示されるすべてのプロジェクトのリストで構成されています。各プロジェクトカードには、プロジェクト名、プロジェクトサムネイルの説明、作成された時間、利用可能なポジションの量があります。各カードには2つのボタンもあります。 1つは、ユーザーのお気に入り/ブックマークにプロジェクトを追加または削除し、プロジェクトをプロジェクトページで表示する1つは表示されます。

プロジェクトページ

プロジェクトページは、プロジェクトIDをパラメーターとして使用し、そこからプロジェクトのデータと作成者のデータを取得します。このページは、プロジェクトカードとクリエイターカードの2枚のカードで構成されています。プロジェクトの作成者がアカウントを削除した場合、または見つけられなかった場合、作成者カードが表示されません。

クリエーターカードは、クリエイターの性別（男性または女性 - デフォルトは女性）、クリエーター名、ボタンによって決定されるプレースホルダーアイコンで構成されています。視聴者が作成者である場合、ボタンは視聴者を編集プロジェクトページに持ち込みます。視聴者が作成者でない場合、ボタンはユーザーを作成者のプロフィールに導きます。

プロジェクトカードは、プロジェクト名、プロジェクトサムネイルの説明、プロジェクトの説明、最大位置、利用可能な位置、タグ、メンバーで構成されています。プロジェクトメンバーがクリックされた場合、GroupDはこのメンバーがまだ存在するかどうかを確認します（メンバーがプロファイルを削除した可能性があり、別の新しいユーザーが名前を取得した可能性があります）。メンバーが存在する場合、視聴者はメンバーのプロフィールに移動されます。プロジェクトカードには、カードのフッターに2つのボタンがあります。コメントセクションを表示および隠すコメントボタンと、視聴者のプロジェクトにプロジェクトを追加または削除するためのお気に入りのボタン。

コメントセクションは、プロジェクトコメントのリストで構成されており、その下にコメントを追加する入力ボックスがあります。

プロジェクトの編集

編集プロジェクトページは、以前に入力されたデータが入力ボックスにロードされたプロジェクトを使用したフォームです。編集プロジェクトページのフォームは、プロジェクトページのフォームに非常に似ています。違いは編集プロジェクトページにあり、作成者はメンバーを追加できます。作成者は、データベースに存在するメンバーのみを追加できます。作成者には、変更を保存するか削除する2つのオプションが与えられます。両方のオプションは、クリックするとアラート警告で受信されます。変更の変更時に、変更されたメンバーのユーザードキュメントが更新され、プロジェクトドキュメントも更新されます。削除すると、作成者とメンバーのプロジェクトのインスタンスが削除され、プロジェクトは永続的に削除されます。

新しいプロジェクト

編集プロジェクトページと同様に、新しいプロジェクトページはリアルタイムValitationを備えたフォームです。新しいプロジェクトを追加するボタンが1つあります。

検索

検索はタブ付きページで、タブはプロジェクトを検索し、ユーザーを検索します。

検索プロジェクトでは、カスタムパイプを使用して、プロジェクト名またはタグでプロジェクトをリアルタイムで検索します。これは、取り組むプロジェクトを探しているユーザーに最適です。プロジェクトのリストのレイアウトは、ホームページと同じです。

検索ユーザーは、カスタムパイプを使用して、ユーザー名またはスキルでリアルタイムでユーザーを検索します。これは、プロジェクトに取り組むユーザーを探しているユーザーに最適です。表示される各ユーザーは、性別アイコン、職業、電子メール、タグの詳細を含むカードに表示されます。カードには、選択したユーザーのページに移動するボタンもあります。

プロフィール

プロファイルページは、ユーザー名をパラメーターとして使用し、ユーザードキュメントを取得し、視聴者のプロファイルであるかどうかをチェックします。プロファイルには、ユーザーのユーザー名、場所、職業、電子メール、評価、およびスキルが表示されます。視聴者のプロファイルの場合、視聴者に編集ボタンが表示されます。これは、編集アカウントページ（以下で説明）に移動し、show Ratersボタンには、すべての評価者とそのレートのリストが記載されているモーダルポップアップがあります。視聴者は、評価者のユーザー名をクリックしてプロファイルに移動することもできます。視聴者のプロファイルでない場合、視聴者にレートボタンが表示されます。レートボタンがクリックされた場合、アラートが入力ボックスにポップアップして評価を入力します。視聴者が以前にこの人を評価したことがある場合、最後のレートを上書きします。メンバーであろうと作成者であろうと、ユーザーのプロジェクトも、ホームページのプロジェクトと同じ形式で表示されます。

お気に入り

お気に入りのページには、ユーザーのお気に入りに保存されたすべてのプロジェクトが表示されます。プロジェクトのリストのレイアウトは、ホームページと同じです。

アカウントを編集します

編集アカウントページは、以前に入力/保存されたデータが入力ボックスにロードされたプロジェクトの単なるフォームです。視聴者には、変更を保存するか削除する2つのオプションが与えられます。両方のオプションは、クリックするとアラート警告で受信されます。変更の変更時に、ユーザードキュメントが更新されます。削除では、ユーザーの評価は他のユーザーの評価から削除されます（評価が削除されていない場合、別のユーザーが使用可能になったら同じユーザー名を取得すると、評価に問題がある場合があります）。ユーザードキュメントはデータベースから削除されます。

ログアウト

ログアウトページには、ユーザーデータプロバイダーを呼び出してログアウトイベントをタイガーしてメニューを変更し、ローカルストレージをクリアしてログインページに移動するボタンがあります。

テクノロジー

イオン

イオンフレームワークは、HTML、CSS、およびJavaScript（Angular）を使用したクロスプラットフォームモバイルアプリケーションまたはWebアプリケーションの作成に使用できます。

イオン1対イオン2

Ionic 1はAngular 1、HTML、CSSを使用しますが、Ionic 2はAngular 2、HTML、およびSCSSを使用します。

なぜイオン2？

アービンはすでにAngular 1の使用を開始していたため、Ionic 1を使用してモバイルアプリケーションを構築する方が、すでに作業が大量に行われているため、より賢明であると見なすことができました。しかし、私は自分の作品として完全に威厳があるので、Ionic 2を選択しました。主な理由は、Ionic 2が多くの改善を提供することです。 Josh Moronyは、ここでこれらの改善を効果的に説明しています。私の意見では、Ionic 2はIonicのより新しい改善されたバージョンであり、引き続き改善され、Ionicのチームの焦点となります。 Angular 2のケースでは、AngularJSチームについても同じことが言えます。また、TypeScriptの使用を経験したいと思っていました。

問題

カスタムバリエーターを構築して、ユーザー名の可用性をリアルタイムで非同期的に確認することは、静的メソッドでHTTPコールを使用できなかったため、非常に不可解であることが判明しました。これに幅広い時間を費やした後、私はこの問題にこれ以上時間を費やす余裕がないので先に進むことにしました。
時間制限により、コメントをプロジェクトドキュメントに保存することを決定しました。むしろ、プロジェクトドキュメントに参照された別々のドキュメントとしてのコメントを保存することにしました。
私のオブジェクトはインターフェイスであるため、スキーマの変更は、テストのためにデータベースがローカルにホストされているため、既存のデータの管理が非常に厄介であることが証明されました。
ユーザー名は、別のユーザーがそのユーザー名を取得できるため、削除時に参照される場所を管理する際に問題を引き起こしました。

実行方法

GroupD-Backend：実行方法の手順に従ってください。

Ionic 2がインストールされていない場合は、ここにあるIonic Webサイトのインストール手順に従ってください。

このリポジトリをクローンし、コマンドを実行します。

 npm install

他のすべてがセットアップと実行されたら。現在のディレクトリは次のことを確認してください：GroupD-Mobile-Application（リポジトリのサブディレクトリ）。次に、次のコマンドを実行します。

 ionic lab

結論

結論として、このプロジェクトはやりがいのある経験でした。グループで作業し、Ionic 2を初めて使用して、両方ともこれに優れた貢献者です。プロジェクトをやり直す場合、別のプロジェクトのアイデアの試みの後ではなく、このプロジェクトのアイデアを最初から始めます。また、コメントはプロジェクトに関連するデータであるため、プロジェクトドキュメントにコメントを埋め込むのではなく、別のコメントドキュメントを参照しますが、コメントはプロジェクトデータの残りの部分とは異なる状況によって変わります。コメントは、おそらく無限の量に非常に急速に成長する可能性があり、プロジェクトドキュメントに大きなサイズを可能にすることはできません。最後に、一意のユーザー名の代わりに一意のIDを使用することを検討し、「休眠」：true/falseのようなプロパティを間違いなく追加します。このプロパティは、実際にユーザードキュメントを削除する場所で使用され、古いユーザー/新しいユーザーと混同される参照ユーザー名（または変更される場合は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/repeatly-background-task-ionic-framework

https://github.com/yannbf/ionic2-components

http://stackoverflow.com/questions/17616624/detect-if-string-contains- aypaces

https://www.joshmorony.com/advanced-forms-validation-in-ionic-2/

http://stackoverflow.com/questions/35039610/angular2-manually-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-bservable

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-またはtopof-the-screen/

http://www.neilberry.com/how-to-run-your-app-on-real-devices/

Tara O'Kelly [email protected]

拡大する

追加情報

バージョン 1.0.0
タイプその他のソースコード
更新時間 2025-05-24
サイズ 1.35MB
から Github

Groupd Mobile Application