Milligram-Connect 社交媒体应用程序

启动画面

启动画面是应用程序启动时出现的初始屏幕,其中包含应用程序的徽标或品牌,在加载时提供视觉上引人入胜的介绍。

splash screen

登录屏幕

登录屏幕允许现有用户访问他们的帐户,而注册屏幕允许新用户通过提供他们的详细信息来创建帐户。

Login Screen

主屏幕

登录后,主屏幕会显示一个可滚动的提要,用户可以在其中查看所有帖子,点赞、评论、分享和保存它们。此外,用户可以打开每篇帖子查看有关点赞和评论的详细信息。

home screen

用户可以对下图所示的帖子进行评论和分享。

posts comments share

搜索屏幕

在搜索屏幕上,用户可以导航到底部导航栏中的搜索选项来查找和搜索应用程序中可用的用户名。

Image description

创建帖子屏幕

用户可以通过底部导航栏访问创建帖子屏幕,从移动图库添加图片、撰写标题并发布内容。

create post screen

通知屏幕

用户可以通过底部导航栏导航到通知屏幕来查看和打开所有通知。

notification screen

信息屏幕

用户可以通过底部导航栏导航到消息屏幕,查看用户列表,选择要聊天的用户,并查看该对话的所有消息。

messaging screen

要删除用户聊天,请点击屏幕右上角的三个点。这将显示以下带有删除选项的弹出窗口。

delete chats

设置屏幕

点击右上角的设置图标后,将打开以下设置屏幕。用户可以访问:

  • 帐户中心
  • 已保存的帖子
  • 帐户隐私
  • 已阻止(尚未实施)
  • 毫克验证
  • 登出
  • 删除帐户选项
  • settings page

    **1. 账户中心**

    点击账户中心后,将打开以下页面。在这里,用户可以从两个附加选项中进行选择:

  • 个人资料
  • 密码和安全
  • account center

    **个人信息**

    点击“个人详细信息”选项后,用户将被引导至“个人详细信息”屏幕,在那里他们可以查看用于注册和登录 Milligram Connect 应用程序的电子邮件地址。

    **密码和安全**

    点击帐户中心的“密码和安全”选项后,用户将被引导至“更改密码”屏幕,可在此更新密码。

    以下

    左图:个人详细信息屏幕

    右图:密码和安全屏幕

    Personal Details

    **2. 已保存的帖子**

    单击“设置”中的“已保存的帖子”选项后,用户将被重定向到“已保存的帖子”屏幕,在那里他们可以查看从提要中保存的帖子。

    save posts

    **3. 账户隐私**

    单击“设置”中的“帐户隐私”选项后,用户可以在两种隐私设置之间进行选择:

  • 公开:Milligram 应用程序中的所有用户都可以看到他们的个人资料。
  • 私人:只有已连接的人员才能看到他们的个人资料。
  • **4. 毫克验证**

    在“设置”中单击“毫克验证”选项后,用户将被重定向到“毫克验证”屏幕。在这里,他们将看到一个发送验证电子邮件的选项。选择此选项后,验证电子邮件将发送到他们的注册电子邮件地址。电子邮件将包含一个 URL,用户必须单击该 URL 才能完成验证过程。成功验证后,“毫克验证”屏幕将显示一条消息,提示“您的电子邮件 ID 已验证”。

    verification

    **5. 退出**

    选择“注销”选项后,用户将退出应用程序并重定向到登录屏幕。

    **6. 删除您的帐户**

    选择“删除您的帐户”选项后,用户可以从应用程序中永久删除他们的帐户和所有相关数据。

    个人资料屏幕

    点击左上角的用户个人资料徽标图像后,个人资料屏幕将打开。

    profile

    **编辑个人资料屏幕**

    在个人资料屏幕中点击“编辑个人资料”按钮后,用户将被重定向到“编辑个人资料”屏幕。将出现下图左侧所示的屏幕。

    **分享个人资料**

    点击用户名右侧的分享图标后,用户可以与其他平台上的任何用户分享他们的个人资料URL,如下图右所示的屏幕将变为可见。

    edit profile

    **关注者和关注者屏幕**

    在用户资料屏幕上,如果用户点击“关注者”或“正在关注”文本,则会打开相应的屏幕。在这里,用户可以查看关注他们的关注者列表以及他们正在关注的用户列表。

    followers and follwoings

    **打开其他用户的个人资料**

    点击关注者或关注者列表中的任意用户后,该用户的个人资料屏幕将打开。用户将能够查看所选用户的个人资料数据,如下图所示。

    another users profile

    下载并安装

    Android 版本已发布!点击以下链接下载安装

    毫克连接

    drive link

    使用的技术堆栈

  • React Native CLI
  • Firestore 和 Firebase 数据库
  • Firebase 电子邮件身份验证
  • 用于样式设置的 Styled-Components