Skip to content

FI 0.1 firebase

Jump to bottom
Asko Kauppi edited this page Jun 19, 2021 · 8 revisions

Edellinen: 0. Kehitysympäristön pystytys

0.1 Firebase

Firebase on Googlen omistama tuoteperhe, jonka tarkoituksena on tehdä mobiili- ja web-aplikaatioiden kehittämisestä ja operoinnista helppoa. Alunperin Firebase oli tarkoitettu kännykkäaplikaatioita (Android, iOS) varten. Web tuli mukaan myöhemmin.

Tuotteen keskiössä on autentikointi, joka on integroitu muiden osa-alueiden (tietokannat, talletus) kanssa niin, että asiat toimivat melko saumattomasti yhteen.

Firebase on "serverless"-teknologiaa, eli sovelluskehittäjän ei tarvitse koodata ja ylläpitää sovelluksensa taustajärjestelmiä. Ne saadaan palveluna, jonka yhteinen nimi on Firebase.

Maksaako tämä jotain?

Jos haluat vain tutustua web-kehitykseen Firebase:a käyttäen, voit luoda Firebase-tunnuksen ilman maksumekanismia (luottokorttia). Firebase kutsuu tätä "Spark"-tasoksi.

Spark-tasolla voit myös julkaista sovelluksia, mutta niillä on tietyt rajoitteensa. Erityisesti (kesästä 2020 lähtien) Cloud Functions ei kuulu Spark:n piiriin, vaan vaatii maksullisen "Blaze"-tason tilin.

Kurssin esimerkkisovellus käyttää Cloud Function:eita. Voit edelleen olla mukana kehittämässä niitä käyttävää koodia, mutta tuuppaus pilveen omalle tilillesi - oman sovelluksen teko, joka käyttäisi niitä - ei onnistu.

Lisätietoja: Firebase Pricing

Blaze-tilin otto on kuitenkin lähinnä periaatekysymys. Firebase:n ilmaiset palvelut ovat niin kattavia, että kustannuksia sinulle tulee vasta, jos sovelluksesi alkaa olemaan suosittu.

Parasta voi olla aloittaa "Spark"-tilillä ja nostaa Blaze:een siinä vaiheessa, kun tulee seinä vastaan. :)

Firebase-tilin luonti

Tutustu heidän materiaaliinsa hetki, ja kun tuntuu siltä, paina tuota Get started -nappia.

Näyttää siltä, että tarvitset Google-tunnuksen ollaksesi Firebase:n asiakas. Tämä lienee ymmärrettävää.

Huom. Google-tunnus on eri asia kuin GMail-sähköpostiosoite! Voit luoda Google-tunnuksen mille tahansa omistamallesi sähköpostiosoitteelle seuraamalla näitä ohjeita:

Google-tunnuksen luonti mille vain sähköpostiosoitteelle

Ensiksi: viralliset ohjeet (Google)

  1. Mene Luo Google-tili -sivulle

  2. Valitse

    Nyt dialogi vaihtuu niin, että sinulle ei luoda gmail-tiliä, vaan nykyinen sähköpostisi toimii jatkossa identifikaationa kaikkiin Googlen järjestelmiin.

  3. Katso antamastasi sähköpostista Googlen viesti ja syötä siellä tullut tunnus selaimeen.

  4. Palaa pääohjeisiin. Sinun pitäisi nyt voida kirjautua Firebasen sivuille olemassa olevalla sähköpostiosoitteellasi.

Firebase-projekti

Paina Create a project.

Anna projektillesi nimi.

Nimen tulee olla globaalisti ainutkertainen eli kellään Firebase:n käyttäjällä ei ole samaa projektinimeä, jonka nyt otat.

Nimeä ei voi vaihtaa jälkikäteen, ja se tulee näkyviin sovelluksesi URL:ään (ellet käytä erillistä, omaa domainia). Muuten nimellä ei niin kauheasti ole väliä. Kurssin pitäjän käytäntö (ks. yllä) on liittää kulloinenkin päiväys osaksi projektin nimeä.

