Co do tej pory udało nam się zrobić to zbiór obrazków, do którego możemy wedle woli dodawać kolejne. W tym wpisie pokażę jak w React zapisać dane do chmury, a wykorzystamy do tego konkretnie usługę Google Firebase.
Firebase?
Firebase jest to tak naprawdę cały zestaw usług działających w modelu BaaS, czyli Backend as a Service. Sprowadza się to do tego, że zamiast np. tworzyć własną bazę danych albo cały proces autentykacji i autoryzacji korzystamy za dolary* z usług udostępnionych przez Google. Ta gwiazdka przy dolarach jest o tyle ważna, że dla małych projektów, np. baza danych Firestore jest darmowa.
Stworzenie konta
Do zaczęcia przygody z Firebase musimy utworzyć konto. Zaczynamy od odwiedzin na stronie https://firebase.google.com/, a następnie klikamy w górnym prawym rogu ’Go to console’. Zostaniemy poproszeni o zalogowanie się za pomocą konta Google.
Następnie klikamy w wielki plusik na środku ekranu.

Następnie nazywamy nasz projekt i odczekujemy chwilę. Po drodzę odznaczamy potrzebe analityki.
Pozostałe części cyklu:
- Utworzenie projektu i pierwszy komponent
- Komponenty i props
- Obsługa zdarzeń
- Stan komponentu i przepływ danych
- Dynamiczne tworzenie komponentów, key i forumlarz
- Hook useEffect
- Zapisywanie danych w chmurze – Firebase
- Wdrożenie aplikacji na zewnętrznym serwerze – Heroku
Tutorial React w formie wideo dostępny jest na kursy.clockworkjava.pl
Gdy nasz projekt zostanie stworzony możemy pobrać konfigurację. W celu jej zdobycia klikamy ikonkę zamkniętego web-taga.

Rejestrujemy aplikację i naszym oczom ukaże się kawałek JavaScriptowej konfiguracji.
Dodanie konfiguracji do projektu
Wracamy do naszego kodu źródłowego, tworzymy nowy plik firebase.js i przeklejamy tam obiekt firebaseConfig oraz wywołanie
firebase.initializeApp(firebaseConfig);
W kolejnym kroku instalujemy niezbędne biblioteki.
npm install --save firebase
I do pliku firebase.js dodajemy importy oraz export:
import firebase from "@firebase/app"; import "firebase/firestore"; const firebaseConfig = { apiKey: "tych_danych_nie_udostepniamy" }; // Initialize Firebase firebase.initializeApp(firebaseConfig); export default firebase;
Utworzenie bazy danych Firestore
Wróćmy teraz do konsoli Firebase w celu utworzenia bazy danych Firestore.
W menu po lewej stronie wybieramy Database.

Następnie klikamy Create Database i wybieramy Start in test mode. W tym trybie przez 30 dni każdy z danymi dostępowymi do naszego api może zapisywać, usuwać i odczytywać dane, ale dzięki niemu nie musimy się na początku przejmować kwestią autoryzacji.
Finalnie wybieramy lokalizacje serwera, może to być na przyklad europe-west.
Po zakończeniu procesu będziemy przeniesieni na widok naszej bazy danych

Dodawanie danych do kolekcji
Wróćmy do kodu i zróbmy coś fajnego, a mianowicie zapisywanie obrazów.
Zaczynamy od zaimportowania obiektu firebase z pliku firebase.js, a następnie w metodzie addImage dodajemy kod zapisu do bazy danych.
const addImage = event => { event.preventDefault(); event.stopPropagation(); const db = firebase.firestore(); const ref = db.collection('images').add({url: newImageUrl}); setImages([...images, newImageUrl]); };
Pobieramy z referencje do obsługi firestore, a następnie za pomocą dostarczonych nam przez bibliotekę firebase metod otwieramy kolekcję images i dodajemy tam nowy obiekt – url dodanego obrazu.
Teraz, gdy za pomocą formularza dodamy nowy URL zostanie on zapisany w bazie firestore, gdy odświeżmy stronę klienta webowego powinniśmy zobaczyć tam pierwszy wpis.

Odczyt danych z Firestore
Do odczytu danych użyjemy hooka useEffect, o którym pisałem w poprzedniej części cyklu.
Następnie dodajemy do komponentu App.js, gdzie przechowywana jest lista wszystkich URL następujący hook:
useEffect( ()=> { const unsub = firebaseApp .firestore() .collection("images") .get() .then( images => loadedImages= images.docs.map(image => image.data().url) setImages(loadedImages) }); return () => unsub(); }, [] }
Czyli pobieramy wszystkie dane z kolekcji images, jednak nie są to jeszcze nasze 'czyste’ obiekty z propertisem url, lecz obiekty, które zawierają dużo metadanych, by dostać się do „naszych” danych musimy wywołać metodę data(), która je zwróci, a nastepnie już do propertisa url.
Następnie tak otrzymaną tablicę ustawiamy jako nową wartość dla stanu images.
W ten oto sposób udało się nam zarówo zapisać niezbędne dane w chmurzę, jak i je odczytywać. Na tym etapie możemy zrezygnować z zestawu domyślnych obrazów.
Finalnie komponent App.js wygląd następująco:
const App = () => { const [showcaseUrl, setShowcaseUrl] = useState(""); const [images, setImages] = useState([]); const [newImageUrl, setNewImageUrl] = useState(""); useEffect(() => { const unsub = firebase .firestore() .collection("Images") .get() .then(images => { console.log(images); const loadedImages = images.docs.map(image => image.data().url); console.log(loadedImages); setImages(loadedImages); }); return () => unsub(); }, []); const imageComponents = images.map(url => { return <Image key={url} url={url} setShowcaseUrl={setShowcaseUrl} />; }); const handleOnClick = event => { event.preventDefault(); event.stopPropagation(); setImages([...images, newImageUrl]); firebase .firestore() .collection("Images") .add({ url: newImageUrl }); }; return ( <> <form> <input type="text" value={newImageUrl} placeholder="URL..." onChange={event => setNewImageUrl(event.target.value)} ></input> <button onClick={handleOnClick}>Dodaj</button> </form> {imageComponents} <Showcase showcaseUrl={showcaseUrl} /> </> ); };
I to by było na tyle w tej części, za tydzień kończymy i przyjrzymy się jak wdrożyć naszą aplikację na serwer w chmurach dzięku usłudzę Heroku.
4 komentarze do “Wprowadzenie React #7 (2020) – Firebase – zapisywanie danych w chmurze”