Piszecie pierwszą frontendową aplikację do portfolio? Chcecie wziąć udział w procesie rekrutacyjnym na stanowisko junior frontend developera? Zobaczcie, jak wyróżnić swoją aplikację z pomocą Firebase.
Aplikacja, która ma znaleźć się w Waszym portfolio, to będzie coś, na co w pierwszej kolejności spojrzą rekruterzy. Szczególnie, gdy nie macie doświadczenia w branży. Warto zadbać, aby projekt, który ma pokazywać Wasze umiejętności, był jak najlepszy. Fajnie jest starać się odzwierciedlić prawdziwe środowisko, w którym przyjdzie Wam pracować. A aplikacje korzystają z baz danych i wymagają rejestracji lub logowania, zgadza się? O takie rzeczy w Waszej aplikacji zadbać może Firebase.
Wpis jest częścią serii Własna aplikacja krok po kroku. Pozostałe artykuły w temacie znajdziecie tutaj.
Ale po co mi logowanie?
Może pomyśleliście “Ale dlaczego mam dodawać logowanie? Przecież moja aplikacja to tylko jakaś prosta gra/stronka”. Już tłumaczę! Frontend developerzy pracują głównie z aplikacjami. Bowiem to, co widzicie w przeglądarce to w większości nie są proste stronki, ale właśnie aplikacje. Projekty takie wymagają uwierzytelniania użytkownika, który może zobaczyć dalszą część aplikacji dopiero po rejestracji czy logowaniu. Logujemy się więc, a potem wyświetlamy użytkownikowi dane z bazy danych, często dedykowane specjalnie dla niego.
Pomyślcie o kilku stronach, które odwiedzacie najczęściej. Pewnie są to portale społecznościowe. Żeby zobaczyć jakieś treści musimy się zalogować. Kolejna sprawa – gdzie słuchacie muzyki w sieci? YouTube, Spotify? To również aplikacje wymagające logowania i personalizujące wyświetlane Wam informacje, które gdzieś muszą być przecież przechowywane. Myślę, iż nie muszę podawać już więcej przykładów, bo dokładnie wiecie, o co chodzi.
Żeby wzbogacić Wasz pierwszy projekt, który ma stać się wizytówkę w procesie rekrutacji, proponuję Wam proste, ale efektowne rozwiązanie. Dodanie do istniejącej już aplikacji dodatkowej opcji logowania nie powinno Wam zająć wiele czasu. Zyskacie symulację prawdziwej aplikacji. Ale jak najprościej dodać taką funkcjonalność bez siedzenia tygodniami w dokumentacji? Użyjmy Firebase!
O co chodzi z tym uwierzytelnianiem?
Uwierzytelnianie użytkownika, o którym mówię polega na użyciu istniejących już kont, które ten użytkownik posiada. Możemy użyć Facebooka, Githuba czy Twittera. Wszystkie te aplikacje mają obszerną dokumentację i udostępniają opcję uwierzytelniania użytkownika za ich pośrednictwem. Nie wystarczy nam jednak klucz, który znajdziemy na facebookowej stornie dla developerów. Musimy mieć backend. I po to właśnie potrzebujemy Firebase.
Aby obsłużyć uwierzytelnianie użytkownika, czyli między innymi logowanie, które umożliwi nam wyświetlanie treści dedykowanych dla danej osoby, potrzebujemy backendu. Aby napisać backend samodzielnie, trzeba znać jakiś backendowy język. Oczywiście możecie się jakiegoś nauczyć i próbować napisać coś samemu. Ale jeżeli skupiacie się na nauce frontendu, a Waszym celem nie jest praca jak full-stack developer, polecam użyć gotowego rozwiązania jakim jest Firebase.
Czym jest Firebase?
Firebase to w uproszczeniu gotowy backend stworzony przez Google’a. Dzięki niemu możemy korzystać z takich dobrodziejstw jak baza danych czy uwierzytelnianie użytkownika bez konieczności pisania backendowego kodu. Operacje, które musiałby się dziać na backendzie wykonuje za nas Firebase, a do wszystkiego mamy dostęp za pośrednictwem kokpitu, który obsługujemy jak zwykłą aplikację w przeglądarce (nie piszemy tam kodu i nie musimy znać żadnego backendowego języka).
Firebase ma naprawdę świetną dokumentację, nie będę jej więc tutaj przepisywać, bo myślę, iż ze spokojem poradzicie sobie z implementacją rozwiązania. Jak chcecie spojrzeć na gotowy kod, który wprowadza użycie Firebase, odsyłam Was do mojej aplikacji, czyli Habit Trackera. W tym repozytorium znajdziecie mój kod. Habit Tracker jest napisany w React i właśnie dla tej technologii implementację Firebase znajdziecie w repo. Niech jednak Was nie zmyli to, iż ja użyłam Firebase z Reactem. Bowiem Firebase wspiera o wiele więcej technologii! Można go wykorzystać do aplikacji mobilnych, projektów w Unity czy C++. Oraz oczywiście do projektów webowych.
Jak dodać bazę danych?
Baza danych, którą udostępnia Firebase zmienia się w czasie rzeczywistych. To znaczy – od razu w kokpicie widzicie zmiany, które wprowadziliście w Waszej aplikacji. I na odwrót – jeżeli edytujecie coś w bazie danych z poziomu kokpitu, od razu zaktualizuje się to w aplikacji. Oczywiście trzeba to obsłużyć po stronie frontendu odpowiednim kodem, ale nie jest to bardzo skomplikowane i bez problemu znajdziecie wiele tutoriali, które opisują jak to robić.
Ja podłączenie Firebase do mojego projektu robiłam bazując na materiałach zawartych w kursie Wesa Bosa – React for Beginners (raz jeszcze ten kurs polecam, bo uważam, iż jest świetny na start z Reactem i na poznanie Firebase!). Kurs, o którym wspominam jest płatny, ale w sieci jest też wiele darmowych materiałów dotyczących Firebase (przede wszystkim oczywiście oficjalna dokumentacja).
Jak zalogować użytkownika za pośrednictwem Facebooka?
Z kolei aby dodać uwierzytelnianie dzięki Facebooka, Githuba, czy Twittera, musicie udać się do ich dokumentacji i tam wygenerować odpowiedni token, który podacie w swojej aplikacji. Każda z tych stron ma specjalną dokumentację dedykowaną dla developerów, gdzie można poczytać, w jaki sposób dodać uwierzytelnianie za ich pośrednictwem do swojego projektu. Żebyście nie musieli długo szukać, podaję stronki dla wymienionych wyżej portali:
Ale od czego zacząć?
Na sam początek proponuję Wam dodać do aplikacji samo uwierzytelnianie. Dzięki niemu będziecie mogli np. wyświetlić dane użytkownika, choćby jego imię. Kolejnym krokiem niech będzie dodanie bazy danych i wyświetlenie czegoś dla danego użytkownika. Nie wiem, jakie aplikacji piszecie, dlatego nie zawsze baza danych czy logowanie będą miały sens. Uważam jednak, iż choćby dla prostej gry czy listy to-do warto dodać uwierzytelnianie. Choćby tylko po to, aby pokazać firmie, do której się rekrutujecie, iż wiecie, jak napisać kod, który wyśle odpowiednie dane na backend.
Chcę jednocześnie zaznaczyć, iż niekoniecznie musicie od razu implementować całość i porzucać Wasze projekty, gdy nie korzystają one z bazy danych, bo uznacie, iż wtedy są nic nie warte. Nic bardziej mylnego! Projekt pokazuje to, na jakim etapie nauki jesteście aktualnie i nie powinniście z niego rezygnować, bo nie ma jakiegoś konkretnego rozwiązania. Jednak warto projekty ulepszać i pokazywać, czego nowego się nauczyliście. choćby jak rozwiązanie nie będzie zaimplementowane do końca i tak możecie o tym wspomnieć np. podczas procesu rekrutacji.
Praca z backendem, czyli wysyłanie danych do bazy danych czy obsługiwanie odpowiedzi z serwera to codzienna praca frontend developera. Podstawowa znajomość pracy z bazą danych czy uwierzytelnianiem zaprocentuje, bo na pewno z czymś takim się spotkacie. Niekoniecznie będzie to Firebase, bo to bardziej rozwiązanie dla małych projektów, jednak logika bazy danych jest powtarzalna. Dodatkowo próbując dodać do swojej pierwszej aplikacji coś nowego, coś, czego nauczycie się z dokumentacji, pokazuje, iż umiecie stosować nowe rozwiązania w praktyce i wiecie jak z dokumentacją pracować. A to bardzo ważna umiejętność!
To tyle na dzisiaj! Mam nadzieję, iż zachęciłam Was to przejrzenia dokumentacji Firebase i zaimplementowania tego rozwiązania w Waszym projekcie. A może korzystaliście już z Firebase? Podzielcie się swoimi wrażeniami w komentarzach!
