Labor 12 - Firebase
Bevezető
A labor során egy fórum alkalmazás kerül megvalósításra a Firebase Backend as a Service (BaaS) felhasználásával. A feladat célja, hogy szemléltese, hogyan lehet közös backendet használó alkalmazást fejleszteni saját backend kód fejlesztése nélkül.
A Firebase manapság az egyik legnépszerűbb Backend as a Service megoldás Android, iOS és web kliensek támogatáásval, mely számos szolgáltatást biztosít, mint például:
- real-time adatbáziskezelés
- storage
- authentikáció
- push értesítések
- analytics
- crash reporting
További általános információk a Firebase-ről: https://firebase.google.com/.
A laborfogalkozás célja, hogy bemutassa a Firebase legfontosabb szolgáltatásait egy komplett alklamazás megvalósítása keretében. A megvalósítandó alkalmazás egy fórum megoldás lesz, melyen keresztül a felhasználük szöveges üzeneteket tudnak megosztani egymással valós időben, melyekhez opcionálisan képek is csatolhatók.
Az alkalmazás az alőbbi fő funkciókat támogatja:
- regisztráció, bejelentkezés,
- üzenetek listázása,
- üzenet írás,
- üzenetek megjelenítése valós időben,
- képek csatolása üzenetekhez,
- crash reporting,
- analitika.
A labor soárn nagyobb kódrészek kerülnek megírásra, ami miatt elnézést kérünk, de ez szükséges ahhoz, hogy egy hello-word jellegű alkalmazásnál többet tudjunk átadni a tárgy keretében. Az anyag részletes megértéséhez javasoljuk, hogy figyelje a laborvezető utasításait és labor után is 10-20 percet szánjon a kódrészek megérétésére.
Az útmutatóban levő példa kódok esetében a szöveges elemeket nem tettük strings.xml-be a könnyebb olvashatóság érdekében, de éles projektekben ezeket természetesen mindig ki kell szervezni erőforrásba.
Projekt előkészítése, konfiguráció
Első lépésként létre kell hozni egy Firebase projektet a Firebase admin felületén (Firebase console), majd egy Android Studio projektet és össze kell kötni az Android projektet a Firebase-ben létrehozott projekttel:
- Navigáljunk a Firebase console felületére: https://console.firebase.google.com/.
- Jelentkezzünk be jobb felül.
- Hozzunk létre egy új projektet az Add project elemet választva középen.
- A projekt neve legyen BMEForum, a Country pedig Hungary.
Sikeres projekt létrehozás után fussák át a laborvezetővel közösen a Firebase console felületét az alábbi elemekre kitérve:
- Authentication, Database és Storage,
- Database>Rules.
Hozzunk létre egy új projektet Android Studio-ban, válasszuk az Empty Activity sablont és a kezdő Activity-nk neve legyen LoginActivity, mivel elsőként a regisztrációs és bejelentkező nézetet fogjuk megvalósítani. Az egyszerűség kedvéért ugyanazt a felületet fogjuk használni regisztráció és bejelentkezés céljából.
A projekt létrehozása után válasszuk Android Studioba a Tools->Firebase menüpontot, melynek hatására jobb oldalt megnyílik a Firebase Assistant funkció.
Amennyiben nincs ilyen menüpont nem található a Studioban, telepíteni kell a plugint a File->Settings->Plugins alatt (Firebase Services).
A Firebase Assistant akkor fogja megtalálni a Firebase console-ba létrehozott projektet, ha Android Studio-ba is ugyanazzal az accounttal vagyunk bejelentkezve mint amivel a console-ban létrehoztuk a projektet. Ellenőrizzük ezt mindkét helyen.
Amennyiben a Firebase Assistant-ot nem sikerül beüzemelni, manuálisan is összeköthető a projekt. A leírásban ismertetni fogjuk a lépéseket, amit az Assistant generál.
Válasszuk az Assistant-ban az Authentication szakaszt és azon belül az "Email and password authentication"-t, majd a Connect to Firebase gombot.
Ezt követően egy dialógus nyílik meg, ahol a második szakaszt választva kiválaszthatjuk a projektet amit a Firebase console-ban létrehoztunk, ha megfelelőek az accountok. Itt egyébként lehetőség van új projektet is létrehozni.
A háttérben valójában annyi történik, hogy az alkalmazásunk package neve és az aláíró kulcs SHA-1-e alapján létrejön egy Android projekt a Firebase console-ba és az ahhoz tartozó konfigurációs google-services.json file letöltődik a projektünk könyvtárába az alapértelmezett (app) modul alá.
Ezt a lépéssorozatot manuálisan is végrehajthatjuk a Firebase console-ban az "Add another app"-ot választva. A debug kulcs SHA-1 lenyomata a gradle->[projektnév]->Tasks->android->signingRepot taskot futtatva kinyerhető alul az execution/text módot választva.
[KÉP]
Következő lépésben szintén az Assistant-ban az "Email and password authentication" alatt válasszuk az "Add Firebase Authentication to your app" elemet, itt látható is, hogy milyen módosítások történnek a projekt és modul szintű build.gradle fileokban.
Figyelem, emulátoron való tesztelés esetében korábbi (9.6.0) Firebase service-t kell használni, mert a legújabbat az emulátor még nem támogatja:
compile 'com.google.firebase:firebase-auth:9.6.0'
Ahhoz, hogy
Regisztráció, bejelentkezés
Első lépésként valósítsuk meg a bejelentkező képernyő felületét. Mivel ehhez hasonló felületeket már készítettünk korábban egyszerűség kedvéért megadjuk a felület kódját, melyet helyezzen az activity_login.xml-be:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns_android="http://schemas.android.com/apk/res/android"
xmlns_app="http://schemas.android.com/apk/res-auto"
android_layout_width="match_parent"
android_layout_height="match_parent"
android_fitsSystemWindows="true">
<LinearLayout
android_orientation="vertical"
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_paddingTop="56dp"
android_paddingLeft="24dp"
android_paddingRight="24dp">
<ImageView android_src="@mipmap/ic_launcher"
android_layout_width="wrap_content"
android_layout_height="72dp"
android_layout_marginBottom="24dp"
android_layout_gravity="center_horizontal" />
<android.support.design.widget.TextInputLayout
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_layout_marginTop="8dp"
android_layout_marginBottom="8dp">
<EditText android_id="@+id/etEmail"
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_inputType="textEmailAddress"
android_text="p@p.hu"
android_hint="email" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_layout_marginTop="8dp"
android_layout_marginBottom="8dp"
app_passwordToggleEnabled="true">
<EditText android_id="@+id/etPassword"
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_inputType="textPassword"
android_text="abcabc"
android_hint="Password"/>
</android.support.design.widget.TextInputLayout>
<Button
android_id="@+id/btnLogin"
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_layout_marginTop="24dp"
android_layout_marginBottom="12dp"
android_padding="12dp"
android_text="Login"/>
<Button
android_id="@+id/btnRegister"
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_padding="12dp"
android_text="Register"/>
</LinearLayout>
</ScrollView>
