Vamos programar: aplicativo Todo com o Angular e o Firebase

1. Introdução: Olá e bem-vindos ao meu primeiro curso na minha série Let's Code. Meu nome é Stefan Omerovic, e eu sou autodidata desenvolvedor web e eu também sou um professor on-line. Este curso é para você que está apenas começando com Angular, ou para você que está disposto a melhorar suas habilidades para um próximo nível. Como você pode ver através deste curso, vamos criar aplicativo de tarefas com Angular e Firebase. Curso é bastante simples para que você possa codificar junto comigo e dessa forma criar seu primeiro aplicativo de tarefas. Na seção Projeto deste curso, você vai encontrar, todo este aplicativo ao vivo no Firebase Hosting. Então você poderia dar uma olhada, o que você vai criar através deste curso, ao vivo. App terá pacotes integrados como Bootstrap e Font Awesome. Mas também vamos trabalhar com componentes angulares, encaminhamento de serviços através deste curso. Então também trabalharemos com nosso Firebase, nosso banco de dados. Lá criaremos nossa nuvem firestore, nossa coleção de tarefas, e renderizaremos nossas tarefas em nossa tela. Nós também seremos capazes de modificar essas tarefas, adicioná-las, excluí-las como desejarmos. E para o final deste curso, você vai aprender como você pode implantar seu aplicativo de tarefas no Firebase Hosting e ver seu aplicativo ao vivo, pois vamos trabalhar através deste curso com Angular, Firebase e até mesmo um pouco de um bootstrap, seria bom se você soubesse pelo menos o básico desses. Não é altamente necessário, você ainda será capaz de trabalhar através deste curso, mas será mais simples para você acompanhar o curso. Vamos agora ver o que é Angular e como poderíamos usá-lo? 2. O que é angular e como usar?: Então, enquanto estamos começando agora, vamos primeiro ver o que é Angular. Então Angular é um framework JavaScript para aplicações de uma única página. Podemos usar o Angular para desenvolver aplicativos na Web, em dispositivos móveis e até mesmo em desktops. Velocidade, desempenho e gestão de projetos da Angular é bem conhecido na comunidade. Há também razões pelas quais Angular está no topo ao lado Vue e React.js, como uma estrutura JavaScript, é claro. Angular também tem um par de ferramentas únicas e também vem com recursos já integrados como RXJS, que é tópico avançado, mas vamos trabalhar com observáveis daqueles através deste pequeno curso. Então você vai ter pelo menos compreensão disso. Angular também tem sua própria ferramenta para gerenciar os módulos chamados Ivy. Ele também tem e suporta roteamento, como você pode ver aqui, roteamento e navegação, HTTP e injeções. Podemos usar serviços em Angular para injetar e compartilhar mais facilmente nossos dados através de nossas páginas e componentes, que você verá em vários vídeos. Angular também tem sua própria documentação, que está aberta aqui. Esta documentação é bem escrita e honestamente muito para ler, especialmente para um iniciante. Boa coisa lá com a documentação. Há um projeto inteiro, Projeto Tutorial com ele. Então eu estou atualmente na página de introdução do Angular Docs. E aqui está um Hello World. E se eu clicar aqui você pode ver tour de heróis tutorial. Se eu clicar sobre isso, eu começaria a criar o aplicativo Angular chamado Tour of heroes e com ele, você será capaz de criar todo o aplicativo, todo o projeto com Angular. Angular tem uma grande equipe também por trás dele. Ele é desenvolvido pelo Google e está sendo frequentemente atualizado e atualizado. Para ser preciso, cerca de seis em seis meses, Angular sai com uma nova versão. É por isso que estamos criando este aplicativo em Angular 10. Se eu rolar até aqui, deixe-me fechar isso. Você verá que a distração é estável. Se eu quiser ir, é 10.1 e a próxima versão será 11ª versão. E você pode ver que já temos 10 versão do Angular. Através dessas versões, haverá mudanças, mas nenhuma delas é crucial. Eles são principalmente para acelerar a codificação, pacotes de pacotes menores e talvez novos recursos. A única grande mudança que aconteceu foi de Angular JS para Angular 2 versão, que é totalmente diferente quadro neste momento. Eu poderia falar sobre Angular por horas e ainda terei algo a dizer. Então eu acho que o melhor, a melhor coisa para nós é apenas saltar para o código e apenas criar nosso aplicativo. Você pode me acompanhar passo a passo. E no final deste curso, você criará o aplicativo de tarefas com Angular e Firebase. Vamos Código. 3. Criando um aplicativo: Então, através deste vídeo, vamos criar nosso aplicativo. Para fazer isso. Você precisa primeiro ter Angular CLI em sua máquina. Então vá para cli.angular.io. Aqui você tem um script para instalar a CLI para Angular. Você pode simplesmente executar este npm install g flag para globalmente @angular /cli. Quando isso for concluído, você instalou a CLI com êxito e poderá usá-la. Agora, aqui também, você vê este ng novo my-dream-app, Este é, primeiro uso de Angular CLI. Com isso, podemos gerar nosso aplicativo. Então, agora estou no meu console. Você pode abrir seu terminal ou um emulador de console como eu tenho aqui. Então eu poderia apenas executar, por exemplo, ng novo aplicativo de tarefas como este. Se eu apertasse Enter, meu aplicativo começaria a se criar. Ele vai primeiro me perguntar, eu gostaria de adicionar roteamento angular? Eu poderia passar. Sim aqui, para que o roteamento angular seja gerado automaticamente para mim. Então, como vamos usar roteamento um pouco neste curso, nós precisaríamos disso. Ele também vai me perguntar qual formato de folha de estilo eu gostaria de usar? Então eu tenho CSS, SCSS, SASS, Menos ou Estilos. Eu usaria CSS, apenas um simples para este curso. O aplicativo agora começou a instalar-se e, uma vez que tudo estiver terminado, continuaremos nosso trabalho. Só espere um pouco. Então, agora eu criei com sucesso o meu aplicativo de tarefas. E agora a próxima coisa seria este cd my-dream-app, basicamente cd, em seguida, aplicativo para fazer, em seguida, o nome do aplicativo. Então eu vou executar o CD para fazer app. E assim eu estou atualmente no meu aplicativo de tarefas no meu terminal. Então, deixe-me esclarecer isso um pouco. E neste ponto em que estamos em nosso aplicativo, poderíamos apenas executar ng servir. E ng servir servirá nosso aplicativo no localhost 4200. Então, quando eu executar este ng servir assim, uma vez que isso é concluído, eu posso abrir meu localhost 4200 e eu vou ver meu aplicativo que foi gerado pela Angular CLI. Então, tudo está acabado. Vou copiar este localhost e ir para o meu, google, colá-lo na minha URL assim. E aqui estamos nós. Obviamente meu aplicativo tem um pouco de conteúdo aqui, então eu vou apenas mostrar-lhe onde este conteúdo está por agora e passar pelo aplicativo um pouco. Temos algum conteúdo em nosso aplicativo, obviamente, eu abri meu aplicativo com o código do Visual Studio. Se eu iria para o arquivo de origem e para o meu index.html, este índice HTML servirá meu aplicativo totalmente. Você vê este tipo de raiz App de elemento HTML aqui. Isso basicamente renderizará todo o meu aplicativo dinamicamente com base em meus componentes, módulos, serviços, etc Se fôssemos para esta pasta app aqui teríamos este app.component.html. Abra isso. E aqui você pode ver que nós já temos algum conteúdo lá dentro, certo? Então, se eu pudesse controlar um, alland excluir. E neste ponto eu poderia digitar, por exemplo, H1 e digitar Hello World assim. Controle S para salvar, meu aplicativo será recarregado automaticamente, pois nosso aplicativo ainda está sendo executado no localhost 4200. E agora na minha tela eu podia apenas ver o texto Hello World, que está vindo da minha tag H1. Então basicamente todo o conteúdo que tínhamos estava no arquivo do componente do aplicativo. E agora estamos começando claro. Removemos o conteúdo padrão angular e estamos aqui apenas com nosso conteúdo. Então, agora que criamos com sucesso o aplicativo, é hora de instalar todas as dependências que precisaremos através deste aplicativo. Vamos instalá-los. 4. Instalando as Dependências: Então o plano para este vídeo é instalar todas as dependências que vamos precisar e usar através do nosso curso e nosso aplicativo, obviamente. Não estamos instalando RXJS, ou HTTP ou alguma outra dependência. Essas dependências já estão acima e funcionando principalmente com o angular. Vamos usar Bootstrap eo Bootstrap vamos usar jQuery. Nós também usaremos ícones de Font Awesome. Então, vamos precisar instalar aqueles para usá-lo. E se você se perguntar como poderíamos apenas importar aqueles em nosso arquivo principal, nosso arquivo HTML índice? Sim, podemos, mas vou mostrar-lhe uma maneira mais amigável para Angular fazer isso e não preencher nosso arquivo index.html. Nós também precisaremos de dependências do firebase, mas vamos instalá-las um pouco mais tarde quando realmente começarmos nosso trabalho com o Firebase. Então, no meu console, se eu pudesse controlar C primeiro para parar meu servidor local de ser executado. Agora, eu poderia executar, por exemplo, npm install —save para salvar essa dependência, bootstrap, depois jQuery e Font Awesome. Se eu apertasse Enter, oh, desculpe. Digitei errado Font Awesome. Como este. Se eu apertasse enter neste ponto, minhas dependências começariam a instalar. E no final, eu teria Bootstrap quarta versão instalada. Como você pode ver, 4.5.2 é adicionado, então jQuery também é adicionado, e Font Awesome também é adicionado ao meu projeto. Então, adicionamos com sucesso essas dependências em nosso projeto, mas ainda assim não estamos usando essas dependências. Apenas instalando, Angular não saberá que precisa usá-los. Então, onde devemos usar essas dependências se não estamos usando aqueles no arquivo index.html. Abaixo, você terá esse arquivo JSON de dados angulares. Se eu abrisse isso. Aqui está um esquema inteiro em relação a este aplicativo Angular que temos abaixo, você vê a matriz de estilos, estes estilos matriz é basicamente matriz que mantém nosso CSS, ícones ou coisas assim. E essa matriz de scripts é o que está segurando nossos scripts, nossos arquivos JavaScript. Então nós poderíamos apenas importar esses aqui e não importá-los em nosso arquivo index.html. E uma vez que instalamos bootstrap, jQuery, font-awesome, aqui em um nó módulos, se eu abriria isso, se eu rolar um pouco aqui é Bootstrap. Se eu abrir isso aqui como eu instalei, eu tenho aqui no meu projeto. Eu tenho pasta dist. Eu tenho css, por exemplo, e eu tenho bootstrap.min.css arquivo que eu poderia simplesmente importar para o meu aplicativo. E vamos fazer isso agora mesmo. Então deixe-me fechar isso agora. Este módulo de nó, sim. E nos meus estilos ao lado da minha fonte, styles.css, este arquivo é basicamente esse arquivo no mesmo nível de pasta do meu index.html. Este é o arquivo styles.CSS base e global usado através do aplicativo. Então, logo abaixo, eu poderia usar vírgula aqui e adicionar mais uma importação. Por exemplo, módulos de nó barra bootstrap, slash dist barra CSS e barra bootstrap. .min é um arquivo minificado, .css. E por isso importamos Bootstrap. E também precisamos importar Font Awesome. Então, para que mais uma vírgula e para baixo, módulos de nó , barra Fonte impressionante, barra CSS barra Fonte impressionante, .min.css. E sim, agora temos um Css para nossos ícones e também nosso framework bootstrap. Então vamos agora adicionar scripts para Bootstrap e jQuery. Então, aqui na minha matriz de scripts, Eu vou apenas adicionar nó, módulos de nó barra jQuery barra dist para distribuição e jQuery, .min.js arquivo. E isso é importante antes de importar nosso Bootstrap. Também devemos importar primeiro nosso jQuery. Ele será então jQuery será carregado pela primeira vez e Bootstrap saberá como usá-lo nesse ponto. E agora para importar o bootstrap. Então módulos nó barra bootstrap barra JavaScript barra não JavaScript, desculpe, barra dist, em seguida, barra JavaScript e barra bootstrap.minified que js. E é isso. Então agora eu poderia apenas reexecutar meu localhost ou 4200. Então eu vou correr ng sirva —open. Esta bandeira aberta aqui, irá abrir automaticamente o meu aplicativo em, 00:05:12 .185 —> 00:05:13 .025 Como este. Você pode ver que minha tag H1 neste ponto não parece tão básico como ele tem estilos padrão de Bootstrap. Se eu iria para o meu componente aplicativo neste ponto, e eu iria adicionar o I com a classe de font-awesome, fa. Verifique, por exemplo, salvar, no meu host local. Você verá este sinal de cheque aqui. Deixe-me ampliar um pouco. Sim, este aqui, basicamente, vem do Font Awesome. Então, temos um bootstrap e lutou incrível, importado com sucesso para o nosso aplicativo. E neste ponto poderíamos criar nosso primeiro componente. 5. Primeira componente - componente cabeçalho: Então agora neste vídeo, Plano é criar nosso primeiro componente. Vamos criar componente cabeçalho, essa barra de navegação que estará sempre na parte superior da nossa aplicação. Nós também criaremos toda a interface do usuário para esse componente. Então vamos começar. Poderíamos criar um componente por conta própria, mas há uma maneira melhor e mais rápida de fazer isso. Eu poderia ir para o meu terminal como estou aqui e aqui do meu lado. No lado direito, não preciso fazer isso no meu terminal principal onde estou executando localhost. Eu ainda poderia executar localhost e executar este script que eu preciso. Angular CLI vai nos dar um pouco mais de funcionalidade e poderíamos com isso também gerar nosso componente. Então eu poderia digitar algo assim, ng g c cabeçalho. Então este G significa gerar. Então eu poderia tipo de geração em vez de g, e este C significa componente. Então eu poderia digitar totalmente componente, mas esta é uma abreviação e o cabeçalho será o nome do componente. Então, se eu apertar Enter aqui, depois de algum tempo, você verá que angular criou um novo componente para mim. Arquivo HTML componente de cabeçalho, arquivo spec.ts, que é um arquivo de teste, que vou falar um pouco mais tarde, tipográfico e arquivo CSS para nós no meu código Visual Studio que se parece com isso. Ao lado do meu componente de aplicativo, eu teria essa pasta de cabeçalho. Então, se eu abrir isso, eu teria meu arquivo HTML para o meu cabeçalho aqui. Então, obviamente, como angular gerado este componente cabeçalho, ele também adicionou este cabeçalho parágrafo funciona para nós. Então, por isso, poderíamos apenas verificar se isso realmente funciona. Então, aqui no meu arquivo de texto de cabeçalho, Eu tenho aqui seletor, cabeçalho do aplicativo. Basicamente, este é um seletor. Como eu poderia usar este componente no meu HTML Há também outras importações como URL modelo, que está usando componente HTML cabeçalho, que é basicamente parte HTML para este componente e estilo para este componente é header.css estilo. Então, se eu copiar isso aqui, e eu ir para o meu componente aplicativo, componente principal do meu aplicativo, Excluir conteúdo atual. E eu vou usar o cabeçalho do meu aplicativo assim, salvar meu arquivo, no meu navegador, devemos ver algo diferente. Então agora no meu navegador, não tenho essas tags H1 e aquele ícone de verificação, eu poderia ampliar isso um pouco. Eu tenho este parágrafo com trabalhos de cabeçalho. Então, basicamente, meu componente é implementado com sucesso em nosso aplicativo e ele é usado neste ponto. Então agora eu gostaria de codificar o conteúdo para este componente. Então, vou codificar aquela barra de navegação com o bootstrap. Então, espero que você saiba pelo menos o básico do Bootstrap, mas também será fácil para você acompanhar. com ele. No meu lado esquerdo terei meu código e no lado direito teremos uma prévia ao vivo desse código. Então aqui eu vou fechar todos os meus editores que eu abri e vamos abrir apenas o meu componente de cabeçalho como este. Vou apagar este parágrafo, salvar. E do lado direito, não vemos esse parágrafo, então poderíamos começar a codificar nossa barra de navegação. Então eu vou criar o, deixe-me primeiro colocar o comentário da barra de navegação. E eu vou abaixo criar nav, nav elemento HTML5, Vou adicionar a classe sobre ele. Para o Navbar. Em seguida, navbar expandir lg, depois um navbar escuro. E eu poderia usar bg escuro também. Então salve. E você pode ver esse tipo de linha cinza. Então, para você que não conhece o Bootstrap, Bootstrap é basicamente HTML e CSS, e também um framework JavaScript que também criou, já criou classes para nós usarmos. Então esta barra de navegação basicamente criará a barra de navegação para nós. Este navbar expandir lg. Vamos expandir nossa barra de navegação para ocupar tela cheia em dispositivos maiores, mas em um dispositivo menor é conteúdo para nossa barra de navegação não será visível, mas ele tipo de precisa ser alternado, será para o botão que você verá em breve o suficiente. Uma barra de navegação escura, irá colorir nossa cor de fundo da barra de navegação para uma cor escura como esta, cinza, cinza escuro e bgdark. Estamos tipo de reconhecer que a barra de navegação é escuro e basicamente colocar o texto para a luz, para a luz basicamente para ser texto branco. Tão bom contraste. Então, primeiro de tudo, deixe-me criar esse logotipo que normalmente temos na barra de navegação. Então eu vou criar esta tag âncora e para o meu href, eu vou apenas passar esta hashtag. Preciso de uma aula. E esta classe será navbar marca, que é vidro para criar o logotipo dentro da barra de navegação com Bootstrap. E eu vou adicionar o texto para que este seja um aplicativo de salvamento de tarefas. E aqui você pode ver este logotipo direito, já parece ótimo. Então agora vamos criar o botão que abaixo. Este botão, será basicamente o botão para esta barra de navegação de alternância em dispositivos menores. Então, botão, sim. E o tipo de botão? tipo deve ser um botão. E classe, há uma classe já criada para nós chamada Toggler navbar como esta. E eu poderia usar a alternância de dados para entrar em colapso. Deixe-me ALT Z isso. Então você pode ver todo o conteúdo aqui. Estes dados toggle colapso é basicamente trabalho Bootstrap para combinar JavaScript com o HTML e dessa forma ele irá criar esta animação colapso para nós. Também precisaríamos de dados alvo. Então, basicamente, que tipo de conteúdo irá alternar com este botão? E eu usaria o ID aqui, res_nav. por exemplo, como um nav responsivo de navegação. Vamos criar em breve seção com este ID, mas também precisamos do conteúdo para o nosso botão. Então eu vou criar um elemento span como este, e eu vou usar uma classe de navbar. Toggler, sim, eu preciso usar dois g e Icon aqui. Então, já no lado direito, você pode ver que este ícone não parece certo, certo? Seu ícone branco. Então, se eu viesse a este toggler navbar e passaria mais uma aula chamada bg dark. Eu teria um ícone escuro agora aqui. Então agora para criar essa navegação responsiva para nós, então depois do nosso botão, eu criaria uma div com a classe de colapso e colapso de navbar, esta classe, essas classes são as classes que estão definindo esse todo para ser dobrável com o nosso botão. E eu deveria criar o ID aqui de res_nav. Como este. Então o nosso botão pode ter como alvo isso. Então dentro eu vou ter apenas meus links, links que, tipo de links de navegação, obviamente. E para isso eu usaria lista desordenada. Eu passaria a classe aqui de navbar nav, e também ml alto. Então ele vai basicamente colocar a margem no lado esquerdo, automático, automaticamente. Então ele vai mover meu conteúdo para o lado direito com isso, então eu preciso criar um item de lista. Como você sabe, as listas geralmente têm itens de lista. Então o item da lista terá uma classe de item de navegação. E por dentro eu poderia criar um link como este. Href pode ser só a hashtag. Este link me levaria a uma página inicial. Eu também deveria criar uma classe aqui de salvar link nav, e nós não vê-lo no lado direito. Mas se eu encolher o meu conteúdo um pouco, ainda nada. Aqui está. Então, mesmo em dispositivos de tela grande, temos esse tipo de botão aqui. Fizemos algo errado. Obviamente, o que fizemos de errado é que esta classe de navbar-toggler deve ter dois Gs como este. E agora minha barra de navegação não terá esse botão em dispositivos de tela maiores. Mas se eu esperasse o meu elemento, e, vamos movê-lo para o iPhone X. Teremos este botão aqui. E se eu clicar nele, ele vai apenas colapsar que div com o ícone de colapso sobre ele. Colapso aula sobre isso, desculpe. Então deixe-me mover isso para trás e voltar ao meu código. E agora no meu código eu poderia criar outros itens na minha lista. Então eu copiaria isso duas vezes, 1, 2 e eu poderia, Para este um uso sobre e todos, que será a página inteira para nossos afazeres. E agora temos esta casa sobre e para aqueles que não são utilizáveis em tudo, obviamente. E não temos ainda o conteúdo para isso. Mas agora criamos totalmente nosso componente de cabeçalho. Podemos ver como isso também vai olhar em um dispositivo de tela menor. Se eu esperasse o meu elemento, abra a vista do iPhone. Sim, já parece bom. E agora que você sabe como criar um componente e usá-lo, vamos agora criar nossos outros componentes que usaremos neste curso. 6. Home, sobre e todos os componentes: Então, agora que você criou o componente de cabeçalho, você deve saber como você poderia criar os outros. Então isso é bom para você testar a si mesmo. Vamos precisar de casa, sobre e página de tarefas. Então, será bom se você gerar componentes para essas páginas também. Então eu estou de volta ao meu terminal e aqui no meu lado direito do terminal, eu ainda estou executando meu localhost. Eu vou executar ng gerar componente e casa como este. Mas agora eu passaria, — e SkipTests como este. Este teste de salto, ele basicamente não irá gerar o arquivo de teste para mim, como nós tipo de não precisamos dos arquivos de teste para este pequeno aplicativo simples, eu criaria a mesma coisa, mas agora será o componente about. E você vê que ele está gerando e criando nossos componentes imediatamente. E por último, como estas coisas a fazer. Sim, então agora no nosso código ao lado do nosso componente de cabeçalho, temos sobre o componente de casa e a fazer. E todos esses componentes, se você iria para seus arquivos HTML, é apenas seu nome e palavra funciona. Então, neste ponto eu iria para o meu componente de aplicativo HTML aqui. E abaixo do cabeçalho do meu aplicativo, eu usaria App. E você pode ver que aqui eu poderia usar já em casa como esta e Control S para isso para salvá-lo. E vamos ver no nosso anfitrião local. Você pode ver abaixo do meu cabeçalho, há um componente de casa, certo? Para este tipo de, nosso componente de cabeçalho é compartilhável através de outros componentes, certo? Então, uma vez que estamos sobre página, ainda vamos ver esses componentes aqui, mas aqui o conteúdo vai mudar. Estes trabalhos em casa serão sobre trabalhos, serão trabalhos de afazeres, certo? E para isso, usamos roteamento em Angular para mudar aqueles, basicamente para alterar essas rotas, para alterar essas páginas, usamos um roteamento que já está implementado em Angular. Então vamos usar isso no nosso próximo vídeo. 7. Rotação angular: Então, neste vídeo, vamos configurar rotas para o nosso aplicativo. Nós também criaremos links que uma vez que clicamos neles, eles nos levam à página que precisamos com base nessa rota. Essas páginas também mostrarão apenas o conteúdo que eles devem mostrar para essa página a partir desse componente basicamente, vamos começar. Então, no meu projeto, eu poderia entrar na minha fonte aqui e aplicativo. E eu poderia ir aqui para o módulo de roteamento de aplicativos. Se você se lembra de quando geramos o aplicativo Angular, ele também pergunta, perguntou-nos, queremos integrar o roteamento para o aplicativo? Então é por isso que ele criou também este módulo de roteamento aplicativo para nós. Então, neste módulo, temos este conjunto de rotas, e é aqui que basicamente configuramos nossas rotas para o nosso aplicativo. Então aqui, eu vou usar minhas chaves e para configurar a rota, eu preciso primeiro passar o caminho. O caminho será o caminho para essa rota e eu vou digitar casa aqui. E depois disso, eu também preciso configurar componente, componente que eu desejo usar, certo? Então componente será componente home, um segundo componente que já instalamos em nosso projeto. Então isso é basicamente como uma rota parece em Angular. Precisamos ter sobre e fazer isso mais. Por isso, aqui em baixo, eu usaria mais ou menos assim. E o componente será sobre componente. E também vou usar para fazer rota, fazer. E o componente será fazer componente, certo, assim. Além disso, se o usuário visitar a rota vazia, devemos redirecioná-lo para o componente de casa eu acredito, então aqui acima, vou adicionar mais uma rota, essa rota. E deixe colocar uma vírgula aqui. Essa rota terá um caminho vazio. E em vez de componente, eu vou usar redirectto e eu vou usar casa aqui. Desejo redirecionar para o componente de casa. Além disso, eu preciso passar caminho correspondência. Desejo igualar totalmente o meu caminho. Tão cheio aqui, e é isso. Então, agora que eu estou no meu próprio aplicativo, eu poderia atualizar meu localhost aqui, e você vai ver que ele vai me levar para a página inicial. Além disso, se eu clicar aqui em casa, nada funciona certo? Sobre também, tudo está indo para a página inicial. Então precisamos configurar esses cliques para nos levar às páginas certas, como home about e afazeres. Para fazer isso, vou abrir o meu componente HTML cabeçalho aqui. Então, para configurar nosso componente inicial para nos levar à página inicial, precisamos usar essas chaves e o link do roteador. O link do roteador pode me levar também. Homepage como esta. Vou copiar isto e colá-lo mais duas vezes para cerca e afazeres. Então aqui deve ser sobre página e fazer página como esta. Então, no meu próprio aplicativo, se eu clicar sobre ele vai me levar para a página sobre, se eu clicar em casa, ele vai me levar para a página inicial. Se você clicar em fazer, isso vai me levar a fazer rota, certo? Além disso, devo configurar a classe ativa para qual rota está atualmente ativa em meus links. Para fazer isso, podemos usar algo chamado link do roteador, ativo. O link do roteador ativo vem de Angular e podemos passar para essa classe. E você sabe que Bootstrap já tem sua classe ativa e podemos usar isso. Mas você também pode criar sua própria classe ativa personalizada e configurá-la aqui. Então link roteador ativo para cada um dos itens de link aqui, eu usarei para estar agindo. Então agora você pode ver o tempo atualmente na minha rota para fazer e meu link de tarefas está ativo. Se eu mudar para cerca de, ele vai estar ativo, mudar para casa, ele vai estar ativo. Mas também há um problema. Estamos mudando a rota, obviamente, mas o conteúdo em si permanece para trabalhos domésticos. Precisamos também de alterar o conteúdo. Então, apenas configurando nossa barra de navegação e nosso roteamento, o conteúdo em si não mudará para que onde implementamos o componente home aqui em nosso aplicativo component.html poderíamos removê-lo agora e usar algo chamado de tomada de roteador. saída do roteador renderizará o conteúdo com base na rota, com base no componente dessa rota. E agora você pode ver que eu estou na minha rota sobre e ele diz sobre obras. Deixe-me também ampliar um pouco isso. Então você pode ver se eu mudar isso para uma casa, você vai ver trabalhos em casa para fazer, para fazer trabalhos. Portanto, nosso roteamento está totalmente configurado, e agora devemos ter pelo menos parte do conteúdo para nossas páginas aqui. Então vamos começar a trabalhar com eles. 8. Conteúdo para casa e sobre página: Então agora queremos criar algum conteúdo para nossas páginas. Vamos começar com a página inicial e sobre as páginas da minha página inicial. Eu vou primeiro fechar todos os meus arquivos abertos aqui, e eu vou apenas para o HTML home aqui. Vou colocar aqui primeiro o comentário de casa, desculpe, conteúdo incorreto da página inicial. E poderíamos começar a criar nosso conteúdo aqui. Eu não vou fazer nada grande apenas como um pequeno conteúdo para casa e sobre a página. Então div, como nós não estamos focando naqueles neste curso. Então, o fim do conteúdo da página inicial e as aulas para o meu div seria jumbotron e também centro de texto. Essas classes vêm obviamente de um Bootstrap. Jumbotron é uma grande seção de um bootstrap. Então eu vou usar H1 e eu vou usar uma classe nele display-4. Como este. Será como um, ele usará a tag H1, mas ele irá exibi-lo como um quatro para o tamanho e, Olá Mundo será um texto para isso. Então eu poderia usar um parágrafo aqui com uma classe de chumbo, o que significa que este parágrafo será mais visível, maior parágrafo como é um parágrafo à esquerda para a página. E ele vai apenas dizer, bem-vindo ao nosso aplicativo de tarefas com Angular e Firebase. É isso. Também podemos adicionar um botão aqui. Então botão como este eu vou adicionar um tipo para o botão será apenas o tipo de botão. E também as classes serão btn, btn-rimary, e btn-lg para botão grande e primário irá colorir, colorir para a cor primária de bootstrap, que é uma cor azul. E aqui vou usar um afazeres como este. Este botão irá levar-me à página de por- fazer. Então eu poderia usar aqui também link roteador. E será criado para me levar a fazer coisas como esta. Isso também deve ser entre aspas, aspas simples. É isso na minha página inicial. Agora você pode ver este Hello World. Bem-vindo ao nosso aplicativo para fazer com texto Angular e Firebase e para fazer texto que eu quero usar texto por- fazer aqui, vou configurar, ir para tarefas Como este. E agora, se eu clicar neste botão, você pode ver que ele vai me levar à página de tarefas, certo? Então agora vamos criar algum conteúdo também para a página Sobre. Para cerca de página eu vou abrir o meu sobre HTML. Então eu vou colocar primeiro comentário sobre o conteúdo da página. E aqui vou criar um div. Deixe-me também colocar comentário final, fim de sobre o conteúdo da página. E agora eu poderia usar aqui recipiente, classe, recipiente e centro de texto bom. Dentro vou usar o meu H1 com a classe de margem superior para 5. Ele vai mover meu H1 por cinco espaços de Bootstrap. Dentro vou passar uma página como esta. E vamos adicionar também um parágrafo. Parágrafo também pode ser um parágrafo principal. Então eu vou adicionar a classe principal. Texto dentro será, vamos codificar nosso aplicativo de tarefas. E deixe-me acrescentar mais um parágrafo. Este será parágrafo normal e eu vou usar aplicativo será totalmente desenvolvido com Angular e Firebase como um banco de dados como este. Então agora na minha página sobre, eu tenho conteúdo como este que se parece com a home page, mas sem aquele jumbotron. Então é bom o suficiente para estas duas páginas. Devemos focar agora na página de tarefas basicamente. E vamos codificar o próximo vídeo. 9. Conteúdo da página de Todos: Portanto, o meu principal objectivo aqui na página de por- fazer é ter uma secção aqui no topo do tipo de secção de cabeçalho onde poderei adicionar os nossos itens por- fazer. E abaixo, nós deveríamos ter duas listas, uma lista para tarefas e uma lista para tarefas acabadas, aqueles itens por- fazer que já estamos feitos. Então, fecharei meus arquivos que abri no meu Visual Studio Code e abrirei o componente HTML de tarefas. Então aqui eu poderia digitar primeiro comentário, cabeçalho por- fazer, adicionar uma div, e também adicionar o fim do comentário final do cabeçalho por- fazer. E este cabeçalho terá um par de classes. Primeiro usarei uma classe de jumbotron e centro de texto. centro assim. E dentro eu poderia curar minha classe de contêiner, então dentro desse contêiner, poderíamos ter mais uma div com a classe de linha. E para o corredor da morte, poderíamos ter uma grade lá dentro. Então eu vou adicionar uma div com a classe de coluna pequenos dispositivos 2 e dispositivos médios de coluna 3 como este. Isso só servirá, como um espaçamento, vou apenas mover minha seção principal de um cabeçalho para o meio da minha tela. Então eu vou ter duas ou três colunas em um lado esquerdo vazio. E em si, esse conteúdo de cabeçalho em si terá uma classe de coluna sm de oito e coluna md de seis. Então, o que significa que em dispositivos menores no lado esquerdo duas colunas estarão vazias, então ele vai ocupar oito colunas da largura, e no final duas das colunas serão novamente vazias como Bootstrap tem 12 colunas. Então 2 mais 8 é 10 e 2 colunas vazias, que é 12. Então, aqui eu também poderia adicionar comentários para o fim do recipiente, fim da linha e fim do conteúdo como este e dentro do meu conteúdo aqui, eu poderia primeiro adicionar H1 adicionar uma classe de exibição 4 e cabeçalho vai apenas dizer Todos como isto. E aqui eu poderia ter a entrada. Grupo de entrada com a entrada e o botão para adicionar os meus itens por- fazer. Então eu vou adicionar uma div com a classe de grupo de entrada, que é a classe para definir o grupo de entrada. E dentro vou adicionar o meu campo de entrada, que é um tipo de texto. E as classes serão controle de forma, que é a classe para tipo de estilo um pouco mais nossa entrada, não apenas você tem aquele básico. E o espaço reservado será o título de todo. É isso. E eu também deveria ter um botão aqui, mas eu vou anexar este botão ao meu campo de entrada. Então, esses dois estão empilhados juntos. E eu poderia usar um grupo de entrada e acrescentar classe em Bootstrap para isso. Então classe div é acrescentar grupo de entrada. E lá dentro eu vou ter um botão apenas. Este botão será um tipo de botão. E nós vamos ter uma Classes de btn, btn esboço sucesso, o que é bom o suficiente. Ele também vai apenas dizer adicionar todo, é isso. Então, na minha página, você pode ver como isso parece. Eu tenho um título de todos os itens por- fazer, campo de entrada e botão adicionar por- fazer, que é meio que vincular aqui ao campo de entrada. Vamos agora criar a nossa primeira lista dos nossos itens a fazer. Por isso. Logo abaixo do meu rumo, cabeçalho. Vou adicionar uma lista de itens por- fazer adicionar a div. Vou adicionar aqui o fim dos afazeres. E esta primeira div deve ser o recipiente. Então classe será Container. Então eu teria div id, classe de linha. Então eu vou ter uma div com classe de coluna sm dois e coluna md árvore, que é apenas novamente espaçamento como temos em nosso cabeçalho de por-fazer. E mais uma div com uma classe de coluna sm oito e coluna md seis, que é a mesma coisa que usamos aqui em nosso cabeçalho, certo? Assim, como você deseja adicionar listas de itens por- fazer, vamos apenas adicionar um grupo de listas a partir daqui. Então lista desordenada terá uma classe de grupo de listas como esta. E por dentro eu deveria ter, em meus itens dentro eu deveria ter esse tipo de caixa que poderia ser marcada para tipo de terminar nossos afazeres e também os títulos para nossos afazeres. Então eu vou adicionar um item de lista, deve ter uma classe de item de grupo de lista como este. E por dentro, como mencionei, terei meu ícone. Então classe será Font, Awesome, Font Awesome quadrado o. Eu vou usar esse. E abaixo do meu ícone, terei um título. O que poderia ser ir para andar assim. Permitam-me que acrescente mais dois àqueles aqui para que pudéssemos ter algo a mostrar. Então vá para Walk, aprenda codificação. Eu não sei. Beba três galões de água. - Sim. Ok, então para isso agora, podemos ir para o nosso navegador e aqui você vai ver essa lista, certo? Mais tarde. Seremos capazes de marcar esses itens e movê-los para os itens pendentes finalizados. E isso também deve ser dinamicamente renderizado aqui, não apenas estaticamente como este aqui. Mas, por enquanto, vamos adicionar mais uma lista abaixo para terminado para aqueles. Então aqui, onde eu tenho o fim da lista de tarefas, eu poderia copiar isso inteiramente. Cole aqui em baixo, e eu adicionarei o comentário de tarefas finalizado. Fim de, terminados afazeres como este. E eu vou ter um recipiente, Vou adicionar a esta margem superior para cinco para movê-lo um pouco de um topo, linha, está ok. Esta div de espaçamento aqui está bem. Então eu tenho o meu conteúdo div, o que está tudo bem. Logo acima da minha lista não ordenada, vou adicionar H4 com a classe do centro de texto para movê-lo em um centro. E ele só vai dizer coisas acabadas como este. O grupo da lista poderia ter, sei lá, itens como comprar uma camiseta. E isso pode estar tudo bem. Eu poderia remover estes dois itens da lista, mas os próprios ícones, Eu não vou ter ícone quadrado vazio aqui. Eu vou ter font-awesome, cheque quadrado o ícone. E depois do meu título aqui, eu vou ter um ícone também chamado deixe-me adicioná-lo. Eu posso ser Font Awesome Font Awesome lixo, ícone, trash-o ícone eu poderia usar, que vai usar basicamente ser usado para excluir nossos por-fazer. E eu vou flutuar isso para o lado direito. Então eu vou adicionar a classe direita flutuante e margem superior para 1. É isto. Então agora na minha página você pode ver esta lista de tarefas acabada, que é um buy uma t-shirt, obviamente marcado quadrado aqui e este ícone aqui que poderia ser clicado mais tarde, que será clicado mais tarde para excluir itens por- fazer. Assim, poderemos confirmar as nossas tarefas para terminá-las e elas serão imediatamente movidas para a lista inferior. E também seremos capazes de, un fazer nossos afazeres e eles serão movidos para a lista sobre. Portanto, a nossa página de tarefas também está totalmente concluída agora, mas é apenas parte da interface do usuário. Ainda precisaríamos adicionar funcionalidade. O bom é que todo o nosso aplicativo ainda parece ótimo em desktop e dispositivos menores. Para que pudéssemos verificar isso. Eu poderia abrir dispositivos menores aqui, e você pode ver que a página de afazeres do aplicativo parece ótima. Sobre a página também, página inicial também, certo? Então vá para aqueles. Ótima. Então vamos agora configurar a nossa base Firebase. 10. Firebase e instalação: Ok, então agora é hora de falar um pouco sobre Firebase e também configurar nosso Firebase para nosso aplicativo. Firebase é esta plataforma de desenvolvimento com vários recursos que podemos usar para desenvolvimento móvel e web. Ele é desenvolvido pelo Google e nos ajuda a construir e expandir nossos aplicativos. Através deste curso, usaremos o banco de dados em nuvem do Firebase. Com o Firebase, você não precisa apenas usar um banco de dados em nuvem, mas também há um banco de dados em tempo real. Firebase também oferece suporte a outros recursos, como autenticação , armazenamento, hospedagem, funções, análises e muito mais. Ao final deste curso, trabalharemos também com o Firebase Hosting e implantaremos nosso aplicativo no Firebase. Se você já tem a conta. Você está olhando para a mesma tela que eu. Este é basicamente o console do nosso Firebase e a parte principal para mim aqui, se você não tem a conta, vá para o processo de inscrição, pois é apenas o básico e simples. Então, aqui vamos adicionar o novo projeto. Então eu vou clicar nesta tela grande aqui. E primeiro precisamos criar o nome para o nosso projeto. Então isso seria fazer aplicativo. Firebase também irá gerar um par de caracteres no final. Para que pudéssemos ter um identificador único para o nosso projeto. Então agora eu poderia continuar e ele vai nos perguntar primeiro sobre o Google Analytics. Desejamos integrar isso no nosso projecto? Não há necessidade disso. Como este projeto não vai usar qualquer tipo de análise. Então crie o projeto. Firebase agora está criando nosso projeto e configurando tudo para nós. Uma vez terminado, seremos redirecionados para a plataforma, para o painel do nosso projeto. Então nosso novo projeto está pronto para que possamos clicar em Continuar, e ele está nos redirecionando para o projeto em si. Então este é o nosso painel. Aqui do lado você pode ver recursos que o Firebase suporta, como autenticação, firestore em nuvem, banco de dados em tempo real, armazenamento, hospedagem, funções, aprendizado de máquina. Além disso, há um teste para a igualdade do aplicativo, análise completa e como expandir o aplicativo com diferentes tipos de testes, links, etc. Aqui na parte superior, você pode ver que para começar adicionando Firebase ao seu aplicativo, vamos fazer isso primeiro, se você não vê-lo aqui na parte superior, você pode clicar aqui em um ícone de engrenagem e ir para as configurações do projeto. E você vai vê-lo aqui na seção do seu aplicativo abaixo. Então eu espero que você se lembre que eu mencionei pela primeira vez que vamos instalar dependências para o Firebase. Então precisamos instalar 2 dependências. Então eu vou executar npm install, —save, firestore e angularfire2. Loja de fogo é as dependências que nos conectarão ao, para o nosso Firebase e fogo angular 2 vontade, nos ajudar a trabalhar com ele para que eu pudesse apenas apertar Enter e esperar que ele para instalar. Assim que isto terminar, voltarei para a minha visão Firebase aqui. E você pode ver que eu poderia integrar meu projeto do Firebase para iOS, Android, unidade e também aplicativos web. Então eu vou clicar em aplicativos web e a primeira coisa que eu preciso fazer é registrar o aplicativo. Então meio que criar o nome para o aplicativo. Então eu vou criar um nome de aplicativo para fazer, que vamos usar mais tarde em nosso projeto Angular para conectar ambos juntos. Ele também está nos perguntando sobre hospedagem Firebase. Não vamos nos integrar aqui. Nós nos integraremos mais tarde quando formos... meio manualmente. Então você pode ver toda a configuração. Então registre o aplicativo aqui. E ele nos dará de volta o SDK que poderíamos conectar ao nosso aplicativo. Eu poderia continuar a consolar aqui. E eu vou ver que SDK também aqui. Esta configuração do Firebase é o objeto que meio que precisamos. Portanto, precisamos integrar isso em nossa aplicação, em nosso ambiente de nossa aplicação. E com isso poderíamos trabalhar com outras coisas da Firebase. Então, agora no meu terminal, vou para a fonte. E aqui ambientes pasta. Há ambiente Ts. Esta é a pasta para teste, para testar ou codificar este arquivo de ambiente. Eu podia ouvir apenas usar vírgula e colar aquele objeto de configuração do Firebase. Não será igual, mas dois pontos, e eu removerei esta linha final aqui. E também vou corrigir isso rapidamente para ser aspas, não aspas duplas. Eu conserto apenas por 1, 1 segundo, vou consertar para todos, sim. Então, por isso, nosso aplicativo, quando nós apertamos esta chave API ou o domínio, URL do banco de dados, ele vai saber como trabalhar com eles. Há também um bucket de armazenamento que poderíamos usar, uma mensagem e ID de aplicativo que poderíamos usar em nosso Firebase. Além disso, vou copiar agora este objeto e eu vou para arquivo de Produção Ambiental e eu vou colar a mesma coisa lá. Principalmente você terá uma coisa diferente de para sua produção e sua preparação, seu banco de dados será diferente, seu ambiente de teste será diferente. Provavelmente um repositório, você terá diferentes aqueles também. Então aqui estou eu usando o mesmo para o propósito deste curso, mas principalmente você não vai usá-lo assim, certo? Então também agora que temos, essa configuração em nosso aplicativo, ainda precisamos configurar as dependências que instalamos. Então, para esses, vou entrar no aplicativo e módulo de aplicativo aqui. Então eu preciso importar minhas dependências aqui. Então eu vou importar módulo de fogo angular como este. Isso será importado automaticamente do fogo angular 2. E este módulo nos conectará ao nosso Firebase. Então, aqui vou usar inicializar método aplicativo que este modelo tem. E nele eu vou passar minha configuração do arquivo de ambiente que eu tenho. Então eu preciso também importar esse arquivo de ambiente. Então, aqui na parte superior, eu vou importar ambiente de como pasta deste ambiente e arquivo Ambiente. Então aqui agora eu poderia passar meu ambiente. e no ambiente eu tenho configuração Firebase aqui, certo? Este objeto. Sim. E com isso, estamos passando nossa configuração Firebase para este módulo de fogo angular. Mas ainda precisamos dizer explicitamente, dizer como qual aplicativo é. Então aqui eu vou apenas passar o nome do aplicativo, que é fazer. Como este. E com isso, importamos com sucesso, meio que conectamos nosso Firebase com nosso aplicativo. Eu também vou importar aqui mais um módulo como módulo de loja de fogo angular como este. Este não será importado automaticamente, então vou importá-lo aqui no topo. Então importar módulo Angular Firestore, de, angularfire2/firestore, assim. Com isso, conectamos totalmente nosso aplicativo com nosso Firebase e podemos trabalhar com ele agora. Primeiro, vamos voltar ao nosso Firebase e criar nosso banco de dados em nuvem lá. Nós também devemos criar uma coleção de tarefas nesse banco de dados e meio que criar um par de tarefas lá. 11. Coleção de Firestore - Todos: Agora estou de volta à minha base. Aqui, você pode ver que ele diz que eu tenho um aplicativo que a fazer aplicativo, que está correto. Desejo criar o Cloud Firestore agora para o meu aplicativo, então eu irei aqui no Cloud Firestore. E basicamente me oferecerá para criar esse banco de dados da loja de fogo na nuvem. Então você pode ver o vídeo sobre a loja de fogo na nuvem, mas eu vou imediatamente e criar meu banco de dados aqui. Eu poderia criar um para o modo de produção e outro para o modo de teste. Modo de teste basicamente me permitirá ler os dados, gravar dados e excluir dados dele. Não só eu, mas qualquer pessoa que se conectar ao meu aplicativo e modo de produção apenas dará a permissão aos usuários que tiverem essa permissão. Então eu vou apenas abrir isso para não trabalhar com o modo de produção por enquanto. Então o modo de teste está bem. Este modo de teste, vamos durar apenas 30 dias. Então, depois de 30 dias, ele voltará para o modo bloqueado para meio de produção, então em seguida. E eu também preciso passar o local. Então passe como a Europa Oeste, isso não é um problema para mim como eu sou na Europa e meio que na Europa Leste, mas Europa Oeste é mais, é o único que eu poderia escolher aqui. Agora que tudo foi criado, sou redirecionado para a minha loja de fogo na nuvem. Para o meu banco de dados.. Aqui agora, você pode ver este aplicativo de tarefas e esses tipos de caracteres que foram gerados. Então isso está correto. Então agora eu poderia criar minha coleção. Se eu clicar aqui no início da coleção, eu poderia passar ID da coleção. Este ID será apenas o nome da coleção. Você pode ver o exemplo aqui, usuários da coleção. Então, se estamos criando o aplicativo que contém usuários, teríamos coleção de usuários, mas estamos criando coleção de itens por- fazer. Então eu vou passar aqui o ID da coleção de itens por- fazer. Então, se eu for o próximo agora, ele também me oferecerá para adicionar meu primeiro documento aqui. Então, primeiro a fazer. Então, para o ID do documento, eu vou gerar automaticamente esse ID. Então este ID será gerado a partir do Firebase e do campo, então os campos que nós, que nossos itens extras terão é o título para todos, certo? E o valor poderia ser ir para a loja assim. Vou adicionar mais um campo, que será completado campo. E este campo não será tipo de String, tipo de booleano, e será falso inicialmente. Então salve. Agora, você pode ver que eu tenho minha coleção de afazeres aqui. Eu tenho um documento aqui pelo ID e os valores do documento aqui no lado direito. Deixe-me criar mais dois documentos. Assim, como o documento gerado automaticamente, o título do campo ID será comprar uma camiseta, por exemplo. Deixe-me colocar os s também capitalizados e o campo add. Agora vou usar campo completado com o tipo de booleano e será verdade. Salvar. E agora mais um documento, gerar automaticamente ID. Campo, título. Tipo é string, que é verdadeiro e valor para esse título será lavar um carro. Em seguida, adicione um campo. Concluído. Type é booleano, valor é false. Salvar. Então agora temos pelo menos nossos dados em nosso banco de dados. Então nós poderíamos agora no próximo vídeo, puxar esses dados para o nosso aplicativo. 12. Serviço angular e injeções: Então, para puxar dados do Firebase e trabalhar com os dados que usaremos o serviço Angular. Service in Angular é o tipo de arquivos que podemos usar para compartilhar nossos dados através de componentes. Vamos criar um agora e vamos usá-lo para comunicar com o nosso Firebase e colar esses dados do firestore para os nossos componentes para o nosso componente de tarefas aqui. Serviços são recursos injetáveis para que eles possam ser injetados em componentes, Outros serviços, guardas de rota, diretivas, e é por isso que nós os usamos para esses. Então agora eu poderia executar aqui ng gerar serviço. Irei gerar o serviço na pasta de serviços e o nome será o serviço por- fazer. Eu também usarei o sinalizador SkipTests aqui, que ele não gere o arquivo de teste para este serviço como eu não preciso de um. Então, agora que terminei com isso, posso voltar ao meu serviço. Então, no meu serviço aqui, então eu vou para o aplicativo de origem e eu vou ter pasta de serviços e o serviço de tarefas para os serviços é gerado. E a primeira coisa que você pode ver é este injetável. Este injetável é basicamente fornecido em uma raiz. Então, o que significa que esses serviços fornecidos na raiz da nossa aplicação, para que ele possa ser compartilhado através de todos os módulos e componentes que temos. Para trabalhar com o Firebase e firestore. Também precisamos importar o par de módulos do fogo angular 2 aqui. Então, no topo eu vou digitar importação. E agora o Firestore angular, que funcionará diretamente e nos conectará ao nosso firestore, e então a coleção Angular Fogo Store, que basicamente funcionará com nossa coleção de itens a fazer e documentos angulares da loja de fogo, que funcionará, com cada documento dessa coleção. E eu vou importar isso do fogo angular para uma loja de fogo como esta. Então agora vou usar minha loja de fogos angulares primeiro. Aqui no construtor, preciso passar por aquela loja de fogo angular. Então eu vou usar fs particulares para a loja de bombeiros. E eu vou usá-lo para ser ajustado para o tipo de Firestore Angular. Então, com isso, podemos trabalhar com a loja de bombeiros com isso fs verdadeiro através do nosso serviço. E por isso poderíamos selecionar nossa coleção e fazer algumas outras coisas. E agora, no próximo vídeo, vamos usá-los e trabalhar com nosso firestore para obter nossos dados de volta. 13. Como começar o Todos do Firebase: Então, o plano aqui é usar nosso firestore angular firestore em meu serviço e obter meus dados de volta da minha nuvem firestore que eu tenho. Então eu vou primeiro criar um par de variáveis. Então a coleção de tarefas, como nós vamos puxar a coleção de para fazer, para essas coleções será o tipo de coleção angular firestore como esta. E esta coleção firestore terá o tipo de tarefa. Ainda não criamos esse tipo. Então este item a fazer será o modelo dos nossos dados. Então vou criar esse modelo agora mesmo. Eu vou aqui no meu aplicativo e criar pasta sobre ele, chamados modelos. E em modelos vou criar por- fazer. modal. ts. Então agora neste arquivo, eu poderia exportar minha interface de tarefas, que será um tipo de modelo para meus dados. E este modelo para os meus dados terá uma identificação. Mas esta identificação não será necessária. Nós vamos recuperá-lo, mas nós realmente não precisamos enviar o ID para criar os dados em si. Então ID será o tipo de string. Então título, como você sabe, será o tipo de string. E também teremos concluído, que é tipo de booleano. Então, agora, eu poderia importar meu modelo de tarefas no meu serviço aqui. Então, a fazer, eu vou importá-lo no topo, aqui. E agora eu poderia usar esse modelo para modelar meus dados através do serviço. Como eu tenho que fazer coleção. Agora vou criar também para fazer doc. Para fazer doc será basicamente tipo de documento Angular loja fogo, e também será o tipo de fazer. Este seria cada documento individual em que trabalharemos tipo de editá-lo, excluído ou atualizado de alguma forma, certo? E também precisarei fazer, todo o meu conjunto de tarefas a fazer meus dados principais. Então, tarefas, que serão o tipo de observável como este, que precisa ser importado de RXJs aqui no topo. O observável, vou falar sobre isso em um segundo. O observável também terá o tipo de para fazer, mas será para fazer array como basicamente, ele, isso para fazer irá manter a matriz de nossos itens por- fazer. Então o meu observável aqui, o observável é basicamente o invólucro para os meus dados. Então, meio que, eu estou embrulhando meus dados de afazeres para os dados. E nesses, eu poderia usar métodos diferentes, que você verá em um segundo. Mas também eu poderia assinar esses dados, obter os dados corretamente e como Angular com a Firebase irá retornar o tipo de dados observáveis para mim. Eu vou, vai ser muito mais fácil para mim trabalhar com aqueles e o lidar com aqueles do meu lado. Então agora no construtor aqui, eu poderia definir meus dados, definir dados aqui basicamente. Então eu vou usar esta coleção de tarefas para ser igual a este tipo isto. fs que eu mencionei, fs como este. E no FS, eu tenho um método chamado coleção. Este método de coleta basicamente vai puxar a coleção que eu tenho no meu Firebase. Então a coleção é o nome de tarefas como espero que você se lembre disso. Então agora que eu tenho minha coleção em meu serviço, eu posso extrair os dados, cada documento da própria coleção. Preciso salvar esses dados no meu para fazer. Por isso, vou definir isto. Portas a fazer iguais. esta colecção de afazeres. Esta coleção que eu coloquei aqui da loja de bombeiros. E vou usar. mudanças instantâneas. Alterações de instantâneo neste. Basicamente, eu poderia usar não apenas alterações instantâneas, mas também alterações de valor. As mudanças de valor apenas retornarão os dados para mim e eles apenas retornarão esses dados de documentos para mim, certo? Não precisei passar nenhuma funcionalidade adicional para retornar dados para mim, mas não obterei o ID com alterações de valor. Para obter o ID, eu preciso usar um instantâneo alterações e meio que adicionar algumas funcionalidades adicionais. As mudanças de valor estão retornando apenas os dados deste lado direito. E você pode ver que o ID do documento não está no, no lado direito da tela, certo? Então é meio que neste nível de documento principal. E para retornar esse ID, eu preciso meio que também usar as alterações instantâneas para dar uma olhada profundamente no próprio documento e também para vincular esse ID ao próprio documento e, em seguida, retornar o documento inteiro e salvá-lo na minha matriz . Talvez pareça complicado, mas não é obviamente. Então, aqui, agora eu poderia usar um método pipe pipe me permitirá ligar a essas mudanças instantâneas. Um par de métodos. Eu não vou usar, alguns desses eu vou usar apenas um. Vou usar o método do mapa aqui. Portanto, o próprio mapa precisa ser importado. Então eu vou importar mapa de Rxjs/operadores. Então você pode ver que como meus dados são observáveis, eu posso trabalhar com um mapa nele. Então este mapa vai me dar algumas alterações de meus dados de um instantâneo muda, certo? Então, como eu tenho algumas alterações, eu vou usar um método aqui, função seta aqui, digitado errado que, ok. E aqui eu vou devolver minhas alterações, mas eu também vou usar mapa nelas. Preciso mapear essas mudanças para ver os dados delas. Então, enquanto eu estou mapeando para eles, eu vou ter um documento em si. Então documento que eu poderia usar um x aqui. Não é um problema. Então, agora que eu tenho este documento por conta própria, deixe-me usar o sinal fechado aqui. Agora que eu tenho este documento por conta própria, eu poderia passar por esse documento e defini-lo igual aos dados que eu preciso. Então eu vou criar esse conjunto de dados aqui. E defina-o igual a este documento. e este documento terá a carga em si mesmo. Então payload. novamente, e o documento agora por conta própria e. dados. Então isso basicamente significa que eu retornarei esses dados de um documento como um dado de tarefas para ser o modelo de tarefas a fazer. Então, basicamente agora, esses dados serão iguais ao lado direito na minha nuvem firestore. Então, eu estou puxando os dados corretos de volta, mas ainda assim, eu não tenho o ID para obter o ID. Agora que tenho esses dados, vamos usar os dados. ID aqui para ser igual ao x. novamente para o meu payload de documento. doc como este. E agora. Aqui eu quero apenas ter os dados, mas eu também vou ter o ID, que você pode ver aqui. Então. Identificação como esta. E agora que eu tenho esses dados totalmente, eu vou apenas retornar os dados de volta. E com isso, minhas tarefas terão dados corretos que manterão o título do ID e os valores concluídos. E como eu preciso chegar a isso no meu componente, eu vou criar o método agora depois do meu construtor aqui em baixo, eu vou colocar o comentário de chegar a fazer, e eu vou criar um método de get to dos. Aqui. Vou devolver isto. Para fazer de volta. Então eu vou usar mais tarde este método no meu componente. Então vamos para o nosso componente agora. Aqui em tarefas, vou entrar no componente em si. E antes de tudo, como vou trabalhar com o serviço no meu componente, devo importar esse serviço. Então eu vou no meu construtor usar private to dos service para ser tipo de serviço de afazeres como este. Vou importá-lo automaticamente na parte superior como meu serviço é recurso injetável, eu posso importá-lo em, injetá-lo basicamente em componentes. Então aqui agora eu vou ter o meu método get to dos. Eu vou fazer o que fazer. Será o método que vai usar meu serviço de tarefas com isto. Para fazer serviço como este e para fazer serviço, eu tenho o meu método chamado get to fazer como este. E como meus dados são dados observáveis, eu poderia assiná-los, então inscreva-se assim. E eu vou ter de volta uma resposta do meu para os meus dados. E essa é a resposta será o tipo de tarefa, mas para fazer array. Então eu vou agora usar o método seta aqui, e você pode ver a linha vermelha aqui. Eu não importei meu modelo de tarefas aqui, então eu vou apenas importá-lo no topo. Isso é Oaky. E aqui, agora que eu assinei para o meu get to dos, eu poderia consolar. log para dos, resposta como esta. Vamos ver o que temos de volta. Vou copiar isto, chegar ao método dos totalmente e apenas colá-lo aqui com isto. Assim, uma vez que este componente é carregado, uma vez que estamos na página de tarefas, este NGONinit será executado, e ele irá executar este get to do. Este get to dos irá executar get to dos método no meu serviço de todos. E isso tem que fazer irá retornar esses dados para mim, que eu obtive anteriormente da minha coleção de afazeres do meu Firestore Angular. Você pode ver como tudo está conectado aqui. Então agora que eu tenho tudo aqui, eu poderia usar clara aqui e executar ng servir do meu lado e executar meu aplicativo localmente para verificar tudo. Agora que meu servidor está funcionando, eu posso copiar este host local 4200 e voltar para o meu navegador, colar este host local aqui. By the way, se você é um fã de Naruto, Isso é dor basicamente, e eu estou de volta no meu aplicativo. Então eu vou inspecionar meu aplicativo aqui. Eu vou para consola aqui, e eu vou para todos página, uma vez que eu estiver lá. Você pode ver este registro a partir de itens por- fazer. E aqui estão os nossos dados. Temos três a fazer. Cada um dos dados tem o id, título e os valores concluídos. Então, agora que conseguimos extrair os dados da nossa loja de fogo, Cloud Fire Store, podemos vincular dados aqui em nossas listas, na nossa página de tarefas. 14. Mostrando Todos no aplicativo web: Então agora é hora de renderizar nossos dados de nosso componente de tarefas. Então pegamos os dados aqui. Vou criar aqui uma variável de por- fazer, que será o tipo de array de por- fazer como este. E agora aqui em “começar a fazer “, vou usar isto... para fazer e ligá-lo à resposta que temos de volta. Eu também vou ter um acabado para fazer. Então termine a fazer o que será novamente, o tipo de matriz de tarefas. E será a mesma coisa. isto. terminado para fazer igual a resposta. Sim, mas você se lembra como nossos afazeres, terão duas listas diferentes. Um é para terminar a fazer e o segundo é apenas para todos que ainda não estão acabados. Então vamos filtrar nossos dados imediatamente aqui. Portanto, a minha resposta para as minhas tarefas, usei um filtro nelas e vou voltar a fazer de cada um para os que estou a filtrar. Então eu vou voltar aqui apenas o por-fazer. concluída, mas que não está concluída, que tem que fazer concluída, concluída como um falso. Então, basicamente, cada um para fazer isso não é concluído será em para dos array. Vou copiar isto agora este filtro completamente e cada tarefa que estiver concluída estará na matriz de tarefas terminada. Então agora no meu HTML fora dos meus afazeres, eu posso trabalhar com isso. Vou aqui na minha lista de tarefas, vou apagar estes dois itens da lista. E aqui no item da lista, usarei a Diretiva ngfor, que é basicamente para loop para minhas tarefas. Então eu vou fazer um loop através de tarefas e eu vou usar um todo let de todos. Então, enquanto eu estou fazendo um loop através de afazeres, ele está me dando cada tarefa de volta. Então aqui eu posso usar em vez de ir para andar, Eu poderia usar aqui todo. título. Sim. Então ele irá basicamente fazer um loop através de itens por- fazer e ele irá renderizar tantos itens de lista quanto eu preciso tanto quanto todos, tanto por- fazer quanto eu tenho. Então eu vou usar uma cópia assim. Não vamos fazer isso, já que eu tenho alguns outros ícones aqui. Então eu vou usar aqui novamente ngfor loop. E eu vou ligar isso para deixar todo de terminar tudo agora. E isto acabou de fazer. Vamos basicamente fazer a mesma coisa que eu vou fazer para fazer. título aqui. E com isso, estamos totalmente acabados. Se eu voltar para a minha aplicação, você pode ver que agora eu tenho dois para fazer que não estão terminados no topo e um para fazer isso é terminado na parte inferior. Então, os dados estão lá e são renderizados com sucesso na tela. Ainda não consigo atualizar os dados ou excluir os dados. Não consigo nem adicionar dados a, adicionar novos itens por- fazer na minha lista de tarefas. Então vamos trabalhar primeiro com a adição dos dados. 15. Funcionalidade para adição de Todos: Então, para adicionar o nosso a fazer, usaremos a seção no topo da nossa página de tarefas. Então tipo ouvir no cabeçalho, vamos adicionar o título para fazer aqui em um campo de entrada e em um clique do botão adicionar a fazer, vamos adicionar a tarefa em nossa matriz abaixo desta lista. E também será salvo em nosso banco de dados. Então, para trabalhar com a adição de itens por- fazer, eu vou entrar no componente por- fazer aqui. E abaixo do meu get por- fazer, vou criar um método adicionar a fazer, então adicionar a fazer será um método basicamente. E deve obter um título desse campo de entrada. Assim, o título será o tipo de string. Então agora vamos em nosso HTML e passar esse título. Então, aqui no cabeçalho, temos este campo de entrada e um botão. Então eu poderia usar aqui clique evento. E com um clique, eu gostaria de adicionar o método por- fazer a este item por- fazer. Eu deveria passar um título. Então eu deveria pegar o título do meu campo de entrada aqui. Para obter este título, usarei uma referência local do título por- fazer. Para colocar uma referência local, basta usar um hash. E, em seguida, para fazer título com esta referência local, temos uma referência para toda a entrada. Então aqui agora eu posso passar um título de tarefas como este, . e valor sobre ele. Também no final aqui vou usar um; e colocar este título por- fazer . valor para ser igual a uma string vazia. O que significa, deixe-me também refatorar isso um pouco. Para que pudesses ver tudo. O que significa que, basicamente, uma vez que eu clicar neste botão, ele irá adicionar um título, adicionar tarefas basicamente, mas também depois que esse método estiver concluído. Este campo de entrada do título por- fazer, irá retornar o seu valor para a string vazia. Estará vazio de novo, para que possamos adicionar outro. Então agora nos meus afazeres aqui. Em adicionar tarefas por- fazer, eu deveria primeiro verificar se este título está vazio. Se este título estiver vazio, devo impedir que o meu código seja executado. Então eu vou correr. Se o título for igual a uma string vazia, eu retornarei aqui. Então tudo o resto que se o título estiver correto, esse código estará abaixo. Agora, para adicionar o meu item por- fazer, também devo criar este item por- fazer com este título. Então eu vou criar uma const de tarefas para ser igual a, objetos como este. Ele terá um título e esta tarefa de const deve ser tipo de tarefa como este. E ele terá um título que é o título de um topo. E também terá completado, o que é falso. Uma vez que adicionamos isso a fazer, ele sempre será falso como seu ainda não terminou. E finalmente, uma vez que eu criasse isso, eu poderia acessar meu serviço agora. Então isto. Serviço de afazeres. e eu ainda não tenho esse método de adicionar a fazer aqui, mas eu vou usá-lo, adicionar para fazer assim. E nele passarei a fazer a partir daqui que criei. Então agora vamos para o nosso serviço e criar este método addToDO. Então, em serviços aqui para fazer o serviço, logo abaixo do meu get to dos eu vou criar adicionar itens por- fazer e adicionar por- fazer, singular. E eu vou criar um método adicionar todo, que vai começar a fazer a si mesmo, que é tipo de tarefa. E este será um método. Então, como eu poderia adicionar isso no meu Firebase, na minha coleção? Então eu vou apenas usar este. coleção por- fazer aqui e eu vou usar. Há um método add sobre ele. Eu poderia usar o método add e eu poderia apenas passar todo aqui. Então agora eu vou abrir minha loja de fogo nas nuvens aqui, e você vai ver meus afazeres que eu tenho por agora. Voltarei ao meu aplicativo e atualizarei um pouco. Vamos adicionar um novo item a fazer. Então, para fazer será ir para uma classe, pressione enter. Lá está ele. Está lá em baixo. Se eu verificar minha nuvem firestore, eu poderia ver um ir para uma classe como um novo para fazer. Então. Agora, se eu atualizar a página, ele sempre vai me dar de volta que para fazer como ele é salvo com sucesso em nosso banco de dados. Vamos agora ver como podemos excluir nossas tarefas acabadas um clique de um ícone de lixo aqui, à direita. 16. Deletação de Todo: Então, idealmente, excluir nossas tarefas deve funcionar assim. Uma vez que eu clicar neste ícone de lixo, eu deveria passar os dados deste item a fazer. E com base nesses dados mais tarde, vou excluí-los, removê-los do meu banco de dados. Esses dados devem ser para fazer ID, como isso é sempre meio único. Então agora no meu todos HTML, eu poderia ir para terminar a fazer. E com um clique neste ícone de lixo, eu poderia executar clique, clique evento, certo? E eu vou executar um método chamado delete todo. Para isso, eu deveria passar o meu próprio trabalho. Eu ainda não criei essa exclusão para fazer. Então eu vou para o meu componente de tarefas, e aqui em baixo, eu vou executar delete para fazer aqui. E eu vou fazer isso, que é tipo de afazeres. E agora eu poderia remover meus dados. Aqui no meu componente, este não é o tipo de tarefas, mas para fazer agora no meu componente aqui, entrarei em contato novamente com o serviço. Então este. serviço por- fazer, . delete para fazer. Então eu ainda não tenho isso para fazer. Então eu vou apenas passar para fazer a minha exclusão para fazer, como eu ainda não tenho isso. Então vamos entrar em serviço e criar um. Então, após a minha adição para fazer no meu serviço, vou criar uma exclusão para fazer aqui, e eu vou usar esta exclusão para fazer que eu copiei. E eu vou aqui começar a fazer, que é tipo de afazeres. E aqui agora eu poderia executar lógica para excluir minha tarefa. Como preciso excluir minha tarefa por um ID, entrarei em contato, agora usarei isso para fazer o documento. Então aqui eu vou usar isso. Para fazer documento que será igual a este, . loja de bombeiros., no armazém de bombeiros. Eu tenho o método do documento. Então este método de documento entrará em contato coleção que eu desejo com base em um ID do documento e ele vai me devolver esse documento totalmente. Então aqui eu vou usar um ticks volta e nome da coleção é todos/. E eu vou usar um espaço reservado aqui a partir de JavaScript, e eu vou usar para fazer que eu passei aqui .id como este. Então agora meu documento de tarefas é reconhecido certo? Então agora eu poderia apenas usar este documento.todo Dot, e nele eu tenho um método delete e que deve ser isso. Então eu estou na minha página de afazeres, Eu tenho um comprar uma T-shirt acabado de fazer. Então, se eu encontrar aqui comprar uma camiseta, e se eu iria para a minha página e eu clicar no meu ícone, você pode ver que, esse tipo de já desapareceu. Então, se eu atualizar a página, ela não está lá. Também no meu banco de dados , não está lá. Isto é uma lavagem de um carro. Este é ir para a loja e este ir para uma aula. E com isso temos apenas mais uma funcionalidade para fazer aqui, e isso seria nossas atualizações. Assim que eu clicar nesta caixa vazia, ele vai terminar minhas tarefas e movê-los para a matriz de todos concluída. 17. Atualizando Todos: Então eu vou voltar para o meu todos HTML aqui. E uma vez que eu clicar aqui no meu ícone de quadrado, eu vou executar um ouvinte de evento clique. Esse ouvinte de evento, irá executar um método de edição para fazer, e ele vai passar a fazer para ele. Eu deveria criar um este método agora no meu componente. Então aqui, editar para fazer, ele está começando a fazer a partir do meu HTML que é tipo de tarefa. Novamente, escrevo para fazer, para fazer assim. E agora eu poderia reverter seu valor completo. Então, para fazer, ponto concluído será igual a invertido para fazer, ponto, concluído assim. By the way, eu vou voltar para o meu HTML. Eu também deve ser capaz de clicar em Concluir para doshere. 00:00:49 .940 —> 00:00:54 .185 E movê-los de volta para inacabado para fazer. Então eu tenho minha lógica para reverter isso. Agora é hora de entrar em contato com meu serviço novamente. Então este ponto para fazer o ponto de serviço editar, que ainda não criei. E eu vou passar isso para fazer para esse método. Então vamos criar esse método. Aqui vou usar Editar comentário. Método é chamado editar para fazê-lo está recebendo todo do meu componente. E isso para fazer será tipo de tarefa. E por dentro, usarei a mesma coisa que na minha exclusão. Então eu poderia copiar isso de cima, aqui. Então eu deveria pegar meu documento de afazeres da minha coleção de afazeres da loja de bombeiros. E estou conseguindo isso com base na identificação da tarefa. Mas agora, em vez de excluir tarefas, eu deveria passar aqui para fazer a atualização do ponto de documento, e eu deveria passar o meu novo para fazer aqui. Assim como eu estou no meu componente alterando os dados para reverter os dados. Ao meu serviço, estou enviando isso para ver com os dados invertidos. Então ele vai salvar maneira incorreta no meu banco de dados. Então, agora, se eu atualizar uma tela e eu tentei testar isso, vá para um clique de loja. Está no meu acabado de fazer. Se eu atualizar a página, ele ainda está no meu acabado para aqueles. Se eu encontrar o meu ir a uma loja, e aqui está, ir a uma loja já completou um conjunto para verdadeiro. Então, basicamente funciona. Então, se eu atualizar novamente a página, ele sempre vai puxar que ir para armazenar como um valor verdadeiro como valor acabado. Então eu poderia colocar novamente, lavar um carro como um acabado, voltar, encontrar que lavar seu carro. Você pode ver que é verdade. Eu poderia voltar e colocar esses objetivos para armazenar de volta para uma lista de afazeres. Então está aqui agora, certo? Então de volta, ir para a loja completou de falso. Então tudo funciona bem. 18. O que aprendemos e testes: Então, criamos totalmente nossa aplicação agora. Temos nossos componentes aqui. Temos um roteamento que é totalmente integrado. Temos um dado da nossa base Firebase que está funcionando. Poderíamos adicionar novos dados, novos dados, adicionar, ele é adicionado, poderíamos completar o nosso item por- fazer. Poderíamos apagar o nosso afazeres. Poderíamos voltar para casa, fazer tarefas, nosso roteamento está funcionando totalmente e nosso aplicativo de tarefas. Se eu ir para a visão geral do projeto, ele está totalmente configurado em um Firebase e ele está totalmente conectado ao nosso aplicativo para fazer em nosso lado Angular. Agora, só há uma coisa a terminar. Agora podemos trabalhar no Firebase Hosting e empurrar nosso, todo o nosso aplicativo para hospedagem no Firebase e vê-lo ao vivo. 19. Como implantar o aplicativo no Firebase ?: Então, para começar com a nossa hospedagem agora, vou clicar aqui em começar. Estou, a propósito, na seção de hospedagem da minha base Firebase. Então, comece. Então, aqui está. Primeiro precisamos instalar globalmente ferramentas Firebase. Então eu posso apenas copiar esta, bela animação aqui. E eu poderia entrar no meu console. Então, no meu console, deixe-me limpar um pouco, aqui. Eu poderia instalar ferramentas globalmente Firebase. Eu, a propósito, já tenho isso instalado, mas vou instalá-lo junto com você para que você possa ver todo o procedimento de implantação em um Firebase. Uma vez instalado, eu posso voltar para a minha hospedagem Firebase aqui, e eu poderia ir para a próxima etapa. Então, primeiro de tudo, devemos fazer login com nossa conta firebase. Então vamos copiar este login do Firebase aqui e colá-lo assim. Eu já deveria estar logado, então eu já estou logado, mas eu estou logado com uma conta diferente. Então eu vou sair como este firebase logout, e eu vou logar, login, login novamente. Então ele vai me perguntar algumas coisas. Eu só vou permitir isso. Ele vai me mover imediatamente para o login de uma conta do Google. Então eu vou fazer login, com o meu e-mail, aqui. Vai pedir-me uns acessos. Vou dar isso e Firebase CLI login com sucesso como você pode ver. Então, a próxima coisa, eu poderia usar o Firebase nele. Então eu preciso inicializar meu aplicativo como aplicativo no meu Firebase. Então, deixe-me também esclarecer um pouco isso. Então Firebase inicializar e ele vai apenas inicializar todo o aplicativo. Por isso, em primeiro lugar, perguntar-me-á se estou pronto para prosseguir. Sim, eu sou. Aqui, vou escolher qual futuro eu quero usar do Firebase e que é hospedagem. Então eu vim para o espaço de hospedagem e entrar. Então ele vai me pedir para criar um novo projeto ou usar o existente. Então eu vou usar o projeto existente, Ele vai me trazer de volta o meu projeto. Então eu vou usar meu projeto de aplicativo para fazer aqui, assim. Então precisamos passar, o que queremos usar como nosso diretório público? Então aqui vamos usar a pasta dist como esta. E como vamos construir nosso aplicativo na pasta dist, então pressione Enter. Ele vai nos perguntar se queremos configurar este aplicativo como um aplicativo de página única, Angular cria os aplicativos de página única, então sim, para isso também, e você pode ver que Firebase está terminado como ele está concluído. Então agora podemos preparar tudo o resto. Então, com isso, podemos executar a implantação do Firebase, mas antes disso, precisamos construir nosso projeto. Então, para um edifício que eu vou primeiro para Angular JSON aqui, você pode ver que o caminho de saída de um edifício de um construtor será dist/aplicativo para fazer. E você se lembra que passamos por isso, dist assim como a pasta dist. Então, 1 segundo para verificar, se eu tenho tudo configurado corretamente, sim. E agora poderíamos construir nossa aplicação. Então agora aqui eu poderia limpar isso um pouco e usar ng build —prod. Você não precisa usar —prod, mas eu criarei meu aplicativo para ambiente de produção pois ele é o mesmo ambiente que meu ambiente de teste, meu ambiente de codificação. Então este construído vai demorar um par de minutos, mas, Agora o que está fazendo? Está compilando tudo o que temos. Angular em si, está compilando tudo o que temos e irá construir todo o aplicativo para nós, para ser usado como um aplicativo JavaScript. Basicamente, como você sabe que Angular é um framework JavaScript. Assim que isto terminar, eu voltarei. Então está tudo acabado. Temos nossos arquivos JavaScript, que são pacotes de nossa aplicação angular. E agora podemos executar apenas Firebase, implantar assim. Vai demorar algum tempo, mas vai pegar nosso aplicativo e implantado totalmente em nossa hospedagem que já configuramos. Está acabado. Agora podemos ir para a nossa URL de hospedagem. Então eu vou apertar Controle e clique aqui, e isso deve me levar a URL de hospedagem. Então aqui, você já pode ver que eu estou no meu URL de hospedagem. Não estou no meu anfitrião local, certo? Então eu poderia falar sobre, isso é o que temos para sobre. Isto é para fazer. E você pode ver que nossa hospedagem está totalmente conectada. Então nós meio que implantamos nosso aplicativo para hospedagem do Firebase e ele está totalmente trabalhando com o banco de dados em nuvem Firebase. Então aqui agora, quando terminamos com hospedagem, poderíamos simplesmente continuar para um console e agora em uma hospedagem, não teremos essa parte de configuração, mas teremos nossa própria hospedagem. Então você pode ver como eu estou conectado, current_user. Há também um aplicativo que deve ser visitado, que é basicamente que já temos. E seria isso. Aqui você pode adicionar seu domínio personalizado se você tiver um e trabalhar com ele. um pouco também. 20. Agradecemos e bye: Então, aqui estamos nós. Parabéns a você. Você criará com sucesso seu aplicativo de tarefas com Firebase e Angular. Você assim como você poderia usar Angular, seus componentes, serviços e roteamento. Você também configura seu Firebase, Cloud Fire Store para seu banco de dados no Firebase. Você criou sua coleção Todos lá. Você renderizou todos no seu aplicativo. E também você foi capaz de adicionar, excluir e modificar dados desses todos. E, finalmente, você conseguiu implantar todo o seu aplicativo no Firebase Hosting. Nota importante, no futuro, você pode esperar mais, vamos codificar cursos nesta série de mim. Então, esteja preparado, assim que você terá outro ao vivo. Para este, você poderia me dizer o que você gostou e o que você não gostou através deste curso. Você pode até deixar sua crítica honesta para este curso. E dessa forma me ajudar na criação do próximo, vamos codificar cursos na minha série. Mais uma vez, obrigado e adeus.