ホームページ >ウェブフロントエンド >jsチュートリアル >Milligram-Connect ソーシャル メディア アプリケーション

Milligram-Connect ソーシャル メディア アプリケーション

Patricia Arquette
Patricia Arquetteオリジナル
2024-12-12 13:49:11861ブラウズ

スプラッシュスクリーン

スプラッシュ画面は、アプリの起動時に表示されるアプリのロゴやブランドを特徴とする初期画面であり、アプリの読み込み時に視覚的に魅力的な導入を提供します。
Milligram-Connect Social Media Application

ログイン画面

既存のユーザーはログイン画面で自分のアカウントにアクセスでき、新規ユーザーはサインアップ画面で詳細を入力してアカウントを作成できます。
Milligram-Connect Social Media Application

ホーム画面

ログインすると、ホーム画面にスクロール可能なフィードが表示され、ユーザーはここですべての投稿を表示し、「いいね!」、コメント、共有、保存することができます。さらに、ユーザーは各投稿を開いて、「いいね!」やコメントに関する詳細情報を確認できます。
Milligram-Connect Social Media Application

ユーザーは、下の画像に示されている投稿にコメントしたり共有したりできます。
Milligram-Connect Social Media Application

検索画面

検索画面で、ユーザーは下部のナビゲーションバーの検索オプションに移動して、アプリケーションで使用可能なユーザー名を見つけて検索できます。
Milligram-Connect Social Media Application

投稿画面作成

ユーザーは下部のナビゲーション バーから [投稿の作成] 画面にアクセスし、モバイル ギャラリーから画像を追加し、キャプションを書き込んで、コンテンツを投稿できます。
Milligram-Connect Social Media Application

通知画面

ユーザーは下部のナビゲーション バーから通知画面に移動し、すべての通知を表示して開くことができます。
Milligram-Connect Social Media Application

メッセージ画面

ユーザーは下部のナビゲーション バーからメッセージ画面に移動し、ユーザーのリストを表示し、チャットするユーザーを選択して、その会話のすべてのメッセージを確認できます。
Milligram-Connect Social Media Application
ユーザーチャットを削除するには、画面の右上隅にある 3 つの点をクリックします。これにより、削除オプションを含む次のポップアップが表示されます。
Milligram-Connect Social Media Application

設定画面

右上隅の設定アイコンをクリックすると、次の設定画面が開きます。ユーザーは以下にアクセスできます:

  • アカウントセンター
  • 保存された投稿
  • アカウントのプライバシー
  • ブロックされました (まだ実装されていません)
  • ミリグラム検証
  • ログアウト
  • アカウントの削除オプション

Milligram-Connect Social Media Application

1.アカウントセンター
「アカウントセンター」をクリックすると、以下のページが開きます。ここで、ユーザーは 2 つの追加オプションから選択できます:

  • 個人情報
  • パスワードとセキュリティ

Milligram-Connect Social Media Application

個人情報
[個人の詳細] オプションをクリックすると、ユーザーは [個人の詳細] 画面に移動し、登録に使用した電子メール アドレスを表示し、Milligram Connect アプリケーションにログインできます。

パスワードとセキュリティ
アカウント センターで [パスワードとセキュリティ] オプションをクリックすると、ユーザーは [パスワードの変更] 画面に移動し、そこでパスワードを更新できます。

以下
左の画像: 個人詳細画面
右画像: パスワードとセキュリティ画面

Milligram-Connect Social Media Application

2.保存された投稿
[設定] で [保存された投稿] オプションをクリックすると、ユーザーは [保存された投稿] 画面にリダイレクトされ、フィードから保存した投稿を表示できます。
Milligram-Connect Social Media Application

3.アカウントのプライバシー
[設定] で [アカウント プライバシー] オプションをクリックすると、ユーザーは 2 つのプライバシー設定から選択できます:

  • パブリック: Milligram アプリケーションのすべてのユーザーが自分のプロフィールを表示できます。
  • プライベート: 接続している人だけが自分のプロフィールを見ることができます。 Milligram-Connect Social Media Application

4.ミリグラム検証
[設定] で [ミリグラム検証] オプションをクリックすると、ユーザーはミリグラム検証画面にリダイレクトされます。ここで、確認メールを送信するオプションが表示されます。このオプションを選択すると、登録された電子メール アドレスに確認電子メールが送信されます。電子メールには、検証プロセスを完了するためにユーザーがクリックする必要がある URL が含まれています。認証に成功すると、ミリグラム認証画面に「メール ID が認証されました」というメッセージが表示されます。

Milligram-Connect Social Media Application

5.ログアウト
[ログアウト] オプションを選択すると、ユーザーはアプリケーションからログアウトされ、ログイン画面にリダイレクトされます。

6.アカウントを削除します
[アカウントを削除] オプションを選択すると、ユーザーは自分のアカウントとすべての関連データをアプリケーションから完全に削除できます。

プロフィール画面

左上隅にあるユーザープロフィールのロゴ画像をクリックすると、プロフィール画面が開きます。
Milligram-Connect Social Media Application

プロフィール編集画面
プロフィール画面で [プロフィールの編集] ボタンをクリックすると、ユーザーはプロフィールの編集画面にリダイレクトされます。下の左図の画面が表示されます。

プロフィールを共有
ユーザー名の右側にある共有アイコンをクリックすると、ユーザーは自分のプロフィール URL を他のプラットフォーム上の任意のユーザーと共有でき、下の右の画像に示す画面が表示されます。
Milligram-Connect Social Media Application

フォロワーとフォロー中画面
ユーザープロフィール画面で「フォロワー」または「フォロー中」のテキストをクリックすると、それぞれの画面が開きます。ここで、ユーザーは自分をフォローしているフォロワーのリストとフォローしているユーザーのリストを表示できます。
Milligram-Connect Social Media Application

別のユーザーのプロフィールを開く
フォロワーまたはフォローリストから任意のユーザーをクリックすると、そのユーザーのプロフィール画面が開きます。ユーザーは、下の画像に示すように、選択したユーザーのプロフィール データを表示できるようになります。
Milligram-Connect Social Media Application

ダウンロードしてインストールする

Android版をリリースしました!下のリンクをクリックしてダウンロードしてインストールします
ミリグラムコネクト
Milligram-Connect Social Media Application

使用される技術スタック

  • ネイティブ CLI に反応
  • Firestore と Firebase データベース
  • Firebase メール認証
  • スタイルを設定するためのスタイル付きコンポーネント

以上がMilligram-Connect ソーシャル メディア アプリケーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。