Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android

如何使用Firebase创建Android聊天应用程序

by
Difficulty:BeginnerLength:LongLanguages:

Chinese (Simplified) (中文(简体)) translation by Zhang Xiang Liang (you can also view the original English article)

Final product image
What You'll Be Creating

使用Firebase创建实时社交应用程序很简单。 而且您不必编写一行服务器端代码。

在本教程中,我将展示如何利用Firebase UI创建聊天应用程序,您可以与您的朋友分享。 这是一个非常简单的应用程序,只有一个聊天室,对所有用户开放。

机智如你,该应用程序依赖于Firebase Auth来管理用户注册并登录。 还使用Firebase的实时数据库来存储聊天消息。

准备工作

为了与本教程保持一致,需要注意以下几点:

如何设置Firebase帐户并为Android Studio中的Firebase开发做好准备,请参阅Envato Tuts +上我的教程  “入门Firebase for Android”

1.创建一个Android Studio项目

启动Android Studio并创建一个名为MainActivity的空activity的新项目。

Add empty activity

要将项目配置为使用Firebase平台,请单击“ 工具”>“Firebase”,打开“Firebase Assistant”窗口。

在使用Firebase平台的同时,最好将Firebase Analytics添加到项目中。 因此,在Firebase Assistant窗口中,进入Google Analytics(分析)部分,然后点击Log an Google Analytics(分析)事件。

Firebase Assistant

接下来,点击“ 连接到Firebase”按钮,确保选择了“ 创建新的Firebase项目”选项。 建立连接后,点击“ 添加Google Analytics(分析)”按钮。

Press Add analytics to your app

此时,Android Studio项目不仅集成Firebase Analytics,还可以使用所有其他Firebase服务。

2.添加依赖关系

我们将在此项目中使用两个库:Firebase UI和Android设计支持库。 因此,打开app模块的build.gradle文件并添加以下compile依赖项:

点击“ 立即同步”按钮更新项目。

3.定义布局

已经绑定到MainActivityactivity_main.xml文件定义了应用程序主界面的内容。 换句话说,它就是聊天室的界面。

像今天可用的其他大多数聊天应用程序一样,我们的应用程序具有以下UI元素:

  • 按时间顺序显示所有群组聊天消息列表
  • 用户可以输入新消息的输入框
  • 可以发布消息的按钮

因此,activity_main.xml必须有ListViewEditTextFloatingActionButton。 将它们全部放入RelativeLayout布局后,您的布局XML应如下所示:

请注意,我把EditText控件放在TextInputLayout控件中。 这样做会给EditText添加一个浮动标签,这样可以体现MD风格。

现在主界面的布局已经准备好了,我们可以继续创建聊天消息的布局,ListView里面的子item单元。 首先创建一个名为message.xml的新布局XML文件,该文件的根元素是RelativeLayout

该布局必须有TextView框架来显示聊天消息的文本,发送的时间及作者。 你可以随意放置他们的顺序。 布局如下:

4.处理用户认证

最好不要允许用户匿名发布消息到聊天室。 这可能会导致垃圾邮件,安全问题以及不太理想的聊天体验。 因此,让我们现在配置我们的应用程序,只有注册用户才可以读取和发送消息。

先从Firebase ConsoleAuth部分开始,并启用Email / Password作为登录提供者。

免费启用OAuth 2.0登录提供商。 然而,FirebaseUI v0.6.0无缝地支持Google登录和Facebook登录。

步骤1:处理用户登录

一旦应用程序启动,它必须检查用户是否登录。 登录后,该应用程序应该继续显示聊天室的内容。 否则,它必须将用户重定向到登录界面或注册界面。 使用FirebaseUI创建这些界面比您想像的代码少得多。

MainActivityonCreate()方法中,通过检查当前FirebaseUser对象是否为null来检查用户是否已经登录。 如果FirebaseUser对象是null,您必须创建并配置Intent对象来打开登录activity。 为此,请使用SignInIntentBuilder类。 一旦Intent准备就绪,您必须使用startActivityForResult()方法启动登录activity。

请注意,登录activity还允许新用户注册。 因此,您没有写任何额外的代码来处理用户注册。

将以下代码添加到onCreate()方法中:

如上面的代码所示,如果用户已经登录,我们首先显示一个Toast欢迎用户,然后调用名为displayChatMessages的方法。 现在,只需创建一个存根。 稍后我们会添加代码。