Paina Continue.

Google koettaa nyt saada sinut hyväksymään Google Analytics:in mukaan otto projektiin. Googlella voi olla syynsä tähän, mutta siitä on web-sovellukselle vähän jos lainkaan hyötyä. Käyttämämme sovelluspohja on laadittu siten, että se ei tarvitse Google Analytics:ia.

Mikäli haluat, voit aina jälkikäteen kytkeä analytiikan päälle (tai pois).

Kytke Enable Google Analytics for this project pois.

Paina Create project.

...Kestää hetken...

Firebase:n osa-alueet ovat tarjolla mobiilisovelluksille (iOS, Android), web-sovelluksille ja Unity-pelikoneistolle ja C++:lle.

Nuolella merkitty ikoni kuvaa Firebasen konsolissa web-sovelluksia.

Seuraavaksi paina sitä, niin luodaan projektissasi sovellus ("app"). Tämä tarvitaan esim. autentikoinnin käyttöä varten.

Lisätietoa: Osana "appia" voit kertoa Firebase:lle, kuka vastaa käyttäjien yksityisyyden suojasta jne. Mikäli sovelluksessasi ei olisi autentikointia, voisi tämän vaiheen ohittaa.

Toisaalta voit jättää tämän vaiheen myös kurssin aikana tehtäväksi. Luultavasti sitä tarvitaan vasta, kun fronttia laitetaan Firebase Hostingin avulla pilveen.

  • Anna sovelluksellesi kuvaava nimi (voi muuttaa myöhemmin)

  • Paina Register app

Seuraavaksi Firebase-konsoli näyttää JavaScript-koodia, jonka se pyytää lisäämään sovellukseesi. Älä tee mitään. Saat nämä samat tiedot kurssilla toista kautta (Firebase CLI -komentorivityökalun avulla) - ja toisaalta voit aina käydä katsomassa ne myös verkkokonsolista.

Paina Continue to console.

Sinulla on nyt projekti ja siinä web-sovellus luotuna. Projekti toimii "Spark"-tasolla.

Firestore ja Auth -enablointi

Tulemme käyttämään Firebase:stä ainakin Cloud Firestore:a (tietokanta) ja autentikointia. Nämä pitää laittaa konsolista aktiivisiksi.

  • Firebase-konsoli > Build > Firestore > Create database

    Jätä valinta Start in production mode päälle. Sillä ei ole väliä, koska pian korvaamme suojaussäännöt repon sisältämillä. Paina Next.

    Jotkut Firebase-osat, kuten Cloud Firestore, vaativat, että valitset sen maantieteellisen alueen, jonka tietokeskuksissa projektiasi ajetaan.

    Kannattaa valita jotain käyttäjiäsi lähellä olevaa. Valitse "Region"-vaihtoehtojen alta! Multi-region tarkoittaa useamman konesalin ylittävää operointia, joka maksaa enemmän ja on meidän käytössämme tarpeetonta (isoille yrityksille, jos halutaan olla ekstravarmoja toimintojen uptime:n suhteen).

  • Firebase-konsoli > Authentication > Sign-in method

    Valitse Google-autentkointi päälle. Tulemme käyttämään sitä sovelluksessa.

    Voit joutua antamaan joitain tietoja autentikointiin liittyen. Nämä esitetään käyttäjälleen sovellukseen kirjauduttaessa. Voit käydä vaihtamassa niitä myöhemmin.

Sillä, valitsetko europe-west2 tai europe-west6 ei käytännössä ole merkitystä. Voit tutustua Firebase:n paikkakuntatarjontaan täällä: Cloud Function locations.

Olemme valmiita seuraavaan vaiheeseen, jossa luotua projektia hallitaan komentoriviltä.

Komentorivityökalu

Ohjeet yleensä opastavat asentamaan firebase-tools-nimisen paketin globaalisti koneellesi.

Tämä ei enää uusimmilla npm:llä ole tarpeen. Voit käyttää Firebase CLI-komentoja npx-käynnistyskomennon kautta.

Firebase login

