Criando apps nativos com Ionic e Capacitor

e fala galera que o felipe e seja muito bem-vindo a mais uma aula aqui na faca de óleo na aula de hoje eu vou falar sobre o capacitor de uma maneira aí que você pode envelopa se o aplicativo web em um aplicativo nativo beleza é antes de começar a aula aqui ó vou mostrar que os recadinhos iniciais da hora então vou trocar a tela aqui o grupo no telegram me segue aí no telegram me segue não participa do grupo lá a interagir galera manda sua dúvida que referente essa aula que eu vou te responder lá beleza sua sugestão de conteúdo é muito bem vindo então se você está gostando desse formato de aula e quer ver algum assunto específico aqui deixa nesse link aí a sua sugestão de aula beleza e também me segue no instagram tô postando trechos das aulas lá para poder tirar dúvidas rápidas da galera então você vai curtir também beleza e já deixa seu curtir aí nesse vídeo já compartilha ele com algum amigo seu e bora para aula aqui vamos lá então hoje eu vou falar aqui do capacito vou falar que o que é o capacitor as diferenças dele por córdova beleza o como que você vai preparar seu ambiente de desenvolvimento aí para usar o capacitor como que você usa o capacitor como você entrega ele um projeto já existente ou usa direto com a iônica e beleza e vou mostrar um exemplo aqui de usar na câmera a extrair lusa na câmera do meu notebook aqui se não der conflito com a câmera que tá filmando aqui agora da gravação do rio dinei e vou mostrar usando a câmera do celular também mesmo vamos lá a primeira coisa aqui o quê que é o capacitor o capacitor é uma forma de transformar uma aplicação web em aplicações nativas para android e ios desktop usando um elétron e aplicações web também então atingiu aplicação web ao progressivo web pepe é um aplicativo que ele fica ali instalada no telefone também e você consegue usar recursos do telefone sem ocupar espaço no telefone beleza bom então capacitor ele tem aqui uma série de apis que te permite acessar essas funcionalidades nativas como a câmera já o localização entre outras coisas qual que é a diferença então do capacitor por pro córdova bom basicamente eles são parecidos eles vão rodar também em cima de uma webview beleza só que o córdova ele usa um projeto nativo gerado ali em um time eu vou rodar e o a linha de comando ali para pegar o código fonte que eu gerei e gerar um aplicativo nativo ali para android proeste aí é nesse momento que você vai rodar um comando no terminal que ele vai gerar o apk para android e o ipa ios e você precisa rodar comandos também no emulador no no terminal para poder rodar isso no celular ou no emulador beleza já o capacitor ele considera o código-fonte do projeto nativo ou seja ele cria mesmo um projeto na haste vale usar o android studio how access code prius beleza então você vai usar aqui o próprio android studio ou o próprio max goldi para gerar as versões nativas da aplicação você vai ver aqui que eu vou abrir o o android studio mesmo aqui para trabalhar já o ele também ele executa os vou executar esse projeto tudo direto lá no android studio next cut mesmo o capacitor ele não vai usar o config. xml então se você está acostumado a em projetos com concordo você vai ver que ele tem esse convites ml para a gente coloca as configurações lá já o capacitor não ele usa as configurações nativas mesmo aqui de cada projeto ao android manifest pelo android e o info plist ele para o scud é sobre os plugins no capacitor ele não copia o código fonte do plugin para dentro do projeto para fazer o bild ele usa os plugins como se fossem bibliotecas que ele instala no projeto ali para poder usar então isso faz com que os plugins não sejam compilados e que o projeto seja mais rápido eu tirei todas as informações aqui ó da própria documentação do capacitor o que eu fiz um resumão para você mas tem mais detalhes aqui que eu aconselho você lê dessas diferenças aí e aqui ó aqui tem outras coisas também hora de como que você consegue migrar seu projeto do corda para o capaz tu qual seria uma estratégia né tem muito mais coisa aqui que eu te aconselho a ver também beleza não vou mostrar que uma migração porque demoraria muito tempo mais é só seguir o passo a passo documentação aqui também uma informação muito importante é que você consegue usar alguns plugins do cordel e junto com capacitor ele tem ali uma certa compatibilidade é aqui ó tem uma lista de plugins que não são compatíveis então esses aqui de fato você não vai conseguir usar se você usa aí no seu no seu projeto já mas você usa outros que não estão nessa lista você vai conseguir usar também beleza e como que você vai preparar seu ambiente de desenvolvimento para poder aqui em gerar aplicativos nativos com android ou ios usando com a pasta bom primeiro passo aí você vai precisar do node. js vai instalar a versão aqui ó lts do node.

