close
chat

Z tym artykułem stworzysz prostą aplikację webową czasu rzeczywistego. Zobaczysz w jaki sposób dodawać/pobierać dane i wyświetlać je w widoku na bieżąco. Czym jest Firebase i jak z niego korzystać pisałem już wcześniej. Jako kontynuację tego tematu, specjalnie dla czytelników Devcorner przygotowałem poradnik jak stworzyć prosty czat w AngularJS i Firebase.

Zobacz demo

Przygotowanie środowiska

Konfigurację rozpoczynamy od utworzenia nowego projektu w Firebase Console. W nowym projekcie przechodzimy do zakładki “Database” i wybieramy “Realtime Database” klikając w przycisk “Rozpocznij”. To w tym miejscu będzie wyświetlało się pełne drzewko danych. Na tym etapie zawiera jedynie główny węzeł o ID, które jednoznacznie identyfikuje nasz projekt.

W tym miejscu należy wspomnieć, że każda struktura danych w Firebase, posiada zestaw reguł. Reguły definiują, kto i w jaki sposób będzie miał dostęp do poszczególnych węzłów w drzewie. Aplikacja, którą stworzymy na potrzeby demonstracyjne, nie będzie w żaden sposób uwierzytelniała użytkowników bo jest to temat na odrębny artykuł. Skupiamy się tutaj jedynie na tym w jaki sposób synchronizować aplikację AngularJS z bazą danych. W związku z tym, musimy umożliwić nieautoryzowanym użytkownikom odczytywać i zapisywać dane w drzewie (pamiętaj, że w praktyce takie rozwiązanie jest niedopuszczalne ze względów bezpieczeństwa). W edytorze zmieniamy domyślne wartości .read i .write na true i potwierdzamy przyciskiem Opublikuj.

Kolejnym krokiem jest stworzenie struktury plików dla naszej aplikacji. Niezależnie od tego z jakich narzędzi korzystasz, struktura niczym nie różni się od zwykłej strony internetowej. Moje drzewo plików wygląda w sposób następujący:

  • /index.html
  • /scripts/app.js
  • /styles/main.css

W pliku index.html tworzymy szkielet strony i załączamy framework AngularJS, Firebase SDK a także bibliotekę angularFire, która ułatwi nam synchronizację kontrolerów z bazą danych. Oprócz tego ładujemy moduł ngCookies. Ciasteczka wykorzystamy do podtrzymania sesji użytkownika.

Szkielet HTML strony

Połączenie z Firebase

W pierwszej kolejności będziemy musieli skonfigurować połączenie z Firebase. Całość sprowadza się do skopiowania gotowego kodu z panelu zarządzania.

Przechodzimy do Overview > Ustawienia projektu. W sekcji “Twoje aplikacje” wybieramy “Dodaj Firebase do swojej aplikacji internetowej” i wklejamy kod do pliku app.js.

Połączenie z Firebase

Ostatnią rzeczą jaką potrzebujemy by dobrać się do danych, to utworzenie referencji. W AngularJS warto odchudzać kontrolery (jak niektórzy piszą: “odseparować osobne byty”) stosując tzw. “services”. W tym przypadku wykorzystamy najprostszy ich typ czyli “factory”. Nasze factory będzie składało się z dwóch metod:

  • getUsers,
  • oraz getMessages.

Obie funkcje zwracają obiekt typu $firebaseArray, o którym dowiesz się więcej z dokumentacji angularFire.

Factory dla danych z Firebase

Przygotujmy teraz kontroler i sprawdźmy czy mamy dostęp do Firebase. Głównym kontrolerem naszej aplikacji będzie “chatCtrl”, w nim utworzymy tablice i obiekty, które będą widoczne dla kontrolerów niższego poziomu.

By mieć pewność, że dane zostały w pełni pobrane wykorzystuje się tzw. “promise” – w skrócie funkcję, która wywoła się w momencie otrzymania zwrotnych informacji. W angularFire taką “obietnicę” realizuje funkcja $loaded().

Pobranie użytkowników i wiadomości

Na tym etapie warto wstawić testowe dane przez panel i sprawdzić czy aplikacja ma do nich dostęp:

  • console.log($scope.messages)
  • console.log($scope.users)

Jeżeli tablice zawierają testowe rekordy możesz wziąć łyk kawki, rozciągnąć się i przygotować na dalsze etapy pracy.

Przygotowanie widoku

Zanim przejdziemy dalej, warto popracować nad plikiem HTML, który będzie wyświetlał poszczególne widoki. Cały ekran podzielimy na 3 części (lista wiadomości, formularz do wpisywania wiadomości oraz listę użytkowników). Dodatkowo wyświetlimy formularz logowania.

Szkielet HTML elementu z czatem

Logowanie i lista użytkowników

