#11 PWA e deploy de um projeto angular DE GRAÇA | [Série] Criando SaaS do Zero

No vídeo de hoje a gente vai transformar o nosso site em um aplicativo e já fazer o deploy dele. Você vai ver como que é fácil. Eu sou Samuel Rizonho e por aqui eu falo sobre programação, carreira, SaaS, esse mundo de tecnologia. Já deixa o seu like, se inscreve no canal e bora para mais um vídeo da nossa série. Bom, eu já tô aqui com o nosso app funcionando desde o último vídeo, né? A gente terminou a parte de imagem dele e de configuração. E o que que a gente vai fazer hoje é bem simples, a gente vai transformar esse sistema web aqui em um aplicativo. Então ele vai conseguir, usuário vai conseguir acessar o celular, navegador do celular, e ele vai conseguir instalar ele como aplicativo na tela inicial do celular. Então quando ele clicar no aplicativo, na logo do aplicativo, ele vai abrir o navegador por trás dos panos, né, mas ele fica aberto como se fosse um aplicativo. Essa tecnologia a gente chama de PWA. PWA significa Progressive Web App, e é uma tecnologia que ela usa, né, o melhor dos sites e aplicativos móveis oferecendo uma experiência semelhante um aplicativo nativo. Então, com um PWA, as pessoas conseguem acessar o site pelo navegador, mas conseguem instalar no celular, e ele funciona sem conexão com a internet. Então você consegue criar um app offline e também oferecer recurso de notificação e algumas outras coisas. Então ele traz um pouco da experiência nativa, né, como se fosse um aplicativo mesmo. A única coisa que difere é que ele vai rodar em um browser, ele não é um aplicativo nativo, mas ele fica bem parecido e parece muito bem um aplicativo no celular. Então existem várias formas, né, da gente transformar o nosso app em Angular em um app PWA. Eu vou usar a forma mais fácil que a gente tem hoje, é com IA, tá bom? Então vou mostrar para vocês mais uma vez aqui o poder do cloud, tá? Eu fiz só algumas alterações aqui que eu criei um ícone bem simples usando o ChatGPT mesmo. Então Então eu criei um ícone porque esse ícone aqui a gente vai precisar, né? Isso vai ser o ícone que vai ser instalado, e quando você instalar o app no celular vai aparecer essa logo aqui, que basicamente é o favicon do site aqui. Então eu removi e alterei ele aqui no favicon e alterei no shell layout aqui para mostrar essa logo também. Então quando a gente entra aqui no site, ele já tá mostrando aqui em cima a logo nova, e ele tá mostrando a logo aqui em cima também. Então basicamente o que eu vou fazer é transformar esse site em um PWA e vou dar um enter. E aí que ele vai começar a entender, ele vai entender a estrutura do projeto, definir o plano de implementação, e ele vai instalar, instalar e configurar o Angular PWA, um pacote que a gente usa. Ele vai criar o manifest.json com as coisas do branding, as cores e tudo mais. Então aqui, ó, ele já rodou para adicionar e agora ele tá adicionando o schematics, né, para já adicionar e fazer as configurações que o Angular mesmo faz. Você consegue achar isso aqui na internet, é muito simples, tá bom, não é muito difícil. Então aqui, ó, instalando o Angular PWA, Angular Service Worker, e aqui, ó, ele deu erro, tá. Então aqui vai acontecer mesmo, eu não vejo problema nenhum, mas Aqui o que a gente pode tentar fazer é rodar isso para ver se vai funcionar. E aqui, ó, aqui já foi. Tem um erro, mas o que ele já fez aqui, ó, ele já criou os ícones. Olha que legal! Então só de um comandinho que eu rodei, ele já fez algumas configurações aqui para mim, ó. Já criou o webmanifest. No app.config aqui também ele já registrou o Service Worker. Isso aqui é para a gente conseguir rodar ele offline. Tá, então tem algumas configurações aqui, não é muito difícil de entender. Então a gente adicionou o Angular PWA e o Angular Service Worker, e aqui ele já fez a nossa configuração inicial. Então eu falei, eu já rodei o comando e funcionou, continua a configuração. Veja que o Service Worker já foi adicionado, vou continuar a configuração do PWA. Então agora ele vai customizar o manifest.json, tá? Então a gente tem aqui, ó, o manifest Esse carinha aqui, esse carinha que é bem importante, ele vai selecionar os ícones, né, as coisas que vão mostrar quando a gente precisar lá. E ele já tá adicionando aqui, ó, My Barber Shop, gestão de tempo de espera, plataforma para gerenciar e visualizar tempo de espera em barbearia. E aí que é legal, que você consegue colocar lá o tema, a cor do tema, a cor de fundo. Então essa cor de tema e cor de fundo são, por exemplo, na parte de cima, né, por exemplo, no iPhone você consegue customizar a cor que vai aparecer lá. Então se eu quero que a cor que apareça lá é uma cor azul, eu vou colocar a cor de fundo de azul e vai dar certo. Então lá, os ótimos ícones já foram criados, vou adicionar as meta tags adicionais no index para melhorar o PWA. Agora ele vai falar que vai configurar o Service Worker para otimizar o cache. Isso aqui provavelmente ele tá adicionando uma forma, né, da gente visualizar se tem uma atualização para o PWA Isso é muito importante para apps que usam PWA, para ver se o aplicativo já foi atualizado. Então quando o usuário tá com o aplicativo no celular, quando ele abrir, a gente tem que fazer uma verificação se tem uma versão nova e já atualizar. Então é isso que ele tá fazendo aqui, que o Cloud está fazendo aqui para gente. Show! Então aqui, ó, ele já parou, já praticamente terminou as configurações. Eu vou só dar um zoom aqui para mostrar para vocês. Mas o que que o Cloud fez, né? A gente instalou o Angular PWA, o package, Então se eu vier aqui no package-lock.json, você vai ver aqui que ela adicionou o @angular/pwa e o @angular/service-worker. Ele também adicionou o manifesto com os ícones. Eu vou pedir ele para atualizar esses ícones aqui para o ícone que a gente criou aqui, que a gente tem no SVG. No app.config ele adicionou aqui uma configuração do pwa-update-service. Esse carinha aqui é bem importante, ele vai verificar se tem uma versão disponível no app. Se tiver, ele vai mostrar uma notificação. Isso aqui é muito importante, cara, para usuários que vão usar o aplicativo, vão baixar e instalar. Quando ele abre, normalmente ele vai abrir uma versão anterior. Então a gente quer que o usuário sempre esteja uma versão nova. Então toda vez que o usuário abrir o aplicativo, ele vai verificar se tem uma versão nova. Se tiver, ele vai mostrar uma notificação para o usuário e só pede para o usuário recarregar a página. Bem simples, bem prático, e é muito importante. Para um app PWA. E essas foram configurações. O que eu vou pedir agora é para ele usar o Barber Icon, porque o ícone que ele criou aqui é o ícone do próprio Angular, tá? Então eu só vou avisar aqui para ele falar. Isso aqui é uma coisa bem legal, cara, porque antes, quando a gente precisava gerar um ícone para um PWA, normalmente eu pesquisava no Google, aí tinha um site que você subiu o ícone lá, ele fazia o download de todos os ícones, gerava, né, todos esses ícones nos tamanhos, nas proporções que eles precisam. E aí a gente fazia isso normalmente online, né? Então eu colocava lá e fazia, gerava um zip, baixava e tudo mais. Só que hoje, cara, o cloud ele consegue fazer uma coisa muito maluca, cara. Olha lá, ele instalou uma biblioteca chamada Sharp. Então npm install save-devsharp. E aí agora ele vai criar um código JavaScript. Você vai ver, ele vai criar um arquivo JavaScript aqui que ele vai rodar passando o ícone que a gente tem, o SVG. E ele vai literalmente gerar todos os ícones para gente. Então aqui, ó, ele acabou de criar o generate PWA icons. Eu vou deixar ele rodar aqui para vocês verem essa maravilha. Então, ó, generate PWA icons. Deixa eu fechar aqui, ó. Ele tem um código JavaScript pequenininho, muito simples, mas ele já gerou todos os ícones que a gente precisa. Olha que loucura, cara! Olha isso aqui, gente, o ícone de 72, 96, 128, ó, tá tudo aqui, ó, o ícone funcionando. Isso aqui é loucura, cara. Então a gente já tá com os nossos ícones, agora ele só tá dando um build aqui para ver se vai funcionar. Então show, ele deu um bugzinho aqui, tive que instalar o LESS, tá tudo certo, já rodei o projeto aqui de novo. Eu vou vir aqui no site, dá um F5, ó, de cara cê não vai ver diferença nenhuma, tá? A única diferença que vai ter é quando a gente acessar esse site pelo celular, você vai ver quando a gente adicionar ele na tela inicial do iPhone, né, por exemplo, ele vai adicionar com o ícone que a gente quer. Mas isso eu vou fazer quando a gente, depois que a gente publicar e fizer o deploy, tá bom? Então o PWA é isso aqui. A gente instalou as coisas, configurou o Service Worker e provavelmente já tá tudo funcionando. Então, é de PWA suporte, o Tiago, os updates. Pronto, já fiz o commit aqui. Beleza, então agora que a gente tem as nossas, nosso app já em PWA, a gente vai fazer o deploy do app. E para fazer o deploy, eu gosto muito de usar o Firebase para fazer os deploys do app Angular. Então, para usar o Firebase, a gente vai ter que instalar Firebase CLI no nosso computador. Então, só dá um Google Firebase CLI, você vai conseguir instalar para Windows, Mac ou Linux, tá? É bem simples, bem tranquilo. E aí depois a única coisa que a gente vai precisar fazer aqui, ó, Firebase login, tá? Então eu vou vir aqui no nosso projeto. Deixa eu fechar as coisas aqui, deixa eu parar tudo aqui, já mostrar para vocês isso. Então a gente vai vir aqui no nosso projeto, dá um Firebase login, add. Como eu já tenho outros logins aqui, eu vou você precisar desse add aqui, tá? Então vou copiar o link, vou vir aqui acessar numa nova página, ele vai pedir para eu fazer o login. Beleza, continua, dá o acesso. Beleza, login feito com sucesso. Então a minha conta Samuel Rizon Dev tá adicionada aqui. Então se eu vier aqui, então Firebase login list, ele vai mostrar as contas que eu tenho disponibilizadas e eu vou dar um firebase login use samuelrizondev@gmail.com. Show! Se você tiver alguma dúvida, firebase --help, ele já vai aumentar aqui, já vai mostrar todos os comandos que você consegue utilizar aqui, tá? Então aqui vai ser bem simples, a gente tem alguns projetos aqui, algumas coisas que a gente vai precisar utilizar. E o comando que a gente vai usar é firebase init, nada mais que isso. Então, olha lá, o que a gente vai querer utilizar? Eu vou selecionar aqui o hosting. Então, quais features do Firebase que eu quero usar? Eu quero selecionar o hosting. Então, seleciono o espaço aqui, dou um Enter. Qual conta que eu quero usar? Eu vou selecionar o samuelrizondev mesmo. Aí ele tá me perguntando Se eu quero usar num projeto existente ou criar um novo projeto. Nesse caso eu vou criar um novo projeto. O nome do projeto eu vou colocar My Barber Shop. Ele tá falando que o projeto já tem, então já tem um projeto com esse nome, né? Então eu vou colocar My Barber Shop, o nome que ele deu aqui mesmo, não tem problema. Aí que ele tá me perguntando como é que eu quero chamar o meu projeto. Eu vou chamar MB, My Barber Shop. Dev. Ele já tá criando aqui, ó, criando o projeto, adicionando Firebase e o Google Cloud Platform. Show! Aqui ele falou, ó, seu projeto tá pronto. A informação do meu projeto, o ID dele e o nome dele. Ele tá disponível aqui, quando eu clicar aqui eu já consigo acessar lá. E aí agora ele tá me perguntando onde que tá meu diretório público. Esse diretório público vai estar aqui, ó, no meu dist/apps mybarbershop/browser. Então eu vou vir aqui digitar dist/apps/mybarbershop/browser. Isso aqui é o diretório quando a gente builda. Então quando a gente dá um npx build ou ng build, ele vai gerar isso aqui. Então é só você colocar onde tá o seu index.html aqui, tá bom? Então eu vou colocar isso aqui, dá um enter. Então ele tá perguntando se é para me configurar como single page app, eu vou dar um yes. Build automático, eu não quero por enquanto. Então se eu quero reescrever ele, eu vou falar que não. E aqui já tá feito. Então ele já criou o Firebase JSON, criou também o Firebase SRC. São dois arquivos aqui que ele cria, então o JSON e o SRC. E agora é muito simples, Firebase deploy. Simples, prático. E rápido. E aqui a gente já tá fazendo o deploy do nosso app para o Firebase. Então ele já tá pegando aqui as coisas da minha pasta do My Barber Shop Browser, fazendo o upload, finalizou. Aí que, ó, ele já me dá o link do projeto no console. Então se eu vier aqui e abrir esse projeto aqui, ó, eu já tenho o mbdev aqui e ele me dá o link também que eu já consigo testar. Então, mybarbershop.webapp. Então, se eu abrir aqui, e aí eu abri, acabei de abrir aqui, ó, e tá tudo branco. Então, abri o console e vi que o Superbase URL não foi configurado. Então, se eu vier aqui, ó, no meu Barber Shop environment, eu vi que o environment só tá configurado para o ambiente de desenvolvimento. Então, o que que eu preciso fazer? Eu preciso dar um Nx build novamente. Então eu vou dar um build de novo e vou dar um deploy novamente. E para facilitar, o que que eu gosto de fazer é isso aqui, ó. Eu vou dar um build e aqui eu vou criar uma outra função que chama o deploy. Então aqui eu vou chamar npm run build e Firebase deploy only hosting. Só isso. Que aí eu consigo rodar um npm run deploy, que ele já faz o build e já faz o deploy. Então vou fazer o deploy do projeto no Firebase de novo. Show, projeto deployado. Eu vou dar um Ctrl+Shift+R e pronto, já estamos logados aqui, galerinha. samuelrizondev@gmail.com. E aí, ó, já estou com meu projeto rodando. Eu já tenho agora a minha página pública que eu consigo acessar. Então quando eu for compartilhar, ó, Maia Barber Shop, nesse link aqui eu vou copiar, colar numa nova guia e aí, ó, já tá funcionando. E agora eu consigo testar no meu celular, porque agora eu consigo mandar pro meu celular, eu consigo testar. Existe uma outra forma de testar o projeto, né, que a gente tá rodando localmente no celular também. Isso é assunto para um outro vídeo, mas agora já tá com o nosso site rodando e funcionando perfeitamente, não tem problema nenhum. Quando eu venho aqui no MBDEV, eu venho aqui em Build, Hosting, e aqui eu já tenho as versões que a gente tem, e aqui eu já tenho o histórico das releases, eu consigo dar rollback. Então, cara, Firebase é muito bom para isso, você não vai pagar nada, ele é totalmente gratuito. Então você pode usar bastante, bastante mesmo, pode usar sem medo essa parte do host porque é totalmente gratuito, você não paga um centavo a mais por isso. Então a gente já transformou nosso site em PWA e a gente acabou de fazer o deploy. E agora eu vou usar o meu celular aqui para mostrar para vocês como que a gente vai instalar esse aplicativo, usar ele como um aplicativo no celular. Vou mostrar para vocês como é que funciona. Então eu já tô aqui na URL do meu SaaS Tá, eu vou vir aqui, ó, eu vou mudar aqui o tempo, eu vou adicionar um tempo de 30 minutos aqui. Beleza, atualizei aqui, ó, 30 minutos tá rodando. Então já tô com o site aqui rodando. E é bem simples, eu clico aqui em compartilhar, e aí aqui eu vou descer um pouco e colocar aqui, ó, Add to Home Screen, ou adicionar a tela inicial. Aqui eu consigo customizar o nome, eu consigo colocar, por exemplo, Minha Barbearia, e adicionar. Depois que eu adiciono, ele já tá aqui na tela inicial. Quando eu clico, ele já abre o app. E aí aqui, ó, eu abri o app e ele abre com o app normal, você vai perceber. Só que tem um detalhe, a gente abriu aqui o app logado, porque quando a gente instala o PWA, ele vai instalar, ele vai abrir o app na rota inicial do sistema. A rota inicial do nosso sistema manda para nosso login como se fosse o dashboard, certo? É, para o usuário, a gente teria que fazer uma configuração adicional, a gente teria que mudar e criar um subdomínio pra gente adicionar o PWA como se fosse um subdomínio, só que isso é coisa pra um próximo vídeo, tá bom? A gente vai ficar por aqui mesmo, a gente já tem o nosso PWA, já fizemos o nosso deploy, já tá tudo funcionando. Você achou que era fácil dessa forma? Se você não sabia que era fácil dessa forma, agora você tá sabendo. E aproveita e compartilha esse vídeo pra um amigo também que precisa saber como que é fácil configurar um PWA e fazer um deploy de um app em Angular, beleza? Muito obrigado você que ficou até aqui. Deus abençoe e até a próxima. Valeu!