Wprowadzenie React #7 (2020) – Firebase – zapisywanie danych w chmurze

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:

1. Utworzenie projektu i pierwszy komponent
2. Komponenty i props
3. Obsługa zdarzeń
4. Stan komponentu i przepływ danych
5. Dynamiczne tworzenie komponentów, key i forumlarz
6. Hook useEffect
7. Zapisywanie danych w chmurze – Firebase
8. 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.