Żeby nie komplikować tego poradnika a skupić się na pokazaniu jak działa czat w AngularJS i Firebase, pominiemy typowy model autoryzacji użytkowników. Musimy jednak w jakiś sposób identyfikować osoby piszące wiadomości. Dlatego też, zrobimy prosty trik: wykorzystamy pliki cookies.

Widok formularza logowania

Zwróć uwagę na atrybut ng-show=”!current_user.online”. Oznacza to to, że formularz logowania powinien być widoczny tylko wtedy gdy użytkownik jest niezalogowany (w przeglądarce nie ma jego cookie).

A jak to działa od środka? Wracamy do pliku app.js i tworzymy nowy kontroler. Wewnątrz definiujemy funkcję loginUser, która wywołamy w “on submit”. Funkcja sprawdza czy wprowadzony wymagany login i dodaje rekord w drzewie Firebase.

Metoda $add() służy właśnie do tworzenia nowych rekordów. Wywołujemy ja na zbindowanej wcześniej tablicy ($scope.users). W bazie danych zapiszemy:

  • nickname użytkownika,
  • datę dołączenia
  • aktualny status (online/offline).

Tworzenie i logowanie użytkownika

Jak widać, po wykonaniu funkcji $add, otrzymane wartości zapisywane są w scope oraz plikach cookies. Na koniec ustawiamy focus na polu wpisywania wiadomości.

No dobrze… użytkownik został zarejestrowany i jest online. Ale co w przypadku gdy zamknie stronę i wejdzie na nią ponownie? W kontrolerze dodajemy warunek sprawdzający istnienie ciasteczka. Jeżeli takowe istnieje, ustawiamy status użytkownika na “true” i ukrywamy panel logowania.

Autologowanie

Powinniśmy obsłużyć jeszcze zmianę statusu na offline. Z pomocą przyjdzie nam zdarzenie “onBeforeUnload”.

Zmiana statusu na offline

Aby zwieńczyć dzieło, wyświetlimy listę wszystkich użytkowników wraz z ich statusami. By tego dokonać musimy jedynie przygotować widok HTML. Wszystkie potrzebne dane są już w kontrolerze – wystarczy je tylko wyświetlić.

Widok HTML listy wiadomości

Pisanie wiadomości

Ufff… tyle tekstu a czat w AngularJS nie pozwala jeszcze nic pisać. Stwórzmy zatem prosty formularz składający się z pola tekstowego i przycisku.

Formularz pisania wiadomości

W kontrolerze tworzymy funkcję sendMessage odpowiedzialną za dodanie wiadomości w bazie danych. Każdy rekord będzie składał się z:

  • treści,
  • ID użytkownika,
  • loginu użytkownika,
  • oraz daty wysłania.

Zapisanie nowej wiadomości

Wyświetlanie wiadomości

Najgorsze już za nami ale czat nadal nie wyświetla żadnych wpisów. Dodajemy kolejny widok w index.html.

HTML dla listy wiadomości

Sprawdzony model wyświetlania każdego czatu, charakteryzuje się odwróconym kierunkiem strony. Oznacza to, że najnowsza wiadomość wyświetla się na samym końcu listy – tuż nad polem pisania.

W widoku chatu, wpisy zostały już posortowane filtrem “orderBy”. Powinien jednak istnieć mechanizm, który będzie przewijał stronę do najnowszej wiadomości. Niestety nie wystarczy zrobić tego przy załadowaniu strony. Wykorzystamy tutaj $watch() by nasłuchiwać nowych wiadomości i przewijać stronę do ostatniej pozycji.

Wykrywanie nowych wiadomości

Na końcu pliku app.js zdefiniujmy również funkcję scrollBottom:

Od tego momentu Angular obserwuje zmiany w $scope a dokładnie w $scope.messages. Jeżeli w drzewie pojawia się nowy rekord, strona automatycznie przewija się do samego dołu.

Na koniec

Podczas przygotowywania tego wpisu gościnnego, zaskoczyła mnie ilość tekstu jaka jest potrzebna do omówienia demo. W związku z tym oszczędzimy sobie wnikliwej analizy stylów. Cały kod CSS jest dostępny w źródle strony a kto pyta – nie błądzi.

Na koniec, chciałbym was również zaprosić do dyskusji na temat tej prostej aplikacji. Zadawajcie pytania i wyrażajcie swoją opinię. Myślę, że taki kawałek kodu, zawsze przyda się w przyszłości.

 

Tags : angularchatfirebasejavascriptporadnik
  • veranoo

    Fajnie, ale lepiej mogłbyś użyć coś nowego, np vue. angularjs miał już swoje 5 minut.

    • Może kolejny poradnik będzie napisany w innym frameworku. AngularJS może i miał swoje 5 minut ale to nie znaczy, że jest bezużyteczny. Ciężko jest być na bieżąco ze wszystkim bo ilość narzędzi rośnie jak grzyby po deszczu