Basic30天學會行動App-第18章.建立聊天App

16th鐵人賽聊天app firebase

因田木

2024-09-18 00:03:52

145 瀏覽

分享至

第18章: 建立聊天App

即時通訊應用程式（如聊天App）是現代行動應用中非常流行的一類程式。無論是社交平台、團隊協作工具還是客戶支援系統，即時通訊都是其核心功能之一。本章將介紹如何在 B4A 中建立一個基本的聊天應用程式，涵蓋即時通訊的基礎、使用 Firebase 等即時通訊服務，並顯示和管理聊天訊息。

即時通訊的基礎

即時通訊的關鍵在於訊息能夠在用戶之間快速傳遞。這通常涉及以下幾個核心概念：
• 用戶身份驗證：確保每個用戶的唯一性並能夠識別不同的用戶。
• 訊息的即時傳遞：透過即時通訊協議，訊息能夠快速地在用戶之間傳遞。
• 資料同步與儲存：所有訊息需要被正確地儲存並能在不同設備之間同步。

用戶身份驗證
在聊天應用中，第一步通常是讓用戶能夠登錄。Firebase Authentication 是一個簡單易用的身份驗證工具，可以使用電子郵件、Google、Facebook 等多種方式進行身份驗證。

Sub AuthenticateUser
    Dim auth As FirebaseAuth
    auth.Initialize("Auth")
    auth.SignInWithEmailAndPassword("user@example.com", "password123")
End Sub

Sub Auth_Complete (Success As Boolean, User As FirebaseUser)
    If Success Then
        Log("User signed in successfully: " & User.DisplayName)
    Else
        Log("Sign-in failed")
    End If
End Sub

這段程式碼示範了如何使用 Firebase 進行基本的用戶身份驗證。

使用Firebase或其他即時通訊服務

Firebase 提供了實時資料庫（Firebase Realtime Database）和雲端訊息傳遞（Firebase Cloud Messaging, FCM）兩種強大的工具，可以用來實作聊天功能。

設置 Firebase Realtime Database
Firebase Realtime Database 是一個雲端託管的 NoSQL 資料庫，允許資料以 JSON 格式儲存，並能夠在所有已連線的用戶間即時同步。
首先，需要在 Firebase 控制台中創建一個專案並設定 Realtime Database。

Sub InitializeDatabase
    Dim fbDB As FirebaseDatabase
    fbDB.Initialize("Database")
    fbDB.GetReference("chats")
End Sub

Sub Database_DataChange (Data As Map)
    For Each entry As Map In Data
        Log("Message: " & entry.Get("text"))
    Next
End Sub

這段程式碼示範了如何初始化 Firebase Realtime Database 並監聽聊天訊息的變化。
2. 發送與接收訊息
要實現訊息的即時傳遞，我們需要在資料庫中新增訊息節點，並在用戶之間同步這些資料。

Sub SendMessage(text As String)
    Dim fbDB As FirebaseDatabase
    fbDB.Initialize("Database")
    
    Dim message As Map
    message.Initialize
    message.Put("text", text)
    message.Put("timestamp", DateTime.Now)
    message.Put("sender", "User1")
    
    fbDB.GetReference("chats").Push(message)
End Sub

Sub Database_DataChange (Data As Map)
    For Each entry As Map In Data
        Dim msg As String = entry.Get("text")
        Dim sender As String = entry.Get("sender")
        Log("[" & sender & "]: " & msg)
    Next
End Sub

在這段程式碼中，SendMessage 方法將訊息儲存至資料庫，而 Database_DataChange 方法則負責監聽並顯示新訊息。

顯示與管理聊天訊息

顯示聊天訊息是聊天應用的重要部分。通常我們會使用 ListView 或 CustomListView 來顯示訊息列表。

顯示訊息列表

Sub ShowMessages(messages As List)
    For Each msg As Map In messages
        Dim item As Panel = CreateMessagePanel(msg)
        CustomListView1.Add(item, msg)
    Next