js beleza com o nome de essa instalado ele vai instalar o npm também então vou abrir o terminar o que eu vou te mostrar quais versões que eu tenho então terminal para cá o desafio você não tá na frente ali não nossa eu digitar que a noite traz o ver npm tá chover e você vai ver que eu tenho a versão do node aqui ó 12. 16 ponto zero ea versão dnpm 6. 14 ponto 4 a minha a minha versão do node ó tá diferente da atual eu não atualizo no ds com frequência é fácil só de vez em quando quando alguma coisa pede então não precisa se preocupar tanto mas tenta manter umas versões mais novas se você tiver a versão 8.

0 aí não vai funcionar o capacho ele funciona se eu não me engano da versão 10 para frente só break chover e eu acho essa parte aqui o dono dias repare independência e não ele funciona da versão 8. 6 para frente então se você tem um nude aí mais velho que isso você precisa atualizar npm também das 5. 6 para frente se você tem uma versão do mpm mais ela é que isso você precisa atualizar beleza depois donald s se você for falar assim ah não eu vou criar só pw ar com o capacitor beleza você não precisa instalar mais nada você vai instalar só no seu projeto você tem que lembrar de instalar o pw a elements que basicamente é você vai instalar esse pacote aqui esse o seu projeto ficou com o que você vai deixa importar esse definir custam ela me disse aqui e fazer essa chamada logo no início a tá vendo que ele te colocou que quer um arquivo index psx ou entender que js dependendo de você tá usando tax cut ou já descritos em um projeto com engula você vai importar ele aqui também lá no arquivo me interessa ó sim faz assim porte aqui e executa esse neto é é dependendo você vai poder colocar esses caras aqui ó lá no seu projeto se você não quiser instalar o pacote que eu falei aqui ó é mas eu aconselho você instalar esse pacote beleza então próprio w lá é isso agora se eu for fazer um desenvolvimento nativo eu vou precisar instalar algumas coisas aqui que é como por exemplo o android studio beleza então se você tá aí querendo gerar um aplicativo para android você vai precisar mas o download aqui no android então eu tô aqui eu tô abrindo a página de download aqui do android studio e você vai clicar aqui ó fazer download ele é bem grandinho tá vendo então pode ser que demore um tempo aí e aqui ó in download options você tem as versões aqui ó para outros sistemas operacionais também como mac linu beleza então faz pausa um vídeo aí se você não tem instalado e faz o download e instala os anjos do android studio beleza e se você tá indo para o mec eu não vou mostrar o do mec aqui porque eu não tenho mac mais você vai precisar instalar o ex cold beleza passou pela mente aquilo podia vende a jato com o mac mas tenta dar uma atualizada aí para você tem uma versão mais nova e é beleza aí depois que você faz o download do android studio a gente precisa configurar a sdk é o capacitor ele funciona em androides que tem ap-21 para cima o que significa aqui ó se você olhar ele tem a ap então a pe-21 é do android 5.

