Paolo Dell'Aguzzo
  • Chi sono
  • Cosa offro
  • Portfolio e Carriera
    • Carriera
    • Portfolio
  • PRESS e Guest Post
  • Contatti
  • Blog
Paolo Dell'Aguzzo
  • Chi sono
  • Cosa offro
  • Portfolio e Carriera
    • Carriera
    • Portfolio
  • PRESS e Guest Post
  • Contatti
  • Blog
Gen 08

React Native: Cos’è Firebase e setup iniziale

  • 08/01/2018
  • Paolo Dell'Aguzzo
  • No Comments
  • Programmazione
  • app, firebase, react, react native, smartphone

In questo articolo scopriamo cos’è Firebase e come fare il setup necessario per un’applicazione React Native. Molte delle cose che vedremo non sono strettamente legate a React Native quindi direi che questo articolo è indirizzato a chiunque voglia sapere cos’è Firebase e come iniziare ad utilizzarlo.

Questo articolo è parte di una guida ben più lunga che ti insegna a creare un’app iOS e Android con React Native. Puoi trovare la guida per intero a questo indirizzo.

Cos’è Firebase

Firebase è una piattaforma di sviluppo app e si posiziona sopra alla Google Cloud Platform. E’ nato inizialmente come un servizio BaaS, ovvero Backend as a Service, e si è evoluto con il tempo diventando una vera e propria piattaforma.

Il suo utilizzo è semplice grazie ad una perfetta documentazione ed al fatto che fondamentalmente non richiede da parte di nessuno una grande conoscenza sul funzionamento di API e server. Firebase astrae infatti totalmente tutti i concetti di cui normalmente si occupano un programmatore back-end ed un sistemista lasciando libero ciascun sviluppatore di utilizzare dei servizi complessi.

E’ amato specialmente dai programmatori front-end e mobile ed è sicuramente una grandissima idea per chi lavora come libero professionista permettendo un risparmio di tempo non indifferente.

Firebase ha un piano gratuito e come tutti i servizi che ti aiutano a risparmiare del tempo ha i suoi pro ed i suoi contro. Chi costruisce app complesse ed a vasta scala potrebbe aver problemi nella creazione di query complesse sui dati che già possono essere complicate utilizzando un database NoSQL senza Firebase (potrei fare anche altri esempi, magari li vedremo in un articolo a parte).

Development Category (English)728x90

Vediamo più nel dettaglio cos’è Firebase.

Il Database

Firebase mette a disposizione un database che è a tutti gli effetti un “Real Time Database”. A differenza di molti altri servizi non utilizzerai delle chiamate HTTP, ma la tua app (che sia web, mobile o di altro tipo) comunicherà con il database tramite WebSocket ed ogni cambiamento al database avverrà in tempo reale così da aggiornare istantaneamente tutti i client connessi.

Il database messo a disposizione da Firebase:

Deep Learning Specialization on Coursera
  • Si trova nel cloud
  • E’ NoSQL

Tutti i dati che utilizzerai saranno sempre in formato JSON. Per chi è abituato con l’utilizzo di database relazionali e la costruzione autonoma delle API potrebbe fare fatica inizialmente con la gestione dei dati JSON. In ogni caso Firebase ha un’ottima guida che ti dà alcuni consigli sull’utilizzo di un database di questo tipo.

Cloud Storage

Grazie a Firebase Cloud Storage puoi salvare i file binari degli utenti, come per esempio immagini e video. E’ stato creato principalmente per uso interno di Google che poi ha scelto di condividere con il mondo questo spazio di memoria nel Cloud. Viene utilizzato tutt’oggi da servizi quali Spotify.

Firebase Cloud Storage sa gestire in modo molto intelligente la connessione degli utenti. Evita lo spreco di banda su dispositivi mobili, capisce quando l’utente non ha connessione e sa interrompere un upload/download senza far ricominciare da capo l’invio/scaricamento dei dati nel momento in cui la connessione è nuovamente disponibile.