End Sub

Sub CreateMessagePanel(msg As Map) As Panel
    Dim pnl As Panel
    pnl.Initialize("")
    
    Dim lblSender As Label
    lblSender.Initialize("")
    lblSender.Text = msg.Get("sender")
    pnl.AddView(lblSender, 10, 10, 200, 30)
    
    Dim lblMessage As Label
    lblMessage.Initialize("")
    lblMessage.Text = msg.Get("text")
    pnl.AddView(lblMessage, 10, 50, 200, 100)
    
    Return pnl
End Sub

這段程式碼展示了如何創建自訂的訊息顯示面板並將其加入到 CustomListView 中，以顯示每條訊息。
2. 管理訊息狀態
管理訊息的狀態（如已讀、未讀）是提高用戶體驗的關鍵。我們可以在 Firebase 資料庫中為每條訊息加入一個狀態欄位，並根據需要進行更新。

Sub MarkMessageAsRead(messageId As String)
    Dim fbDB As FirebaseDatabase
    fbDB.Initialize("Database")
    
    fbDB.GetReference("chats").Child(messageId).Child("status").SetValue("read")
End Sub

這段程式碼展示了如何更新訊息的狀態為「已讀」。

範例程式：完整的聊天App

以下是一個簡單的聊天應用程式範例，結合了前述各個部分的功能。

Sub Process_Globals
    ' 全域變數
End Sub

Sub Globals
    Dim edtMessage As EditText
    Dim btnSend As Button
    Dim CustomListView1 As CustomListView
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("MainLayout")
    
    edtMessage.Initialize("edtMessage")
    Activity.AddView(edtMessage, 10, 10, 300, 50)
    
    btnSend.Initialize("btnSend")
    btnSend.Text = "發送"
    Activity.AddView(btnSend, 320, 10, 100, 50)
    
    CustomListView1.Initialize(Me, "CustomListView1")
    Activity.AddView(CustomListView1.AsView, 10, 70, 410, 500)
    
    InitializeDatabase
End Sub

Sub btnSend_Click
    Dim messageText As String = edtMessage.Text
    SendMessage(messageText)
    edtMessage.Text = ""
End Sub

Sub InitializeDatabase
    Dim fbDB As FirebaseDatabase
    fbDB.Initialize("Database")
    fbDB.GetReference("chats")
End Sub

Sub SendMessage(text As String)
    Dim fbDB As FirebaseDatabase
    fbDB.Initialize("Database")
    
    Dim message As Map
    message.Initialize
    message.Put("text", text)
    message.Put("timestamp", DateTime.Now)
    message.Put("sender", "User1")
    
    fbDB.GetReference("chats").Push(message)
End Sub

Sub Database_DataChange (Data As Map)
    CustomListView1.Clear
    For Each entry As Map In Data
        Dim item As Panel = CreateMessagePanel(entry)
        CustomListView1.Add(item, entry)
    Next
End Sub

Sub CreateMessagePanel(msg As Map) As Panel
    Dim pnl As Panel
    pnl.Initialize("")
    
    Dim lblSender As Label
    lblSender.Initialize("")
    lblSender.Text = msg.Get("sender")
    pnl.AddView(lblSender, 10, 10, 200, 30)
    
    Dim lblMessage As Label
    lblMessage.Initialize("")
    lblMessage.Text = msg.Get("text")
    pnl.AddView(lblMessage, 10, 50, 200, 100)
    
    Return pnl
End Sub

結論
通過本章的學習，你已經掌握了如何使用 Firebase Realtime Database 構建一個基本的聊天應用程式，包括即時通訊的基礎知識、訊息的發送與接收，以及如何顯示和管理聊天訊息。這些技術為你打下了開發即時通訊應用的基礎，隨著進一步的學習，你可以加入更多進階功能，如訊息加密、圖片和影片的傳送，以及更複雜的用戶介面設計。

參考網址
https://www.b4x.com/teach.html
https://www.b4x.com/learn.html