Andiamo a pescare nel mercato del basso.
Inizieremo con Firebase,
l'offerta premium di Google.
Capiamo un po 'di Firebase,
configura un server Firebase,
e poi vedremo l'applicazione angolare,
che ho intenzione di retrofit in base
alla precedente applicazione angolare che hai visto nella lezione precedente.
Lo modificheremo per fare uso di Firebase come backend.
Quindi, come vedremmo alla fine di questa lezione,
questo esercizio e il seguente esercizio,
possiamo facilmente prendere un'applicazione angolare e retrofit per fare uso di
Firebase come backend come fornitore di servizi.
Per iniziare il viaggio,
andiamo su firebase.google.com per capire un po 'di Firebase.
Una sorta di argomento di fare un'intera presentazione su Firebase,
ti eseguirò rapidamente ciò che è stato
spiegato sul sito Firebase stesso perché ti danno
sufficienti dettagli su come Firebase stesso supporta varie funzionalità.
Quindi eseguiamo questo sito Web per capire come funziona Firebase.
Quindi, se vai al sito web, come puoi vedere,
Firebase ti aiuta a creare app mobili migliori e far crescere la tua attività.
E poi, come vedi qui,
ti spiega i dettagli su come ti consente di creare
rapidamente le tue app senza dover gestire l'infrastruttura back-end per la tua applicazione,
e una singola console che offre una serie di prodotti che funzionano insieme.
Quindi questi sono tutti prodotti offerti da Google che lavorano insieme per soddisfare le tue esigenze di back-end.
E anche qui, puoi sfruttare
molti dei prodotti complementari disponibili da Google.
Quindi, in particolare, in questo esercizio,
sfrutteremo il Cloud Firestore,
la nuova disposizione di Google.
Vedremo maggiori dettagli su questo più tardi.
Vediamo come possiamo utilizzare il supporto di autenticazione
fornito da Firebase per l'autenticazione degli utenti.
Esamineremo l'archiviazione cloud per archiviare i nostri file immagine e servirli.
E poi vedremo anche come possiamo sfruttare tutti questi insieme con
il modulo nodo Firebase correlato che possiamo incorporare insieme al
modulo nodo angularfire2 nella nostra applicazione angolare in modo che
possiamo comunicare con il nostro backend Firebase come servizio.
Inoltre, guardando più in dettaglio,
vediamo come il
trattino Firebase stesso fornisce varie funzionalità come consentire di implementare
diverse funzionalità utente per diverse onboarding della tua applicazione e
quanto sia facile integrare il tuo backend con un iOS,
Android o l'applicazione web .
In particolare, esamineremo l'applicazione web e utilizzando JavaScript e
anche l'uso di come
incorporeremo questo nella nostra applicazione angolare un po 'più tardi.
Inoltre, Firebase fornisce un database in tempo reale,
sia il database originale in tempo reale,
sia il nuovo Cloud Firestone,
consentono di sincronizzare automaticamente i dati tra i vari dispositivi utente.
Quindi qualsiasi modifica apportata
sul lato server verrà automaticamente riflessa a tutti i client
e, naturalmente, è possibile leggere ulteriori dettagli su Firebase su questo sito web.
Ed è molto facile iniziare perché l'offerta di base è gratuita per gli utenti.
Quindi iniziamo a usare Firebase.
Configureremo il nostro account Firebase e quindi accederemo e configureremo il nostro backend come server,
che poi useremo dalla nostra applicazione angolare.
Quindi questo è un rapido tour di Firebase,
ma invece di guardare questi,
entriamo e in realtà ci sporchiamo le mani,
configurando una base Firebase
nel servizio e quindi usandola sulla nostra applicazione angolare.
Quindi, per iniziare,
come vedrai al bordo destro qui,
dice vai alla console.
Ovviamente, dovresti avere un account Google per poter utilizzare Firebase.
Questo va da sé,
e dovresti essere connesso al tuo account Google.
Quindi, come puoi vedere,
sono già nel mio account Google.
Quindi mi dara' accesso alla mia console.
Se non hai effettuato l'accesso,
allora è meglio per te accedere al tuo account Google.
Quindi, quando vai alla console,
questo ti porterà alla console dei servizi Firebase qui,
dove puoi configurare i progetti.
Quindi, quando vai alla console,
come puoi vedere, dice aggiungi un progetto.
E, come puoi vedere,
ho già provato la mia mano a configurare
un altro progetto Firebase prima di spiegartelo.
Quindi impostiamo un progetto qui.
Quindi faremo clic sul progetto aggiungi,
e che dovrebbe portare su una bella finestra,
dove è possibile digitare le informazioni.
Quindi chiameremo questo progetto come ConfusionServer,
come ci si aspetterebbe e lo configureremo ovunque ci si trovi al momento.
Quindi ho intenzione di configurarlo per usare
Hong Kong e creare un progetto.
E una volta creato il tuo progetto,
questo è ciò che ti verrà presentato da Firebase.
E, qui, vedresti che la prima cosa che vorresti prendere sono
le informazioni sulla tua configurazione Firebase in modo da
poterla utilizzare all'interno della tua applicazione angolare.
Quindi, per farlo,
clicca su questo pulsante qui.
Quindi dice, aggiungi Firebase alla tua app web.
E questo ti fornirà un sacco di informazioni che
dovresti copiare e salvare perché
userò queste informazioni per configurare
la mia applicazione angolare un po 'più tardi nel prossimo esercizio.
Quindi salvare queste informazioni in una posizione comoda in modo da
poter utilizzare queste informazioni quando si configura il sito del cliente.
Il prossimo passo, stabilirò un paio di account qui.
Quindi fammi fare clic sull'autenticazione qui.
E quando viene attivata l'autenticazione,
imposteremo i metodi di accesso che useremo per il nostro server Firebase,
e nel mio caso,
userò la password e-mail come una delle opzioni.
Quindi abiliteremo la password di posta elettronica.
Abiliterò anche l'accesso a Google.
Quindi questi due sono abilitati.
Se lo si desidera, è possibile abilitare altri modi per autenticare gli utenti.
Successivamente, andando agli utenti, ora,
se accedi a questa applicazione con il tuo account Google,
quell'utente verrà automaticamente aggiunto al tuo sistema.
Ma in questo momento, ho intenzione di impostare un utente con un'e-mail e una password.
Quindi imposterò un admin@confusion.net
e imposterò una password qui e aggiungerò l'utente.
Quindi questo sarà un utente,
che può accedere con la combinazione di e-password.
Possiamo anche registrarci per accedervi utilizzando il nostro account Google.
Quindi la mia applicazione angolare,
configurerò per utilizzare sia il modo di accedere alla password
di posta elettronica che l'accesso basato sull'account Google.
Dopodiché, andremo in magazzino.
Quindi imposteremo lo storage successivo.
Quindi lo storage è dove è possibile impostare un modo per
caricare i file sul server e quindi renderli disponibili per l'uso.
Quindi questo storage, ho intenzione di impostare il mio spazio di archiviazione per memorizzare
le immagini che useremo e salvare dal nostro sito server.
Quindi, quando si imposta
lo storage, verrà visualizzato il set di regole di sicurezza,
che specificano quale tipo di operazioni saranno consentite dall'utente.
Quindi dice consentire di leggere,
scrivere: se request.auth non è uguale a null, il
che significa che solo gli utenti che hanno effettuato l'accesso a
questo server saranno in grado di leggere e scrivere.
Ora, cambierò questo per consentire le letture per chiunque,
ma le scritture saranno consentite solo dagli utenti autenticati.
Quindi diremo, ho capito,
e poi inizierò.
Quindi, nelle regole,
entrerò nelle regole qui e poi modificherò le regole per
consentire agli utenti di essere in grado di leggere dal server.
Ora, possiamo configurarlo a livello di cartella specifico,
ma dal momento che questa è una semplice applicazione,
ho intenzione di configurarlo a tutto il livello di archiviazione.
Quindi, qui, dirò, consentire la lettura,
e poi ho intenzione di modificare questa regola per dire consentire la lettura,
e dirò, consentire scrivere se richiesta.
Quindi, come puoi vedere,
gli utenti saranno autorizzati a leggere dallo storage.
Qualsiasi utente sarà autorizzato a leggere, anche senza autenticazione,
ma la scrittura è limitata solo agli utenti che accedono al sistema.
Quindi questa è semplice modifica alle regole di accesso,
alle regole di sicurezza.
Puoi essere più elaborato su questo,
ma nel semplice esempio,
resterò con questo.
E poi pubblicheremo queste regole sul nostro server.
Poi tornando ai file, nei file,
ho intenzione di creare una nuova cartella qui denominata immagini.
Ora, come si vede,
le regole possono essere impostate per questa cartella di immagini specifica, in
modo da consentire agli utenti di leggere solo da queste cartelle di immagini e quindi solo
gli utenti autorizzati a caricare in questa cartella immagini, se lo si sceglie.
Ma, in questo momento, lo lascerò come tale,
come l'insieme generico di regola che ho configurato lì.
Ora, andando alla cartella immagini.
Ho intenzione di caricare un sacco di immagini in questa cartella qui.
Quindi fammi prendere un sacco di immagini che ho per la mia applicazione.
E così, prima, avevo usato queste immagini nelle mie altre applicazioni.
Ho intenzione di selezionare tutte queste immagini e quindi caricarle nello spazio di archiviazione di Google qui.
Queste immagini sono disponibili nel
file images.zip che ti ho fornito nell'esercizio precedente,
nella lezione precedente.
Quindi basta scaricare il file images.zip,
o se hai già scaricato,
dovresti avere queste immagini con te in modo da poterle caricare nel file.
Quando si caricano queste immagini,
è possibile fare clic su una qualsiasi di quelle immagini e anche notare che qui sotto,
ti dà questa posizione del file.
È necessario copiare questo URL per questa posizione del file perché quando configuriamo
il nostro database, nel campo delle immagini dei nostri dati JSON,
stiamo andando a configurare ciascuno di essi con questo URL per l'immagine corrispondente.
Successivamente, passeremo a quel database.
Nel database, ti vengono date due scelte.
Puoi andare con il vecchio database in tempo reale,
supportato da Google,
e in effetti la maggior parte delle applicazioni attuali che utilizzano Firebase utilizzerà il database in tempo reale.
Ma poi, in questo corso,
esploreremo la versione beta di Firestore più recente.
La versione beta di Firestore fornisce un database in tempo reale molto più completo.
Quindi questo è il database in tempo reale di prossima generazione e fornisce
molti modi più avanzati di fare query e
ridimensionare automaticamente il loro storage per noi.
Quindi andremo con la beta di Firestore.
Ora, uno dei motivi per cui ho ancora una volta per iniziare con
la beta di Firestore è semplicemente perché
ci permette di memorizzare le informazioni sotto forma di documenti e collezioni.
Ora, dalla nostra esperienza con MongoDB,
sappiamo già come funzionano i documenti e le collezioni,
ed è per questo che la beta di Firestore è una scelta molto migliore per noi,
dal momento che sappiamo già come è configurato.
Se si desidera impostare come predefinito il database in tempo reale standard,
è possibile scegliere di farlo.
Ma il database in tempo reale memorizza tutti i dati in
un unico albero di grandi dimensioni e ha una quantità limitata di funzionalità di query.
Quindi, per le regole di sicurezza per il mio Firestore,
andrò con la modalità di test,
dove lascerò aperta alla gente da leggere e scrivere al momento.
E questo va bene perché stiamo solo testando il database, ma normalmente,
suggerirei di andare con un modo più configurato di lavorare con il tuo database qui.
Quindi inizieremo con una modalità di test per iniziare.
E quindi imposteremo le regole di sicurezza come questa, per cominciare.
Si può andare con più elaborati strumenti di sicurezza set-up.
Così come avete visto con lo storage,
avevamo impostato in modo tale che le letture sono consentite da
chiunque, ma le scritture sono consentite solo da utenti autorizzati.
Possiamo impostare una funzionalità simile anche qui.
Quindi questo è il confusionserver.
E così, nelle regole,
lasciami andare in quel deposito e poi copiare la regola dallo storage qui,
e imposteremo lo stesso tipo di restrizione qui.
Quindi permetteremo a chiunque di leggere ma solo
agli utenti autorizzati di scrivere sul database.
Quindi tornando al database, nelle regole,
possiamo dire consentire la lettura: e poi la seconda riga che ho intenzione di sostituirla,
dicendo consentire scrivere se request.auth non è uguale a null.
Quindi solo le persone che
hanno effettuato l'accesso, saranno in grado di apportare modifiche ai dati in modo che,
almeno, abbiamo una certa protezione sui miei dati.
Ora, qui, ora possiamo aggiungere graficamente i dati alla nostra applicazione.
E questo, trovo il modo più veloce di aggiungere i dati.
Se si imposta il sito client,
è possibile pubblicare anche i dati dal sito client, ma
, in questo momento, verrà avviato aggiungendo tre raccolte qui.
Quindi la prima collezione che sommerò sono piatti.
E possiamo aggiungere documenti ai piatti,
così possiamo aggiungere il nostro primo documento.
Quindi, per aggiungere un documento ai piatti,
ricorda che ti ho dato il file db.json lì.
Quindi puoi andare con il file db.json e quindi aggiungere,
passo dopo passo, ciascuno dei piatti che abbiamo.
Quindi, qui, ho intenzione di configurare il primo piatto qui.
Quindi, per il piatto, possiamo consentire a Firebase di assegnare automaticamente l'ID per il nostro documento.
Quindi lascerò che assegni automaticamente.
Quindi aggiungeremo il primo piatto qui.
Il nome del campo e il primo piatto qui.
Quindi dobbiamo aggiungere meticolosamente,
a poco a poco, ognuno dei piatti qui.
Quindi diremo nome,
e poi diremo categoria, che è rete elettrica.
E poi aggiungeremo in immagine,
che ho intenzione di tornare e aggiungere un po 'più tardi perché ho bisogno di copiare
l'URL immagine dal mio archivio e usarlo qui.
Allora lo faremo etichettare come Hot, prezzo.
Quindi abbiamo categoria,
nome, categoria, immagine, etichetta, prezzo,
descrizione, che ho intenzione di copiare e incollare dal mio file db.json.
E, infine, la bandiera in primo piano,
che imposterò come booleano e lo imposterò su true in questo caso.
Quindi questo sarà il nostro primo documento che aggiungeremo nel nostro database qui.
Quindi si noterà immediatamente che,
nel nostro database, viene aggiunto il primo documento.
Quindi vedremo piatti e il primo documento,
e puoi vedere le informazioni su questo documento configurato qui.
Quindi abbiamo categoria, descrizione,
in primo piano, immagine, etichetta, nome e prezzo.
Aggiungeremo anche un altro campo qui chiamato CreateDat,
e questo sarà un timestamp.
E il timestamp sarebbe il timestamp di oggi e poi lascio lì il valore temporale in quanto tale.
Quindi possiamo aggiungere timestamp anche a questo, e, inoltre,
aggiungeremo un altro timestamp come updatedAt e con il timestamp qui.
Quindi abbiamo altri due timestamp qui.
Ora, per l'immagine,
andremo al deposito qui.
E dal nostro archivio, nelle immagini,
selezioneremo il file immagine qui
e poi andare alla posizione del file e quindi copiare questo URL qui.
Quindi, se clicchiamo su questo,
quell'URL verrà copiato.
Quindi torneremo a
quel database e poi
modificheremo il campo immagine e poi aggiungeremo quell'URL lì. In
questo modo, puoi andare avanti e aggiungere i piatti rimanenti,
le promozioni e anche i leader.
Quindi, una volta completati tutti i passaggi,
che richiederà un bel po 'di tempo per voi a fare passo dopo passo.
Quindi ti ho lasciato finire di aggiungere tutte queste informazioni al tuo Firebase.
Quindi, dopo aver completato l'inserimento di tutti i dati nel database,
i piatti dovrebbero avere quattro piatti qui.
Ancora una volta, assicurarsi di inizializzare
il campo immagine con l'URL da tale archivio per quella particolare immagine.
Quindi avrai uno, due, tre e quattro piatti.
Allora avrai quattro leader in modo corrispondente.
Uno, due, tre e quattro e una promozione e' qui.
Ancora una volta, assicurati di inizializzare le immagini per ognuna di
esse in modo appropriato dall'archivio Firebase.
Con questo, il nostro server è completamente configurato.
Quindi il nostro server Firebase ha tutti i dati necessari per soddisfare i nostri piani.
Passeremo ora al prossimo esercizio,
dove configureremo il nostro client angolare per essere in grado di accedere a
questo backend Firebase come servizio e quindi recuperare
i dati e quindi anche spingere i dati al loro server Firebase.
Con questo, completiamo questo esercizio.
In questo esercizio, abbiamo visto quanto sia facile per noi
configurare il nostro backend Firebase come servizio sia per l'autenticazione,
per la memorizzazione di file e la loro distribuzione e anche
la memorizzazione di informazioni nel database Cloud Firestore sotto forma di raccolte e documenti all'interno delle raccolte.
Con questo, completiamo questo esercizio.