Autenticazione

autenticazione firebase

Mette a disposizione diversi tipi di autenticazione quali:

  • Email e Password
  • Facebook
  • Google
  • Telefono
  • Twitter
  • Github
  • …

Hai la possibilità di utilizzare un unico utente che si interfaccia con i diversi servizi che offre la tua app oppure creare tanti utenti che sono in grado di interagire con le API messe a disposizione da Firebase.

Tanto altro

Probabilmente inizi a capire cos’è Firebase. Non voglio descriverti altro così da non creare confusione, ma devi sapere che Firebase mette a disposizione anche:

  • Hosting
  • Crash Reporting
  • Test Lab per Android
  • Cloud Firestore
  • Performance Monitoring
  • Google Analytics
  • Cloud Messaging
  • …

Per saperne di più su cosa offre Firebase e su cos’è Firebase puoi andare a questo indirizzo. In futuro potremmo vedere qualcosa di più avanzato tra cui il Cloud Messaging.

Prezzi

Firebase mette a disposizione una versione gratuita e delle versioni a pagamento.

I suoi piani di utilizzo si basano sull’utilizzo effettivo dei servizi, come funziona ormai con quasi tutte le piattaforme di questo tipo.

I piani che si possono scegliere sono:

  • Spark – gratuito
  • Flame – 25$/mese
  • Blaze – Paghi in base a quanto lo utilizzi

Per maggiori informazioni sui costi puoi visitare questa pagina. Per quanto riguarda comunque app su bassa scala e test il piano gratuito è più che sufficiente.

Setup Firebase

Nei prossimi articoli vorremo vedere un po’ come funziona Firebase e come scrivere e leggere qualche dato all’interno dell’applicazione iOS e Android che stiamo creando per imparare React Native. Recentemente abbiamo già visto come utilizzare Realm all’interno della nostra app (se ti interessa leggi questo articolo).

Ora vedremo come fare il setup di Firebase all’interno della nostra app.

App React Native

Per prima cosa posizionati con il terminale nella root della tua app ed utilizza il comando:

npm install --save firebase

Firebase

Per poter utilizzare Firebase è necessario creare un progetto su Firebase. Segui questi passi in ordine:

  • Vai su https://firebase.google.com/
  • Effettua il login con un tuo account Google
  • Clicca in alto a destra su “Vai alla Console”
    Firebase console
  • Seleziona “Aggiungi Progetto”
    Aggiungi Progetto firebase
  • Inserisci un nome, nel mio caso inserirò “PaoloApp” e seleziona come paese quello dove ha sede la tua azienda (sceglierò Italia in questo caso)
    Firebase progetto
  • Clicca su “Crea Progetto”
  • Naviga all’interno del tuo progetto
    Firebase Hosting, database, authentication
  • Vai su Database e clicca su “Inizia”
  • Poi nella scheda Realtime Database clicca ancora su “Inizia”
  • Dunque puoi vedere il tuo database che al momento è vuoto

Conclusioni

Hai imparato cos’è Firebase ed hai fatto un primo setup sia sull’app che sulla piattaforma Google. Nei prossimi step della guida imparerai ad autenticarti nell’app ed a chiamare qualche endpoint per il salvataggio ed il recupero dei dati.

Prova sempre a far partire l’app alla fine di ogni guida per assicurarti che hai seguito correttamente tutti i passaggi.

Su Udemy puoi trovare tanti corsi interessanti nei riguardi di React Native:

  • The Complete React Native and Redux Course
  • React Native: Advanced Concepts
  • Create your first React Native App

Non ti perdere quindi la guida salvandoti il link alla guida per imparare React Native.

Se sei interessato continua a seguirmi, magari iscriviti alla newsletter così da non dimenticarti di questa guida. Nel caso in cui ancora non ti senti pronto con React puoi sempre seguire questa guida e poi potrai imparare React Native.