0 lollipop beleza então tudo que você fizer com capacitor só vai funcionar para esse android para cima porque o time baiano que identificou aí que esse é um dos androids mais usados beleza e falou que é dele para cima e resolveram fazer essa compatibilidade aí agora a gente vai precisar então instalar essa aí instalar algumas coisas aqui na bs de quatro vou abrir meu android studio aqui para te mostrar eu vou dar só um pause porque uma dor atitude pode demorar um pouquinho quebre beleza eu abrir aqui no android studio beleza essa carinha inicial dele aqui sem nenhum projeto aberto então eu vou vir então em configure se eu quiser criar um emulador é preciso ir nessa parte aqui mas primeiro vamos aqui no sdk manager se ele abrir aqui certeza é aqui ó eu vou clicar em show pack de deus beleza e você vai ver e eu tô aqui ó eu não instalei o android 5 que você vê o meu android 5 aqui ó não tem nada marcado eu tenho instalado aqui do android 9 beleza ó o sdk platform e do android 10 você pode escolher e instalar a versão mais nova ou instalar a versão mais antiga lá que a do android 5 para frente que eles recomendam beleza você vai ver que eu não marquei tudo porque eu não trabalho com emulador aqui nesse notebook ele é muito pesado no emulador muito pesado eu não te busco não aguenta muito então eu prefiro trabalhar direto no celular que eu vou te mostrar daqui a pouco como que você consegue rodar esse direto no celular ah então não precisa instalar esses caras aqui se você quer trabalhar com lado você precisa instalar esses caras aqui também de menos isso aqui ó porque isso aqui são imagens de emulador beleza aí você precisa ver qual que vai ser adaptar melhor ao seu sistema operacional aí e passa todos os cremes lá dor depois de alerta que você não for usar para não ficar ocupando muito espaço beleza agora eu vou aqui ó em sdk-tools beleza aqui ó a gente precisa marcar vou dar um chopp aqui de três também instalar o android sdk build-tools não instalei as últimas ao porque essas rc aqui costuma ser feliz que eu te dei ou seja elas não provavelmente não estão estão estáveis assim então eu estava a última estável posso até remover essa daqui mas eu tô com a última versão estável aqui que a 29. 0 ponto 3 e não precisa instalar nada disso por enquanto só vou se você for trabalhar com emulador instala aqui o android no leitor beleza pois eu instalei aqui o sdk platform-tools e o sdk tools beleza são coisas do android que vai precisar ir às vezes para rodar uma linha de comando alguma coisa assim e para você espetar o seu celular no notebook você precisa às vezes tem instalado o google sb driver aqui também então já marca aí já instala dá um ok se vai demorar um pouco também os pacotes são grandes é aceita as licenças e faz esse download aí pausa o vídeo até você terminar essa parte toda beleza depois que eu terminar essa parte aqui a gente precisa mexer nas variáveis de ambiente então eu vou abrir aqui ó no iniciar tô digitando variáveis de ambiente e você não tá vendo porque não aparece aí mas eu tô aqui em propriedade de sistema e vou vir aqui em variáveis de ambiente beleza eu só ver um negócio aqui e aqui na documentação do capacitor não tem mais eu abrir um documento aqui ó que é sobre variáveis de ambiente a gente vai precisar acertar essa android sdk ruth aqui antigamente era android-home mas ela tá android-home tá obsoleto beleza então se você já tem um andróide rommie aí por exemplo você vai substituir pelo android sdk ruth acho que e não tem mais nenhuma outra aqui mas eu vou te mostrar o que eu tenho no meu ambiente o que funciona beleza então aqui ó tô em variáveis de ambiente beleza tô aqui ó em variáveis do sistema eu tenho o android sdk ruth apontando para minha para o caminho da minha sdk como que eu sei o caminho do sdk can configure explicar manager esse é o caminho beleza e não pega os caminhos ali e adiciono ele aqui como variável de ambiente beleza depois eu vou vir aqui no peste e vou adicionar aqui ó é o android sdk ruth barra turbar binho o platform-tools simulator evil jitsu esse aqui é mais que você for usar emulador eu não vou usar mas eu deixei aqui para você ver o que você precisa fazer beleza os mais importantes são esses caras aqui ó porque eles são coisas que vão rodar bild e você vai conseguir rodar linhas de comando para você ter certeza que é você conseguiu instalar mesmo preciso conseguir rodar esse comando aqui ó a db de várias e esse comando ele vai estar todos os devices que estão espetados na máquina então se você tiver um emulador rodando ele vai aparecer aqui se o celular tiver espetado aí viu usb ele vai aparecer aqui o meu ainda não apareceu porque eu não tenho nada espetado aqui em mas eu consegui rodar o comando se der algum erro aqui falando que vai beber não é um comando conhecido é porque tem que se arrumar aqui ó as variáveis de ambiente beleza então dependendo da máquina isso pode ter problema de permissão pode não funcionar direito às vezes tem que reiniciar então dá uma pesquisada no google para resolver seu problema aí comigo aqui funcionou de primeira não tinha problema beleza vou cancelar aqui eu não mudei nada eu posso fechar aqui também beleza para o android studio é isso daí ele falou ele configurou lá o sdk configurou as variáveis de ambiente tá pronto tá funcionando se você for doar oeste aqui ó tá documentação também é o mesmo link que eu deixei aqui beleza só você dar uma lida ali é o que que você vai precisar instalar também tá falando aqui do discutir ok beleza só dá uma olhada no documentação aí também é sobre aqui ó desktop electon e você só vai precisar adicionar em um projeto electo o cavaco um projeto capacitor você vai adicionar o wellington para você preparar ele para gerar um executável para rodar no escritório beleza tá pronto essa parte aqui também eu mostrei tudo que você precisa aí do preparar o ambiente para poder rodar projetos com castro agora vamos lá vamos começar aqui a rodar o capacitor para você ver a coisa acontecendo aqui ó tem logo no começo aqui o gatinho starter vai te falar o quê que você vai fazer para adicionar o capacitor um projeto e é você vai precisar instalar as dependências a quinta já tenho projeto aqui ó que eu iniciei eu não instalei nada dele que ainda é um frente aqui o nick mas eu não integrei ele ainda com capacito beleza então lá a hora que eu dei vai ônibus tarde favor vem aqui vou fingir que eu vou criar um projeto aqui então aí onix touch e ele vai me perguntar qual que é o fêmeo colocar aqui engula colocar teste vou colocar aqui por exemplo blank e aí ele vai me perguntar você deseja integrar o seu projeto é o capacitor eu coloquei não ele não integrar mas o exemplo que eu vou te mostrar aqui daqui a pouco da câmera eu deixei simply entregar direto beleza não vou continuar rodando o comando que o projeto já tá criado aqui aqui na documentação tem um pequeno probleminha que é o seguinte ele tá mandando instalar as duas dependências é dentro do da parte de dependências mesma então aqui independências da que a gente ponto diz aqui que fica as dependências ele tá mandando instalar as duas dependências ele sendo que na verdade eu preciso instalar o capacitor core aqui no packages do independência e o capacitor cia lai eu posso instalar ele aqui ó como dependente de desenvolvimento eu não preciso dele no projeto beleza eu vou abrir o terminal aqui mas eu para economizar tempo eu vou dar as duas aqui mesmo você pode rodar as duas aí ó e vou esperar ele terminar de instalar aqui elisa estou rodando o comando conceive para ele poder adicionar aqui ó nas dependências se eu não rodar esse comando conselho e não vai adicionar o capacitor aqui no pack de ponto disso beleza vou deixar de terminar de rodar aí e volto quando eu terminar e o beleza terminou de rodar aqui então ele adicionou aqui ó o capacitor se ela vai e o capacitor corn as versões 2. 0.

