E aí animado pra nossa aula de número três aqui do nosso minicurso de criação de aplicativos usando programação web eu tenho certeza que você tá animado e eu também vai ser muito legal essa nossa aula você vai aprender muita coisa mesmo então eu vou mostrar para vocês aqui o que que a gente vai est vendo nessa aula eu deixei separado aqui um checklist só pra gente saber tudo que a gente vai precisar fazer né para ficar tudo mais Organizadinho então nessa aula nós vamos aprender como criar um novo projeto do córdova conhecendo a estrutura de
de pastas e arquivos nós vamos adicionar a plataforma android Vamos aprender como rodar o aplicativo no nosso celular isso aqui é muito legal porque quando você vê a primeira vez ali um aplicativo rodando no seu celular é uma sensação única né de ver que realmente dá para criar uma coisa que vai rodar dentro do celular é muito legal aí a gente vai ver também a Apresentação visual do projeto vou mostrar para vocês ali o layout como que vai ficar o nosso projeto final aqui desse minicurso nós vamos ter uma visão Geral do Framework Seven que
é o Framework que eu eu gosto de utilizar para criar os aplicativos porque ele tem muitos recursos bem interessantes componentes nativos do Android do iOS Prontinho sistema de roteamento muito legal a gente já vai ver isso daqui a pouquinho como instalar um template Starter pra gente já ter tudo mais facilitado já um template Zinho base nós vamos ver como fazer o desenvolvimento também no navegador para ter tudo mais rápido usando Live server pra gente não ter que ficar todo o tempo compilando no nosso celular o projeto né e por último nós vamos ver já sobre
manipulação de rotas criar novas páginas para que a gente já tenha todo o conhecimento necessário para na próxima aula aula de número quatro a gente mandar bala e Fazer o projeto final e realmente ter o nosso aplicativo pronto Beleza então vamos nessa vamos começar criando um novo projeto do córdova então o que que você vai fazer você vai abrir aí o teu vs code Abre o teu vs code E aí você vai dar aqui um control aspas simples no seu teclado cont control aspas simples vai abrir aqui o terminal do US code ou você vem
aqui em cima em ver terminal E aí ele vai aparecer para você aqui o terminal esse terminal aqui embaixo Pessoal nada mais é do que aquele CMD que a gente estava usando nas outras aulas só que integrado já no vs code então Windows ele tem um terminal dele próprio certo o promp de comando aqui essa telinha preta que a gente usou nas aulas anteriores o vscode já vem com isso daqui já embutido dentro dele então a gente não precisa abrir um programa sep entendeu então você pode usar o terminal direto aqui dentro do vest code
que fica tudo mais prático pra gente Então começar a criar o nosso projeto a primeira coisa que você sempre tem que fazer é acessar a pasta onde você faz os seus aplicativos como você acessa essa pasta Você vai dar o seguinte comando CD Espaço E aí o caminho para essa pasta que você tem no caso da gente geralmente vai ser assim ó C2 P bar apps você pode ir lá no seu explor de arquivos entrar lá no C2 pontos e aí você tem uma pasta Apps onde você faz seus projetos senão você pode criar aqui
Clica com o botão Direito novo pasta cria uma pasta chamada apps certo a gente vai acessar ela então diretamente aqui pelo vs code dando esse comando CD C2 bar apps essa é a primeira coisa que você precisa fazer Dá um enter e aqui já vai mostrar que você tá dentro aqui do diretório apps dentro do seu computador certo beleza tranquilo agora uma vez vocês estando dentro da sua pasta apps que é a pasta onde você vai criar seus projetos a gente vai dar o comando para criar um Novo projeto o comando do córdova pra gente
fazer um novo projeto que é o seguinte cova Create Então esse é o nome cordova Create cordova eu quero que você crie né Pensa nisso tá dando comando pro cordova para ele criar alguma coisa então cordova Create aí o primeiro parâmetro que a gente vai passar aqui vai ser o nome da pasta do projeto da pasta do aplicativo então o nome que vai ser do nosso projeto que a gente vai fazer aqui no curso vai ser Green Tech dessa forma aqui ó Green Tech certo aqui quando você vai criar pastas pessoal dando comando cordova Create
tem algumas regras você não pode fazer palavras compostas separadas por espaço tudo que for palavras compostas você precisa fazer usando o traço então por exemplo vou fazer assim uma traço pasta traço qualquer Então se o nome da minha pasta do projeto fosse três palavras uma pasta qualquer eu tenho que ligar ela sempre usando um tracinho dessa forma Aqui você não pode dar espaços tem que ser tudo junto ou então você pode fazer tudo escrito junto assim né uma pasta qualquer mas eu acho que fica melhor usando tracinho para separar outra regra importante aqui do nome
dos do projeto da pasta do projeto é que não pode pode ter caracteres especiais o que que são caracteres especiais assento cedilha ponto de exclamação qualquer tipo de sinal né que você queira usar então por exemplo assim se você quisesse fazer uma Um projeto chamado árvore do coração aí você faria assim árvore traço do traço coração isso aqui não pode fazer por qu ainda que a gente tá usando o traço para separar as palavras excelente é isso que tem que fazer mesmo mas nós estamos usando caracteres especiais tá vendo aqui assento cedilha então se você
fosse fazer um projeto com esse nome árvore do coração bizarro né você faria assim ó árvore sem acento do traço coracal assim ó dessa forma entendeu isso é uma regra Precisa ser feito dessa forma então sem assento e sem caracteres especiais palavras compostas sempre usando traço Ok beleza mas vamos fazer o nosso lá que vai ser o Green Tech assim ó tudo junto Green Tech vai ser o nome da pasta do nosso projeto então Córdoba Create o nome da pasta do projeto agora o próximo item é um identificador o que que é Esse identificador todo
aplicativo Android ele precisa ter como se fosse assim um nome um ID que identifica ele na loja Então só para mostrar para vocês eu deixei já aqui aberto dentro da loja do Google Play um joguinho chamado Hungry Shark talvez você conhece né um joguinho de tubarão lá se você olhar aqui em cima na url que é o que interessa para nós você vai ver que aqui tá escrito vai ter assim ó id e aqui você vai ter um ID ó esse ID ele é sempre único diz respeito a esse aplicativo aqui a esse jogo com.f
go. hangl Shark Evolution Beleza então segue um padrão esse ID sempre de site Ao contrário se fosse um site mesmo seria Hungry Shark Evolution fg.com por exemplo então aqui tá fazendo o contrário não significa que você precisa ter um site para você colocar um identificador é só um nome ali que você precisa dar para Google Play usando esse padrão para que ele possa ser colocado na loja e seja sempre único nunca pode repetir eu não teria como criar um aplicativo usando esse mesmo ID aqui porque esse ID Já tá sendo usado por esse aplicativo aqui
certo na hora que você vai tá construindo nem sempre você sabe se esse ID tá disponível ou não mas você vai descobrir na hora que você for publicar e se já tiver você vai ter que trocar o id do seu aplicativo certo então Ó você vê que esse aqui tem esse esse ID se eu for em outro aqui vamos pegar qualquer outro jogo aqui esse aqui bang bang sei lá o quê Ah lá em cima ó com. mobile. Legends tá vendo Então esse é o nome do Id desse jogo então cada aplicativo precisa ter um
ID é isso que a gente tá explicando aqui então voltando lá pro nosso comando a gente já deu um Cordoba Create Green Tech agora a gente vai ter que passar qual que é esse ID que a gente vai querer no nosso projeto eu então usando um padrão de site ao contrário br.com curso. greench eu vou fazer assim geralmente o pessoal gosta de colocar a o esse padrão o nome da empresa por Exemplo ou o que você tá fazendo o segmento e depois o nome do aplicativo propriamente dito não tem uma regra específica tá pessoal mas
você vai passar um ID assim completo então cova Create aqui primeiro parâmetro nome do projeto segundo parâmetro o ID que vai identificar o seu aplicativo na loja e por último agora vai ser o nome do aplicativo propriamente dito e o nome do nosso aplicativo vai ser Green Tech dessa forma né com o g maiúsculo e o t Maiúsculo aqui no nome da pasta a gente faz tudo sempre minúsculo aqui no nome do aplicativo é exatamente como ele vai aparecer no celular então eu fiz o Green Tech com g maiúsculo e o t maiúsculo aqui também
tem uma regra se você precisar fazer palavras compostas você Você vai precisar usar as aspas duplas então por exemplo vamos vamos supor que eu quisesse fazer Green Tech com a palavra Green e a palavra teex separado eu teria que fazer aspas duplas Green Tech e fechar aspas duplas dessa forma porque daí eu digo para minim a linha de comando que o que tá dentro dessa aspas duplas é como se fosse o nome do meu aplicativo uma palavra só se eu não usar essas as aspas duplas ele vai entender que Green é um comando e Tech
é outro comando entendeu Aí não vai dar certo então aqui a gente não precisa usar os traços nem nada como a gente fez lá se a gente fizer entre aspas duplas aí você pode usar caracteres especiais assento Tudo normal nessa parte do nome você pode fazer desde que esteja dentro de aspas duplas certo como eu vou ter um aplicativo com um nome que não tem nenhum acento caractere especial e é uma palavra só ó Green Tech dessa forma aqui eu posso colocar ela sem aspas duplas que vai funcionar numa boa Ok então esse aqui é
o que é o comandinho de criação de um novo projeto aqui a gente tá fazendo isso demorado porque a gente tá explicando o que que é cada coisa mas na Hora de você criar um novo projeto isso é extremamente rápido é cordova Create o nome da pasta do projeto o nome do identificador e o nome do aplicativo certo feito isso você vai dar um enter E aí ele vai dizer que o cordova criou um novo projeto criando um novo projeto do Cova certo quando ele volta aqui pra pasta mostrando n C2 peps que onde a
pasta onde a gente tá quer dizer que ele já foi criado então a gente precisa acessar essa pasta que a gente criou que É a pasta greench Então a gente vai acessar dando um CD greench pra gente poder entrar nessa Nossa pasta e aí olha só a gente já está dentro da nossa pasta Green Tech que legal então a gente já tá dentro da pasta do projeto agora vamos abrir esse projeto aqui no nosso editor de códigos para que a gente possa ver A Hierarquia de pastas e você vai fazer isso da seguinte forma você
vai dar o comando code espaço Men r espaço ponto code espaço menos R Men r espaço Ponto e Dá um enter Esse comando vai fazer com que abra esse projeto aqui no vs code olha só já vamos estar dentro da pasta greench com todos os arquivos que a gente tem lá dentro legal muito interessante Então a gente pode voltar lá no nosso checklist lá do Google Keep e a gente já vai ter marcado aqui ó criar um novo projeto beleza concluída essa etapa a gente também agora vai precisar conhecer estrutura de pastas e arquivos Então
vamos ver o que que vem Dentro de um projeto do córdova certo então aqui a primeira coisa que vem é uma pasta chamada www vem aí um arquivo Git Ignore um arquivo config.xml e um packed Jon certo dentro dessa pasta www olha só o que tem aqui dentro uma estrutura de Frontin de frontend básica um HTML e algumas pastas uma pasta CSS com arquivo CSS dentro uma pasta de imagem com o logo do cordova aqui dentro e uma pasta JavaScript com arquivo JavaScript aqui dentro só isso Então repare que o que vai formar aqui para
nós a parte visual que vai ser mostrado na tela do nosso aplicativo é uma estrutura igual a gente tem em desenvolvimento web comum de sites HTML CSS e JavaScript só isso dentro nesse nosso arquivo HTML que vem padrão né o Inicial ali quando você inicia um novo projeto do cordova ele vai vir aqui tipo um hello world né um aplicativo base Inicial que tem só dentro aqui escrito a paste cordova conectando ao dispositivo Tal as conexões do cordova e também com o nosso arquivo JavaScript aqui vem com esses comentários que a gente até pode apagar
só para aqui ficar mais curtinho né Ele vem com algumas coisas aqui mas a gente depois nem vai tá usando esse aqui base inicial a gente vai est usando um um outro template Starter mas só pra a gente ver o que que vem dentro dele então arquivo index HTML comum certo aí a gente tem aqui um arquivo Git Ignore que é para o caso a gente for subir isso Aqui pro github depois para ele não mandar alguns ah algumas passas que vão ser geradas depois node modeles plugin platforms que são usados só pelo córdova mesmo
né então isso aqui é é para isso e a gente tem aqui um arquivo chamado config.xml que é um arquivo também muito importante aqui dentro de projetos do cordova esse config.xml ele vai orquestrar ou configurar algumas questões fundamentais do nosso aplicativo por exemplo aqui ele vai Mostrar para nós qual é o ID do nosso app aqui também vai mostrar qual que é a versão do aplicativo que sempre começa na 1.0 depois mais paraa frente se a gente for fazendo atualizações para colocar por exemplo lá na loja da Google Play a gente pode ir trocando isso
aqui para outras versões 1.1 1.2 1.1.2 2.1 2.0 sabe você pode ir fazendo isso aqui nessa parte de versionamento para você ter um certo controle aqui a gente tem algumas tags a tag name é o nome do seu Aplicativo a tag description é uma pequena descrição do seu app Aqui tá dizendo que é um aplicativo simples do cordova então você pode colocar assim app feito no minicurso e aqui você pode colocar as informações do autor pode colocar o seu e-mail um site aí de referência você pode colocar o seu nome aqui né por exemplo Dimitri
Teixeira aqui você pode colocar seu e-mail @provides-annotated depois quando você vai colocar você vai Usar recursos da própria loja para dar essa descrição e tal então isso aqui não é tão importante daqui para baixo né de conteúdo para baixo são alguns recursos do córdova por exemplo o sistema de arquivos que ele é compatível Qual que é o conteúdo da página inicial e tal isso aqui a gente não precisa mexer tá E conforme a gente adiciona plugins conforme a gente adiciona algumas coisas aqui no córdova esse config P XML ele vai como que crescendo né então
depois Com o tempo ele vai tendo mais coisas aqui dentro Mas é só para saber o que você tem aqui dentro do da pasta que vem inicial do Cova né o pack de json ele só vai mostrar para vocês aqui algumas coisas a respeito do aplicativo né qual ecossistema você tá usando que é do cordova e tal versão aquelas coisas todas que são o padrão do pack pack de json então isso aqui é a estrutura de pastas e arquivos que vem com projeto padrão basicamente só isso bem simples Mesmo certo então a gente pode marcar
nosso nosso checklist aqui que conhecemos a estrutura de pastas e arquivos beleza Tá concluída essa etapa agora a gente precisa adicionar no nosso projeto a plataforma android para que a gente possa criar o aplicativo para Android e rodar isso no nosso eh celular então aqui a gente tem a estrutura como a gente viu no formato de sistema web né usando programação web a gente vai precisar converter o compilar fazer com Que isso ISS se transforme no aplicativo E para isso a gente precisa adicionar nosso projeto do cordova a plataforma alvo que é o Android como
que a gente faz isso você vai dar aí um control aspas simples para abrir o terminal novamente ou aqui em cima em ver terminal e a gente vai dar o comandinho para adicionar a plataforma android no nosso projeto Então você vai fazer um cordova platform add Android Esse é o comando cordova platform add Android Comandinho para adicionar a plataforma android então então só prestar atenção o platform né em inglês add e tal Cuidado para não aportuguesar na hora de dar o comando né às vezes alguns alunos fala professor não tá rodando porque ele coloca aqui
plataforma assim ó em português né ou escreve platform assim platform né tá bugando tudo aqui escrevendo tudo errado mas entendeu né platform add Android OK aí você dá um enter e ele vai adicionar a Plataforma android no projeto conforme ele adicionar a plataforma android aqui no nosso projeto você vai reparar que vão ser adicionados nas estruturas de pastas aqui na lateral do nosso projeto mais algumas coisas né que não tinha antes então ele coloca aqui uma pasta node modules onde vai ter as dependências aqui do cordova para gerar a nossa o nosso aplicativo uma pasta
chamada platforms que é onde vai ter alguns recursos aqui do Android Funcionamento dele para poder fazer a compilação e beleza é isso ele vai fazer isso de forma automática essas pastas a gente normalmente não mexe nelas tá pessoal o que a gente vai precisar trabalhar o que a gente vai precisar fazer de mudanças no nosso aplicativo vai ser sempre dentro da www Essa é a pasta mais importante essas outras aqui são mais pastas de configuração mas para você saber que quando você adiciona a plataforma android ele vai colocar isso Aqui no teu projeto também ok
então Mais uma etapa concluída adicionamos a plataforma android no nosso projeto agora vamos aprender como rodar esse projeto no nosso celular como que a gente faz para que esse aplicativo do cordova possa funcionar dentro do nosso celular então para fazer isso o que que você vai fazer primeira coisa de todas pessoal Você vai precisar ter aí o teu celular e também um cabo USB vai precisar conectar o seu celular com o Cabo USB no seu computador então eu vou conectar o meu aqui e aí você também pode conectar o seu aí no seu computador tá
deixa eu conectar aqui beleza deu já o barulhinho aqui de conectado E aí uma vez conectado aqui dentro do seu eh conectado ali no seu celular no computador você vai ter que fazer uma configuração no seu celular para habilitar o sistema de desenvolvedor opções de desenvolvedor que vai eh dar a opção para você fazer Uma depuração usb ou seja o seu celular conseguir se comunicar aqui com o computador para que você através da linha de comando no computador possa gerar o aplicativo e ter a liberação para instalar ele dentro do celular e rodar dentro do
celular para que você possa ir vendo o que você tá programando aqui diretamente no celular como você faz isso eu vou compartilhar aqui a a tela do meu celular para vocês para vocês ver aonde vocês vão para poder Ativar esse modo desenvolvedor beleza pessoal então tô com o meu celular aqui espelhado né E você vai ter que entrar lá nas configurações do Android para cada celular cada Ah modelo do Android pode mudar um pouquinho isso aqui então vocês T que ter aquele discernimento de procurar dentro do seu celular onde vão estar essas coisas que eu
vou mostrar pode ser que esteja num lugar um pouquinho diferente do seu porque depende de vários fatores por exemplo eu Tô num celular aqui Motorola talvez se seja Samsung ou de outra marca então às vezes o layout é um pouquinho diferente também tô no Android 133 Às vezes você tá no Android 12 ou numa outra versão E aí é um pouco diferente então você vai ter que ter o discernimento para encontrar as coisas por aí mas é basicamente sempre o mesmo nome ou bem parecido com o que eu vou estar mostrando certo então você vai
puxar lá em cima a tua barrinha de notificação né E vai encontrar lá uma engrenagenzinha ou alguma coisa assim para você entrar nas configurações do Android clicou você vai entrar dentro de configurações e aí você vai ter que rolar até embaixo do seu aplicativo eh no lugar no lugar onde vai tá escrito assim por exemplo no meu tá escrito assim ó sobre o telefone no teu vai ter alguma coisa é software alguma coisa relacionada com isso talvez você entra aí dentro vou clicar aqui no sobre o telefone para entrar e aí aqui Dentro vai ter
informações sobre o telefone e tal Modelo E aí você vai procurar onde vai tá escrito assim número da versão geralmente tem isso aqui ó número da versão ou em alguns celulares está escrito número de compilação ou uma coisa do tipo o que que você vai fazer você vai bater várias vezes o seu dedo em cima aqui de número da versão então se eu bater várias vezes aqui meu dedo ó no meu já tá aparecendo um balãozinho assim ó não é necessário Você já é um desenvolvedor mas no seu caso Conforme você for batendo várias vezes
o dedo aqui em cima vai aparecer assim modo desenvolvedor ativado uma coisa assim é tipo um negócio escondido aqui no Android que você fazendo isso vai habilitar aí o modo desenvolvedor que tá sempre bloqueado por padrão certo então desbloqueou aqui o o modo desenvolvedor né aí nós vamos pra próxima etapa se aqui se você tiver dificuldade pessoal não tiver achando Onde fica o modo desenvolvedor fica a dica para você vai lá no Google e coloca Ah meu aparelho é o Samsung Galaxy accs não sei o que lá eh Android 12 modo desenvolvedor aí você já
vai achar um tutorial que vai te explicar bem facinho não precisa se apavorar e você fuçando aí 10 minutos você já acha isso daqui certo então depois que ativou o modo desenvolvedor no meu caso aqui do meu celular vai ficar dentro de sistema eu entro aqui dentro de sistema e aqui Dentro de sistema tem aqui ó Opções do desenvolvedor alguns celulares fica até aqui na página inicial das configurações lá embaixo já fica escrito assim opção de desenvolvedor isso também varia Mas procura aí que você vai achar então no meu caso dentro de sistema opções de
desenvolvedor eu vou entrar aqui dentro aqui tá mostrando umas opções que não tem pra gente liga opções assim do Android só para desenvolvimento mesmo mas o que interessa para nós que vai ter Que tá ativado vai ser aqui embaixo ó esse item aqui ó depuração usb esse depuração usb ele vai precisar estar ativado então verifica no seu caso se ele está ativado aí beleza uma vez estando ativado então a gente já vai poder voltar lá pro nosso computador pra gente fazer aí as devidas ah conexões com o nosso celular pra gente poder trabalhar aqui tá
então o que que a gente vai fazer você vem aqui no terminal então meu celular tá com o Cabo USB conectado no computador já ativei a depuração usb Você vai dar o seguinte comando aí adb devices que é paraa gente fazer essa conexão ou verificar se o nosso celular tá conectado com o computador então dá um adb devices aí Dá um enter E aí ele vai eh mostrar para nós se tá conectado ou não só Aguarda aí um pouquinho então no meu caso já mostrou aqui que eu estou com o meu celular conectado olha só
ele Apareceu aqui um como se fosse aqui uma hash né que na verdade significa que é o meu celular e tá dizendo que ele tá device ele tá ativo tá funcionando ele ele tá rodando aqui no meu computador Às vezes aqui aparece un authorized que não está autorizado deixa eu ver se até consigo fazer isso aqui para vocês verem vamos ver se se vai funcionar isso s no meu caso eu já esse meu celular como eu uso no dia a dia ele já tá autorizado deixa eu dar um adb devices Aqui é Ele já tá
dando autorização mas no caso de vocês vai aparecer lá no celular de vocês escrito assim pedindo uma autorização você autoriza que o computador Você Dá permissão pro computador se conectar via USB com o celular e aí você vai marcar lá dentro do teu celular vai marcar assim sempre permitir ou uma coisa assim vai ter essa esse balãozinho vai aparecer lá no seu celular então você Dá permissão a primeira vez depois as outras vezes ele Já conecta automaticamente certo então a gente dá esse adb device só para ver se ele tá conectado Se aparecer aqui então
a hash do seu celular e escrito device é que ele está conectado Então o meu já está conectado aqui com com o computador já tá funcionando agora então vamos dar o comando para compilar esse aplicativo no meu celular então o comando é cordova Run Android Olha só cordova rodar no Android cordova Run Android e aí você vai dar um Enter E aí é só esperar ele vai fazer a compilação do aplicativo aqui no celular eu vou até ficar mostrando aqui para vocês o celular assim ó que daí vocês vão ver conforme ele vai compilar ele
vai rodar aqui dentro do celular o resultado ó vamos só aguardar ele fazer a compilação tá lá ó rodou E aí tá lá córdova beleza tá rodando a página inicial o Starter aqui do Córdoba no nosso celular né alegria de viver você Ver o seu aplicativo primeira vez já rodando aqui no seu celular muito legal mesmo essa build que a gente chama que é essa construção para ele colocar o aplicativo aqui dentro do do celular ela demora de acordo com a capacidade da sua máquina né A primeira vez que a gente faz geralmente ela é
um pouco mais demorada e as outras vezes já é um pouquinho mais rapidinho né No meu caso aqui deixa eu ver levou 22 segundos para ele fazer essa build né Depende muito de Cada computador aqui né E aí já estamos aí com o aplicativo então rodando aqui dentro do celular só para mostrar para vocês aqui deixa eu ir na câmera aqui ó vai tá espelhado né mas tá a parte cordova device is Ready está pronto né então qualquer alteração que eu fizer por exemplo se eu vim aqui e colocar assim ó show de bola show
de bola fiz a alteração aqui salvei eu dou o comando cordova Run Android ele vai fazer a compilação E aí vai mostrar para nós o Aplicativo ó você vê como é bem mais rápido ó já já foi ó já foi show de bola tá vendo Então o que eu fizer de alteração ali no código a gente compila e ele vai gerar o aplicativo que vai ficar aqui no nosso celular uma vez que eu fiz essa esse processo de cordova Run Android pessoal no nosso celular vocês vão ver que ele já vai gerar para nós o
aplicativo né eh deixa eu ver se eu consigo mostrar aqui para vocês ó vou mostrar aqui para vocês não vai dar para Ver muito aqui na na tela mas deixa eu ver se vai dar para enxergar vamos ver se ele vai focar já vai tá aqui ó escrito Green Tech com o símbolo do córdova então eu já Criei um aplicativo aqui ó que já está no meu celular uma vez que ele tá instalado se eu bato o dedo em cima ele já vai abrir diretamente também para eu olhar o aplicativo como ele ficou ele tá
instalado já certo então com isso né com esse comandinho aí a gente aprendeu a Próxima etapa que é como rodar o projeto no celular show de bola a gente viu ali o comandinho cordova Run Android para rodar ele no celular estando conectado via cabo USB aqui no nosso computador próxima etapa então é a apresentação visual do projeto tá curioso para ver como é que vai ser o projeto de aplicativo que a gente vai fazer aqui no minicurso Então essa curiosidade vai ser sanada agora pessoal Então olha só que legal como é que vai ficar o
nosso Projetinho aqui ó dessa forma aqui olha só que sensacional Que bonito né eu entrei no site chamado dribble né que é um site onde você tem ali designers e tal e eu achei legal esse do ronas it aqui um time de ui e ux né fez esse projetinho aqui ó Muito bonito mesmo ó muito legal e essa a ideia do aplicativo que a gente vai est fazendo aqui junto com vocês olha só que sensacional que coisa mais lindo que a gente vai estar fazendo aqui nessas nossas aulas então Ficou um design que eu achei
bem Clean bem assim bonito mesmo e moderno né uma coisa assim visualmente muito agradável e a gente vai fazer basicamente essas três páginas aqui durante esse nosso minicurso Então a gente vai fazer a página inicial onde a gente vai fazer aqui um fakezin né de alguns itens então a greench vai ser o nome da nossa empresa que a gente vai est fazendo nós vamos ter uma página de detalhes onde a pessoa clica por exemplo em cima de um Produto vai para essa página de detalhes com mais informações com a opção de adicionar ao carrinho e
nós vamos ter uma página de carrinho que vai tá lá em cima que conforme a gente for adicionando o carrinho vai ficar salvo esses dados do car e dos produtos que a gente adicionou lá e ele vai mostrar para nós o valor total aí as questões de uma simulação de um carrinho de compras aqui para depois ir para um checkout certo então ficou muito legal quer dizer Vai ficar né Muito legal vai ficar sensacional esse nosso projetinho muito bonito vai ser baseado nesse nesse nosso projeto aqui nesse projetinho do dribble aí né então vou deixar
inclusive o link E na descrição do vídeo aí embaixo para vocês quiserem dar uma olhada aqui nessa imagenzinha eu vou de qualquer forma salvar porque vai que depois o cara tira fora do ar isso aqui né pra gente só ter a base estética nós não vamos fazer 100% igual tá pessoal isso daqui Isso aqui Vai ser a nossa base Mas nós vamos fazer muito parecido com isso daqui nós vamos ter isso aqui como base pra gente fazer o nosso vai ficar bem legal certo gostou show de bola então deixa já o like aí rapaz se
você tá empolgado aí como é que a gente vai como é que vai ficar o nosso aplicativo deixa o seu like aí que a gente fica muito contente com a ajuda de vocês deixando o like continuando Então já Vimos a apresentação visual do projeto vamos pra próxima etapa que é a Visão Geral do Framework Seven paraa construção dos apps pessoal você pode fazer como você viu aqui ó a gente usa um HTML CSS JavaScript normal né Você pode usar qualquer Framework de desenvolvimento frontend que você desejar utilizar você pode usar o Bootstrap você pode usar
react você pode usar o que você quiser usar né t o Wind o que você quiser usar para fazer a construção visual do seu aplicativo você pode aqui o Cordoba te dar essa opção Essa liberdade de você fazer como você quiser aqui a parte estética e visual do seu aplicativo então um Framework que eu gosto de usar quando estou fazendo aplicativos para celular é o Framework 7even o Framework 7even o site é Framework 7.io ele é um Framework preparado com os componentes que são usados por aplicativos nativos do Android ele usa através de JavaScript HTML
CSS já é o o rapaz que construiu ele né que fez aqui Esse Framework ele já deixou ele com a parte estética do sistema operacional Android Então olha aqui um exemplo aqui ó olha como é que fica no celular Que bonito né você vai ter todos os recursos é que seria num aplicativo nativo feito lá com Java só que isso aqui é feito com JavaScript HTML CSS Olha que bonito por exemplo um dialog né só para mostrar para vocês um dialog é aquele balãozinho de alerta Então olha só como fica bonito o dialog aqui nesse
sistema ó dialog de Confirmação prompt tá vendo ó para você digitar alguma coisa um preloader então ele já tem os componentes prontos pra gente simplesmente utilizar já vem junto nessa biblioteca aqui né e ele tem um sistema que eu acho muito interessante que é o principal do que eu gosto de usar o Framework S que é de roteamento entre páginas aqui ó se a gente vi aqui na documentação do Framework Seven aqui em router viw api lá embaixo em Custom page transition aqui tem uma Demonstração de transição entre páginas usando esse Framework Então em vez
de você ter um site estático uma coisa feia com cara de site ali no aplicativo o Framework Serv faz com que isso fique fluído de uma forma que pareça que você está no aplicativo nativo Android então por exemplo assim ó aqui tem os exemplos de animações de transição de página olha só que legal Circle ó cover tá vendo cover V Dive Ó que legal os efeitos Fade para trocar Paralax flip de girar olha só que sensacional push tá vendo Então todas essas transições entre part são suaves parece que você tá numa página só dentro do
aplicativo e e navegando ali com os recursos de navegação então isso aqui é uma coisa que eu acho muito legal do Framework S só para mencionar por cima algumas coisas aqui ó se você ver a lista de componentes e depois se você quiser dar uma olhada tirar um tempo aí pausa o vídeo Entra lá no site do Framework 7.io né vem aqui em Docs clica aqui em Docs você vai cair nessa página e aí você vai poder ver todos os componentes que ele tem aqui ó é simplesmente sensacional por exemplo Esse é chit modal por
exemplo é aquela folhinha que aparece embaixo por exemplo para detalhes né E sempre ele te dá exemplos aqui ó só para você ver ó por exemplo ó essa folhinha que aparece aqui embaixo tá vendo olha que legal e ele já tem um recurso também que eu acabei de Esquecendo de falar que Framework 7 é sensacional que ele já converte para Android ou para iOS os componentes então por exemplo assim se você lhe reconhece que você tá rodando o seu app num iOS os componentes vão ficar visualmente esteticamente com a cara do iOS e se você
tiver rodando no Android os componentes vão ficar visualmente com a cara do Android olha só que legal então ó repara aqui ó tá vendo que tá tudo no formatinho tipo do iOS se eu clico aqui Para Android olha só é a mesma página só que no formato para Android com com com estilo da do Android legal E aí você tem os recursos aqui né esse aqui só um exemplo ó é muito legal de como ó com step ó para você puxar componentes prontos aqui é muito legal olha Framework ser vale a pena você tirar alguns
minutinhos para você tá estudando esse Framework aqui principalmente falando de desenvolvimento de aplicativos tá então eu acho legal usar Isso aqui nós vamos estar usando no nosso projeto o Framework 7 Beleza então visão Geral do Framework 7 cheque vamos agora pra próxima etapa que é instalar um template Starter né Eu já tenho para pros alunos do meu curso completo de criação de aplicativos alguns templates de aplicativos já prontos que é para facilitar a gente já ter tudo mais configurados já pronto para inicializar porque existem alguns tipos de navegação que são padrão nos aplicativos aquele Menuzinho
embaixo alguns que tem um menuzinho no topo que abre uma folhinha lateral né existem alguns modelos Starter Então a gente tem lá no nosso curso disponibilizado alguns e aqui eu também vou estar disponibilizando para vocês um exemplo de como usar um template Starter Starter que já é do Framework 7 né então lá no github a gente tem um repositório que se chama FS template Então você entra lá github.com FS Trot template E aí o que nós vamos Estar utilizando é o tab certo barra Tab aqui a gente vai ter uma pasta www que é a
pasta www que nós vamos substituir por essa www Inicial então repara a ww é onde vai est ali o nosso projetinho propriamente dito Então é só eu trocar essa para o template que eu quero e pronto eu já tenho o aplicativo com aquele template base que eu desejo certo esse template Tab aqui é o que que quer dizer Tab é esse tipo de navegação aqui ó mostrar aqui para vocês que tá Aqui embaixo que são aquela Barrinha na parte de baixo com quando você clica ele navega entre as páginas por essas barrinhas aqui o nome
dessa navegação é Tab certo E então esse aqui é o que hoje em dia é mais utilizado tanto no Android como no iOS a maioria senão olha praticamente 100% dos apps usa esse sistema de navegação porque ele foi meio que padronizado antigamente no Android a gente tinha aquele menuzinho aqui em cima que você clicava e abria tipo uma Folhinha aqui lateral com as opções de item né ainda existem alguns aplicativos assim mas a maior parte usa esse sistema de Tab aqui certo então nós vamos estar usando isso daqui Então como que a gente faz para
colocar esse esse Tab no nosso projeto existe duas formas de você fazer isso eu vou fazer a forma que eu acho que é mais rápida e a forma que eu acho que é mais simples porque nem sempre o mais rápido é o mais simples Qual que é a forma mais rápida é usando a linha de Comando aqui mas para que você possa fazer isso funcionar você precisa ter o Git instalado na sua máquina e e já ter algum conhecimento de github né porque o que que a gente faz a gente vai pegar esse repositório essa
pasta www aqui e com único comando a gente vai pedir para colocar aqui dentro do nosso projeto né Então esse é o jeito mais rápido eu vou mostrar para vocês talvez no seu não vai funcionar se você não tiver o Git instalado se você nem saber que que é Git Git Hub Então esquece is aqui não precisa fazer desse jeito eu vou mostrar o jeito mais fácil de você fazer esse aqui é o mais rápido tá se você tiver o Git github entender tudo isso como funciona então o que que você vai fazer primeira coisa
deleta tua www original vamos lá deletar clica no delete sumiu Beleza agora aqui embaixo na linha de comando Você vai dar o seguinte comando Git espaço Clone E aí você vai passar o caminho aqui dessa página aqui em cima ó Github.com F7 template Tab vou copiar cont CRL C vi aqui cont contrl V para evitar fadiga e no final você só coloca assim ó ponto Git tá ponto Git dessa forma você tá dizendo que quer clonar lá do github essa pasta pro teu projeto você vai dar um enter aqui e aí olha só que legal
ele já vai baixar e aqui já vai aparecer uma pastinha chamada Tab dentro dessa pastinha Tab vai ter a pasta www aí o que você faz você clica aqui segura o clique tô segurado O Clique aqui no meu mouse dessa www eu vou arrastar ela aqui ó para baixo do pack de Jon pra raiz do meu projeto e solto aqui dessa forma a gente tirou ela de dentro da pasta Tab e deixou aqui na raiz do nosso projeto que é onde ela precisa est E aí a gente pode deletar essa pasta Tab aqui que vai
est vazia pode deletar ela que a gente não precisa mais dela certo então dessa forma nós já colocamos aqui deixa eu só dar um sim para permitir ele excluir colocamos já Um projeto Starter aqui com as coisas que a gente precisa já prontinha aqui para nós bem rapidinho Essa é a forma mais rápida se você tiver o Git já instalado na sua máquina por linha de comando mas tem o jeito também mais simples né que é aquela coisa que você não tem o Git você não entende nada nunca fez o curso que vai est aí
na no card aí em cima de github Git github aí em cima né que já fica a dica para você assistir então o que você faz você vai Entrar lá na nesse link que eu também deixei na descrição aí do desse template Starter vai vir aqui nesse botão code aqui e aí você vai fazer o download do Zip dele ó download Zip clica aqui em download Zip ele vai vir aqui para você salvar onde você vai querer eu vou dar aqui um salvar como aí você vai entrar dentro da pasta lá do seu projeto você
vai lá em colocal o c apps o nome do seu projeto e aqui dentro você vai salvar isso Daqui salvou beleza Tá salvo lá voltando lá no nosso vs code né O que que eu vou fazer eu vou deletar essa nossa www que a gente pegou antes ali pelo vi linha de comando Tá mas antes é imagina que seria a www original que veio junto com cordon E agora o que que você vai ter que fazer é extrair esse Tab main.zip aqui dentro do projeto só que dentro do vscode você não vai conseguir então você
tem que entrar lá no teu explorador de arquivos entra lá dentro da pasta do teu projeto Do Green Tech e aqui ó dentro dele aqui vai ter Tab Main Tá vendo você vai fazer o seguinte Clica com o botão direito extrair aqui aí aguarda ele fazer a extração aí ele vai fazer aqui uma pastinha chamada Tab Main você entra aqui dá um contrl x ou ou clica com o botão direito recortar tá volta aqui na raiz do teu projeto e dá um contrl v só para você tirar essa pastinha de dentro da tabm e colocar
aqui dentro e aí pode apagar essa pasta tabm e aí beleza você Também tá com o template Starter colocado aqui também essa é uma outra forma de você baixar esse template Starter e ter ele aqui dentro do seu eh do seu projetinho aqui que você tá trabalhando certo então vamos agora marcar lá no nosso checklist e instalar o template Starter Ok seguinte então vamos só dar uma rodar esse template Starter aqui no nosso celular né para você ver ali como é que vai ficar Então você vai vir aqui dá um cordova você Já Prendeu o
comando né tá com o celular conectado cab USB no computador cordova Run Android e Dá um enter só para você ver como é que é esse template Zinho Starter que ele vem aí inicialmente beleza ele já rodou aqui para mim eu vou compartilhar minha tela aqui só para vocês verem Tá beleza então eu tô espelhando aqui o meu celular que vocês estão vendo ali na na tela do computador é o que eu tenho aqui no celular tá usando um programinha aqui que espelha Então esse aqui é o template Starter tá o usando esse modelo de
navegação Tab então ele tem aqui em cima um que a gente chama de nave bar que é onde geralmente tem um título e tal Aqui é onde o conteúdo do aplicativo das coisas que a gente vai colocar aqui dentro e ele tem esse sistema de navegação aqui por links na barra de baixo Então olha só tô na página inicial eu clico no link dois aqui ó ele vai pra página dois e aqui fica destacado clico no três e olha Só que legal Como é o Framework 7 essa navegação Suave tá vendo Então parece aqui que
eu tô navegando e Entre Folhas aqui de uma forma bem suave mas cada uma desses links são páginas HTML separadas olha só que legal então ele tem esse sistema de roteamento bem interessante Então esse aqui é o nosso template Starter né só para mostrar para vocês aqui como é que ele é e agora a gente vai ver sobre desenvolvimento no navegador né porque assim que que Acontece pessoal imagina que cada alteração que eu for fazendo no meu layout e tal eu tivesse que vir aqui na minha linha de comando e dar um cordova Run Android
rodar esperar ele compilar aí vai pro celular aí você vê como é que ficou aí você muda mais uma coisinha você tem que de novo cordova Run Android gerar compilação e isso entendeu isso ia ser muito chato então tem um jeito de você fazer essas alterações Principalmente quando você tá Trabalhando com a parte de front end da sua aplicação montando a parte visual dele de forma de tempo real para você fazer isso em tempo real que é usando o navegador mesmo Live server porque o que rodar no Live server no navegador é como vai rodar
lá dentro do celular também tá não não roda algumas coisas do córdova algumas coisas assim de plugins que a gente não vai chegar a ver aqui nesse minicurso como por exemplo acesso a câmera GPS e tal essas coisas precisa Est rodando dentro do Android mas pra parte visual a criação do frontend ele roda tudo numa boa e fica bem mais prático de você conseguir tá trabalhando dessa forma aí então como é que você faz então para e rodando Isso no navegador para ficar mais fácil a parte de desenvolvimento você vai fazer o seguinte você vai
entrar dentro daqui do da tua pasta www você vai vou até enrolei a língua T parecendo aquela mulher que tinha um mem antigamente Www ai ai você entra aqui e você vai procurar aqui dentro da pasta JS você vai achar um arquivo Esse é o arquivo principal aqui de roteamento do nosso aplicativo de gerenciamento de rotas e tal se chama Roots você entra aí então dentro da pasta JavaScript nesse arquivo Roots Aqui é onde a gente orquestra as funções do Framework sing certo aqui dentro se você for rolando aqui para baixo eh você vai encontrar
aqui ó na PG na Linha 82 escrito assim ó para testes direto no navegador E aí tem uma linha comentada aqui tá vendo isso daqui é uma coisa que a gente já deixou preparado para quando você quiser fazer teste no navegador você desca essa linha aqui e aí vai funcionar tudo no navegador como seria lá no celular se você quer testar no celular para que tudo funcione você precisa comentar essa linha aqui entendido vai rodar no navegador descomento essa linha vai rodar no Celular comenta essa linha Beleza então a gente vai descomentar aqui dá um
salvar e aí a gente entra lá na nossa index e vem aqui embaixo e usa o Live server que que é esse Live server ele é uma extensão do vs code então você vem aqui em extensões vê se você tem instalado aqui a extensão chamada na Live server que faz rodar em tempo real que você tá alterando né no seu aqui no seu código eh já direto aqui no navegador certo isso daqui eu mostrei lá No vídeo que eu mostro sobre como instalar o vs code as configurações da minha máquina tudo tá tá lá então
eu vou pegar e entrar aqui na na minha [Música] index.html.gz numa outra janela aqui né naquelas que eu tava nas minhas Abas eu vou tirar ela daqui ó e aí você coloca ela bem pequenininho como se fosse o tamanho de celular assim ó deixa aqui no canto vai ali no teu vs code restaura ele aqui ó deixa ele menorzinho aqui Ó dessa forma aqui e aí pronto pessoal deixa eu até colocar a minha cara aqui pro outro lado eu não lembro qual que é o tem um comando aqui que ah que que inverte beleza vou
colocar minha cara aqui desse lado aqui para não atrapalhar então o que eu tenho aqui ó é o o meu aplicativo certo e aqui eu tenho o vs code para mim tá trabalhando Olha só o que eu fizer de alteração aqui ó dentro do meu aplicativo da do meu código melhor Dizendo Já Tic Tec já tá fritando né que que eu trocar aqui dentro do meu código já vai ser refletido aqui em tempo real por exemplo tá escrito assim ó tem Plate Tab lá em cima se eu colocar assim ó trocar colocar Green Tech e
dar um salvar cont contrl S Olha lá já salvou em tempo real lá aqui vou colocar um p Loren aqui para colocar um Loren Y né ó um parágrafo qualquer ó tá vendo Então o que eu fizer em tempo real aqui já vai aparecer aqui pra gente fazer isso em Nível de desenvolvimento é muito mais rápido você tá vendo tudo direto aqui na tela vai construindo vai fazendo o que você quer aí você quer ver depois lá no final como é que tá rodando o celular no Android você pode vir aqui e compilar dar um
Cord Android e ver como é que ficou lá certo você também tem como ver esse resultado aqui no teu celular também diretamente no teu celular mas sem compilar vem em tempo real no celular sem compilar como você faz isso Você vai na verdade rodar o Live server lá no teu celular então o que que você faz você vem aqui no terminal e coloca assim ó IP config digita IP config Dá um enter ele vai dar as conexões de rede da sua máquina você vai procurar ali Qual que é o IP dessa máquina que tá rodando
o Live server no meu caso aqui ó e deixa eu ver aqui onde é que tá deixa eu aumentar isso aqui para ficar mais fácil dá para maximizar aqui pra gente ver aqui vai ter as conexão IP tá wi-fi aqui Meu computador tá conectado via wi-fi Então esse aqui ó é o meu IP do meu computador 192168.0 p235 certo certo então a minha máquina que tá rodando Live server que é o meu computador ele tem esse IP aqui aí que que eu faço eu vou lá no meu celular deixa eu ver se eu tô aqui
com o espelhamento de tela aberto vou abrir ele aqui então tô espelhando aqui meu celular você entra dentro do navegador Do seu celular por exemplo Ed o Chrome Entra lá e aí você vai digitar o seguinte aqui na barra de endereço você vai digitar assim ó deixa eu só trocar o teclado aqui pro teclado celular e aí você vai digitar assim ó http dois pontos barra barra e aí você vai colocar o IP que você tem aqui da do seu computador que no meu caso é 192168.0 p235 certo então você vai colocar lá Aqui já
até apareceu para mim ó já vou até deixar assim para evitar a fadiga já apareceu porque eu sempre uso você vai ter que colocar o IP da do seu computador depois você coloca dois pontos e aí você tem que colocar a porta de acesso que vai estar tá aqui ó no teu computador aqui ó marcando Qual que é a porta de acesso no meu caso é 5500 certo depois você põe barra www barra certo você coloca isso aí então o IP da sua máquina que tá rodando Live server a porta que você vai ter que
dar uma olhada aqui para ver qual que é não necessariamente vai ser igual a minha que é 5500 depois você põe barra www bar quando você dá um ir aí ó Dá um enter olha só o que que vai acontecer você vai ter aqui no seu celular também rodando o Live server então agora ó se eu mudar aqui alguma coisa Ah deixa eu voltar lá no meu código aqui vamos ver se vocês vão conseguir enxergar deixa eu deixar esse aqui mais pro lado aqui ó Vou colocar aqui ó esse aqui é o meu celular tá
isso aqui tá espelhando o meu celular que tá aqui ó tá vendo vou até colocar ele mais perto aqui vamos ver se eu consigo fazer vocês verem aqui mais fácil ó Green Tech ali tá vendo tá escrito eu vou trocar aqui vou colocar ponto de exclamação aqui ó ponto de exclamação Vou salvar contrl S salvei Olha lá já apareceu no meu celular em tempo real e aqui ó já atualizou para nós isso daqui atualizou na minha Máquina tanto no computador rodando Live server como também no meu celular certo Por que que isso aqui é legal
a nível de desenvolvimento você pode ficar com o seu celular aí apoiado perto do seu computador para você ver como é que tá funcionando e você pode deixar essa outra tela aqui por exemplo com o tamanho de computador então ao mesmo tempo você pode ir desenvolvendo o modo computador e o modo celular usando técnicas de media caries por exemplo ou Se você tiver um outro monitor Você joga esse daqui ó que é o o que tá no navegador Joga lá numa outra tela para você ir vendo como é que fica em tamanhos grandes ou tamanhos
de tablet ou uma coisa assim porque você pode reajustar aqui o tamanho do navegador como você quiser ó ah vamos supor com um tablet tá ó mais ou menos um quadrado assim você pode jogar lá e ao mesmo tempo ir vendo no teu celular pequeninho como é que vai ficando entendeu como Fica mais fácil de você desenvolver dessa forma então de uma vez só você vai codificando já para celular para tablet para computador tudo vendo isso em tempo real aqui com Live server então é um recurso muito legal terminou fez tudo que você precisava Tá
show de bola compila vai lá no teu terminal né E vai dar lá o Cordoba Run Android para rodar e instalar ele no teu celular show de bola né pessoal muito legal então beleza Vamos colocar aqui então lá na nossa Listinha Opa Deixa eu voltar aqui deixa eu arrancar isso aqui fora deixar ele separado aqui deixar ele aqui no cantinho né vamos voltar L na nossa listinha do Google Keep então desenvolvimento no navegador a gente viu como que a gente faz usando o Live server agora por último e é o último item que a gente
vai ver nessa aula é a manipulação de rotas né que que nem a gente tá vendo aqui ó voltar aqui ó e a gente tem aqui esses links né pra gente Navegar entre página essas rotas pessoal como que elas funcionam deixa eu mostrar aqui para vocês no Framework 7 você vai entrar dentro daquele arquivo Roots Deixa eu só ajeitar aqui que ficou esquisito aqui a beleza você vai entrar dentro aqui do arquivo Roots e o arquivo Roots é onde a gente cria as nossas rotas tá as rotas elas funcionam da seguinte forma a gente vai
ter aqui Roots aqui vai ter um Array e dentro desse Array a gente vai ter Objetos de rotas dentro desses objetos a gente vai ter as rotas das páginas que a gente vai ter dentro do nosso projeto então ele ele funciona assim ele tem um pet o pet é como se fosse um apelido que a gente dá para aquela página por exemplo essa aqui se chama index fica entre duas barras aqui é a URL apontando Qual que é o arquivo aqui HTML que é o arquivo que tá relacionado a esse Pet esse apelido que a
gente deu aqui tem umas questões de animação e tal isso Aqui na verdade não tá funcionando porque eh esse animate aqui agora é um parâmetro diferente no Framework 7 mais atual então isso aqui ele tá fazendo animação sim embora tá animate false Aqui ó pode reparar que ele tá fazendo uma animaçãozinha então isso aqui depois a gente ajeita tá aqui a gente tem alguns eventos do que acontece quando a página antes da página iniciar depois que a página inicializa depois que a página for removida tem um monte de Eventos aqui que você pode fazer ó
fazer algo antes da página ser exibida fazer algo depois da página ser exibida fazer algo quando a página foi inicializada fazer algo quando a página fori removida do Dom Então você tem um controle de disparos de eventos eh que você pode colocar aqui né funções e coisas assim bem legais então aqui a gente tem todas as rotas por exemplo a gente tem a da página index depois a gente tem aqui da página dois que é esse Segundo link aqui a gente tem uma outra que é da página três que é esse terceiro link aqui quando
a gente quer quer criar uma nova página O que que a gente faz a gente copia um objeto desse aqui como esse aqui da página TR copio cont CRL C vem aqui embaixo pulo uma linha dou um cont Crol V Acabei de criar mais uma rota e aqui eu troco o nome por exemplo vou colocar assim ó Link 4 a URL é Link 4 salvei então Acabei de criar mais uma rota agora o que que eu preciso fazer eu Preciso criar mais um arquivo HTML Então vou copiar esse link 3 cont control ctrl v vou
renomear ele aqui ó um F2 para renomear ele como Link 4 essa página aqui dentro do HTML dele eu vou mudar o nome da página para Link 4 porque aqui tá seguindo o link 3 aqui eu vou colocar aqui o título também como Link 4 só pra gente alterar pra gente saber que funcionou certo conteúdo do Link 4 então eu tenho a página 4 link 4 e a rota 4 criada agora eu só preciso adicionar Mais um botão aqui nesse menu que eu tenho aqui embaixo porque e não tá aparecendo ainda então o que que
você vai fazer você vai entrar dentro da index que é como se fosse a nossa página mãe aqui dentro da index você vai achar esse menu ó ele vai tá aqui em cima ó que se chama toolbar ó Tab bar tá vendo É onde tem esse menuzinho aqui então eu vou criar mais um link cont control c d aqui um cont control V aqui eu vou colocar Link 4 aqui Link 4 salvar Olha lá já apareceu mais um linkzinho aqui eu só vou mudar o o ícone para que a gente tenha alguma coisa diferente eu
vou colocar aqui o magnify que é uma lupinha ó lá e acabei de criar mais uma página mais uma rota então eu criei a rota aqui né Framework servem saber que eu tenho uma nova rota criei uma nova página e também coloquei no menu porque precisava mais essa rota aqui embaixo agora quando eu clico aqui olha só o que que vai acontecer fui pro Link 4 essa nova rota então tudo que eu precisar alterar eu de mudanças que eu quero fazer nessa página eu eu venho aqui no meu link 4. HTML que é essa página
né que a gente deu o nome e aqui eu posso fazer mudança qualquer que eu quiser e aí ó lá ele vai reiniciar o projeto volta sempre na index quando reinicia isso é normal tá você clica aqui no link 4 ó lá mudança qualquer e aqui vai tá já para nós essa página aqui pra gente tá trabalhando certo então só Para mostrar para vocês um pouco sobre roteamento de páginas e como que a gente cria novas páginas aqui dentro do nosso projeto então com isso a gente finalizou aqui o nosso checklist dessa nossa aula né
pessoal vai ficar sensacional esse projeto ó eu tô muito animado vai ficar muito bonito mesmo e na próxima aula nós vamos estar fazendo isso daqui na prática junto com vocês do zero absoluto usando esse template Starter e vamos Fazer esse aplicativo do Green Tech fica pronto na próxima aula eu espero que você tenha gostado desse vídeo que esteja empolgado pra próxima aula é só Opa tá espelhado aqui é só clicar nesse link aqui ó paraa continuação então do próximo vídeo para você assistir tá E aqui vai ter também o link do meu curso completo de
aplicativos caso você queira aí estudar mais a fundo essa técnica aprender como estudo funciona tem esse meu curso aí que vai te ajudar bastante Não esquece de deixar o like se não for inscrito se inscreve um forte abraço e até a próxima aula valeu
