1. O que você vai criar
Neste codelab, você criará um blog de viagens com um mapa colaborativo em tempo real usando os elementos mais recentes da nossa biblioteca do Angular: AngularFire. O aplicativo da web final consistirá em um blog de viagens em que você poderá fazer upload de imagens para cada local que visitou.
O AngularFire será usado para criar o app da Web, o Pacote de emuladores para testes locais, o Authentication para monitorar os dados do usuário, o Firestore e o Storage para manter dados e mídia com tecnologia do Cloud Functions e, por fim, o Firebase Hosting para implantar o app.
Conteúdo
- Como desenvolver localmente com produtos do Firebase usando o Pacote de emuladores
- Como melhorar seu app da Web com o AngularFire
- Como manter seus dados no Firestore
- Como manter a mídia no armazenamento
- Como implantar o app no Firebase Hosting
- Como usar o Cloud Functions para interagir com seus bancos de dados e APIs
Pré-requisitos
- Node.js versão 10 ou mais recente
- Uma Conta do Google para a criação e o gerenciamento do seu projeto do Firebase
- a versão 11.14.2 ou mais recente da CLI do Firebase;
- Um navegador de sua escolha, como o Chrome
- Noções básicas de Angular e JavaScript.
2. Acessar o exemplo de código
Clone o repositório do GitHub do codelab na linha de comando:
git clone https://github.com/firebase/codelab-friendlychat-web
Se você não tiver o git instalado, faça o download do repositório como um arquivo ZIP (link em inglês).
O repositório do GitHub contém exemplos de projetos para várias plataformas.
Este codelab usa apenas o repositório webframework:
- 📁 webframework: o código inicial que você usará como base neste codelab.
Instalar dependências
Após a clonagem, instale as dependências na raiz e na pasta functions antes de criar o app da Web.
cd webframework && npm install
cd functions && npm install
Instalar a CLI do Firebase
Instale a CLI do Firebase usando este comando em um terminal:
npm install -g firebase-tools
Verifique se a versão da CLI do Firebase é posterior à 11.14.2 usando:
firebase --version
Se sua versão for anterior à 11.14.2, faça a atualização usando:
npm update firebase-tools
3. Criar e configurar um projeto do Firebase
Criar um projeto do Firebase
- Faça login no Firebase.
- No Console do Firebase, clique em Adicionar projeto e nomeie seu projeto do Firebase como <your-project>. Lembre-se do ID do seu projeto do Firebase.
- Clique em Criar projeto.
Importante: o projeto do Firebase terá o nome <your-project>, mas o Firebase atribuirá automaticamente um ID exclusivo no formato <your-project>-1234. Esse identificador exclusivo é como seu projeto é realmente identificado (inclusive na CLI), enquanto <your-project> é simplesmente um nome de exibição.
O aplicativo que vamos criar usa produtos do Firebase disponíveis para apps da Web:
- Firebase Authentication para permitir que os usuários façam login no seu app com facilidade.
- Cloud Firestore: é usado para salvar dados estruturados na nuvem e receber notificações instantâneas quando os dados são alterados.
- Cloud Storage para Firebase: é usado para salvar arquivos na nuvem.
- Firebase Hosting: é usado para hospedar e exibir seus recursos.
- Funções para interagir com APIs internas e externas.
Alguns desses produtos precisam de configurações especiais ou precisam ser ativados usando o Console do Firebase.
Adicionar um app da Web do Firebase ao projeto
- Clique no ícone da Web para criar um app da Web do Firebase.
- Na próxima etapa, você verá um objeto de configuração. Copie o conteúdo desse objeto para o arquivo
environments/environment.ts.
Ative o Login do Google para o Firebase Authentication.
Para permitir que os usuários façam login no app da Web com as Contas do Google deles, usaremos o método Google.
Para ativar o Login do Google:
- No Console do Firebase, localize a seção Criar no painel esquerdo.
- Clique em Autenticação e na guia Método de login (ou clique aqui para acessar).
- Ative o provedor de login do Google e clique em Salvar.
- Defina o nome público do app como <your-project-name> e escolha um Project support email do menu suspenso.
Ativar o Cloud Firestore
- Na seção Build do Console do Firebase, clique em Firestore Database.
- Clique em Criar banco de dados no painel do Cloud Firestore.
- Defina o local em que os dados do Cloud Firestore são armazenados. Você pode manter essa opção como padrão ou escolher uma região próxima a você.
Ativar o Cloud Storage
O app da Web usa o Cloud Storage para Firebase para armazenar, fazer upload e compartilhar imagens.
- Na seção Versão do Console do Firebase, clique em Armazenamento.
- Se não houver um botão Começar, isso significa que o Cloud Storage já está
ativado, e não é necessário seguir as etapas abaixo.
- Clique em Começar.
- Leia a exoneração de responsabilidade sobre as regras de segurança do seu projeto do Firebase e clique em Próxima.
- O local do Cloud Storage é pré-selecionado com a mesma região que você escolheu para o banco de dados do Cloud Firestore. Clique em Concluído para finalizar a configuração.
Com as regras de segurança padrão, qualquer usuário autenticado pode gravar qualquer coisa no Cloud Storage. Tornaremos nosso armazenamento mais seguro mais adiante neste codelab.
4. Conectar-se ao seu projeto do Firebase
A interface de linha de comando (CLI) do Firebase permite que você use o Firebase Hosting para disponibilizar seu app da Web localmente e implantá-lo no seu projeto do Firebase.
Verifique se a linha de comando está acessando o diretório local webframework do app.
Conecte o código do app da Web ao seu projeto do Firebase. Primeiro, faça login na CLI do Firebase na linha de comando:
firebase login
Em seguida, execute o comando a seguir para criar um alias de projeto. Substitua $YOUR_PROJECT_ID pelo ID do projeto do Firebase.
firebase use $YOUR_PROJECT_ID
Adicionar o AngularFire
Para adicionar o AngularFire ao app, execute o comando:
ng add @angular/fire
Depois, siga as instruções da linha de comando e selecione os recursos no seu projeto do Firebase.
Inicializar o Firebase
Para inicializar o projeto do Firebase, execute:
firebase init
Em seguida, seguindo as instruções da linha de comando, selecione os recursos e emuladores usados no projeto do Firebase.
Iniciar os emuladores
No diretório webframework, execute o seguinte comando para iniciar os emuladores:
firebase emulators:start
Em algum momento, você verá algo assim:
$ firebase emulators:start
i emulators: Starting emulators: auth, functions, firestore, hosting, functions
i firestore: Firestore Emulator logging to firestore-debug.log
i hosting: Serving hosting files from: public
✔ hosting: Local server: http://localhost:5000
i ui: Emulator UI logging to ui-debug.log
i functions: Watching "/functions" for Cloud Functions...
✔ functions[updateMap]: firestore function initialized.
┌─────────────────────────────────────────────────────────────┐
│ ✔ All emulators ready! It is now safe to connect your app. │
│ i View Emulator UI at http://localhost:4000 │
└─────────────────────────────────────────────────────────────┘
┌────────────────┬────────────────┬─────────────────────────────────┐
│ Emulator │ Host:Port │ View in Emulator UI │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Authentication │ localhost:9099 │ http://localhost:4000/auth │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Functions │ localhost:5001 │ http://localhost:4000/functions │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Firestore │ localhost:8080 │ http://localhost:4000/firestore │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Hosting │ localhost:5000 │ n/a │
└────────────────┴────────────────┴─────────────────────────────────┘
Emulator Hub running at localhost:4400
Other reserved ports: 4500
Issues? Report them at https://github.com/firebase/firebase-tools/issues and attach the *-debug.log files.
Quando a mensagem ✔All emulators ready! aparecer, os emuladores estarão prontos para uso.
Você vai encontrar a interface do seu app de viagens, que (ainda) não está funcionando:
Agora vamos criar!
5. Conectar o app da Web aos emuladores
Com base na tabela nos registros do emulador, o emulador do Cloud Firestore está escutando na porta 8080 e o emulador do Authentication está escutando na porta 9099.
Abrir a EmulatorUI
No navegador da Web, acesse http://127.0.0.1:4000/. A interface do Pacote de emuladores vai aparecer.
Encaminhar o app para usar os emuladores
Em src/app/app.module.ts, adicione o seguinte código à lista de importações do AppModule:
@NgModule({
declarations: [...],
imports: [
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAuth(() => {
const auth = getAuth();
if (location.hostname === 'localhost') {
connectAuthEmulator(auth, 'http://127.0.0.1:9099', { disableWarnings: true });
}
return auth;
}),
provideFirestore(() => {
const firestore = getFirestore();
if (location.hostname === 'localhost') {
connectFirestoreEmulator(firestore, '127.0.0.1', 8080);
}
return firestore;
}),
provideFunctions(() => {
const functions = getFunctions();
if (location.hostname === 'localhost') {
connectFunctionsEmulator(functions, '127.0.0.1', 5001);
}
return functions;
}),
provideStorage(() => {
const storage = getStorage();
if (location.hostname === 'localhost') {
connectStorageEmulator(storage, '127.0.0.1', 5001);
}
return storage;
}),
...
]
Agora, o app está configurado para usar emuladores locais, permitindo que testes e desenvolvimento sejam feitos localmente.
6. Adicionar autenticação
Agora que os emuladores estão configurados para o app, podemos adicionar recursos de autenticação para garantir que cada usuário faça login antes de postar mensagens.
Para fazer isso, podemos importar funções signin diretamente do AngularFire e rastrear o estado de autenticação do usuário com a função authState. Modifique as funções da página de login para que ela verifique o estado de autenticação do usuário durante o carregamento.
Como injetar autenticação do AngularFire
Em src/app/pages/login-page/login-page.component.ts, importe a Auth do @angular/fire/auth e injete-a no LoginPageComponent. Provedores de autenticação, como o Google, e funções como signin e signout também podem ser importadas diretamente do mesmo pacote e usadas no app.
import { Auth, GoogleAuthProvider, signInWithPopup, signOut, user } from '@angular/fire/auth';
export class LoginPageComponent implements OnInit {
private auth: Auth = inject(Auth);
private provider = new GoogleAuthProvider();
user$ = user(this.auth);
constructor() {}
ngOnInit(): void {}
login() {
signInWithPopup(this.auth, this.provider).then((result) => {
const credential = GoogleAuthProvider.credentialFromResult(result);
return credential;
})
}
logout() {
signOut(this.auth).then(() => {
console.log('signed out');}).catch((error) => {
console.log('sign out error: ' + error);
})
}
}
Agora a página de login está funcionando! Tente fazer login e confira os resultados no emulador de autenticação.
7. Como configurar o Firestore
Nesta etapa, você vai adicionar a funcionalidade de postar e atualizar postagens do blog de viagens armazenadas no Firestore.
Assim como o Authentication, as funções do Firestore vêm pré-empacotadas do AngularFire. Cada documento pertence a uma coleção e também pode ter coleções aninhadas. É necessário conhecer o path do documento no Firestore para criar e atualizar uma postagem do blog de viagens.
Como implementar TravelService
Como muitas páginas diferentes precisarão ler e atualizar documentos do Firestore no app da Web, podemos implementar as funções em src/app/services/travel.service.ts para evitar injetar repetidamente as mesmas funções do AngularFire em todas as páginas.
Comece injetando Auth, de forma semelhante à etapa anterior, e também Firestore no nosso serviço. Definir um objeto user$ observável que detecta o status de autenticação atual também é útil.
import { doc, docData, DocumentReference, Firestore, getDoc, setDoc, updateDoc, collection, addDoc, deleteDoc, collectionData, Timestamp } from "@angular/fire/firestore";
export class TravelService {
firestore: Firestore = inject(Firestore);
auth: Auth = inject(Auth);
user$ = authState(this.auth).pipe(filter(user => user !== null), map(user => user!));
router: Router = inject(Router);
Adicionar uma postagem de viagem
As postagens de viagem vão existir como documentos armazenados no Firestore e, como os documentos precisam existir dentro de coleções, a coleção que contém todas as postagens receberá o nome travels. Assim, o caminho de qualquer postagem de viagem será travels/.
Usando a função addDoc do AngularFire, é possível inserir um objeto em uma coleção:
async addEmptyTravel(userId: String) {
...
addDoc(collection(this.firestore, 'travels'), travelData).then((travelRef) => {
collection(this.firestore, `travels/${travelRef.id}/stops`);
setDoc(travelRef, {... travelData, id: travelRef.id})
this.router.navigate(['edit', `${travelRef.id}`]);
return travelRef;
})
}
Atualizar e excluir dados
Com o UID de qualquer postagem de viagens, é possível deduzir o caminho do documento armazenado no Firestore, que pode ser lido, atualizado ou excluído usando as funções updateFoc e deleteDoc do AngularFire:
async updateData(path: string, data: Partial<Travel | Stop>) {
await updateDoc(doc(this.firestore, path), data)
}
async deleteData(path: string) {
const ref = doc(this.firestore, path);
await deleteDoc(ref)
}
Ler dados como um elemento observável
Como as postagens de viagens e as paradas ao longo do caminho podem ser modificadas após a criação, seria mais útil obter objetos do documento como observáveis, para se inscrever em todas as alterações feitas. Essa funcionalidade é oferecida pelas funções docData e collectionData do @angular/fire/firestore.
getDocData(path: string) {
return docData(doc(this.firestore, path), {idField: 'id'}) as Observable<Travel | Stop>
}
getCollectionData(path: string) {
return collectionData(collection(this.firestore, path), {idField: 'id'}) as Observable<Travel[] | Stop[]>
}
Adicionar paradas a um posto de viagem
Agora que as operações de postagem de viagens estão configuradas, é hora de considerar as paradas, que estarão em uma subcoleção de uma postagem de viagem, como: travels/
Isso é quase idêntico a criar uma postagem de viagens, então experimente fazer a implementação por conta própria ou confira a implementação abaixo:
async addStop(travelId: string) {
...
const ref = await addDoc(collection(this.firestore, `travels/${travelId}/stops`), stopData)
setDoc(ref, {...stopData, id: ref.id})
}
Muito bem! As funções do Firestore foram implementadas no serviço de viagens e agora podem ser vistas em ação.
Como usar as funções do Firestore no app
Navegue até src/app/pages/my-travels/my-travels.component.ts e injete o TravelService para usar as funções dele.
travelService = inject(TravelService);
travelsData$: Observable<Travel[]>;
stopsList$!: Observable<Stop[]>;
constructor() {
this.travelsData$ = this.travelService.getCollectionData(`travels`) as Observable<Travel[]>
}
O TravelService é chamado no construtor para receber uma matriz observável de todas as viagens.
No caso em que apenas as viagens do usuário atual são necessárias, use a função query.
Outros métodos para garantir a segurança incluem a implementação de regras de segurança ou o uso do Cloud Functions com o Firestore, conforme abordado nas etapas opcionais abaixo.
Em seguida, basta chamar as funções implementadas em TravelService.
async createTravel(userId: String) {
this.travelService.addEmptyTravel(userId);
}
deleteTravel(travelId: String) {
this.travelService.deleteData(`travels/${travelId}`)
}
Agora a página "Minhas viagens" está funcionando. Confira o que acontece no emulador do Firestore quando você cria uma nova postagem de viagens.
Em seguida, repita o processo para as funções de atualização em /src/app/pages/edit-travels/edit-travels.component.ts :
travelService: TravelService = inject(TravelService)
travelId = this.activatedRoute.snapshot.paramMap.get('travelId');
travelData$: Observable<Travel>;
stopsData$: Observable<Stop[]>;
constructor() {
this.travelData$ = this.travelService.getDocData(`travels/${this.travelId}`) as Observable<Travel>
this.stopsData$ = this.travelService.getCollectionData(`travels/${this.travelId}/stops`) as Observable<Stop[]>
}
updateCurrentTravel(travel: Partial<Travel>) {
this.travelService.updateData(`travels${this.travelId}`, travel)
}
updateCurrentStop(stop: Partial<Stop>) {
stop.type = stop.type?.toString();
this.travelService.updateData(`travels${this.travelId}/stops/${stop.id}`, stop)
}
addStop() {
if (!this.travelId) return;
this.travelService.addStop(this.travelId);
}
deleteStop(stopId: string) {
if (!this.travelId || !stopId) {
return;
}
this.travelService.deleteData(`travels${this.travelId}/stops/${stopId}`)
this.stopsData$ = this.travelService.getCollectionData(`travels${this.travelId}/stops`) as Observable<Stop[]>
}
8. Como configurar o armazenamento
Agora você implementará o Storage para armazenar imagens e outros tipos de mídia.
O Cloud Firestore é melhor usado para armazenar dados estruturados, como objetos JSON. O Cloud Storage foi projetado para armazenar arquivos ou blobs. Neste app, você vai usar esse recurso para permitir que os usuários compartilhem fotos de viagens.
Da mesma forma que acontece com o Firestore, armazenar e atualizar arquivos com o Storage requer um identificador exclusivo para cada arquivo.
Vamos implementar as funções em TraveService:
Como enviar um arquivo
Navegue até src/app/services/travel.service.ts e injete o Storage no AngularFire:
export class TravelService {
firestore: Firestore = inject(Firestore);
auth: Auth = inject(Auth);
storage: Storage = inject(Storage);
E implemente a função de upload:
async uploadToStorage(path: string, input: HTMLInputElement, contentType: any) {
if (!input.files) return null
const files: FileList = input.files;
for (let i = 0; i < files.length; i++) {
const file = files.item(i);
if (file) {
const imagePath = `${path}/${file.name}`
const storageRef = ref(this.storage, imagePath);
await uploadBytesResumable(storageRef, file, contentType);
return await getDownloadURL(storageRef);
}
}
return null;
}
A principal diferença entre acessar documentos do Firestore e arquivos do Cloud Storage é que, embora ambos sigam caminhos estruturados de pasta, a combinação de URL de base e caminho é recebida pelo getDownloadURL, que pode ser armazenado e usado em um arquivo
Como usar a função no app
Navegue até src/app/components/edit-stop/edit-stop.component.ts e chame a função de upload usando:
async uploadFile(file: HTMLInputElement, stop: Partial<Stop>) {
const path = `/travels/${this.travelId}/stops/${stop.id}`
const url = await this.travelService.uploadToStorage(path, file, {contentType: 'image/png'});
stop.image = url ? url : '';
this.travelService.updateData(path, stop);
}
Quando a imagem é carregada, o próprio arquivo de mídia é enviado para o armazenamento e o URL é armazenado de acordo no documento no Firestore.
9. Como implantar o aplicativo
Agora estamos prontos para implantar o aplicativo.
Copie as configurações firebase de src/environments/environment.ts para src/environments/environment.prod.ts e execute:
firebase deploy
Você vai conferir algo parecido com:
✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.
=== Deploying to 'friendly-travels-b6a4b'...
i deploying storage, firestore, hosting
i firebase.storage: checking storage.rules for compilation errors...
✔ firebase.storage: rules file storage.rules compiled successfully
i firestore: reading indexes from firestore.indexes.json...
i cloud.firestore: checking firestore.rules for compilation errors...
✔ cloud.firestore: rules file firestore.rules compiled successfully
i storage: latest version of storage.rules already up to date, skipping upload...
i firestore: deploying indexes...
i firestore: latest version of firestore.rules already up to date, skipping upload...
✔ firestore: deployed indexes in firestore.indexes.json successfully for (default) database
i hosting[friendly-travels-b6a4b]: beginning deploy...
i hosting[friendly-travels-b6a4b]: found 6 files in .firebase/friendly-travels-b6a4b/hosting
✔ hosting[friendly-travels-b6a4b]: file upload complete
✔ storage: released rules storage.rules to firebase.storage
✔ firestore: released rules firestore.rules to cloud.firestore
i hosting[friendly-travels-b6a4b]: finalizing version...
✔ hosting[friendly-travels-b6a4b]: version finalized
i hosting[friendly-travels-b6a4b]: releasing new version...
✔ hosting[friendly-travels-b6a4b]: release complete
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/friendly-travels-b6a4b/overview
Hosting URL: https://friendly-travels-b6a4b.web.app
10. Parabéns!
Agora seu aplicativo estará completo e implantado no Firebase Hosting. Agora todos os dados e análises estarão acessíveis no console do Firebase.
Para conhecer mais recursos relacionados ao AngularFire, ao Functions e às regras de segurança, confira as etapas opcionais abaixo e outros Codelabs do Firebase.
11. Opcional: proteções de autenticação do AngularFire
Junto com o Firebase Authentication, o AngularFire também oferece proteções baseadas em autenticação nas rotas, para que usuários com acesso insuficiente possam ser redirecionados. Isso ajuda a proteger o app contra o acesso de usuários a dados protegidos.
Em src/app/app-routing.module.ts, importe
import {AuthGuard, redirectLoggedInTo, redirectUnauthorizedTo} from '@angular/fire/auth-guard'
É possível definir funções como quando e para onde os usuários devem ser redirecionados em determinadas páginas:
const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['signin']);
const redirectLoggedInToTravels = () => redirectLoggedInTo(['my-travels']);
Em seguida, basta adicioná-las às suas rotas:
const routes: Routes = [
{path: '', component: LoginPageComponent, canActivate: [AuthGuard], data: {authGuardPipe: redirectLoggedInToTravels}},
{path: 'signin', component: LoginPageComponent, canActivate: [AuthGuard], data: {authGuardPipe: redirectLoggedInToTravels}},
{path: 'my-travels', component: MyTravelsComponent, canActivate: [AuthGuard], data: {authGuardPipe: redirectUnauthorizedToLogin}},
{path: 'edit/:travelId', component: EditTravelsComponent, canActivate: [AuthGuard], data: {authGuardPipe: redirectUnauthorizedToLogin}},
];
12. Opcional: regras de segurança
O Firestore e o Cloud Storage usam regras de segurança (firestore.rules e security.rules, respectivamente) para aplicar a segurança e validar os dados.
No momento, os dados do Firestore e do Storage têm acesso aberto para leituras e gravações, mas você não quer que as pessoas mudem as postagens. Você pode usar regras de segurança para restringir o acesso a coleções e documentos.
Regras do Firestore
Para permitir que apenas usuários autenticados vejam postagens de viagem, acesse o arquivo firestore.rules e adicione:
rules_version = '2';
service cloud.firestore {
match /databases/{database}/travels {
allow read: if request.auth.uid != null;
allow write:
if request.auth.uid == request.resource.data.userId;
}
}
As regras de segurança também podem ser usadas para validar dados:
rules_version = '2';
service cloud.firestore {
match /databases/{database}/posts {
allow read: if request.auth.uid != null;
allow write:
if request.auth.uid == request.resource.data.userId;
&& "author" in request.resource.data
&& "text" in request.resource.data
&& "timestamp" in request.resource.data;
}
}
Regras de armazenamento
Da mesma forma, podemos usar regras de segurança para impor o acesso a bancos de dados de armazenamento no storage.rules. Também podemos usar funções para verificações mais complexas:
rules_version = '2';
function isImageBelowMaxSize(maxSizeMB) {
return request.resource.size < maxSizeMB * 1024 * 1024
&& request.resource.contentType.matches('image/.*');
}
service firebase.storage {
match /b/{bucket}/o {
match /{userId}/{postId}/{filename} {
allow write: if request.auth != null
&& request.auth.uid == userId && isImageBelowMaxSize(5);
allow read;
}
}
}