Desenvolvimento de aplicativos móveis com Ionic e Angular - Idea to App Store

1. Primeiros passos: Olá, este é o meu Callahan. Eu tenho usado o Ionic para desenvolvimento de aplicativos móveis desde 2014 antes mesmo foi lançado oficialmente. Desde então, Ionic tem sido a minha escolha para a tecnologia para a construção de Mobile APS. Com o lançamento da versão quatro em 2019, o Ionic cresceu além de suas origens humildes como uma estrutura angular para fazer APS móvel. Hoje, Ionic trabalha com uma variedade de tecnologias da Web. Tornou-se um cidadão de primeira classe para a construção de todos os tipos de aplicações Web. Neste curso, vamos nos concentrar em angular, indo do código zero todo o caminho para o APP e lojas de jogos. Ao longo deste curso, vamos cobrir os aspectos importantes do desenvolvimento com Ionic e angular. Esta lição abordará os conceitos básicos absolutos, configurando seu ambiente de desenvolvimento para ser o mais eficaz possível. Vamos terminar com uma aplicação simples Olá Ionic. Vamos saltar diretamente para a estrutura da aplicação, explicando como uma aplicação iônica é colocada para fora. Vamos apresentar alguns dos componentes simples e criar um menu lateral básico para o aplicativo de demonstração. A próxima lição é tudo sobre armazenamento de aplicativos. Ionic fornece um mecanismo de armazenamento simples que funciona em navegadores da Web e os dispositivos usarão isso para manter dados persistentes do aplicativo que sobreviverão às reinicializações do dispositivo Se você não precisar de recursos de hardware específicos além dos disponíveis através do navegador da Web, você pode optar por liberar seu aplicativo é um aplicativo Web progressivo ou P w. A. Enquanto a Web está ficando cada vez mais capaz a cada dia, algumas funções ainda exigem acesso ao subjacente em que o aplicativo está sendo executado. Esta lição será uma introdução à integração de dispositivos com Capacitor na lição final irá agrupar o aplicativo a ser lançado para a Apple App Store e Google Play Store. Eu vou fazer algumas suposições sobre algumas coisas que você já deve estar familiarizado. Eu espero que você saiba como escrever programas e pelo menos uma única linguagem de programação. Você deve entender pelo menos os conceitos básicos de layout de página da Web com HTML. Se você sabe o que ele fez, é como criar um botão HTML. Você deve ficar bem. Vamos fazer uso pesado de javascript e typescript, e isso vai ajudar se você tem pelo menos conhecimento de nível iniciante. Você também vai querer um editor de texto ou um ambiente de desenvolvimento integrado que eu uso e recomendo código de estúdio visual. B s código é um ambiente de desenvolvimento livre e de código aberto e plataforma cruzada Microsoft, projetado a partir do zero trabalho com todas as tecnologias estarão usando, É claro, você está livre para usar qualquer ferramenta Você está confortável com isso. Mais uma coisa que eu deveria deixar claro que este não é um curso sobre angular. Enquanto eu vou cobrir alguns dos conceitos básicos de angular como se refere ao Ionic, Eu não vou mais fundo do que eu tenho que Para fazer o aplicativo de demonstração trabalhar em seguida irá instalar as ferramentas necessárias para você completar o aplicativo de demonstração no fornecimento de instruções de Mac OS neste momento, estou executando Catalina, mas o processo deve ser idêntico em qualquer versão recente do Mac OS Windows 10. Estas instruções também devem funcionar se você estiver no Windows Server ou mesmo ganhar para sete ou oito e, finalmente, Omã para Lennox. Mas você deve ser capaz de seguir junto com qualquer distribuição de limites. Não sinta que precisa assistir às três lições. Escolha o mais próximo do seu sistema e assista a esse 2. Introdução ao ferramental - MacOS: Ionic é suportado em uma variedade de plataformas de desktop. Nesta lição, vou me concentrar no Mac OS. Vou mostrar-lhe como instalar as ferramentas que uso e colocar as noções básicas em funcionamento o mais rápido possível . Irá querer garantir que você tenha todas as ferramentas de linha de comando e compilação instaladas antes escrever qualquer código. Isso é o que vai cuidar aqui. Ionic faz uso pesado de saber J S, um ambiente de tempo de execução baseado em script Java que você vai precisar obter e suas ferramentas de contas relacionadas em um Mac . Você provavelmente já tem, mas vamos nos certificar. E, claro, você também vai precisar Ionic instalar esses itens bastante simples. Você deve ser capaz de seguir em um Mac. A maioria das ferramentas que você precisa se você ainda não as tiver, pode ser instalada lá. Homebrew Homebrew se conta como o gerente de pacotes Max Missing. Há muitas ferramentas e pacotes de tempo de execução disponíveis através do homebrew, então eu recomendo instalá-lo. Se você ainda não o tiver, você pode instalá-lo copiando e colando o comando mostrado em uma página de tom em qualquer janela de terminal. Uma vez que tenhamos bebida caseira, podemos olhar para instalar o git, supondo que você realmente não tem. Então, primeiro, vamos ver se você tem, que você pode fazer com o comando git Dash Dash version. Se estiver instalado, você verá um número de versão provavelmente dois pontos algo. Se você tem uma versão que diz Apple, obtê-lo provavelmente significa que você instalou através de códigos X. Ferramentas de linha de comando e isso deve ser OK. Se você não tem o get ou gostaria de atualizá-lo, você pode instalar através do Homebrew. Basta emitir a bebida instalada. Obter o comando. Isso lhe dará a versão mais recente apropriada para o seu sistema Quando se trata de anotar e nó pacote Manager ou NPM, minha recomendação é instalar uma ferramenta chamada Node version Manager ou inveja. M. É um pouco mais envolvido, mas muito mais flexível a longo prazo. N V M é uma elegância em uma concha. Funções de script para permitir o uso mais flexível da nota. Você pode imaginar seu objetivo principal é permitir que você instale e alterne entre várias versões de nota no NPM instantaneamente. Então, se acontecer de você ter um projeto que não requer data, mas outro que requer No 12 , por exemplo, é fácil mantê-los instalados, mas ainda independentes um do outro. Os recursos mais importantes da nota giram em torno de rota ou acesso de administrador ou superusuário . Uma vez que você se compromete a invejar M, não há nenhuma razão para usar Sudo. Na verdade, você nem precisa de acesso root para instalar no V M. Este é o método recomendado usado no Mac OS, já que não requer comandos, não já em um sistema Mac de estoque. Uma vez que você está na pedra, inveje eles. Você pode usá-lo para instalar qualquer versão do Não que você deseja, neste caso irá instalar a última versão estável. Basta executar o comando mostrado aqui para baixar e instalar o suporte de longo prazo mais recente , ou versão LTs da nota. Porque eu estou usando o shell Z em Catalina, eu tenho que colocar isso entre aspas. Caso contrário, ele acha que é um nome de arquivo. Existem outros comandos M inveja disponíveis para você, permitindo que você instale e use diferentes versões de nota. Os mais comuns são mostrados aqui, e eu os descrevo com mais detalhes na página da aula do curso logo abaixo deste vídeo. Isso é tudo o que há para ele. Neste ponto, você tem todas essas ferramentas instaladas e disponíveis para você. Em seguida, irá instalar o Ionic e criar a nossa primeira aplicação. Espero que estejas tão entusiasmado como eu. 3. Introdução ao ferramental - Windows: Ionic é suportado em uma variedade de plataformas de desktop. Nesta lição, vou me concentrar no Windows. Vou mostrar-lhe como instalar as ferramentas que uso e colocar as noções básicas em funcionamento o mais rápido possível . Irá querer garantir que você tenha todas as ferramentas de linha de comando e compilação instaladas antes escrever qualquer código. Isso é o que vai cuidar aqui. Ionic faz uso pesado do nó Js, um ambiente de tempo de execução baseado em script Java que você precisará obter e suas ferramentas de contas relacionadas. E, claro, você também vai precisar Ionic instalar esses itens bastante simples. Você deve ser capaz de seguir direito ao longo das janelas, se você ainda não tem. Observação, eu recomendo ir para node.js dot org. Quando você chegar lá, clique no grande botão verde para baixar os LTs mais recentes ou versão de suporte de longo prazo para mim neste momento. Essa versão é 12 sobre 16.1, mas pode ser diferente de você, o que é bom. Uma vez baixado, você deve ser capaz de instalá-lo, aceitando todos os padrões. O próximo é “get”. Nós não vamos estar fazendo muito com obter pelo menos não imediatamente, mas Ionic usa-lo então você deve tê-lo cabeça sobre para obter traço SCM ponto com. Procure o botão de download e clique nele. Uma vez baixado, assim como com a nota, você deve ser capaz de aceitar os padrões uma vez instalado. Receba uma nota que você tem uma escolha a fazer. Durante este curso, ocasionalmente faremos uso da linha de comando. Obter instalado uma versão do popular shell Lennix Bash chamado Git Bash. Você também pode usar o prompt de comando normal do Windows ou o uso do programa de energia do Windows, o que você se sentir mais confortável. Prometo que tentarei não usar nenhum comando exclusivo para nenhum deles. Usando o seu show de comando preferido, digite o comando de nota com a opção de versão do traço e o comando de presente. Também com o interruptor de versão dash dash, você deve ver algo semelhante ao que estou mostrando aqui. Caso contrário , algo deu errado e você precisará tentar os instaladores novamente. E realmente, isso é tudo o que há para ele. Neste ponto, você deve ter todas essas ferramentas instaladas e disponíveis. Em seguida, irá instalar o Ionic e criar a nossa primeira aplicação 4. Introdução ao ferramental - Linux: Ionic é suportado em uma variedade de plataformas de desktop. Nesta seção, vou me concentrar em um coque para limitar, mas você deve ser capaz de acompanhar com qualquer distribuição Linux moderna. Vamos mostrar-lhe como instalar as ferramentas que eu uso e colocar as noções básicas em funcionamento o mais rápido possível . Irá querer garantir que você tenha todas as ferramentas de linha de comando e compilação instaladas antes escrever qualquer código. Isso é o que vai cuidar aqui. Ionic faz uso pesado do nó Js, um ambiente de tempo de execução baseado em script Java que você precisará obter e suas ferramentas de contas relacionadas. E, claro, você também vai precisar Ionic instalar esses itens bastante simples. Você deve ser capaz de seguir bem ao longo dos limites. Os usuários tendem a ser tudo sobre escolhas, então eu vou fornecer três opções diferentes para instalar essas ferramentas que você pode escolher , e assim tudo diretamente dos sites provedores você pode usar suas distribuições gerenciador de pacotes para não. Há 1/3 opção que irá discutir o gerenciador de versão de notas. A maioria, se não todas essas opções, deve funcionar para você, independentemente da distribuição Lennox que você usa antes de decidir qual método é o ideal para você. Vamos ver se você já instalou ou não. É possível que você abra um terminal e digite o comando knowed dash dash versão. Se você já o tiver, seu sistema responderá com um número de versão. Se não for como é, meu caso irá instalá-lo em um momento. O tubo de pão fornece de forma útil o comando que precisamos para instalá-lo. Vamos ver o que acontece quando tentamos isso. Entrar no comando, obter versão traço traço novamente. Eu não tenho isso. Mas se o fizer, verá uma versão listada aqui e novamente. Você quer ajudar me diz como fazer a instalação através do gerenciador de pacotes. Vou te mostrar as outras duas maneiras, mas agora vamos fazer o método do gerenciador de pacotes. Então tudo que eu preciso fazer é digitar o comando que foi fornecido para mim porque eu estou usando pseudo . Eu tenho que usar minha senha, e isso é realmente tudo o que há para ela. Vamos ver esse comando. Esquece outra vez. Agora que o processo foi concluído, eu devo ser capaz de fazer esses comandos novamente e você verá que eu quis dizer nó versão oito . Não é onde eu quero estar, então há uma maneira melhor de fazer isso. Vamos verificar a versão get, obter versões um pouco antigas também, mas vai fazer muito bem. A versão nota me preocupa, porém, então vamos olhar para os métodos alternativos usuários Lennox podem instalar no diretamente do site no Js. Se você não pode ou não quer usar seu gerenciador de pacotes de distribuições, vá para saber que J. S não funcionam Quando você chegar lá, clique no botão verde grande para baixar os LTs ou versão de suporte de longo prazo para mim neste momento . Essa versão é 12 sobre 16.1, mas pode ser diferente para você, o que é bom. Uma vez baixado, você deve ser capaz de instalá-lo, aceitando os padrões que as mesmas informações se aplicam para obter. Não vamos fazer muito com conseguir, pelo menos, não imediatamente. Mas Ionic usa isso, então você deve tê-lo cabeça sobre para obter traço SCM dot com. Procure o botão de download e clique nele uma vez baixado, assim como com nota, você deve ser capaz de aceitar os padrões. Deixe-me mostrar-lhe mais uma opção para um bilhete. Minha recomendação é instalar uma ferramenta chamada nó version manager ou invejar em. É um pouco mais envolvido, mas muito mais flexível a longo prazo. N V M é um elegante conjunto de funções de script shell para permitir o uso mais flexível da nota imaginável. O objetivo principal do N B. M é permitir que você instale e alterne entre várias versões de nota e NPM instantaneamente. Então, se acontecer de você ter um projeto que não requer data, mas outro que requer Não. 12 é fácil mantê-los instalados, mas ainda independentes um do outro. Para mim, os recursos mais importantes do NPM giram em torno do acesso root. Muitas instruções de instalação do pacote NPM que você encontrará na Web instruídas a usar o pseudo comando para instalar pacotes globalmente porque o local padrão desses pacotes globais são diretórios protegidos pelo sistema. Embora improvável, é possível que você tenha arruinado o acesso em sua máquina Lennox, tornando essas instruções inúteis. Uma vez que você se compromete a invejar M, não há nenhuma razão para usar para fazer. Na verdade, você nem precisa de acesso root para instalar no B M. Tudo é instalado sob a própria conta de usuário, então vamos ver como isso funciona. Este é o método recomendado para instalar na VM no Lennox, basta inserir um desses dois comandos dependendo se o seu sistema tem ou não curl ou w já está instalado. Eu quero ir em frente e acelerar o comando w get no meu terminal. Eu já desinstalei a versão do outro nó, então vou deixar a inveja cuidar de tudo daqui em diante. Como pode ver, foi muito rápido. Há um aviso que me diz que preciso reabrir meu terminal. Isso porque adicionou caminhos e funções ao meu basho. Deixe-me fazer isso agora. Agora, Eu não tenho nota porque eu só instalei e VM Mas se eu quiser agora eu posso instalar usando inveja m qualquer versão de saber que eu quero. Vou instalar a versão mais recente dos LTs, que novamente é 12 16.1. E isso é tudo o que há para isso. Existem outros comandos de inveja , disponíveis para você,permitindo que você instale e use diferentes versões de nota. Os mais comuns são mostrados aqui, e eu os descrevo com mais detalhes na página de aula do curso logo abaixo deste vídeo, e isso é tudo o que há para ele. Neste ponto, você deve ter todas essas ferramentas instaladas em disponível Próximo acima irá instalar o Ionic e criar a nossa primeira aplicação 5. Seu primeiro aplicativo Ionic: A última coisa que precisamos fazer é instalar a versão mais recente do Ionic CLI, e faremos isso com o NPM. Uma vez que terminamos será capaz de usar este Eli para criar nosso primeiro aplicativo. Vou executar esses comandos no meu Mac, mas você deve ser capaz de acompanhar qualquer sistema operacional que já discutimos até agora . Uma das coisas que eu gosto de fazer no meu diretório pessoal é que eu tenho uma pasta chamada Get You Call it You Wall You Want Projects My Ionic. Realmente não importa, mas eu vou entrar na minha pasta git agora e eu estou indo para executar NPM install dash G para Global em ionic slash cli, o mais tardar. Não surpreendentemente, isso vai garantir que obtemos a versão mais recente absoluta que existe para nós e instalou a versão 6.3, e isso vai ser importante em um momento através do resto deste curso, eu vou ficar na linha de comando. Mas Ionic tem uma ferramenta gráfica baseada na web ferramenta para a construção de projetos biônicos rapidamente chamado de assistente aplicativo Ionic. Vou tentar agora mesmo e ver que tipo de projeto nos dar. Então aqui está no iônico framework dot com barra start. Então vai me pedir um nome. Vamos tentar. Olá, Ionic. Sou parcial roxo. Então eu vou escolher roxo. Eu quero selecionar angular e o menu lateral. Então vamos continuar. Por isso, como já tinha uma conta, consegui iniciar sessão rapidamente. Eu terminei essa parte para você. Então agora o que ele faz é nos dar um comando de instalação personalizado para os Iônicos, Eli, e nos adverte que precisamos ter Ionics Eli 6.3 ou superior, é por isso que eu disse que seria importante mais tarde. Então, de volta ao meu terminal, eu colei o comando que as maçãs iônicas ou nos deram. Então agora vou executá-lo e ver o que ele faz por nós. Ele quer saber se eu quero integrar o aplicativo com capacitor. Eu faço. Mas eu não quero fazer isso ainda, então eu vou tomar o padrão de não. E agora ele vai executar uma instalação NPM para mim não deve demorar muito, mas vou editar a parte mais longa para nós para que você não tenha que passar por isso. Você não adora a magia da edição neste momento? Quer saber se eu quero criar uma conta Ionic gratuita. Eu já tenho uma conta Ionic, mas eu não vou estar ligado a este momento. Então, vou dizer que não. Então é feito tudo o que eu preciso muito direto, e a próxima coisa que ele quer que eu faça é CD nesse diretório. Você pode ver que ele já criou um repositório git, e estamos no ramo mestre. Bem, sem mais delongas, vamos acendê-lo e ver como é. Fazemos isso com um saque iônico, e você deve estar ciente disso. A maioria das coisas que o Ionics Eli força é simplesmente delegá-lo ao Seelye angular nos bastidores. Como você pode ver aqui, ele está executando N G executar, aplicativo, servir, e ele abrir automaticamente uma janela do navegador usando meu navegador padrão para o host local Porta 8100 . A aplicação da força construída parece uma espécie de caixa de e-mail. Na verdade, é o que diz. É uma caixa de entrada que abre as ferramentas de desenvolvedor do Chrome. Eu posso mostrar-lhe uma coisa legal sobre o modelo de menu lateral padrão de Ionic. Na verdade, está usando algo chamado visão dividida de íons, o que nos dá um menu lateral fixo em telas mais largas. Mas à medida que a tela fica mais estreita, como em dispositivos móveis, ela entra em colapso para um menu de hambúrguer padrão. Muito legal, não acha? Então isso fará isso por isso. Acabamos de criar um aplicativo a partir de praticamente nada. Nós instalamos o Ionic Seelye, e usamos o novo assistente Ionic AF para obter esse aplicativo construído no próximo segmento. Vamos dar uma olhada no código por trás disso e ver como é tudo montado. 6. Uma introdução delicada ao Angular: como eu mencionei antes. Este não é um curso sobre angular, entanto. Existem alguns padrões e expressões de sintaxe que eu quero introduzir cedo. Antes de entrarmos no código. Gosto de pensar neles como ISM angulares. Sim, acabei de inventar essa palavra. Existem alguns conceitos-chave peculiar dedo angular, mas eu quero mostrar-lhe antes de precisarmos usá-los. Uma das coisas sobre angular é que ele encoraja uma separação estrita de preocupações. Seu estilo HTML, um código desculpável são mantidos separados um do outro. Essas preocupações podem se comunicar entre si, para compartilhar dados e eventos através de expressões vinculativas e para diretivas angulares, N g quatro e MGF, que permitem que você renderize várias cópias de um elemento ou decida se deve processá-lo em Tudo. Para trabalhar com os exemplos nesta seção, você pode querer abrir um navegador para empilhar blitz dot com barra garfo angular. Isso irá fornecer-lhe uma caixa de proteção imediata, para que você possa acompanhar. Vamos começar por. Falar sobre angular é o conceito de separação de preocupações em angular você. I funcionalidade é encapsulado e componentes um componente pode representar qualquer coisa a partir de pedaço de texto, uma forma de botão ah ou até mesmo uma página inteira. componentes podem conter outros componentes, e eles podem se comunicar entre si através de interfaces muito bem definidas. Para especificar que uma classe tipescript é componente, use o decorador de componentes. Esse é o componente da palavra. Com isso no sinal, os decoradores fornecem informações adicionais anotando ou modificando classes ou membros da classe . Neste caso, o decorador de componentes especifica metadados adicionais toe angular sobre como a classe se comportará . O seletor informa angular para expor este componente usando a tag HTML. Meu modelo de APP u R l indica que a marcação HTML pode ser encontrada no arquivo especificado. Da mesma forma com o estilo de seus males. Observe que esse valor é uma matriz, o que significa que você pode fornecer mais de um arquivo CSS. A porção de ervas executar do código do componente é encontrada dentro da definição da classe. Este contém uma única linha de código, que significa que não está fazendo muito. Mas é isso que queremos dizer com separação de preocupações. O código, a marcação nos estilos são todos separados um do outro. Vamos dar uma olhada na marcação. Isso é encontrado no arquivo de modelo. Este arquivo é puro html contendo o conteúdo visual. A primeira linha é uma tag que faz referência a um componente personalizado chamado Hello. Você pode ver na saída que ele exibe o valor da variável nome do componente APP , que é a palavra angular. O poder de usar componentes é que você pode reutilizá-los, extraindo os elementos comuns e variá-los com base apenas no que muda. Nesse caso, o nome que está sendo passado nessas chaves é um exemplo de uma expressão angular de vinculação no tempo de renderização. O valor dentro das chaves é recuperado do nome da variável dentro do componente glass e passado para o componente hello por meio de seu nome. Atributos. Usar o nome da palavra tanto para a variável quanto para os atributos é lamentável e pode levar a uma pequena confusão desnecessária. Posso mudar a variável componente para outra coisa como pessoa chamada, e isso pode torná-la menos confusa. Se eu alterá-lo na marcação, eu tenho que alterá-lo no componente, retornar ao código do componente e alterou a variável nome para nome da pessoa e, em seguida, mudar seu valor de angular para outra coisa e olhar para o resultado. Angular observa alterações nessas variáveis. Ele irá re renderizar o componente sempre que essas alterações ocorrerem. Para ver um exemplo de componente re uso inação simplesmente fazer várias cópias da tecnologia helo . No entanto, agora temos um problema. Só temos uma variável chamada pessoa A. Podemos codificar, os outros nomes que funcionarão, mas não é muito útil. E se tivéssemos um monte de nomes? Vamos alterar a pessoa chamada Variável no componente e torná-lo um array chamado Pessoas irá adicionar algumas pessoas. A coisa legal sobre a razão, componentes desta maneira. Nós não temos que mudar esse componente baixo em tudo. Nós simplesmente precisamos alterar a tag onde usamos para incluir N G quatro, uma diretiva angular usada para criar várias instâncias do componente hello. Com base no número de elementos na matriz Reference, você usa um N G quatro fornecendo como um atributo para o elemento que deseja replicar. O valor dentro das aspas é a expressão de loop. Consiste na palavra-chave, deixe seguido pelo nome da variável a ser usado dentro do elemento e qualquer um dos seus filhos . A palavra-chave off e o nome da matriz no componente toe loop sobre o asterisco, que é necessário, é uma indicação para angular que esta diretiva irá manipular o dom onde o modelo de objeto de documento páginas de alguma forma. Há uma associação alternativa no imposto que funciona com atributos HTML. Se você quiser definir o valor de um atributo como um valor em seu componente em vez das chaves no momento, você pode cercar o nome do atributo com colchetes e fornecer o nome da variável entre aspas. Aqui, os primeiros incidentes de nome entre colchetes refere-se aos atributos HTML do personalizado . Componente Olá. O segundo, a palavra pessoa entre aspas é o nome da variável na energia para expressão. Pessoalmente, prefiro esse método. Acho que é um pouco mais fácil ler o próximo tipo de agora. Quer discutir o evento dele? Qualquer evento HTML pode se tornar um gatilho para executar uma função no componente. A maneira mais simples de ilustrar isso é criar um botão e fornecer um manipulador de cliques. Em seguida, dentro das aspas, chame a função do componente que você deseja executar. Neste caso, vamos chamar alternância de volta dentro do componente. Precisamos implementar a função taco. Adam é alternado variável na parte superior do componente APP e definir seu valor inicial para false criar a função de alternância, que simplesmente negará o valor de tudo o que é alternado acontece a ser. Agora, quando você clica no botão de alternância, o valor da variável é alternado irá inverter entre true e false. Theis alternada variável é inútil para nós até fazermos algo com ela. Vamos adicionar uma nova tag de parágrafo dentro. O arquivo de modelo, neste caso, irá adicionar um N G se directiva e disse que o valor para é alternado Engy. If irá renderizar condicionalmente a tag HTML. Se o valor dentro das aspas de violetas para um valor e verdade assim como alternamos é ativado e desligado a tag de parágrafo aparecerá e desaparecerá. Finalmente, vamos abrir o componente “Olá”. É muito legal não termos tido que fazer isso até agora. É uma grande ilustração de um método alternativo de criação de um componente. O decorador do componente ainda define um seletor, que novamente é o nome da tecnologia HTML. Mas em vez de se referir ao modelo e estilos dentro de arquivos externos, este componente dividiu-os diretamente neste próprio arquivo com as propriedades de modelo e estilos . Eu não recomendo este padrão exceto para os componentes mais triviais. Como isso é notório, entanto, que mesmo neste exemplo ainda há uma separação geral de preocupações. O modelo, estilos e executado todo o código estão todos em partes separadas do arquivo. Bem, com isso fora do caminho, vamos em frente e construir nosso primeiro aplicativo iônico. 7. Visita guiada do aplicativo: Agora eu quero passar algum tempo revisando o código que foi gerado para nós. Considere isso uma visita guiada do Ionic poderia que a APP foi ou apenas nos deu de volta no meu terminal. Há alguns comandos que vou inserir agora que talvez queiras anotar . 1º 1 abre código de estúdio visual no diretório atual, e eu vou fazer isso com o ponto de código DOT sendo o diretório atual, e o próximo é uma opção para servir Ionic. Isso não faz com que o navegador seja aberto automaticamente. E esse é o interruptor do Dash B. Enquanto isso está sendo configurado em quarto, vamos em frente e olhar para alguns dos códigos que foram gerados para nós. A Primeira Parada vai ser o Ionic Config. O arquivo Jason. Não há muito aqui. Temos o nome do aplicativo e objeto vazio de integrações e integrações é como Cordova ou capacitor, e você pode ver o tipo é angular. Vamos dar uma olhada no arquivo html index dot. No topo, temos um monte de ataques Met. A maioria desses ataques de homens tem a ver com a forma como o aplicativo aparecerá em dispositivos móveis . A equipe Ionic passou anos fazendo isso direito. Eu não recomendo que você mexer com ele para baixo na tag corpo HTML, há um único elemento html personalizado af rota. Foi assim que a APP foi criada. Então vamos dar uma olhada em onde o desenraizamento é definido. Está aqui sob aplicativo de origem em um arquivo chamado componente ponto aplicativo que ts. A primeira coisa a notar é que o decorador de componentes perto do topo. Ele definiu algumas informações sobre o componente e como ele deve ser renderizado. Seletor diz angular qual o nome da tag deve ser, modo que é daí que o desenraizamento vem. É HTML Markup está em um arquivo chamado aplicativo dot componente que HTML, que veremos em um momento. E são estilos personalizados ou um componente de ponto de aplicativo que é CSS na parte superior das variáveis de pessoa de classe . Há uma série de páginas. Então agora você sabe de onde esses vêm ao lado dos rótulos que podemos ver no menu abaixo da lista de páginas. É tradicional em um aplicativo angular para definir todas as variáveis de nível de classe e campos perto do topo, seguido pelo construtor de classe, que é o que vemos aqui na lista de parâmetros para o construtor é onde podemos injetar vários serviços que o componente exigirá. Plataforma e serviço Ionic fornece várias informações sobre o dispositivo ou plataforma. O APP está sendo executado no próximo a tela inicial e barra de status são retenções de Ionic nativo e é específico para executar em dispositivos físicos, que não vamos cobrir neste momento. Inicializar aplicativo é um pouco de boilerplate que eu vou ignorar por enquanto. E nele é o que é conhecido como um gancho de ciclo de vida angular. Há um monte deles, mas este é muitas vezes angular vai chamar ONG em um ele uma vez que o componente e todos os seus filhos foram inicializados. Está verificando a versão oral da página atual para tentar determinar qual página das páginas do Ray está sendo renderizada no momento. Em seguida, vamos falar sobre essas páginas e como navegar entre elas. Todo o roteador de aplicação principal para encontrar aqui, pense em uma rota é um euro. O módulo de roteamento define uma matriz de rotas e descreve o padrão de seu L para corresponder e descreve quais módulos de página se livram para cada um. A primeira rodada tem uma string vazia para um caminho com um redirecionamento para o campo. Isso significa que, se não houver nenhum caminho especificado no aplicativo, ele será padrão para a caixa de entrada barra de pasta ao lado. Sempre que a rota começa com a pasta de palavras Slash, seguida por um i. D ou um nome de página, o aplicativo importará o módulo de pasta e seguirá as próprias regras de roteamento desse modelo. A partir daí, prometo que isto vai começar a fazer sentido enquanto construirmos a nossa própria metade. Agora é abrir a pasta ponto página dot ts e olhar para algo um pouco mais interessante. O componente de página de pasta não tem muito código nele. Tem um construtor no qual é injetado e ativado serviço de rota. Este é um serviço angular que permite obter informações sobre a rota que fez com que a página aparecesse dentro do N G em uma função de TI. A página usa esse serviço para obter o ID ou o nome dessa parte da rota. Essa ideia vai mapear para a caixa de entrada, etc. Agora vamos abrir dobrado até html hera paginada. Esta é a marca acima, e é aqui que a verdadeira magia acontece nesta página. A maioria das páginas Ionic conterá uma tag de cabeçalho de íon. Isso define esse cabeçalho fixo na parte superior da página. Dentro disso está uma barra de ferramentas de íons, um contêiner para botões, menus , títulos, etc para adicionar botões a uma barra de ferramentas. Podemos usá-lo. I na tag botões os atributos ranhura indica onde no cabeçalho, os botões vão tradicionalmente iniciado à esquerda e final está à direita. Isso é invertido nos sistemas operacionais da direita para a esquerda. O botão do menu de íons é o menu de hambúrguer que vimos quando fizemos a aplicação. Mais estreito por padrão, ele mostra e se esconde conforme necessário. Ao lado dos botões não está o título de íon com a pasta de palavras rodeada por duas chaves. Esta é uma expressão angular, vinculativa, e diz angular para substituir essa expressão pelo valor real da variável de pasta . Em seguida, é o conteúdo de íons. É aqui que a maior parte do conteúdo das suas páginas viverá. Contém outro cabeçalho e barra de ferramentas contendo apenas o título. Finalmente, podemos ver uma tag def HTML com outra expressão de ligação e um parágrafo com um hiperlink em. Acredite ou não, isso é realmente uma boa parte da funcionalidade. Claro, há um monte de outros arquivos, mas os que eu mostrei são os que você realmente precisa estar familiarizado nesta fase . O resto será descrito conforme necessário. Agora, antes de sairmos desta pequena turnê, quero fazer algumas coisas divertidas, mas deixarei isso para a próxima lição. 8. Mais algo: Agora, antes de deixarmos este aplicativo Olá Ionic, vamos fazer algumas coisas divertidas. Como você acha que pode personalizar essa lista de páginas? Se você disse modificar a matriz de páginas em, dar-se um tapinha nas costas. Eu notei que não há nenhuma página de e-mail enviada, então vamos criar um muito rápido e ver o que acontece. O que vou fazer é copiar e colar o objeto da caixa de saída. Agora temos dois deles agora, a segunda instância da palavra caixa de saída. Vamos alterá-lo para itens enviados e alterar o ou l duas pastas Vida enviado. Vamos deixar o ícone sozinho por um momento. O Microsoft Outlook usa esse avião de papel para itens enviados. Vamos em frente e salvar a página, porque é aqui que fica divertido. Assim que você salvar essas alterações, o aplicativo será reconstruído automaticamente e o navegador será recarregado para refletir essas alterações. Então agora vamos mudar o ícone da caixa de saída e vamos configurá-lo para álbuns. Deixe-o reconstruir e ver o ícone mudar. O que você acha que vai acontecer agora se você clicar no novo menu enviado? Nós não criamos uma nova página ou uma rota, então vamos obter um 404 Não, o componente pasta ainda será renderizado com seu nome dito para a parte ID ou nome da rota, que é enviado. Isso ocorre porque o componente de pasta é um objeto bastante genérico. Nem todas as páginas serão tão limpas, mas vamos fazer uso deste padrão em capítulos posteriores do curso. Se você quiser ver de onde esses ícones vieram, visite I am icons dot com para obter mais informações sobre os componentes, você pode clicar no link componentes bem no meio do aplicativo Olá Ionic em si, e isso é um wrap para esta lição e este capítulo. Você deve ter um ambiente de desenvolvimento iônico completamente instalado saber como criar um novo aplicativo iônico e até mesmo fazer algumas pequenas ações personalizadas. Então vá em frente, regozije-se com seu novo poder, brinque um pouco entre agora e a próxima lição. Espero vê-lo lá em breve 9. @10Dance - O aplicativo de demonstração: Oi, aqui é Mike Callahan. Neste capítulo, vamos construir um U I. Usando HTML e a estrutura Ionic. Vou começar mostrando a você uma demonstração do aplicativo finalizado e, em seguida, construí-lo gradualmente do zero sobre as próximas lições que o aplicativo estará construindo ao longo. O curso é chamado de dança 10. É um aplicativo de frequência originalmente projetado para ajudar os professores da escola dominical a manter o controle dos alunos em suas aulas. Inicialmente, a Apple consiste em três páginas home page, uma página de lista de turmas e um detalhe do aluno. Página de lado, Menu permitirá que os usuários naveguem facilmente entre a casa nas páginas da lista de classe. Analisaremos como o menu é criado e como a navegação é configurada para mover de página para página. Naturalmente, as páginas iniciais onde o aplicativo começará. Não há muito aqui, a não ser um componente de placa de íons. Vamos rever os conceitos básicos deste componente para exibir uma imagem e algumas informações de texto sobre o aplicativo. A página da lista exibe o aluno registrado para a classe e contém a maioria dos adversários Ionic vai usar. Os alunos são exibidos coletivamente usando uma lista de íons, com cada item da lista consistindo em itens de íons i n botões, Eu sou ícones e muito mais. Passaremos a maior parte do nosso tempo no capítulo cobrindo esta página à medida que desenvolvemos sua funcionalidade com folhas de ação, alertas e notificações do sistema. Finalmente, a página de detalhes do aluno é onde podemos visualizar e editar vários detalhes sobre um único aluno acabará por usar esta página para discutir formulários Ionic. Neste capítulo, Tudo o que vamos fazer é colocar para fora os componentes e comprar alguns dados para eles. Em cada passo do caminho, explicarei os componentes que selecionei e, em seguida, fornecerei o código que os implementa . Espero que esteja tão ansioso quanto eu, então vamos começar. 10. Como criar o novo projeto: Ok, agora que você viu o que vamos construir, vamos mergulhar e colocar o projeto em funcionamento antes que eu comece qualquer novo projeto Ionic . Gosto de me certificar de que estou nas últimas dinâmicas, Eli. Então vamos fazer isso primeiro. No terminal de sua escolha, digite o Command e PM Install Dash G para Global em ionic slash eli No mais tardar. Se você já estiver na versão mais recente, nada será instalado. Em seguida, execute o Ionic Start Command quando solicitado. Selecione o quadro que será usado em seguida. Forneça o nome do projeto. Vou chamá-lo de “10 Dance”. É uma peça de palavras que conheço, e é horrível. Selecione o modelo em branco para este será implementar um menu lateral, mas eu prefiro ter-nos construí-lo a partir do zero. Além disso, desta forma será excluir muito menos código de boilerplate. Você não deve ir atrás do capacitor. Mas se o fizer, vá em frente e responda. Sim, eu não vou trabalhar com esse fluxo, então todos entre nós conectando com Maionica contam. Uma vez que o projeto é criado, podemos abri-lo no eu d para dar uma olhada ao redor. Não há muito aqui porque usamos o modelo em branco. Há realmente apenas uma página inicial que está tudo bem, porque vamos construí-la muito rapidamente. Nós também podemos voltar para o terminal e disparar um rápido comando de serviço Ionic e dar uma olhada em como ele vai renderizar. Aqui eu tenho cromo mostrando como ele pode parecer rodando em um iPhone novamente. Não há muito conteúdo para falar, então vamos em frente e cuidar disso imediatamente. 11. Modificando a página inicial: A primeira coisa que eu quero fazer é reformular a página inicial como é a página de destino abside. Não haverá muito conteúdo, apenas alguns textos e uma imagem dentro de um cartão de íons. E I on Card é um componente projetado para embrulhar peças básicas de informação por padrão. Um cartão tem uma borda cinza, bordas arredondadas e uma sombra sutil. Como acontece com todos os componentes Ionic, seu estilo visual mudará levemente quando renderizado em um android versus um dispositivo IOS. As cartas podem ser tão simples ou tão complexas quanto você quer que elas sejam. O cartão que eu prevejo para a página inicial bem olhar semelhante a este, consistindo de uma imagem seguida por um cabeçalho de cartão contendo ambos de legenda e um título. E finalmente, um breve parágrafo intra. Vamos criar essa página agora, ao lado desta lição, há uma imagem que usarei na página inicial. Baixe essa imagem agora e solte-a em uma nova pasta. Fonte. Imagens de ativos, coma, sala de aula ponto jp G ou J Peg. Abra a home page, que é o arquivo HTML no código-fonte. Aplicativo. casa. Exclua tudo dentro do olho na tag de conteúdo. Altere o valor dentro da tag de título de íon da página inicial em branco no conteúdo de íons agora vazio em um componente de cartão de íons dentro da placa de íons em uma tag de imagem HTML padrão com a fonte definida para o arquivo que você acabou de baixar, que deve ser imagens de ativos, sala de aula Dodge, APEC. Para ser um bom cidadão, você também deve fornecer um altar atributos. Estou usando a palavra sala de aula. Vamos fazer uma pausa aqui e ver como é. Em seguida, aproveitaremos o recarregamento ao vivo quando terminarmos a página. Quero mostrar-lhe uma característica muito legal do código S, assumindo que você está usando. Caso contrário, insira os comandos em qualquer terminal que você preferir. V s código tem um terminal construído que você pode acessar pressionando controle Back tick. Essa deve ser a chave ao lado da chave. Vou manter este terminal aberto durante a maior parte do percurso, para não termos de saltar tanto dentro do terminal. Digite o comando NPM. Comece até agora, temos usado Ionic servir, mas eu quero que você comece a se acostumar a usar NPM é seu script runner. Não importa muito agora, mas eventualmente dependeremos do PM para fazer tarefas mais complexas. Quarto, por conveniência. Eu também vou tentar manter o navegador aberto e ter tudo girando em tela cheia . Juntos, você pode ver a home page renderizada com seu novo título, o Ion Card e a imagem Voltar no código e um componente de cabeçalho de cartão de íons por si só. Isso não vai fazer muito imediatamente dentro que em um cartão de íon. Legenda com o gerente de atendimento da sala de aula texto e imediatamente depois disso e eu no título do cartão com o texto em 10 Dança. Você não tem que soletrar da maneira boba que eu fiz. Se você não quiser salvar o arquivo e certifique-se de que ele é renderizado se ele não se certificar de que o cabeçalho do cartão de íons envolve o subtítulo intitulado Elements and Look for unclos html imposto Após a tag de fechamento de cabeçalhos de cartão de íons em uma tag de conteúdo de cartão de íon. E dentro disso uma tag de parágrafo HTML normal. Você pode colocar o que quiser dentro disso, salvar o arquivo e verificar os resultados. Deve ser mais parecido com o que tenho aqui. Vamos fazer mais uma coisa agora antes de sair da página inicial, vamos colocar em um link para a página da lista, que será construído logo após a tag de parágrafo em uma tag âncora HTML com dois atributos . Um link de roteador definido para lista e direção ao redor definido para a frente. Dentro da tag fornece-lhe textos como Ir para Roster. Isto irá criar um botão com declarado de navegação para que possamos ir para a página de lista uma vez que ele existe. A razão pela qual usamos link roteador em vez do típico uma árvore de atributos é para que Ionic irá melhorar a animação de navegação. Para nós, a direção do roteador significa usar a direção típica de animação para a frente das plataformas. Poderíamos também ter especificado de volta uma rota que nos daria uma animação ligeiramente diferente . Salvando a página. Você pode ver o link renderizado. No entanto, clicar nele não fará nada. Ainda não construímos a página da lista, então faremos isso a seguir 12. Como adicionar a página Roster: Até agora, você deve estar confortável adicionando tags Ionic em uma página, mas não criamos uma nova página do zero. Vamos resolver isso agora, mas criando o que será indiscutivelmente a página mais complicada do aplicativo para criar uma nova página iônica. Podemos usar os Iônicos, Eli ou o Angular Seelye. Uma das coisas que eu mais gosto sobre o uso angular com Ionic é o modelo rico ing que angular traz para a mesa. Como já vimos, Ionic delega grande parte de suas operações de linha de comando para o cli angular subjacente aumentando-o quando apropriado, criação de páginas é um desses momentos apropriados no terminal. Eu vou parar o comando de início do NPM e eu vou sob o comando Ionic Gerar página lista, a opção Death Stash Dry Dash Run. Eu gosto de usar a opção de corrida a seco como eu tenho a chance de ver o que vai acontecer em coisas ajustadas se eu não gostar do que eu vejo. A parte superior que eles recebem me mostra duas coisas aqui, uma que ele vai criar uma nova pasta de lista, uma página, um módulo separado para essa página, alguns testes de unidade e estilos. Além disso, ele adiciona automaticamente a página no sistema de roteamento apse para que você possa ver muito do trabalho grunhido tem feito para você. Eu também tenho uma mensagem de que o Ionic CLI está pronto para ser atualizado e eu vou em frente e fazer isso. Mas eu não vou fazer você assistir. Vou seguir em frente e executar novamente o mesmo comando desta vez sem a opção de corrida a seco, porque estou feliz com o que me vai dar. Porque eu parei o servidor. Vou em frente e executá-lo novamente com o NPM começar. Agora que terminou a construção, posso voltar a renderizar a home page. Uma vez que eu clicar no link da lista, a página de lista padrão apenas grande será exibida. Não há muito lá, mas podemos tratar disso em breve. 13. Serviço de estudante: antes de reformularmos a página da lista. Precisamos obter alguns alunos para exibir mais tarde vai querer amarrar a lista em um dia para armazenar algum tipo, mas não precisamos fazer isso apenas para obter o David exibido na página. Para isso, vou usar um serviço de estudantes simples que podemos injetar nas páginas que precisam dele. Mais uma vez, vamos usar a CLI para criar o serviço. Neste caso, não importa se usamos o CLI angular ou o Ionic Eli. Então, para agitar um pouco as coisas, vamos usar a CLI angular. Digite o comando N g G para gerar estudantes de serviço, que é o nome do serviço e, novamente, use o comando dry run. Este comando não funcionou e aqui está o porquê. Quando instalamos o pacote Ionic CLI, instalamos globalmente. No entanto, o início do Ionic commit quando ele cria um projeto Ionic instalado. O aliado NGC localmente é a dependência local do projeto, então não está no meu caminho. Meu sistema não sabe onde encontrá-lo. Há duas maneiras de contornar que podemos instalar o NGC globalmente ou podemos usar um pequeno comando utilitário fornecido por nota e em PM chamado MPX. Se pré penned o mesmo comando com N P X, essa ferramenta sabe olhar dentro da minha pasta Módulos Node para o comando especificado. Então vamos apenas executar isso novamente dentro do P X, e agora você vai vê-lo funcionar. E mais uma vez, estamos usando a corrida seca para ver o que ele está indo para o dio. Por padrão, o serviço será criado na pasta APP, mas não dentro de uma pasta própria, e ele será criado com o teste de unidade. Agora vamos em frente e executá-lo novamente sem o motorista e a bandeira quando terminar. Abra os alunos ponto serviço dot ts. Dentro deste arquivo criará uma constante de interface e uma função. Ele irá criar um objeto estudante como uma interface. Lembre-se, as interfaces não existem no script Java e desaparecerão completamente após a compilação. Seu único propósito é permitir o tipo de parâmetro, verificando auto-completar código e intel um sentido dentro do código Enter. Neste ponto, eu não sei tudo o que um objeto estudantil deve conter, mas esses campos devem ser suficientes para nossos propósitos. Agora, esses pontos de interrogação na maioria dos campos indicam que esses saltos são opcionais. Então, para criar um objeto de estudante válido, eu preciso fornecer pelo menos uma identificação de nome e sobrenome. Não, eu gostaria de apontar esse campo de status porque ele pode parecer um pouco estranho no início, mas esta linha diz que o status é uma string opcional, mas ele só pode ser definido como um dos dois valores específicos presentes ou ausentes. Este é um tempo compilado datilografado na restrição e não terá qualquer influência no script de trabalho gerado. O que ele vai fazer é nos impedir de compilar o código. Se alguma vez tentarmos usar qualquer outro valor para este campo, ele também irá fornecer este auto-completar código ao definir ou comparar valores com o campo, que é uma boa conveniência. Vamos criar uma matriz de alunos que podemos usar no lugar de um banco de dados. Por enquanto, estou chamando de alunos Mark. Agora, para a função dentro do corpo da classe, vamos criar uma função chamada obter todos os alunos. Isso vai devolver uma cópia do conjunto de estudantes simulados, e eu estou fazendo isso com o operador de propagação, que essencialmente uma abreviação para apenas fazer uma cópia superficial do Iraque mais tarde irá desenvolver este serviço com mais funcionalidade. Mas, por enquanto, isso nos levará onde precisamos estar. É enganosamente simples, mas só porque não faz muito. Agora vamos voltar para a página da lista e fazer uso dela. 14. Página de roster de estudantes: Agora precisamos colocar os alunos que acabamos de criar na página da lista. Abrir lista de dúvidas ponto ts Pouco antes do construtor, precisamos criar um dedo variável, manter a matriz de alunos que ele precisa ser importado do serviço estudantil. Em seguida, vamos precisar injetar uma referência ao serviço estudantil nas páginas. Construtor. Fazemos isso inserindo um novo parâmetro privado chamado Serviço de Estudantes do Serviço de Estudantes Tipo . Eu sei que é confuso. Certifique-se de obter o invólucro certo ou angular, e o texto datilografado não ficará feliz com você. Marcar o parâmetro é privado automaticamente expõe o parâmetro como um membro da classe de componente. É um atalho útil. Tipos fornece para nós dentro do construtor o que é chamado de obter todos os alunos função do serviço estudantil e um sinal de que os resultados da matriz componentes alunos agora abrir o arquivo html página de lista para que possamos criar algum mercado para renderizar o alunos os cabeçalhos já definidos e seu título já definiu a lista. Então não há nada que precisamos fazer aqui. Espero que o cabeçalho de íon seja familiar para você como vimos na página inicial e também durante a visita guiada. Já temos algum conteúdo de íons, mas está em branco. Então, dentro disso, vamos introduzir um novo componente. A lista de íons e I Am List é outro componente de contêiner projetado para envolver vários tipos de itens de uma maneira visualmente consistente. I em listas contêm coisas chamadas olho em itens, que por sua vez, etiquetas de íons rap alto em botões, ícones de íons, capataz colocar campos e assim por diante. Usaremos todos esses e mawr durante este curso. I em listas também pode ser usado para implementar itens deslizantes, que você provavelmente já viu antes. Essas são opções que aparecem somente quando você desliza para a esquerda ou para a direita em um item revelando uma opção menos usada ou potencialmente perigosa, como excluir dentro da lista de olhos. Enfraquecer iterado sobre a matriz de estudantes com um N G quatro directiva sobre o elemento mais externo dentro da lista. Neste caso, ele vai ser um item de íon componente deslizante no lado de atribuição do N G quatro fornecer vamos estudante de alunos. Isso criará um olho em itens forrando oponente e tudo dentro dele para cada aluno na matriz de alunos I no item deslizante nos fornecerá um novo item, deslize ou opção de slide. Dentro disso, haverá uma tag de item de íon. Este componente irá encapsular todo o item da lista que implementamos com um olho no componente item dentro do item de íon em um ícone de íon e um rótulo de íon como irmãos, disse que o atributo slot ícone para iniciar e definir os atributos de nome duas pessoa contorno do rótulo iônico. Vincule algum texto para o último e primeiro nome dos alunos separados por uma vírgula ao lado deles. Vamos criar mais dois contatos de íons I, que renderizaremos condicionalmente com base no status de ausente ou presente do aluno. A 1ª 1 é para presidente e vamos configurá-la para o ícone I. O segundo deve ser exibido quando o aluno está ausente. Então, para que a esquerda usou o olho fora do contorno, que é um contorno de um olho com uma linha através dele. A maneira como renderizamos os ícones condicionalmente é adicionar a diretiva NGF a cada ícone. Um avaliará a verdade. O status de alunos está presente. O outro será renderizado se o status de estudante estiver ausente. Observe que é totalmente possível que o status de alunos não seja nenhum valor porque o campo de status é opcional. Nesse caso, nem eu vou ser renderizado, que é o que queremos. Salve o arquivo agora e veja como ele se parece. Se tudo correu bem, todos os nossos alunos são exibidos é esperado. Vamos encerrar esta lição terminando esse item deslizante imediatamente antes da etiqueta de fechamento deslizante do item íon . Vamos adicionar uma tag de opções de item de íon com os atributos laterais definidos para finalizar. Isso significa que queremos que a opção apareça no final do item, ou seja, quando deslizamos para o início do item, pouco aparecerá dentro dessa tag em uma única opção de item íon. Tecnologia. Certifique-se de que você se importa com o plural singular aqui. A tag plural é o conjunto tecnológico externo, este é cor para perigo, que por padrão é uma cor vermelha laranja de aparência assustadora. Vamos lidar com o manipulador de cliques mais tarde, então, por enquanto, simplesmente disse o valor das tags para a palavra excluir. Salve o arquivo e atualize a página. Neste ponto, a única interatividade é um controle deslizante em si. Então clique e arraste um item para o início do item que você deve ver o botão de exclusão , você pode clicar nele. Ele se comporta visualmente, como você esperaria, mas ainda não vai fazer nada. Na próxima lição, conectaremos alguns novos comandos para esta página para que possamos gerenciar nossa lista de alunos. 15. Adicionando funcionalidade à Roster: se você fosse um professor e esta fosse uma classe real de alunos, há uma série de coisas que você gostaria de ser capaz de fazer com o seu aplicativo. Algumas dessas coisas estão marcadas ausentes ou presentes. Navegue até uma página de detalhes para ver ou editar informações que não estejam visíveis na lista. Remova um aluno da turma com os avisos apropriados. É claro que, nesta lição, vamos melhorar o U Y da página da lista para fazer todas essas coisas. A primeira coisa que eu quero fazer é adicionar um menu para cada aluno na lista de íons. Para isso, vamos usar uma folha de ação iônica. Na Folha de Ação é um menu que exibe uma espécie de diálogo. Ele geralmente contém pelo menos dois, mas geralmente botões de ação mawr que estão contextualmente relacionados de alguma forma. No nosso caso, o contexto é o do aluno atualmente selecionado e eu na folha de ação é Ionic implementação específica prestação folha de inação que olha automaticamente para casa em um iPhone ou um android. Botões e folha de inação podem conter uma função que pode ser destrutiva ou cancelada . Destrutivo é usado para indicar que algo permanente está prestes a acontecer e é frequentemente usado para a operação de exclusão em dispositivos IOS botões com o rolo destrutivo renderizado forma diferente do resto, geralmente em vermelho. Um botão cuja função é cancelar sempre será renderizado por último na parte inferior da planilha. Este botão não deve ter outra finalidade a não ser descartar a folha. Sem nenhuma ação tomada. Os botões e a inação que ela pode ter texto e ícones, mas a maneira como você os define é diferente de um componente normal I desbutton, nossa folha de ação irá incluir botões para marcar um aluno está presente ou ausente o lead um aluno ou cancelar o ação e não fazer nada. Para fazer isso, precisamos fazer um pouco de configuração primeiro no arquivo de pontos pe dot ts. Precisamos injetar o controlador de ação ovelha nos componentes Construtor. Isso nos permitirá construir uma folha de ação em resposta a um clique no botão. Em seguida, precisamos ir em frente e fazer uso da folha real. Então eu vou colocar uma função aqui chamada Folha de Ação Presente. Vou esperar que algumas chamadas retornem uma promessa. Então a função precisa ser uma pia. Ele vai aceitar o aluno para que possamos exibir a folha de ação apropriada para o aluno foi clicado. A primeira coisa que quero fazer é criar a própria folha de ação, o que fazemos chamando as folhas de ação. Controladores criam função, criam retornos de promessa. Então, queremos esperar por isso. Criar leva um único parâmetro de opções, que eu vou explicar enquanto vamos. O primeiro é atributos de cabeçalho, que serão o título da folha de ação. E eu vou definir isso para a concatenação dos alunos Primeiro e Últimos Nomes notar que estamos recebendo uma boa inteligência aqui. A razão pela qual o código V está reclamando é porque ele sabe que eu preciso adicionar um botão ao redor e eu não fiz isso ainda, Então esse é o mínimo para uma folha de ação. Mas como tenho certeza que concordará, isso não seria muito útil. Então o primeiro botão vai ser a marca presente. Mas então quando você disse que é texto para marcar presente, bem disse que é ícone para eu e, em seguida, irá fornecer uma função de seta como seu manipulador para definir o status de alunos selecionados para apresentar. E como prometi, você notou que havia uma inteligência. Mostre-me com o valor legal dos status. O próximo botão será o mercado oposto, ausente e usará o ícone I off. Ou melhor, o ícone de contorno de olho fora. E sua função manipulador também será uma função estreita para definir o status dos alunos para ausente. O próximo botão é o botão excluir, que usará delete é seu rótulo de texto, o ícone de lixo, e isso é opcional. Então, se você quiser definir o manipulador para chamar a função deletar estudante, eu não vou me incomodar agora. Na próxima lição. Vou lidar com isso de forma diferente, então não vou me incomodar em ligar para nada. E lembre-se, esses ícones e seus nomes vêm de ícones de íons ponto com e, finalmente, o botão cancelar. Este terá um texto de cancelar e eu meio que fechar, e podemos definir o papel para cancelar e não se preocupar com a função manipulador em tudo, e isso completa a criação da folha de ação. Ter a folha de ator não vai fazer nada , , até chamarmos o presente. Então, como eu disse, os controladores de folha real criar função de retorno para promessa. Então aguardamos essa loja de promessa, o resultado da promessa na folha de ação constante. E só então podemos chamar presente, que também vai devolver uma promessa. Então aguardamos a folha de ação ponto presente. Próximo. Vamos criar uma função para excluir um aluno. Mesmo que eu não esteja ligando para esta lição, eu quero configurá-la para o caso de você querer brincar e ligar para si mesmo. O código irá simplesmente filtrar a matriz de alunos que obtivemos do serviço de estudantes ao lado esquerdo em um botão para iniciar a folha de ação. E fazemos isso na marcação de página de lista e uma tag de botões de íons imediatamente após os dois ícones existentes e logo antes do imposto de fechamento do item de íon. Dê os botões de íon tag um slot depois e disse o seu fim, que significa que ele vai aparecer no final do item. Em seguida, adicione às tags de botão de íon como Filhos da tag botões novamente. Assista aqueles singular e plural dentro de cada botão em um olho na minha calma com os atributos de slot , disse ícone do dedo do pé em Lee, especificar o ícone do primeiro como reticências contorno horizontal e definir o segundo 1 para Chevron encaminhar contorno em um manipulador de cliques para o botão com as reticências quando clicado. Queremos chamar a função presente folha de ação, passando o aluno atual de seu caminho. Por enquanto, deixaremos o botão com o Chevron sozinho. Terminaremos isso mais tarde. Salve o arquivo e dê uma olhada nos resultados. Clique nos botões e ver que eles olham e se comportam como seria de esperar que Chevron frente não vai fazer nada. Se você conectou, excluir o aluno deve ser imediatamente excluído. Eu não fiz isso para não fazer nada. Notei algo que esquecemos. Eu mencionei anteriormente que normalmente em um dispositivo IOS, qualquer coisa com o papel de destrutivo, como excluir, estaria em vermelho. Então, há algumas coisas que eu quero apontar aqui. O modo de exibição padrão do Ionic não é do Iowa. Na verdade, é design de material da maneira que você pode forçá-lo a mudar. Basta abrir as ferramentas de desenvolvedor e o cromo. Deixe-me consertar isso. Coloque as ferramentas de desenvolvedor na parte inferior, e então o que acontece se selecionarmos o modo de barra de ferramentas do dispositivo? Então podemos dizer como queríamos agir. Então deixe-me abaixar isso para você. Agora é simplesmente em resposta ao motor. Mas eu posso dizer especificamente para ele ir para o que essencialmente é uma versão para iPhone, e nós até chegar com o modelo apropriado, até mesmo obtendo o quadro certo do dispositivo. Mas o que você verá aqui é, se eu clicar nele, ele ainda está em design de material. Então a maneira de corrigir isso é atualizar a página, o que eu vou fazer com o Comando são agora. Você pode ver que os ícones ficam azuis. O texto na barra de título foi centralizado e a fonte mudou. Então agora é um modo IOS. O Chrome agora está relatando ao Ionic que é um dispositivo IOS, o que é realmente liso, mas agora observe o que acontece quando eu chamo a folha de ação. A pista ainda não está lida, e você provavelmente viu por que eu me lembrei de fazer isso com isso. O botão de exclusão. Aqui você pode ver que a cor é perigo. Então, se você voltar para a lista de pontos da página dot ts, onde a folha de ação é definida, você pode ver que o lead está faltando algo. Está perdendo seu papel. Tudo o que precisamos fazer é dar um rolo de destrutivo. Uma vez que lhe damos essa função, salvamos o arquivo, a página traseira enders. E agora está lido como esperávamos. Então, estou feliz por lembrar de fazer isso antes de terminar esta lição. Salvaremos o resto da funcionalidade para uma lição futura. Por enquanto, se quiser, sinta-se à vontade para brincar. 16. Confirmação e notificação do usuário: a forma como o código está atualmente escrito. A exclusão de um aluno da lista pode ser feita acidentalmente. Se o usuário clicar ou tocar no botão errado, não há aviso ou confirmação solicitada. Precisamos pedir ao usuário para confirmar a operação de exclusão antes que ela aconteça. Da mesma forma, depois de um aluno sair, não há indicação de que a ação tenha ocorrido. Além do nome que desaparece da lista irá resolver ambas as deficiências em breve Ele não considerou para uma soneca para tomar uma ação destrutiva sem pelo menos avisar o . usuário. É melhor pedir confirmação ao usuário, e é isso que faremos aqui. Na lição anterior, eles manipulam para o botão excluir simplesmente chama a função delete student. Seria melhor obter confirmação primeiro. Podemos fazer isso usando um olho em alerta, e eu em alerta é um componente móvel você I que fornece um simples aviso para o usuário que algo importante está prestes a acontecer, e opcionalmente fornece um meio para cancelá-lo. Aqui está o que eu tenho em mente para implementar a confirmação. Tal como acontece com todos os componentes Ionic, ele renderiza com a aparência apropriada em ambos Android e iPhone Dentro do código de componente de páginas de lista que você precisa injetar dialetos. Controlador de alerta para o construtor. Certifique-se de que ele é importado na parte superior do arquivo. Em seguida, crie uma nova função chamada alerta Excluir presente. Ele precisa aceitar um objeto estudante assim como presente estratégia folha de ação entre a criação da folha de ação e o alerta de exclusão. Quase idêntico. A função de criação leva e opções objeto assim como os controladores de ação agitar criar função faz e ele retorna uma promessa que resulta para o alerta. Existem três atributos que controlavam o texto dentro e eu um alerta. O atributo de cabeçalho é uma string que aparece na parte superior do trabalho. Você é algo como deletar esse aluno. Os atributos de subcabeçalho aparece apenas dentro do corpo de alerta definir isso após ser para despertar Capitão Nação dos alunos primeiro e sobrenome. Assim, o usuário sabe exatamente qual aluno está prestes a ser excluído. O atributo message é o corpo principal do alerta usar a string como esta operação não pode ser desfeita. Finalmente, o alerta precisa de uma matriz de botões. Você define esses botões exatamente da mesma maneira que você fez para a planilha real. O primeiro botão é o botão excluir. Ele precisa de um manipulador que irá excluir o aluno. O segundo botão deve ser um botão de cancelamento com a função de cancelar. Vou usar o texto. Não importa, não precisa de um manipulador. Agora. Reboque tudo isso juntos. Role até a função da folha de ação atual. Encontre o botão excluir se você ligou. Excluir estudante. Substituído por uma chamada para apresentar o alerta Excluir. Se você pulou como eu fiz, basta adicionar uma função estreita, como os atributos manipulador, que chamará alerta elite presente. Não se esqueça de passar o aluno, se você lembrar, é um outro botão excluir na página com um dentro da opção de item íon , no entanto, isso não acontece no arquivo componente, mas na marcação. Então abra o arquivo html da página da lista e encontre o componente de opção do item íon chamado delete em um manipulador de cliques e coloque a mesma chamada que fizemos antes. Apresentar o alerta de chumbo com o aluno neste caso, a variável estudante vem da expressão n G quatro de nove on-line. Salve o arquivo e a extremidade traseira do navegador Se você é muito águia de olhos, você vai notar que eu esqueci algo. Então, se selecionarmos excluir da folha de ação, nada acontece. Da mesma forma, se nós dragamos seletivamente, nada acontece. Você sabe onde o falso nós criamos o alerta? Mas nós não a usamos. Esse era o objetivo e esperar em primeiro lugar. Então, a maneira como você faz isso agora, como você chama alerta dot presente exatamente da maneira que fizemos com a função presente folha de ação , ele também retorna a promessa, então não é uma má idéia esperar por ele, embora em realidade não é super necessário. Então vamos tentar isso rapidinho. Salve o arquivo. Fomos para a página e agora excluir vai nos perguntar. Podemos dizer, Não importa ou podemos ir em frente e deixá-lo e ele se foi muitas vezes um aplicativo precisa fornecer uma notificação para o usuário que algo aconteceu. Mas não é tão crítico que você queira interromper o fluxo do aplicativo completamente . As notificações do Toast preenchem essa função perfeitamente. Um brinde é um banner informativo pequeno e discreto pop-up. Por convenção, ele deve transmitir uma mensagem curta que aparecerá por um breve período de tempo antes desaparecer automaticamente. Algumas notificações do sistema também contêm uma maneira para o usuário descartá-la antecipadamente, decidindo se deve ou não usar um brinde. A notificação é simples. A mensagem exige que o usuário tome uma ação? Não é importante se o usuário perder. Se a resposta para ambas as perguntas for não, a notificação do sistema será perfeita. A implementação Ionic de uma notificação do sistema é o olho no componente do brinde. É provavelmente o mais básico de todos os Iônicos. Você I componentes. Você pode construir um com muito pouco esforço. Sua forma mais básica consiste em uma mensagem e uma duração, e eu no brinde, poderia ser posicionado verticalmente na parte superior, meio ou inferior da tela. Está sempre centrado horizontalmente. Você pode colori-los com o atributo de cor, fornecendo qualquer confiança de cor iônica ou sua própria cor personalizada. Você pode adicionar botões e ícones. Não vamos fazer nada disso. Se você quiser personalizar seu olho no brinde depois de terminar a lição, sinta-se livre no arquivo de componente de páginas da lista. Precisamos adicionar o controlador de brinde Ionic ao construtor de novo. Certifique-se de que ele é importado no topo. Em seguida, modificar excluir aluno para criar e imediatamente apresentado notificação do sistema. Seus atributos de mensagem devem conter uma breve declaração mostrando que o aluno foi excluído. Seja tão detalhado quanto quiser, mas lembre-se, o mais curto geralmente é melhor. A posição padrão do brinde é centralizada verticalmente na tela. Decidi movê-lo para o topo, mas francamente, você pode colocá-lo onde quiser. Você pode escolher entre cima, meio ou baixo. O atributo duration controla quanto tempo o olho no brinde aguardará antes de se despedir automaticamente . A duração é um inteiro em milissegundos. Tenha cuidado para não especificar uma duração muito curta, e definitivamente não passe uma força se você omitir a duração. Atributo. O brinde permanecerá na tela indefinidamente, exigindo a intervenção do usuário para descartá-la, que exigiria um botão se você notar que o aguarde está sublinhado. E isso é porque eu não marquei estudante da aldeia como uma pia que vai fazer isso acontecer. Você pode fornecer uma matriz de botões para um olho no brinde. Só é com a folha de ação e o I um alerta. Se você se sentir tão inclinado a ir em frente e adicionar um e, finalmente, não vamos esquecer de ligar. Presente no brinde, e isso é tudo o que há para ele. Salve o arquivo e saiu do navegador. Refresque. Agora, quando você excluir um aluno além do nome do aluno desaparecer da lista depois de ter feito a confirmação, você também receberá o brinde de notificação. Se você quiser algumas idéias sobre como você pode melhorar essa experiência, eu fornecerei alguns desafios mais tarde, logo após o vídeo final. 17. Navegação básica: Antes de encerrarmos este capítulo, eu quero adicionar um menu para facilitar a navegação entre a página inicial na página de lista , o menu irá principalmente olhar e agir como o da visita guiada e Capítulo um, mas será um um pouco mais simples. No Ionic, você cria um menu com o componente de menu íon. O menu de íons é um componente iônico que implementa menu de lado. Como acontece com a maioria dos outros componentes de contêiner Ionic, ele pode conter um cabeçalho com uma barra de ferramentas no título, juntamente com algum conteúdo de íons. O menu lateral típico consiste em uma lista de páginas feitas a partir de uma lista de itens íons. O menu pode ser personalizado com uma variedade de comportamentos. Se você quiser que o menu obscureça o conteúdo da página principal, você concorda. É tipo após butto overlay. Outras opções são push, que fez com que o conteúdo da página deslizasse com o menu ou você pode escolher revelar para obter um efeito semelhante, mas de repente diferente com revelar o menu. conteúdo em si é estacionário, enquanto que com push o conteúdo do menu se move com o conteúdo da página. Você pode especificar em que lado o menu está definindo o lado após a exibição como início ou fim. Se você escolher terminar, certifique-se de que seu ícone de menu está do mesmo lado da barra de ferramentas de conteúdo principal, ou ele ficará estranho. Você pode desativar o deslizamento do menu definindo gesto de deslizar como falso. Se você quiser que um item no menu feche o menu ao selecioná-lo, certifique-se de envolvê-lo com um olho no componente de alternância do menu. Caso contrário, o menu permanecerá aberto. O menu de íons também pode ser usado para abrir um menu. Daí a alternância do nome. Encontre uma falha. Ele se esconderá automaticamente sempre que detectar que seu menu está desativado ou está sendo apresentado em uma dor dividida, como estamos fazendo aqui. Por causa disso, se você quiser que ele fique visível o tempo todo, certifique-se de definir sua auto ocultar precisa. Tão falso. Não me pergunte quanto tempo levei para depurar a primeira vez que esqueci. Há mais para um menu, mas esses são os conceitos básicos. Então vamos construir um agora abrir aplicativo ponto componente que ts Este é o lugar onde irá definir o menu. Dentro da classe de componente criado matriz de para objeto liberais um para a página inicial com o Ural apropriado e ícone um para a página de lista com sua lista Seu L Slash e para o ícone, Vamos usar pessoas. Em seguida, vem o menu em si, dentro do componente ponto aplicativo dot html em uma dor de divisão de íons e disse que seu conteúdo eu d para significar tudo o resto na página deve estar dentro da dor dividida apenas dentro da dor dividida e antes da tomada do roteador em um menu de íons com o seu conteúdo i d. Depois de ser também dito para mim e disse É tipo toe sobreposição Pushor revelar. Pessoalmente, sou parcial para sobrepor, mas use o valor que preferir. Aqueles conteúdo I desvaloriza dizer os componentes que roteador em que eles estarão controlando assim antes que se esqueça de fazê-lo, disse que os componentes de saída do roteador íon I. D. 10 Main. Isso irá amarrá-los todos juntos imediatamente, dentro do menu olho no menu em um cabeçalho de íon contendo uma barra de ferramentas de íons, e dentro disso e eu no título, definir o valor do título para menu logo após o cabeçalho de íon em um conteúdo de íon em apenas dentro disso e eu na lista. Este é o lugar onde o menu será construído e vai fazer isso por iteração sobre a matriz de páginas at . Crie uma tag de alternância do menu de íons com uma diretiva N G quatro. Especifique páginas APP, a variável de loop e que páginas tem o objeto para gerar. Como eu mencionei anteriormente, disse que a propriedade auto esconder para falso a menos que você gosta de assistir as coisas desaparecerem sem nenhuma razão aparente. Dentro da alternância colocar um item de íon com um link mais redondo definido para a página ponto seu L. Fazendo isso automaticamente transforma o item em um hiperlink, que é muito legal. Certifique-se de obter a sintaxe de ligação correta, como estou mostrando aqui. Caso contrário, você pode acabar enviando seus usuários para uma rota chamada literalmente na página dot euro. É que a direção do roteador para nenhum, Ou raiz sua escolha. Isso afeta a animação. É sutil, então eu vou deixar você brincar com ele e decidir o que você prefere se você quer um linhas visíveis. Separar seus itens de menu é que as linhas atribuem a full ou um mithi depois dele completamente . Eu não sou um fã da forma como ele parece, então eu estou escolhendo nenhum dentro do item e um ícone de íon com seu lote definido para começar e é ícone definido para o ícone ponto de página AP novamente prestar atenção a essa sintaxe de vinculação. Em seguida é o título do menu em si, que irá implementar com um olho no rótulo com o texto vinculado ao título das páginas. Em seguida, precisamos adicionar um botão de menu para ambas as nossas páginas. E não, não é automático. Então primeiro abrir página inicial que Kim il dentro da barra de ferramentas de íons pouco antes do título do íon, você precisa adicionar um componente de botões de íons com slot é igual a iniciar, em seguida, um componente de botão de menu de íons. Dentro disso, você não precisa adicionar ícones de textura. Esses serão gerenciados automaticamente para você. Então você precisa fazer exatamente o mesmo código dentro da página da lista. Basta copiar e colar o mesmo bloco. Salve o arquivo. Dê uma chance. Agora você deve ser capaz de navegar entre a página inicial e as páginas da lista com elas. Isso faz isso para este capítulo. Então vamos recapitular o que acabamos de fazer. Se você quiser adicionar uma página, estas são as coisas que você precisa fazer. Crie a página, componha-se com a marcação e o código que você deseja em uma rota com o U. R L para que os usuários possam chegar à página. Se você quiser que a página em seus aplicativos menu lateral adicionado à matriz de páginas APP com o título URL e uma Nikon e repita conforme necessário. Vamos adicionar mais páginas à medida que avançarmos. Mas por agora você viu o básico. Se você quiser um desafio extra, dê uma olhada nos desafios do capítulo que forneci juntamente com esses vídeos de aula. Se você tiver problemas, certifique-se de deixar alguns comentários. 18. Aplique o que você aprendeu: Agora que você concluiu este vídeo, reserve alguns minutos para aplicar o que você aprendeu ao aplicativo de demonstração. Você acabou de criar a notificação de brinde que você adicionou para indicar que um aluno foi excluído das posições da lista em si no topo da tela, permanece visível por 3000 milissegundos ou três segundos e depois desaparece. Ele não pode ser descartado manualmente pelo usuário, e às vezes pode ser um pouco difícil de ver em sua cor padrão na posição. Seu desafio aqui é corrigir que alterar a duração do brinde de cinco segundos em um botão fechado para que o usuário possa fechar o brinde mais cedo. Os botões Toast são configurados da mesma forma que os botões da folha de ação. Sugestão. Função de usuário em vez de um manipulador. Mova o brinde da parte inferior ou do meio da tela, usando seus atributos de posição e escolha o que preferir. Finalmente, você pode mudar sua cor. Não gosto dos meus ícones, vá para ícones de íons ponto com e encontre algo que você goste mais. Aqui estão algumas ideias que você pode mudar o ícone ausente e presente para outra coisa. O ícone que usamos a lista é bastante genérico. Você pode adicionar um gênero à interface do aluno e, em seguida, ajustar o ícone com base nesse valor no tempo de execução. Você também pode alterar a cor de qualquer ícone no aplicativo. Aqui está um adiantamento. Em vez de um botão de fechamento na notificação do sistema, por que não adicionar um botão de desfazer rápido junto com algum código que executará o texto de ação indevida a ser gerado? Tem uma função de ordenação? Forneça um botão na barra de ferramentas de lista para classificar os alunos pelo sobrenome em vez do padrão atual? Espero que estes lhe dêem alguma idéia do que você pode fazer para tornar sua experiência com Ionic um pouco mais rica até a próxima vez. Obrigado por assistir. 19. Como criar um projeto Xcode com capacitor: Oi, aqui é Mike Callahan nesta seção. Vamos preparar e implantar o aplicativo de demonstração na Apple App Store. Há muito o que fazer, então vamos ao assunto. Há alguns pré-requisitos que você precisa ter antes de começar. Precisas de um Mac, o que presumo que tenhas, se estiveres a ver isto. Caso contrário, sinta-se livre para acompanhar, mas você não será capaz de implantar nada. Você precisa ser um desenvolvedor da Apple registrado. Eu não vou rever tudo o necessário para se configurar como um desenvolvedor da Apple, mas você pode se inscrever no desenvolvedor dot apple dot com e, finalmente, você precisa X Code, que você pode baixar a partir da Mac App store. A primeira coisa que temos que fazer é criar um projeto que podemos abrir em código X a partir de nossos ativos que foram criados a partir do Projeto Ionic, e isso se tornará a base do aplicativo que eventualmente implantamos a Apple. A melhor maneira de criar um projeto IOS ou Android para um aplicativo Ionic ou para qualquer aplicativo Web , para que o assunto, é adicionando capacitor ao seu projeto. Claro, você poderia usar Cordova, mas isso é tão última década. Se quer a melhor experiência com o mínimo de fricção, confie em mim. Você vai querer usar o capacitor para colocar meu aplicativo na Apple App Store. Precisa ser um projeto ex code. Meu aplicativo iônico não é um próximo poderia projetar. No passado, havia realmente apenas uma maneira de fazer isso, e que era usando Cordova. Mas hoje vou usar o capacitor. Um capacitor é uma nova estrutura ou em tecnologia da Ionic, que, curiosamente, não requer Ionic. Na verdade, com uma exceção que estou prestes a mostrar, tudo o que faço depois disso não é específico. Então, a fim de usar capacitor, você tem que ter algum construído já. Então eu vou fazer isso com a construção Ionic, e eu vou criar uma compilação de produção. Tecnicamente falando, a opção dash dash prod não é necessária aqui. Não é realmente necessário para um aplicativo reagir. O que eu acho, porém, é que usando Ionic Bill traço prod, não machuca nada, e me impede de ter que lembrar de comandos diferentes. Na verdade, pouco, vou transformar isto num guião NPM e depois poderei esquecê-lo para sempre. Neste ponto, eu tenho um site construído, um aplicativo Web completo dentro da pasta build. Acho que tenho capacitor, mas não tenho certeza. A maioria dos APs Ionic incluídos agora por padrão. Mas se você não ouvir, então você faz. Se eu não tivesse capacitor, este é o comando que eu teria que executar. Mas como você pode ver, ele já está habilitado a partir deste ponto em diante, não importa se eu estou usando um aplicativo iônico, o aplicativo não-iônico. Não importa se estou acostumado a reagir. Vista angular Jake Weary Mobile. Deste ponto em diante, tudo o que faço aplicar-se-ia exactamente o mesmo a todos eles. A próxima coisa agora que temos capacitor, é instalar a plataforma do Iowa, que criará um próximo projeto de código para nós automaticamente. E fazemos isso com tampa MPX. Adicione em nós. E lembre-se, MPX é uma forma de nós executar um comando que não está no diretório de sistemas, mas instalado algum lugar dentro de seus modelos de nó. E porque o capacitor é instalado localmente. Não está no meu caminho de comando normal. Há um erro aqui, mas não acho que seja relevante para o que estou fazendo agora, então vou investigar mais tarde. Mas por agora, vamos em frente e abri-lo. Então é MPX cap aberto IOS. Isso lançará o código X com o projeto. Vou em frente e construí-lo com o comando. Seja. Estou curioso para ver se o erro de seleção de código X que estamos vendo sua linha de comando é algo que eu tenho que me preocupar com ela. Se for apenas um blip que eu poderia lidar mais tarde, o Construído conseguiu. Então agora vamos ver se podemos executá-lo. E se o fizermos, selecionaremos. Você pode selecionar um dispositivo real ou semelhante ao dispositivo que eu estou indo. Eu sou bom com o iPhone S C. Então vamos em frente e ver se podemos executar o aplicativo lá, e parece funcionar muito bem. Se você olhar para baixo para X Code aqui, você pode ver nosso cônsul para que quaisquer mensagens de log de pontos do conselho que estão acontecendo ou quaisquer erros que estão executando quaisquer erros que encontramos enquanto estamos executando apareçam aqui, então eu devo ser capaz de usar isso exatamente como nós normalmente fazíamos. O aplicativo parece funcionar conforme o esperado. Isso é o mais longe que precisamos para cavar o capacitor, eu vou olhar para aquele seletor de exclusão. Mas isso não parece estar afetando o que precisamos neste momento. 20. Como gerenciar o aplicativo de demonstração em um dispositivo iOS real: Agora que temos um projeto IOS para o aplicativo de demonstração, é um par de coisas que eu quero fazer. Um muito rápido deles é abrir o arquivo do ponto do pacote Jason e em um script que tornará alguns dos civis mais fáceis. E, novamente, quero salientar que tudo o que faço aqui se aplica a todos os diferentes tipos de aplicações. Este em que estou trabalhando especificamente é um reagir iônico. Mas tudo o que eu estou fazendo será o mesmo para e iônico aplicativo angular ou até mesmo um cap não Diana que você apenas um aplicativo Web que você quer colocar em um iPhone. Então o que eu vou fazer aqui é eu vou criar um script que me ajude com o construído. Se eu fizer quaisquer alterações no aplicativo Ionic, eu tenho que reconstruir o APP. E então eu tenho que sincronizar as mudanças com o projeto do capacitor. Então, para fazer isso, vou fazer uso de algo que o NPM fornece. E isso se chama Post. Sempre que você tem um script que começa com a palavra post, seguido por outra palavra, NPM irá executar esse script logo após o primeiro script e deixe-me mostrar-lhe o que quero dizer. É mais fácil se eu te mostrar. Então eu vou criar um script chamado Post Built On que irá sincronizar com o projeto IOS capacitor . Então eu acabei de nomear esse script post build e ele será executado logo após o script de compilação. Então eu estou simplesmente chamando capacitores de comando afundar e que irá sincronizar automaticamente os artefatos construídos com quaisquer projetos de capacitor que eu tenho. Quaisquer que sejam as plataformas que estão instaladas, vamos dar uma tentativa muito rápida. Se eu agora apenas executar NPM executar compilação, você verá que ele irá compilar o aplicativo. Em seguida, ele será imediatamente sincronizado com o capacitor, e você pode ver que a sincronização aconteceu. Ele até atualizou algumas dependências nativas do IOS. Agora o que eu quero fazer neste vídeo é colocar o aplicativo em execução em um dispositivo real. No último vídeo, nós o colocamos funcionando no simulador. Eu penso em um iPhone SC, mas isso não é onde precisamos estar para colocar isso na loja APP. Então eu vou abrir o projeto X Code agora dizendo ao capacitor para abrir o projeto do Iowa O que você pode ver aqui é X Code não está muito feliz comigo agora, porque antes de entrarmos nisso, eu removi minha conta de desenvolvedor do X Code. Eu também disse para não gerenciar automaticamente a assinatura, mas queremos fazer isso. Então, algumas coisas bem rápido. Então eu quero ir em frente e dizer-lhe automaticamente gerenciar a assinatura. Mas não vai gostar disso, pois não tenho conta. Eu também quero alterar o identificador do pacote porque eles já usaram este no passado e ele tem que ser exclusivo em sua conta. Na verdade, ele pode ter que ser globalmente único, então eu acredito que um é único. Mas se eu tentar construí-lo agora, ainda não vai funcionar. Então, a construção falhou. Por quê? Porque eu preciso da equipe de desenvolvimento. Então eu vou adicionar uma conta, e eu vou editar isso para você, mas eu vou encontrá-los com a minha escrita desenvolvida pela Apple. E assim que eu entrar, isso é suficiente? Vamos ver. Diz que temos um perfil gerenciado por ex code aqui. Então, o que acontece se eu tentar instalá-lo no meu iPhone? Deixe-me desbloquear meu iPhone enquanto isso está acontecendo. Eu também vou lançar o jogador de tempo rápido porque há um recurso muito legal. Mas você pode dio você pode habilitar uma gravação de filme e isso permitirá que você espelhe seu iPhone. Então, deixei-me mostrar-te como ele fez aquilo outra vez. Eu fui para gravar um novo filme e então eu posso selecionar o meu iPhone. Eu não tenho qualquer controle sobre o iPhone do meu computador, mas eu posso eu poderia simplesmente rolar como um normalmente faria. Ok, código X diz que foi construído, mas eu não rodei ainda. Então deixe-me ir em frente e fazer algumas alterações aqui nos meus layouts de área de trabalho. Enfraquecer. Faça tudo isso juntos para que possa ver o que estou fazendo como faço. Vou entrar aqui de novo. Eu selecionei o iPhone do Michael no menu suspenso, e eu tenho um conectado via USB e eu estou indo apenas para pressionar play. Construído, bem-sucedido, sempre um bom sinal e agora diz que está funcionando. Então, devemos ver é a tela de abertura do capacitor padrão um ícone. Há o ícone na parte inferior e você pode ver o registro do cônsul acontecendo aqui em baixo. Agora isso está rodando diretamente no meu iPhone, e é, como você pode ver, exatamente o mesmo aplicativo que vimos antes. Quão legal é isso? A próxima coisa que eu vou fazer é tentar obter isso carregado para a loja APP para que você possa seguir junto com isso. 21. Como criar o aplicativo AppStore: O próximo grande passo é levar o aplicativo construído para a loja APP, mas primeiro precisamos de um lugar para colocá-lo. Preciso ir ao APP store Connect para criar o aplicativo antes de poder carregá-lo. Então eu vou entrar em APP store connect dot apple dot com. E quando eu estiver logado, vamos ver, ele diz que eu preciso revisar um acordo, que significa que eu tenho que fazer isso antes de fazer qualquer outra coisa, certo? Uma vez que estou conectado ao APP Store Connect, sou imediatamente mostrado todos os aplicativos que tenho atualmente na APP Store. Você verá alguns deles com pequenos crachás vermelhos e a palavra rejeitada ao lado deles. Existem muitas razões para isso. Eu não vou entrar nisso aqui. Apenas esteja ciente de que a Apple é conhecida por rejeitar aplicativos às vezes pela bizarra lista de razões para criar um novo aplicativo. Basta clicar no app mais e no novo. E a primeira coisa que ele quer saber é o que é este quatro? É para IOS? TVO MacAllister? É do Iowa. Vou chamá-lo na dança 10. Vamos ver se me permite usar o sinal de “at” não se importa. Eu sou nós ingleses. Meu pacote não existe. Então eu preciso criar um novo pacote i d que eu vou fazer aqui diz especificamente que eu não posso usar o lado de fora aqui, mas uma dança 10 e o identificador do pacote, como você deve se lembrar, é com ponto andando rio ponto uma dança 10 agora para baixo abaixo. Ele quer que eu diga quais recursos IOS que eu estou procurando. Neste caso, eu não estou procurando por nenhum desses, então eu vou simplesmente deixá-los todos cobertor continuar. E agora, registrar o identificador do pacote I deve ser capaz de voltar aqui como um novo aplicativo. Aí está o meu identificador do pacote. É um aplicativo IOS e será no 10 dança. É nós Inglês na inclinação é interno. Pode ser realmente o que você quiser que seja. Eu vou em frente e ainda chamá-lo em 10 acesso de usuários de dança. Não vou viver em meus usuários. Isso está além disso. Então, todos os que querem condenar que, aparentemente, não é como esta fila. Então vamos voltar para uma dança 10. E neste ponto, podemos parar. Há muito mais a ser feito aqui, mas o propósito de fazer isso era simplesmente obtê-lo para que pudéssemos fazer o upload do aplicativo. 22. Como enviar à App Store: neste vídeo. Meu objetivo será fazer o upload do aplicativo para a Apple. Não vamos fazer nada com ele ainda, mas eu só quero te mostrar como chegar lá. Um dos primeiros erros que cometi e vou explicar isso agora é se você não cuidado. Digamos que ainda estávamos usando o iPhone S e para executá-lo e o que você vai encontrar. Não é óbvio à primeira vista como fazer isso. O primeiro erro que cometi foi não saber que o arquivo era o comando a ser usado. O segundo erro foi não ser capaz de descobrir por que quase sempre foi desativado. A razão é o dispositivo que você especificou aqui, o esquema ativo, como é chamado tão cedo quando eu mostrei pela primeira vez este executando um próximo código, eu usei o simulador E iPhone s, e agora eu não tenho meu iPhone conectado ao meu Mac. Você pode conectar um dispositivo real ou simplesmente configurá-lo muito genérico. E esse ato por si só permitirá o arquivamento. Vamos em frente e fazer isso agora. Então peguei o aplicativo do capacitor, construí e rodei no meu iPhone. Eu fiz login na minha conta da Apple e tudo está sendo gerenciado automaticamente toda a assinatura. Então, em teoria, isso deve funcionar. Isso pode levar algum tempo para construir tudo. Acelerei aqui para sua conveniência, então não precisa passar por tudo isso, mas terá que passar por isso quando for seu próprio projeto. Ok, a construção foi bem sucedida. E agora o ex Deus quer saber o que quero fazer com o meu arquivo. Observe que o nome do aplicativo ainda é aplicativo, Provavelmente não onde queremos deixá-lo. Nem queremos a versão 1.0, e acredito que seja a compilação 1. Eu nunca vou distribuir isso, mas vou tentar mostrar o processo exatamente como você faria se você estiver indo para distribuí-lo. Então, o próximo passo é distribuir o aplicativo. Há quatro opções aqui. Eu vou tomar o padrão porque, francamente, eu nunca usaria ad hoc para instalar em dispositivos arbitrários ou diz aqui dispositivos designados. Eu não tenho uma empresa para distribuir o aplicativo, nem tenho uma equipe de desenvolvimento. Vou directamente à loja de aplicações. Você pode assinar seu aplicativo e criar o pacote sem enviá-lo para a APP Store. Ou você pode simplesmente ir diretamente para a APP Store. Isso pode nos causar alguns problemas. Espero que não aconteça. Parece que ultrapassou o meu medo. Minha preocupação era que eu não tinha nenhum certificado de assinatura válido novamente. Vou tomar os padrões. Todas essas opções fazem sentido para algo que você vai distribuir. Conseguia ver. À esquerda desta janela estão todos os aplicativos que eu carrego anteriormente para a loja APP e parece um deles. Dois deles são chamados APP. Curiosamente, no entanto, eles não aparecem dessa maneira na loja de aplicativos novamente. Vou deixar a Apple fazer todo o trabalho duro. Eu não vejo o ponto em gerenciar essas coisas manualmente. Talvez temer parte de uma grande organização. Você pode ter um conjunto específico de certificados que você precisa usar e perfis de dispositivo. Este processo já é difícil o suficiente. Quero que seja o mais fácil possível. Ok, tudo está feito. Tudo foi construído. Parece que foi assinado. Então, agora a única coisa que resta é fazer upload para a loja APP conectar e foi bem sucedido no vídeo. Vou te mostrar o que temos que fazer para dar o próximo passo. 23. Detalhes de AppStore Connect: Certo, o que precisamos fazer para colocar essa coisa na APP Store? Então eu vou entrar na loja de aplicativos conectar ponto maçã ponto com. Então, como você pode ver, ele nem sequer tem uma Nikon ainda, Então vamos em frente e clique nele e olhar para o que temos que fazer. Parece que o que temos que fazer é fornecer muitas imagens para mim, as imagens ou algumas das coisas mais difíceis de fazer. Porque é um processo tão manual, há maneiras de acelerá-lo e obter as capturas de tela do seu aplicativo em ação, senhorita, pule as imagens por enquanto e apenas procure o resto disso, você tem que fornecer a 170 caracteres de texto promocional. Este é o primeiro blurb de textos que seus potenciais baixadores verão na APP Store . Você também pode fornecer até 100 caracteres de palavras-chave. Há uma arte inteira na seleção de palavras-chave e seus sites dedicados ao assunto. A Apple vai precisar de apoio. Você está onde as pessoas podem ir? Se eles têm dúvidas sobre o suporte do aplicativo, você também pode fornecer um marketing você, Earl, que é um pouco diferente. Esta será uma menina que está disponível na loja APP que as pessoas podem clicar para encontrar mais informações que você tem que fornecer pelo menos para apoiar. Você está doente. Você não tem que fornecer o marketing Você conde descrições onde você pode se divertir muito . Este é o lugar onde você quer contar a história de seu aplicativo. Você tem até 4000 caracteres para fazer isso. Minha recomendação aqui é que você gaste muito tempo construindo essa descrição. Pense nisso. É a página de aterrissagem da sua candidatura. Você precisa vendê-lo. Por que as pessoas querem usar seu aplicativo? Este aplicativo que estamos construindo agora não lida com EI app mensagem para o Apple Watch. Então eu vou pular esses. Não estou dizendo que não é importante, mas não é relevante aqui. À medida que você rola para baixo, você chega à seção de compilação. Então o que temos aqui é que temos que entrar, selecionar uma compilação de nosso aplicativo, e aparentemente está faltando algo e eu vou olhar para isso, ver se ele vai mesmo nos permitir selecioná-lo. Ele quer saber se eu estou quebrando alguma lei de exportação de criptografia dos EUA e, tanto quanto eu sei, tomar a participação não. Então eu vou ir em frente e clicar. Não, nós não estamos fazendo nenhuma chamada https, então eu vou ir em frente e clicar feito. O ícone do aplicativo, como você pode ver, é o padrão do capacitor. Então, a fim de corrigir isso, nós vamos ter que voltar para o casaco X e para os ícones corretos que queremos lá e, em seguida, fazer upload de um novo construído. Faremos isso mais tarde. Eu só quero ver tudo no APP Store Connect primeiro. A versão. Acredito que saiu do pacote de aplicativos. Aqui. Você precisa explicar quem detém os direitos autorais, quem detém os direitos do aplicativo e deve ser você. Precisamos fornecer uma classificação etária, e você faz isso indo para a edição e respondendo a uma enorme lista de perguntas. Então eu acho que isso vai ser bem simples para mim, onde não é um aplicativo violento de qualquer tipo. Não há humor não é tema maduro. Não é horror. Não há médico, nem álcool, nem jogo. Certamente nenhuma nudez não acessa a Web, pelo menos não atualmente. Também não fornece ao usuário acesso irrestrito à Web, e não há concursos ou jogos de azar. Não é feito para crianças, então não vou marcar essa caixa. Depois de responder a essas perguntas, Apple aplica uma classificação. Não é um jogo, então não vou incluí-lo no Game Center. Esta próxima seção é se o revisor o humano que vai rever a sua candidatura uma vez submetido, eles precisam entrar para usar a APP é uma coisa importante para prestar atenção, porque é possível que você tenha contas protegidas por senha em seu aplicativo. Nós não simplesmente pulamos este. As informações de contato são bastante simples. Se o seu aplicativo for complicado o suficiente, você pode anexar documentação ou vídeos ou outro tipo de ajuda para tornar mais fácil para a pessoa que o está revisando. Para entender como usar seu aplicativo e esses dois últimos, quando você deseja que eles liberem o aplicativo para o público? Você pode fazer isso manualmente. Você pode massa automaticamente, que é a culpa, ou você pode especificar uma data. Não solte antes desta data específica no tempo. E, finalmente, publicidade Será que o seu aplicativo usa? Adiciona, Será que ele exibir anúncios e ofender que a maneira difícil há muito tempo que se você usar o Google AdSense que Condessa, dizer que sim, e se você dizer que não e seu aplicativo realmente faz, ele vai ficar rejeitado. Frequência média não. Mas eu só queria clicar em convidados apenas para mostrar quais são as outras opções e requisitos . Então, digamos que vamos veicular anúncios, mas não vamos vincular a APS para que os anúncios possam ser relacionados. Acho que é isso que o 2º 1 é. Eu nunca fiz nada além de simplesmente servir em, então eu nunca verifiquei nem as jukeboxes e você deve clicar neste ou você não pode continuar. E, novamente, certifique-se de olhar que ler o texto. Se você responder às perguntas incorretamente e eles descobrirem sobre isso, eles rejeitarão seu aplicativo, removerão da APP Store, emitirão um aviso e, se você fizer isso novamente, eles poderão banir sua conta inteiramente. Deixe-me rolar de volta para o topo. Eu não vou fazer você me ver preenchendo todas essas coisas, mas no próximo vídeo, eu vou tê-lo completamente preenchido, e então nós vamos nos preocupar com as capturas de tela e com as pré-visualizações 24. Detalhes de AppStore Connect: Certo, o que precisamos fazer para colocar isso na App Store? Então eu vou fazer login na App Store connect dot apple.com. Então, como você pode ver, ele nem sequer tem um ícone ainda. Então vamos em frente e clicar nele e ver o que temos que fazer. Parece que o que temos que fazer é fornecer muitas imagens. Para mim. As imagens são algumas das coisas mais difíceis de fazer porque é um processo tão manual. Há maneiras de acelerá-lo em obter as capturas de tela de sua inação aplicativo pode ignorar as imagens por agora e basta olhar para o resto deste, você tem que fornecer até 170 caracteres de texto promocional. Este é o primeiro blurb de textos que seu potencial downloader, como veremos na App Store, você também pode fornecer até 100 caracteres de palavras-chave. Há uma arte inteira na seleção de palavras-chave, e há sites dedicados ao assunto. A Apple vai exigir o URL de suporte, onde as pessoas podem ir se tiverem dúvidas sobre o suporte ao aplicativo? Você também pode fornecer um URL de marketing que é um pouco diferente. Este será um URL que está disponível na App Store no qual as pessoas podem clicar para encontrar mais informações. Você precisa fornecer pelo menos um URL de suporte. Você não precisa fornecer as descrições de URL de marketing onde você pode se divertir muito. Este é o lugar onde você quer contar a história de seu aplicativo. Você tem até 4 mil caracteres para fazer isso. Minha recomendação aqui é que você gaste muito tempo construindo essa descrição. Penso nisso como a página inicial da sua candidatura. Você precisa vendê-lo. Por que as pessoas querem usar seu aplicativo? Este aplicativo que estamos construindo agora ele não lida com o aplicativo iMessage ou o Apple Watch, então eu vou pular aqueles. Não estou dizendo que não é importante, mas não é relevante aqui. Como você rolar para baixo e você chegar à seção de compilação. Então o que temos aqui é que temos que ir e selecionar uma compilação de nossa aplicação. E aparentemente está faltando algo. E eu vou olhar para isso e ver se ele vai permitir que nós selecionemos. Quer saber se estou invadindo as leis de exportação de criptografia. E tanto quanto eu sei, tomar atendimento não. Então eu vou ir em frente e clicar em Não, nós não estamos fazendo nenhuma chamada HTTPS, então eu vou ir em frente e clicar no ícone do aplicativo, como você pode ver, é o padrão do capacitor. Então, a fim de corrigir que terá que voltar para Xcode e adicionar os ícones corretos que queremos lá, e depois carregar um novo construído. Farei isso mais tarde. Só quero ver tudo na App Store Connect. Primeiro, a versão que eu acredito que tirou diretamente do pacote de aplicativos. Aqui você precisa explicar quem possui os direitos autorais, quem detém os direitos do aplicativo, e isso deve fazer você, precisamos fornecer uma classificação etária. E você faz isso indo para a edição e respondendo a uma enorme lista de perguntas. Então eu acho que isso vai ser bem simples para mim onde não é um aplicativo violento de qualquer tipo. Não há humor, não é tema maduro, não é horror. Não há médico, álcool, azar, certamente não há nudez. Não acessa a web, pelo menos não atualmente, nem fornece ao usuário acesso irrestrito à web. E não há concursos ou jogos de azar. Não é feito para crianças, então não vou marcar essa caixa. Depois de responder a essas perguntas, Apple aplica uma classificação. Não é um jogo, então não vou incluí-lo no Game Center. Esta próxima seção é se o revisor, o humano que vai revisar sua inscrição uma vez enviada, ele precisa fazer login para usar o aplicativo? E uma coisa importante para prestar atenção, porque é possível que você tenha contas protegidas por senha em seu aplicativo. Nós não. Então eu vou simplesmente pular este. As informações de contato são bastante simples. Se seu aplicativo for complicado o suficiente, você pode anexar documentação ou vídeos ou outro tipo de ajuda para facilitar a compreensão de como usar seu aplicativo para a pessoa que está revisando . E esses dois últimos, quando você quer que eles liberem o aplicativo para o público? Você pode fazer isso manualmente. Você pode fazer isso automaticamente, o que é o padrão. Ou você pode especificar uma data que não seja liberada antes dessa data e hora específicas. E, finalmente, publicidade. Seu aplicativo usa anúncios à medida que exibe anúncios? E eu descobri da maneira difícil há muito tempo que se você usar o Google AdSense, isso conta como um sim. E se você disser Não, e seu pedido realmente fizer, ele será rejeitado. Quero dizer, a assiduidade não. Mas eu só queria clicar em sim, apenas para mostrar quais são as outras opções e requisitos. Então, digamos que vamos veicular anúncios, mas não vamos vincular aplicativos para que os anúncios possam ser relacionados. Eu acredito que este com o segundo é eu nunca fiz nada além de simplesmente servi-lo, então eu nunca marquei estas são as duas caixas e você deve clicar neste ou você não pode continuar. E, novamente, certifique-se de olhar para o texto vermelho. Se você responder corretamente às perguntas e eles descobrirem sobre isso, eles rejeitarão seu aplicativo, o removerão da loja de aplicativos, emitirão um aviso e, se você fizer isso novamente, eles poderão banir sua conta totalmente. Então deixe-me rolar de volta para o topo. Não te vou obrigar a ver-me a preencher todas estas coisas. Mas no próximo vídeo vou tê-lo completamente preenchido. E depois vamos nos preocupar com as capturas de tela. E no anterior. 25. Ícone de aplicativo e tela Splash: Vamos em frente e obter o ícone do aplicativo e tela inicial cuidando, não é realmente difícil de fazer. E eu vou mostrar a vocês uma maneira bem direta de lidar com isso. De volta aos dias pré capacitor quando todos estavam usando Cordova. Cordova tinha uma opção de linha de comando para gerar ícones e telas de abertura a partir de uma imagem de origem. Estou tentando ficar longe de qualquer uma das ferramentas de Cordova. Agora, curiosamente, a ferramenta que vou usar é chamada de raios Cordova, que você pode ver aqui. E eu tenho um pressentimento que eles vão mudar o nome em breve. É uma ferramenta da equipe Ionic que meio que puxa a funcionalidade que a Cordova linha de comando Páscoa fornece. E faz tudo isso localmente, em vez de enviar o arquivo para a web. Certo, vamos construir essas imagens. O que eu tenho à esquerda é a pasta de um recurso que está dentro da raiz do meu projeto. É aqui que as imagens de origem vão viver. À direita, você pode ver o simulador do iPhone SE está sendo executado com o ícone do capacitor padrão visível. E se eu iniciar o aplicativo, você pode ver rapidamente a tela inicial. E é realmente apenas uma imagem branca com o logotipo do capacitor no meio. Isso parece ser o caso para um monte de iOS app. Então, vou me ater a isso. O que fiz foi baixar um arquivo PNG de um site chamado pixabay.com. É simplesmente uma prancheta com uma lista de verificação e lápis. Apple recomenda vivamente que não use a transparência em seus ícones. E se você olhar para os ícones que são visíveis no simulador, você pode ver o que acontece. Então, o ícone de arquivos, ícone de presença no ícone do Safari todos têm fundos brancos, mas a maioria dos ícones no iOS parece não fazer isso. Mas, na maior parte, você quer que seu ícone seja a cor que você espera que ele seja. Então o que vai acontecer é porque eu estou usando um arquivo PNG com transparência. Essas áreas transparentes ficarão brancas e eu estou bem com isso. Deixe-me fechar esse e a tela inicial é semelhante. É a mesma imagem exata centrada em uma imagem muito maior. O tamanho da imagem é 2732 por 2732, que é o tamanho recomendado ou necessário na verdade. Ok. Vou ficar na linha de comando por enquanto. Agora que eu fiz isso, vou em frente e instalar o pacote como uma dependência de desenvolvimento para este projeto. Em seguida, eu vou dizer Cordova aumentar para construir as imagens que eu estou procurando. Podemos executá-lo com um simples e Px ao quadrado sobre aumentar iOS para dizer-lhe o que plataforma para alvo. Ignorar configuração porque eu não tenho um arquivo de configuração que faz parte de um aplicativo Cordova, e para copiar os arquivos gerados para a minha pasta iOS, meu projeto iOS Xcode. Então vamos em frente e fazer isso. Vamos ver alguns avisos. Mas, caso contrário, vai acontecer muito rapidamente. Está feito. Eu não falei nada disso. Então, se entrarmos na pasta iOS e vamos ver o que foi construído. Ele criou o ícone para nós e vários tamanhos e um monte de telas de abertura diferentes. E você pode ver se você olhar com cuidado que eu não estou bem centrado, mas eu não acho que ninguém vai se importar. Uma coisa importante a notar é que o utilitário Cordova raise assumiu que eu estava executando-o a partir da pasta raiz do meu projeto. Assumiu ainda que o ícone e a tela inicial, ou em uma pasta chamada recursos nesse nível raiz, que o ícone é chamado de ícone na tela inicial é chamado de splashing e ambos são arquivos PNG. O aviso que você vê aqui é porque havia um canal alfa, o que significa que havia transparência. Mas toda a transparência, como mencionado, será preenchido com branco. Estou bem com isso. Então agora vamos ver como ele se parece e as mudanças que foram feitas. Nós simplesmente precisamos abrir o projeto Xcode, que novamente podemos fazer com NP x cap, abrir iOS, e que irá lançar Xcode para nós neste ponto, tudo o que precisamos fazer é executar o aplicativo e deixá-lo implantado no simulador. O Xcode já devia ter apanhado todos os activos para nós. Então, preste muita atenção à tela do simulador enquanto eu pressiono play, você deve ver o ícone mudar e, em seguida, a última tela deve aparecer. E realmente isso é tudo o que há para ele. Eu ainda preciso enviar esta versão do código para a App Store, mas esse é exatamente o mesmo processo que vimos alguns vídeos atrás. Então não vou passar por isso de novo. 26. Materiais de bônus: Mas antes de irmos, por favor, me dê mais alguns minutos de cada vez. Sei que seu tempo é precioso e tentarei fazer valer a pena. Eu mantenho um blog em walking river.com. Este é o lugar onde eu postar muitos dos problemas e soluções que eu encontro como um desenvolvedor de software profissional, você sempre pode me alcançar, seguir-me e compartilhar seus comentários no Twitter. Meu punho é em Walking River. Se você quiser ver em quais livros estou trabalhando, visite minha página do autor na Amazon.com barra autor M Callahan. Você também pode encontrar o meu ebook e catálogo de curso na estrada de goma. Você prefere um formato de arquivo diferente do fornecido pela Amazon? E, finalmente, a maioria dos meus cursos também estão disponíveis na Udemy. Verifique com frequência as ofertas de cursos mais recentes. Mais uma vez, este é o meu Callahan. Obrigado por assistir.