Dagen mjukstartades med lite info om de fyra sista veckorna av kursen, och att vi de kommande två veckorna kommer att kolla på Cloud Storage via Firebase’s Cloud Storage.
Vi satte upp en ny React-app och installerade firebase, react-bootstrap, bootstrap samt [email protected], sen skapade vi en ny Firebase-app i Firebase Console samt konfigurerade React Bootstrap som gör att vi kan använda Bootstraps komponenter som React-komponenter.
Därefter implementerade vi filuppladdningen, såg hur vi kan hämta URL till den uppladdade filen, hur vi kan hantera om något blir fel och slutligen även hur vi kan skapa en ProgressBar för att ge återkoppling till användaren att en uppladdning pågår och hur långt den har kommit.
Länkar
Firebase Cloud Storage Web Docs
https://firebase.google.com/docs/storage/web/start
React Bootstrap
https://react-bootstrap.github.io/
Workshop eftermiddag
Ta den basen vi skrev idag och lista filer som finns i vår app’s Storage Bucket på Firebase Cloud Storage. Kataloger kommer som prefixes och filer som items. Läs dokumentationen på https://firebase.google.com/docs/storage/web/list-files för hur du ska göra.
Självstudie-uppgift
Imorgon onsdag 2/12 vill jag att ni gör följande:
1. Sätt upp Cloud Firestore för er app.
2. Skapa en collection (images).
3. När en fil laddats upp, skapa ett nytt dokument i er images-collection med name, path, size och url som attribut (URL får ni redan ut med snapshot.ref.getDownloadURL().then(url => {})).
4. Gör en query mot er images-collection och för varje dokument, stoppa in dem i en lista som ni sedan renderar ut på sidan.