1 quer versão mais nova no momento da gravação desse vídeo aqui beleza depois disso próximo passo eu preciso dar esse npx cap it o npx é uma funcionalidade do mpm que me força a rodar o comando das dependências que estão nativas então eu posso ter dependências instaladas de maneira global na minha máquina que eu uso o traço g beleza então por exemplo a ione que ele tá instalado de maneira global na minha máquina então eu consigo rodar os comandos direto pelo terminal aqui agora vamos supor que eu tivesse lá ionic instalado somente na pasta que eu tô nesse projeto aqui então tá não confunde uai o único local com a ionic global e o rosa dos comandos com npx na frente é justamente o que ele tá falando para o fazer aqui ó vou dar o comando me diz porque vai que você instalou com a parte de maneira global ali de maneira errada né e tá pedindo para eu dar um limite então que eu tô te mostrando aqui até agora é aqui você pode usar o capacitor com qualquer projeto web beleza pode ser um projeto ativo engula projeto nativo ele é que você consegue usar não vou dar esse no. px cap rinite esse comando aqui ele vai criar um arquivo aqui no meu projeto que é o arquivo de configuração do capacitor digite o comando errado o limite de dente e ele vai criar o arquivo de configuração do capacitor ele aí ele tá me pedindo ali ó qual que é o nome do rap eu vou deixar ali exemplos em capaz tu e o pec jardim então isso aqui vai ser o auge do seu do seu da sua aplicação tanto para android quanto para ios esse aí de necessário beleza é meio que obrigatório então a gente coloca aqui ó com ponto aí você pode colocar seu nome de desenvolvedor eu vou colocar aqui fábrica de código fábrica dele código o ponto o nome do ep então colocar ele a exemplo um exemplo sem capacito nesse site geralmente a gente usa s&p a integrá-la com facebook por exemplo para fazer login nativo ele vai te perguntar qual que é o identificador do beleza eu vou usar o npn mesmo e beleza tá integrado aqui já tá aqui o meu arquivo de configuração posso mudar as configurações aqui depois o nome do aplicativo ele pode ser alice é com separado beleza assim sem tá tudo junto que é o nome de que de fato que vai aparecer lá no seu celular depois que instalar é uma um fato importante é que o capacitor ele copia tudo que tá dentro da pasta do bild da aplicação para dentro do android studio do hex code então ele tá perguntando aqui ó qual que é o web é o daione aqui essa pasta www mesmo mas dependendo do projeto que você tá aí pode ser que seja outra coisa então você precisa vir aqui e trocar para o que é beleza agora ele está mandando eu já rodar os comandos aqui para adicionar o android o écio o elétron se eu quiser o electrão também eu vou mandar esse comando aqui você vai ver que vai dar um erro a sopa vou colocar aqui no terminal ou ele deu ir e ele deu erro e a dica que eu quero te dar aqui ler a mensagem de erro que tá no terminal isso aqui não é só balela não então aqui ó ele tá falando de um erro que eu não conseguiu achar o diretório web com ele copiar os arquivos então tá pedindo aqui ó pro criar um diretório please create it e cria um arquivo index html lá eu não preciso fazer isso no caso do iphone aqui vou rodar um comando para resolver esse problema e aqui ó ele deixou até o link da documentação para eu olhar então antes de você tentar ficar doido aí porque deu um erro preocupa olha o que tá escrito no terminal pega a mensagem de erro e joga no google lá vai ter a resposta do seu problema também beleza mas no caso aqui do projeto é iônico ou outro projeto você tá aí você precisa no caso aqui você precisa só rodar o comando debuild para ele quem sabe então você vai ver que aqui ó não tenho a pasta www mas eu vou vir aqui ó vou apagar o terminal não vou rodar aqui ó ionic build 1 e ele vai buildar me aplicação aqui e consequentemente vai gerar passa ww ele para mim beleza nesse comando aquele pode rodar um pouquinho então vou dar um pausa aqui e volto quando terminar e a beleza como a terminar de rodar aqui ele colocou coisas infinitas aqui no terminal e aí ele criou a minha pasta www então agora eu consigo vir aqui e rodar o comando para adicionar o android na minha aplicação aqui ó então eu to rodando ele o mp x cap pad android beleza então ele vai criar o projeto aqui em instalar você pendências também do projeto android beleza o comando acabou de rodar aqui ó você vai ver que ele fez um monte de coisa está longe da independência adicionou um projeto nativa então ele criou para já alternativa android aqui para mim beleza copiou os arquivos e agora já consigo fazer abrir lá o projeto no android studio como que eu faço isso aqui não colocou o comando né ó e aqui na documentação também ele não colocou e mais cadê o próximo passo aqui é e aqui ó dela pior flor eu vou dar o npx capricop beleza eu vou copiar os arquivos lá para dentro do projeto e aqui a pouco você vai ver o passo a passo aplicação real a entender talvez melhor e copiou para lá e agora eu posso dar o mp x cap aqui se você tiver com adicionado ao ios e android eu te aconselho a colocar a plataforma na frente dos comandos tanto de cop quanto de outro então eu colocar que horas mpx cape-open android ele vai abrir o meu android studio agora com o projeto lá dentro e é lá que a gente vai rodar esse projeto beleza então ele fechou o que eu tava tá abrindo aqui na outra tela ou trazer para cá então repara aqui embaixo sempre para você ver tudo que o projeto está fazendo então ele tá esperando que nos arquivos primeira vez que você está abrindo e pode fazer o download do gravador aqui que é o que faz o build do android mesmo beleza então fique pode demorar alguns minutos da primeira vez só vou conseguir usar o projeto aqui ó depois que ele habilitar o comando de play aqui olha que é o seu rodar e já beleza então tá vendo ó tá rodando bild aqui ó eu consigo ver essas coisas acontecendo aqui também ó na minha bild eu vou aguardar determinar isso daí o que pode demorar aqui alguns minutos uma beleza ele terminou aqui mas você tá vendo aqui tem o nó de vai se então agora a gente vai para o momento da aula aqui é como rodar essa aplicação no celular então sempre que você tá trabalhando ali desenvolvendo seu projeto aqui não é roni crei uma tela nova qual que é o passo a ivanilde escreveu da o projeto de novo a mpx capricop para android e ios para você copiar os arquivos que estão aqui na pasta ww. par para dentro do projeto vai dar uma npx cape-open é já abriu aqui e agora a gente vai rodar que usa a ideia é nativo para rodar o projeto então vamos lá primeiro passo eu vou espetar o celular aqui na usb do meu computador oi e aí é o seguinte antes de você espetar o celular você precisa habilitar as configurações de desenvolvedor vou te mostrar como que você faz isso aqui o meu já tá deitado não consigo te mostrar do zero mas vou te mostrar aqui como é que você vai fazer eu vou dar um pause aqui eu abrir o celular na tela aqui para você ver uma beleza esse aqui já é meu celular é o que você vai precisar fazer antes de espetar aqui ó é vim configurações beleza aí você vai vir aqui sobre o telefone e vai sair clicando aqui um monte de vez o número da versão aqui se você não tiver habilitada para o chão aí ele vai gritar aqui para mim já a sua desenvolvedor ele tá falando ela não é necessário você já é um desenvolvedor beleza então posso voltar aí vai aparecer essa opção para mim aqui ó programador vou clicar nela vou ativar e eu preciso marcar aqui para ter opção depuração usb beleza depois que eu marcar isso aí e é perto o celular no usb do computador antes disso você não esperta não pode ser que não reconhece beleza então um pouquinho aqui beleza tá pronta aqui ó e aí se você ver aqui ó já apareceu o meu telefone agora o motorola moto g se você tiver emulador ele vai aparecer aqui também beleza e aí lembra que eu falei do comando a db lá então aqui no terminal seu roda aquela bebê devices meu telefone tá aqui agora apareceu aqui esse aí de muito louco esse dia meu telefone beleza agora para rodar como que eu faço é só dar um play aqui cara muito fácil ele vai rodar o bild de novo e vai instalar o aplicar lá no meu telefone e vai abrir ele aqui então você tá ele acabar de rodar isso aqui e abrindo o telefone para eu te mostrar a fumaça importante aqui que a primeira vez isso pode demorar também beleza ele acabou de gerar o apk aqui agora então ele deve começar abrir aqui no meu celular lá é bom acompanhar o que está sendo feito aqui também ó mas sobra no meu celular aqui agora você quer splash screen nativo e tá aí ó meu aplicativo consigo navegar com ele aqui ó normalmente no meu celular beleza e aí vou te mostrar uma parada aqui agora que é o live-reload o que que é isso live-reload é para você enquanto você trabalha você conseguir ver as modificações direto no celular aqui sem ter que ficar copiando arquivos fazendo esse fluxo que eu te mostrei bild pop e roda na ideia beleza alguns momentos vai ser necessário então se você tiver com as reload aberto instalar um plugin ovo do capacitor você vai precisar fazer o processo aqui de aline qibuild pop e hum de novo beleza e ele poder reconhecer as coisas novas mas se você tiver mexendo no visual da tela ali fazendo o plugin funcionar aí já não precisa mais então eu vou parar aqui eu vou fechar o web beleza posso deixar ele aqui dá um stop bom vamos lá para o live-reload é eu vou rodar esse comando aqui ó e é o seguinte aqui no terminal então vou limpar que eu terminal informação importante você precisa estar conectado com wi-fi aí na mesma rede que tá o computador beleza senão não vai abrir porque ele vai enxergar como se fosse projeto web e a outra coisa que você precisa rodar o comando com esse externo ou na frente aqui ó ele poder invés de abrir o projeto colocar roxa abril o projeto com o ip então eu vou rodar aqui que você vai ver isso e eu vou te explicando a hayonik capacitor run android traço ld live-reload e o externo pela abrir comer p ao invés de local rosto beleza você consegue rodar os comandos todos do capacitor também esses comandos aqui ó de mpx capricop o o pen tudo com a ione você consegue fazer a onica pasto é edge android aqui o capacitor coop android beleza também funciona então vou rodar o comando aqui ele vai gerar um mild ali e vai começar a estar tá um servidor local na minha máquina apontando para o meu ip ao invés de local rosto para dizer que que o rosto tá 000 beleza é vou esperar esse comando rodar aqui e volto de novo é para te mostrar as coisas que aconteceram ah beleza ele terminou de rodar aqui e eu vou te mostrar que tudo que ele fez não vou aumentar o terminal aqui a primeira coisa que ele fez foi rodar um mild aqui ó então tudo aqui a coisa debuild aí ele iniciou o servidor e aí o servidor está funcionando aqui ó no ip do meu computador para você vir aqui agora e rodar esse aqui o aplicativo abrir aqui a beleza ó tá aqui o aplicativo quem está criando é a outra coisa que ele fez foi rodar o comando de copiar lá para o android beleza então ele copiou os arquivos da pasta w para lá mandou abrir a ideia de novo open android mas ela já tava aberta aqui então ele só recarregou os arquivos novos beleza e agora o que eu preciso fazer aqui na ideia é estar beleza simples assim vou esperar ele rodar aqui de novo ele apareceu no meu celular aparecendo aqui ó e aí você vai ver o live-reload acontecendo na prática beleza e aí beleza ele terminou aqui ó ele tá tentando carregar os arquivos lá do servidor e carregou então tá aí o meu aplicativo então para que que serve isso se eu quiser mudar o título carol eu vou vir aqui em up poder napoli não cadê vai para o componente ou diminuir aqui de novo aqui no meio e tá escrito em box cadê as páginas e ele tá carregando aqui hoje nós vamos dar o título lá que tá inbox vou colocar aqui ó meu nome por exemplo felipe vou salvar porque eu salvar aqui ó ele vai compilar ele de novo e vai mudar o título aqui daqui a pouquinho e aí acabou de compilar para recarregar no aplicativo aqui e não mudou deixa eu ver no erp se ele mudou o clima está recarregando e aqui homem não mudou para felipe eu mandei foi o título do menu tenho que ele mudou também ó beleza e aí e ele veio para cá é aqui que ele exibiu título eu acho que eu não mandei o titular mas eu consigo mudar aqui o componente também ó qualquer coisa que eu mudar eu posso adicionar aqui ó o link lá para fábrica de corte então vou colocar aqui ó a o hf http dois pontos barra barra w fabricar glicose.