Utveckling av Campuskost: Att använda Firebase

Grundläggande funktionalitet för nya Campuskost börjar falla på plats! Fram tills igår har t ex bilderna som används i recepten varit testbilder som legat i samma mapp som projektet. Nu kan en användare ladda upp en bild från sin mobil eller dator och den lagras istället på Firebase. Jag tänkte att det kan vara intressant att berätta lite mer om hur just Firebase kan användas. 🔥🧐

Via Firebase kan man bland annat skapa en databas för sitt projekt och lagra filer online. Deras molntjänster är gratis för mindre applikationer så det är perfekt att använda för att lära sig. Det finns alltså begränsningar i gratisnivån, t ex en maxgräns på att läsa data från databasen max 50 tusen gånger/dag och att lagra max 1 GiB filer totalt – men det räcker ju långt! 

I bilden nedan har jag monterat ihop en bild av hur jag använder ett några av molntjänsterna som finns på Firebase för dig som är nyfiken. Funktionalitet för att skapa ett konto och logga in sköts av Firebase Authentication och de hanterar även lösenord. Än så länge har vi att man skapar konto med sin email med det ska också gå att ordna så att man kan logga in via Facebook eller sitt Google-konto, vilket ju känns proffsigt. Database är en NoSQL databas och dess struktur är som ett JSON-objekt, dvs en trädstruktur. I databasen kan man lagra dokument med ett antal datatyper att välja mellan, exempelvis strings, numbers, booleans och arrays. Bilder och andra filer däremot lagras med fördel i Storage. När man öppnar Storage ser det ut lite som en vanlig mappstruktur på sin dator. 

En utmaning som jag arbetat med är att koppla ihop dessa tjänster. T ex att det ska skapas en nytt dokument i databasen när när en ny användare skapat ett konto. I databasen ska nämligen all information lagras om vilka recept en användare har, vilka recept som sparats, användarnamn och så vidare. Sen gällande att ladda upp ett nytt recept så lagras bilden i Storage medan listan av ingredienser, titel och annat lagras i Database. Då gjorde jag så att ett receptdokument i databasen har ett attribut, img_url, vilket kan kopplas till bilden i Storage. Detta fick jag lösa genom att i koden först ladda upp bilden till Storage och hämta vilken url den fick, för att sedan skapa dokumentet till databasen. 

Snart är en betaversion redo för testning. Den första versionen innehåller troligen buggar och kan sakna vissa en del detaljer. Så vi kommer vilja att ett gäng börjar använda appen/hemsidan och meddelar oss alla buggar, samt önskemål eller förslag inför vidare utveckling. Hör gärna av dig till mig eller Ronja om du är taggad på detta! 😀

Läs mer om utvecklingen av Campuskost här:
– Lära sig koda ’Progressive Web Applications’
Veckans kluring: Bästa sätt att driftsätta app och hemsida?
– Campuskost

Skiss på hur vi använder Firebase i vårt sidoprojekt
Exempel på hur vi kommunicerar med Firebase via JavaScript. (Det känns nog lätt lite abstrakt annars..) Här är den kodsnutten som laddar upp en bild och väntar på att få veta vilken url bilden fick.
Sneak peak!

Lämna ett svar

E-postadressen publiceras inte. Obligatoriska fält är märkta *