Se vuoi rimanere aggiornato sul continuo di questa guida ti consiglio di iscriverti alla newsletter. Mando da 1 a 4 mail al mese e normalmente invio risorse gratuite e riservate solo agli iscritti. Invio anche la lista degli articoli di maggiore impatto, come questo. Se non troverai gli articoli potrai recuperarli dalla mail in questo modo ?

Per dubbi o domande non esitare a scrivermi nei commenti ?

Se ti è piaciuto l’articolo seguimi su Facebook e Twitter oppure rimani sempre aggiornato con la newsletter (da 1 a 4 mail al mese!).

Prossimo articolo della guida: React Native: salvare i dati con Firebase

Commenti

Condividi:

  • Fai clic qui per condividere su Twitter (Si apre in una nuova finestra)
  • Fai clic per condividere su Facebook (Si apre in una nuova finestra)
  • Fai clic qui per condividere su Tumblr (Si apre in una nuova finestra)
  • Fai clic qui per condividere su LinkedIn (Si apre in una nuova finestra)
  • Fai clic qui per condividere su Pinterest (Si apre in una nuova finestra)
  • Fai clic per condividere su WhatsApp (Si apre in una nuova finestra)
  • Fai clic per condividere su Telegram (Si apre in una nuova finestra)
  • Clicca per condividere su Skype (Si apre in una nuova finestra)
  • Fai clic qui per stampare (Si apre in una nuova finestra)

Correlati

  • Facebook
  • Twitter
  • Tumblr
  • Pinterest
  • Google+
  • LinkedIn
  • E-Mail
Paolo Dell'Aguzzo

About The Author

Sono sempre stato affascinato dal marketing e dall'informatica a tal punto di unire le due passioni :) Se ti piace l'articolo fammelo sapere in un commento :)

Related Posts

  • React Native: come salvare le foto su Firebase Storage10/01/2018
  • React Native: come modificare lo schema Realm10/01/2018
  • React Native: Come scattare foto con react-native-camera09/01/2018
  • React Native: Salvare i dati con Firebase08/01/2018

Fammi sapere cosa ne pensi :) Annulla risposta

Impara ReactJS imparare react
I 10 + 1 Libri che Dovrebbe Leggere Ogni Programmatore libri programmatore
Newsletter

Seguimi su Facebook :)

Facebook Pagelike Widget
Impara React Native imparare react native
10 Cose per Stare Più Comodo in Ufficio stare più comodo in ufficio
Impara a Creare un Tema Wordpress imparare creare tema wordpress
Udemy I Migliori Corsi per Programmatori udemy corsi programmatori
UX: Perché la User Experience è Importante UX importante e cos'è
Metodologie Agili e Lean: Come migliorare la tua azienda metodologie agili
Libri per Imparare JavaScript Imparare JavaScript libri

Articoli recenti

  • I principali engine utilizzati per lo sviluppo di videogiochi
  • Dalla visione alla realtà: Lo sviluppo di videogiochi dal punto di vista di un programmatore
  • 8 consigli per migliorare la tua SEO Locale

Categorie

  • CSS
  • Interviste
  • Java
  • Lavoro
  • Normative
  • Personale
  • Programmazione
  • Strategia & Marketing
  • Tech
  • Web Design
  • Wordpress
Paolo Dell'Aguzzo
Programmatore Software - Marotta di Mondolfo, Pesaro e Urbino
P. IVA: IT02758450429
Mail: info@paolodellaguzzo.com
Via Litoranea, 284/C - Marotta (PU)
Privacy Policy
Cookie Policy
In qualità di Affiliato Amazon, ricevo un guadagno per ciascun acquisto idoneo
Amazon e il logo Amazon sono marchi registrati di Amazon.com, Inc. o delle sue affiliate
Programmatore Senigallia, Ancona - Siti web, app iOS e Android, gestionali ReactJS, React Native, Java, SQL, PL/SQL, Heroku

 

Caricamento commenti...