Tehdään vielä yksi asia, ennen kuin ollaan valmiita kurssille.

Seuraava komento yhdistää paikallisen käyttäjätunnuksesi Firebase-tiliisi niin, että npx firebase-tools -komento pystyy ohjaamaan sitä jatkossa. Tätä tarvitaan esim. sovellusten tuuppaukseen (deployment) pilveen.

$ npx firebase-tools login
i  Firebase optionally collects CLI usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you.

? Allow Firebase to collect CLI usage and error reporting information? No

Visit this URL on this device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=56358...-...

Waiting for authentication...

Komento autentikoi sinut selaimen avustuksella. Näin olet antanut firebase -komennolle oikeuden toimia sinuna - luoda resursseja ja hallita niitä. Nämä resurssit ovat käytännössä Google Cloud Platform:ssa (GCP). Kaikki, mikä Firebase:ssa pyörii toimii Googlen pilvialustalla.

✔  Success! Logged in as sinun@email.com

Tapa antaa komentorivityökalulle näin laajoja oikeuksia on yleinen - GCP, Amazon ja Azure tekevät samoin.

Se ei kuitenkaan tarkoita, että asia olisi ongelmaton. Yrityksissä nämä oikeudet pitäisi pitää mahdollisimman vähissä käsissä. Käytännössä avuksi voidaan ottaa CI/CD, jota käsitellään kurssin viimeisellä kerralla. Siinä kehittäjän ei tarvitse omata oikeuksia pilvijärjestelmien ylläpitoon, vaan pilvi itse laitetaan vastaamaan testauksesta ja tuotantoon viennistä.

Tämä on turvallisempi tapa, koska tuotannon oikeudet voidaan pitää hyvin rajoitetulla ihmisjoukolla, rajoittamatta silti kehittäjien nopeutta tehdä muutoksia järjestelmään. Muutokset tapahtuvat versiohallinnan kautta, mistä taas jää parempi jälki kuka teki mitä, milloin ja miksi.

Tuollaisessa tapauksessa kannattaa (niiden, joilla on pilven hallinnan salasanat) myös pitää koneella kokonaan eri tilit näihin tarkoituksiin. Mutta tämä kuvaa enemmän sitä lopputilannetta, millaisista asioista kurssin lopulla voidaan keskustella...

Testataan!

Tarkistetaan vielä, että firebase -komento todella toimii.

$ npx firebase-tools projects:list
✔ Preparing the list of your Firebase projects
┌────────────────────────────┬────────────────────────────┬────────────────┬──────────────────────┐
│ Project Display Name       │ Project ID                 │ Project Number │ Resource Location ID │
├────────────────────────────┼────────────────────────────┼────────────────┼──────────────────────┤
│ test-090421                │ test-090421                │ 31454....372   │ [Not specified]      │
└────────────────────────────┴────────────────────────────┴────────────────┴──────────────────────┘

1 project(s) total.

Konsolin näyttämä Firebase web-sovelluksen konfiguraatio saadaan esiin komennolla:

$ npx firebase-tools --project test-090421 apps:sdkconfig
✔ Downloading configuration data of your Firebase WEB app
...

firebase.initializeApp({
  "projectId": "test-090421",
  "appId": "...",
  "storageBucket": "test-090421.appspot.com",
  "apiKey": "AIza...MIo",
  "authDomain": "test-090421.firebaseapp.com",
  "messagingSenderId": "337...369",
  "measurementId": "G-YC...4G4"
});

Taustamateriaalia

Jos haluat tutustua Firebase:en paremmin jo ennen kurssin aloitusta, netissä on hyvää materiaalia:

Etenkin Todd Kerpelman:in ~2018-19 Youtube-videot ovat erinomaisia ja hauskoja. Popcornia mukaan ja nettiin mars! 🍿

HTML, JavaScript jne.

Oletamme, että sinulla on perustiedot web-sivujen perustekniikoista. Näitä voit verestää mm. MDN-sivuilta:

Seuraavaksi: 0.2 Cypress-valmistelut

Clone this wiki locally