一旦用户登录,MainActivity将收到一个Intent形式的结果。 必须重写onActivityResult()方法才来处理它。

如果结果的代码是RESULT_OK,则表示用户已成功登录。 如果是这样,你必须()再次调用displayChatMessages方法。 否则,请调用finish()方法关闭应用程序。

现在,您可以运行应用程序,并查看登录和注册屏幕。

Sign up screen for new users

步骤2:处理用户注销

默认情况下,FirebaseUI使用Smart Lock进行密码管理。 因此,一旦用户登录,即使应用重新启动,他们也将保持登录状态。 为了允许用户注销,我们现在将在MainActivity的菜单中添加一个退出选项。

创建一个名为main_menu.xml的新菜单资源文件,并向其添加一个item,其title属性设置为注销。 该文件的内容应如下:

要实例化MainActivity里面的菜单资源,重写onCreateOptionsMenu()方法并调用MenuInflater对象的inflate()方法。

接下来,重写onOptionsItemSelected()方法来处理菜单项上的点击事件。 在该方法中,您可以调用 AuthUI类的signOut()方法来签名用户。 因为注销操作是异步执行的,所以我们还会添加一个OnCompleteListener

用户注销后,应用程式应自动关闭。 这就是为什么在上面的代码中调用finish()方法的原因。

5.创建一个模型

为了将聊天消息存储到Firebase实时数据库中,您必须为它们创建一个模型。 本教程前面创建的聊天消息的布局有三个视图。 为了能够填充这些视图,模型也必须至少有三个字段。

创建一个新的Java类ChatMessage.java并添加三个成员变量messageTextmessageUsermessageTime。 还要添加一个构造方法来初始化这些变量。

要使模型与FirebaseUI兼容,您还必须向其添加默认构造方法以及所有成员变量的getter和setter方法。

现在,ChatMessage类应该如下所示:

发布聊天消息

现在,该模型已经准备就绪,我们可以轻松地向Firebase实时数据库添加新的聊天消息。

要发送新消息,用户要点击FloatingActionButton。因此,您必须给它添加OnClickListener点击事件。

在监听器中,您必须首先使用FirebaseDatabase类的getReference()方法获取DatabaseReference对象。 然后,您可以调用push()和setValue()方法将ChatMessage类的新实例添加到实时数据库。

这些ChatMessage实例当然必须使用EditText的内容进行初始化并且显示当前登录的用户名称。

因此,将以下代码添加到onCreate()方法中:

Firebase实时数据库中的数据始终作为键值对存储。 但是,如果您遵守上述代码,您将看到我们调用了setValue()而没有指定任何键。 这仅仅是因为先调用了push()方法,该方法自动生成一个新的键。

7.显示聊天消息

FirebaseUI有一个非常方便的类FirebaseListAdapter,它大大降低了使用Firebase实时数据库中存在的数据填充ListView所需的工作量。 我们现在将使用它来获取和显示数据库中存在的所有ChatMessage对象。

FirebaseListAdapter对象添加为MainActivity类的新成员变量。

displayChatMessages()方法中,使用其构造方法初始化适配器,该构造方法需要以下参数:

  •  Activity引用
  • 你感兴趣的class对象
  • 列表子item的布局
  • 一个DatabaseReference对象

FirebaseListAdapter是抽象类,有populateView()抽象方法,必须被实现该方法。

顾名思义,populateView()用于填充每个列表项的子item。 如果您熟悉ArrayAdapter类,您可以将populateView()方法看作getView()方法的替代。

在该方法中,您必须首先使用findViewById()来获取message.xml布局文件中TextView的每一个的引用。 然后,您可以使用ChatMessage类的getter 来调用它们的setText()方法并填充它们。

此时,displayChatMessages()方法的内容应该如下所示:

群聊应用已准备就绪。 运行它并发送一条新消息,看到它们立即显示在ListView中。 如果您与朋友分享该应用程序,您也可以立即看到他们的发送过来的消息。

结论

在本教程中,您学习了如何使用Firebase和FirebaseUI创建一个非常简单的群聊应用程序。 您还看到使用FirebaseUI中的类可以轻松实现快速创建新界面并实现复杂功能。

要了解有关Firebase和FirebaseUI的更多信息,请参阅官方文档。 或者在Envato Tuts +上查看我们的其他Firebase教程。


关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.