Desenvolvimento de aplicativos móveis com Ionic e Reagir - Ideia para App Store

1. Introdução - Comece aqui: 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 reagir, indo do código zero todo o caminho para o APP em portas de lugar. Ao longo deste curso, vamos cobrir os aspectos importantes do desenvolvimento com Ionic e reagir. 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 vai saltar para a direita na estrutura da aplicação , explicando como um aplicações iônicas dispostas. 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 e dispositivos da Web. Usaremos 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 no navegador da Web, você pode optar por navegador da Web, liberar seu aplicativo é uma Web progressiva ou PW A. Enquanto a Web está ficando cada vez mais capaz a cada dia, algumas funções ainda exigem acesso ao dispositivo 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. Eu uso e recomendo Visual Studio Code B código é um ambiente de desenvolvimento livre e de código aberto e multi-plataforma da Microsoft, projetado a partir do zero trabalho com todas as tecnologias estarão usando. Claro, você é livre para usar qualquer ferramenta com que se sinta confortável. Mais uma coisa. Devo deixar claro que este não é um curso sobre reagir. Enquanto eu vou apontar aspecto básico de reagir como eles pertencem ao Ionic, Eu não vou mais fundo do que eu tenho que Para fazer o aplicativo de demonstração funcionar 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 eu 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. Vai pedir-me um nome. Vamos tentar. Olá, Ionic. Eu sou parcial para roxo, então eu vou escolher roxo. Eu quero um modelo de menu lateral Parece bastante simples e padrão para reagir. Então vamos continuar. Por isso, como já tinha uma conta, consegui iniciar sessão rapidamente. Eu adicionei 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 faz isso é simplesmente delegá-lo ao aliado marinho da tecnologia que estamos usando neste caso. Reaja para que pudesse ver lá. Está fazendo reagir. Scripts Dash começam, e ele abre 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 de aplicativo Ionic 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. Introdução suave ao TSX: antes de abrir o código. Quero falar sobre TSX por um momento. Os componentes React são escritos em TSX. Pelo menos os componentes Ionic React T s X é como JSX, mas com tipografia agora, isso provavelmente não diz muito quando você vê-lo. Espero que isto intacto não seja muito chocante. Se você nunca viu JSX ou TSX antes, pode levar algum tempo para se acostumar com JSX E, por extensão, TSX é uma extensão para JavaScript que permite incluir marcação HTML diretamente dentro seu código para mostrar o que estou falando. Considere este trecho de código. Começamos com uma variedade de frutas que devem parecer bastante normais para qualquer pessoa familiarizada com JavaScript. Mas então olhe o que ele faz e imediatamente retorna. HTML. Então temos uma div contendo um parágrafo H, e cada dois e uma lista Norden dentro. Essa lista de coisas irritantes fica um pouco mais interessante. Nós referenciamos a matriz de frutas e chamamos a função de mapa de matriz. A função de mapa leva uma função de seta que aceita cada elemento como iteração sobre a matriz. Aqui estou atribuindo esse elemento de matriz. A letra F Eu normalmente não recomendo nomear variáveis dessa maneira. Mas quando eu tenho uma única função de seta com uma única linha de código como eu faço aqui, eu acho que é bastante óbvio o que está acontecendo. Assim, cada elemento da matriz de frutas é mapeado para um aliado com o fruto de cada elemento da chuva. Observe as chaves, no entanto, entanto, torno da chamada para o mapa de pontos de frutas. Isso é uma indicação para TSX que vamos executar algum código aqui. Pense nisso essencialmente como uma função de substituição. Neste ponto, dentro do poço, este bloco vai ser substituído pela execução do que está dentro dele. A mesma coisa acontece dentro do aliado. Em vez de exibir um valor constante, vamos avaliar o valor de F e substituir essa expressão atualmente chave com o valor. Nessa altura, prometo que isto ficará muito mais claro à medida que avançarmos. Eu não queria que você visse o código do reator Ionic pela primeira vez e pelo menos não teve essa breve explicação. Agora vamos acionar o código V s e dar uma olhada no que estamos lidando com o aplicativo Rial. O aplicativo iônico foi er força gerada 7. Tour guiado do aplicativo: Agora eu quero passar algum tempo revisando o código que foi gerado para nós. Considere isso uma visita guiada ao código Ionic React que as maçãs ou apenas nos deram de volta no meu terminal. Há alguns comandos que vou inserir agora que talvez queira 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 de reagir em seguida. Vamos olhar para o índice dot ts X arquivo. Este é o ponto de entrada programático da aplicação. Você pode ver que importamos reagir Dom, eo que reagir Dom é uma biblioteca de alto nível que fornece métodos para o modelo de objeto documento HTML . E isso é chamado de cima. A maior parte do nível da aplicação. A única coisa que estamos fazendo com ele é chamar a função de renderização. A função de renderização leva dois parâmetros. É preciso um objeto para ser renderizado. Nesse caso, é o APP marcado como componente APP. O segundo parâmetro é um elemento na página cujas idéias rota Então aqui estamos apenas passando um JavaScript normal get elemento por I d função. Então agora onde está esse elemento raiz para encontrar que está aqui no índice público dot html no topo, dentro da tag head. Há um monte de metatags lá que a equipe Ionic passou muito tempo acertando . Eu não recomendo que você nunca mexa com eles. Então aqui no corpo, aqui está a peça importante. Aqui está a rota I D que estávamos procurando. É a única coisa no corpo. Então, se você pensar um pouco atrás, nós vamos obter esse desenvolvimento e substituí-lo pelo componente APP. Agora você provavelmente está perguntando, onde está o AB Caponi? O componente APP está no aplicativo dot tsx app dot ts X está importando um monte de coisas. Vamos pular todas as importações e apenas rolar para baixo para onde o componente em si é definido. E é aqui que o aplicativo realmente começa. APP é definido como uma função de seta constante do tipo reagir ponto fc. Então, o que é isso tudo? FC é abreviação para componente de função. Basicamente, esta é uma função que irá retornar algum HTML. Vamos percorrer este arquivo nesta função para ver o que significa. A primeira coisa que vemos é uma chamada para a função de estado de uso. Isto é um gancho. Se você já ouviu falar sobre ganchos de reação sendo toda a raiva, isso é o que eles são. O estado permite-lhe adicionar surpresa de estado aos componentes de função sem estado . Ele usa o estado padrão como seu parâmetro. Neste caso, estamos passando uma força vazia. Ele retorna uma matriz contendo dois elementos. O primeiro elemento é o objeto que contém nosso estado. Nesse caso, é a página selecionada no momento, assumindo como padrão uma força vazia. O segundo elemento da matriz é uma função que podemos usar de dentro do dedo do pé componente. Altere este estado ao usar ganchos para gerenciar seu estado, é aconselhável. Nunca altere a variável de estado diretamente. Assim, ao examinar esse código, você não verá nenhuma atribuição para a variável de página selecionada. Considere apenas leitura, mesmo que tecnicamente não seja. Então, o que está sendo retornado por esta função? E para isso eu quero sobrepor o código no topo do navegador para que possamos ver o que está sendo processado com cada peça. Bem, primeiro, temos um aplicativo de íons. Ion app é o componente iônico raiz que todos os aplicativos devem usar. Dentro disso, não temos roteador de reação de íons. Este é o invólucro fino Ionic em torno do roteador React padrão. Os roteadores React. O que permite que você crie aplicativos multipaginados com transições de página avançada no que é realmente um aplicativo de página única dentro do olho no roteador React? Nós não temos dor iônica dividida, eu acho. No último videoclipe, eu me referi a uma visão dividida de design. O nome técnico do componente é minha própria dor dividida. Este é o layout que dá a você aquele menu da barra lateral que colapsa automaticamente agora dentro da própria dor dividida. Temos esse menu e você pode ver que o menu tem um atributo chamado Página Selecionada e estamos configurando-o para o valor da nossa página selecionada. A variável de estado é um irmão imediato para o componente de menu. Temos uma saída de roteador de íons. Então é aqui que o conteúdo da sua página aparece. O menu está desligado à esquerda e a saída do roteador de íons contém o resto da aplicação do seu conteúdo. E dentro disso, definimos algumas rotas. Pense numa rota como um euro. Então, dado um caminho que começa com barra página, seguido por outro ar identificar e os dois pontos significa que vamos chamar isso de identificar o nome dela , seja lá o que for realmente lá. Então pode ser a página da caixa de entrada cortar livros. Lixo, etcetera também estavam passando para Route Orender função e função Orender simplesmente significa o que queremos acontecer quando esta rota é correspondida e tenta renderizar? Então, essa é também uma função estreita. Ele leva um conjunto de propriedades dentro dessa função que chamamos definir página selecionada. Lembre-se, não queremos definir a página selecionada diretamente escrevendo para a variável, Então chamamos a função de estado que foi retornada para nós. Então, definimos a página selecionada para o parâmetro U. R L, que foi passado através de adereços que segunda parte da rota, que é chamado nome. E então o que fazemos é retornar um objeto de página ou o componente de página passando em quaisquer propriedades que nos foram dadas usando esse operador de propagação. O que isso significa é que quaisquer propriedades foram passadas para a nossa rota, vamos passar e renderizar esse componente de página com as mesmas propriedades e, finalmente, exatamente iguais. Verdade, simplesmente significa que nós só coincidir com esta rota se é realmente barra página barra alguma outra palavra . Isso fará mais sentido se começarmos a modificar essas coisas. Finalmente, temos uma rota chamada barra. Esta é a rota padrão. Se nada mais entrou, foram simplesmente indo para renderizar um redirecionamento para barra página caixa de entrada. Então, o que é exatamente uma página? Como você pode imaginar, é outro componente. Vamos dar uma olhada na página dot ts X arquivo. Consiste em um componente de função que retorna um monte de Ionic Marco. A principal diferença aqui é que o componente de função é um genérico do tipo route props componente, que é em si um genérico. Aqueles ar esses suportes angulares. Se você não estiver familiarizado com esse estilo específico, Isso é o que permite que o roteador passe esses parâmetros de rota. Nesse caso, ele espera que os adereços de rota contenham apenas um nome que ele passa para a função de seta como a correspondência de valor. Olhando para baixo um pouco quase escondido naquela selva de Ionic Components é um contêiner explorar . Vou clicar com o botão direito sobre ele e escolher Ir para definição, e vou selecionar este clique duplo. Eu também poderia ter pressionado F 12 no meu teclado. O contêiner explorar é outro componente de função personalizada, que também aceita alguns adereços de contêiner. Este é muito mais simples, porém, e que contém apenas alguns HTML simples com apenas uma única expansão variável dentro dessa tecnologia forte. Finalmente, vamos dar uma olhada no menu perto do topo. O menu define uma interface de página APP usada para manter algumas propriedades comuns sobre uma página como seus ícones U R L direito abaixo disso, é uma matriz de páginas, então agora você vê de onde eles vêm. Em seguida, temos a lista de rótulos que podemos ver no menu, e logo abaixo é o mercado. O menu em si é construído com um olho na lista de um componente projetado para formatar itens em, Bem, você adivinhou uma lista. A nota de íon fornece o que parece ser um cabeçalho. Então chegamos a um casaco interessante. A função de mapa de matriz é chamada na matriz de páginas APP para transformá-lo em um Siris de componentes de alternância menu íon , que são usados para alternar um menu aberto ou fechado dentro do olho no menu. Alternar não é item de íon, que é outro componente de íon, que é usado para agrupar outros componentes juntos neste caso, e eu no ícone e um rótulo de íon, ambos os quais devem ser bastante auto-explicativos. O item de íon tem atributos de link de roteador definidos para o valor das páginas atuais. Você está fora. Isso diz ao roteador Ionics para alternar para essa página quando clicado. Uma outra coisa que eu quero apontar no item íon é um atributo chamado Nome da Classe que é definido para o valor de algum código que é executado. Então lembre-se página selecionada do aplicativo dot ts x. bem, isso é o que fazemos com ele. O que este código está dizendo é, se as páginas selecionadas são iguais ao título da página, então vamos definir o nome da classe para a palavra selecionada. Caso contrário, vamos configurá-lo para uma string vazia. E essa classe do que é responsável por destacar os itens de menu abaixo do menu é outra lista gerada da mesma forma é o menu. As diferenças. Ele usa a matriz de rótulos e não contém links de roteador. Agora, antes de terminarmos completamente, quero fazer algumas coisas divertidas que farão no próximo vídeo. 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 ele disse, modifique as páginas APP ao redor, dê 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. Vamos colocá-lo entre a caixa de saída e os favoritos. Então vamos selecionar o objeto caixa de saída, Copiar e colar uma nova versão logo depois. Agora altere a segunda incidência dos itens de descida caixa de saída palavra e altere a barra de página ou l dois barra enviada. Vamos deixar os dois ícones em paz. O Microsoft Outlook usa esse ícone de avião de papel para itens enviados. Então, em vez disso, vamos em frente e salvar o arquivo. Agora, é 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. Mas agora temos um problema. Temos duas páginas com o mesmo ícone. Vamos em frente e alterar o ícone para a caixa de saída dois álbuns esboço para IOS e álbuns Sharp para MD e para o seu uso de código de estúdio visual, o que você verá é que ele reconhece automaticamente aqueles identificar IRS e oferece para importá-los para você. E isso é parte do código fortemente digitado insinuando que você começa de Ionic React e novamente como salvamos a página, o ícone muda apropriadamente. O que você acha que acontecerá se você clicar no novo menu enviado? Não criamos uma nova página ou uma nova rota. Então, vamos conseguir um 404? Não. O componente de página será renderizado com seu nome definido para a parte do nome da rota, que é enviada. Isso ocorre porque o componente de página em si é um objeto bastante genérico. Nem todas as páginas serão tão limpas e permitirão que você a reutilize assim. 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 neste capítulo, você deve ter um ambiente de desenvolvimento iônico completamente instalado saber como criar um novo aplicativo Ionic reagir e até mesmo fazer algumas ações personalizadas menores. Então vá em frente, regozije-se com seu novo poder. Jogue um pouco entre agora e a próxima lição espero vê-lo lá em breve. 9. @10Dance - O aplicativo Demo: 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 aplicativo: 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 comando Ionic Start quando solicitado. Selecione o framework será usado em seguida. Forneça o nome do projeto. Estou chamando 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. Eu não vou trabalhar com esse fluxo, então todos os inter-nós conectando com Maionica contam. Uma vez que o projeto é criado, podemos abri-lo no I 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. Imagens de ativos públicos. Chame de sala de aula ponto J pic open home dot tsx e excluir tudo dentro do olho na tag conteúdo. Altere o valor dentro da etiqueta de título de íon a partir da página inicial do dedo do Em seguida, exclua a importação do componente explorar contêiner na parte superior do arquivo enquanto estamos nele. Vamos excluir o próprio componente, que pode ser encontrado na pasta de componentes de origem. Exclua ambos os arquivos TSX e CSS no conteúdo de íons agora vazio em um componente de placa de íon. Se você estiver usando código V s, ele deve oferecer para importar os componentes para você automaticamente. Caso contrário, você precisará se certificar de que você mesmo, importando cada componente que você usa de barra iônica reagir dentro da placa de íon em uma tag de imagem HTML padrão com o código fonte definido para arquivo que você acabou de baixar, que devem 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. Aparentemente não importou cartão de íons, então eu vou fazer isso. Agora vamos fazer uma pausa aqui e ver como é. Em seguida, aproveitaremos o recarregamento ao vivo à medida que 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 uma, eu vou manter este terminal aberto durante a maior parte do curso, para que não tenhamos que saltar tanto dentro do terminal. Digite o comando NPM. Arrancar. Então agora temos usado Ionic servir, mas eu quero que você comece a se acostumar a usar NPM é o seu script runner. Não importa muito agora, mas eventualmente dependeremos do PM para fazer tarefas mais complexas. Em quarto lugar, por conveniência, eu também vou tentar manter o navegador aberto e ter tudo girando em tela cheia juntos, volta no código e um componente de cabeçalho de cartão de íons por si só. Isso não vai fazer muito tão imediatamente dentro que em uma legenda cartão de íon com o gerente de assiduidade de texto Sala de aula 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 renderiza se ele não se certificar de que o cabeçalho do cartão de íons quebra o subtítulo intitulado Elements e procure imposto unclos html. No meu caso, eu deixei o NPM começar a morrer, então eu preciso iniciá-lo novamente depois que os cabeçalhos de cartão de íon tag de fechamento 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 sairmos da página inicial. Vamos colocar em um link para a página de lista, que irá construir logo após a tag de parágrafo em um roteador de íons ataque vinculado com dois atributos e atributos H ref definidos para barra lista e uma direção mais arredondada atributos definidos para avançar dentro dessa etiqueta. Certifique-se de colocar algum texto. Caso contrário, você não verá um link. Isso criará um hiperlink dentro do cartão que, quando clicado, nos levará para a página da lista. E sua animação será uma animação para frente, sendo definida pela própria plataforma, seja Android ou IOS. Salvando a página, você pode ver o link renderizado. No entanto, clicar nele irá levá-lo para uma página em branco. Ainda não construímos a página da lista, então faremos isso a seguir 12. Como adicionar a página de 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 criar o que será indiscutivelmente a página mais complicada do aplicativo de volta no editor de código ou no terminal. Sua escolha. Crie um novo arquivo na pasta Páginas chamado ponto de lista tsx. Dentro deste arquivo começará criando a página mais simples que poderíamos imaginar em qualquer página que criamos. Primeiro temos que importar o espaço de nome reagir da biblioteca React. Em seguida, precisamos de um novo componente funcional. Reagir FC para curto chamada lista para representar a página. Um componente funcional deve retornar alguma marca para cima, Então, por enquanto, vamos apenas retornar um parágrafo. Então, para reagir, para ser capaz de renderizar a página, ela precisa ser exportada, que fazemos com a linha de lista padrão de exportação. Agora qualquer outro módulo pode importar o componente de lista. Se você está pensando que isso permitirá que a página de lista para renderizar quando você clicar no link na página inicial, não será necessário importá-lo para o aplicativo e fornecer uma rota aberta apt out TSX. Vimos isso em nossa visita guiada no último capítulo. O roteamento neste aplicativo é muito mais simples do que vimos antes. E para mim, mais simples é melhor. Vamos adicionar uma nova rota adicionando outra tag de rota após a rodada inicial da barra. O caminho deve ser a lista de barras. O componente deve ser a lista. Certifique-se de que o componente de lista seja importado na parte superior da inserção do arquivo. Exato a verdadeiro. Agora, sempre que solicitarmos a rota da lista, a página da lista será renderizada. Salve o arquivo e tente. O link agora funciona. Não é muito de uma página, mas vamos consertar isso daqui a pouco. 13. Gancho de estudante personalizado: antes de espreitar a página da lista, precisamos obter alguns alunos para exibir mais tarde vai querer amarrar a lista em um dia para armazenar de algum tipo, mas não precisamos fazer isso apenas para obter alguns dados exibidos na página. Para isso, vou usar um gancho de reação personalizado, como vimos na visita guiada. React Took é uma função JavaScript simples que retorna dois valores dentro de uma matriz vez de aprofundar em como o trabalho de Hook. Podemos simplesmente embrulhar um normal com uma matriz de dados e expô-lo à nossa página de lista. Fará mais sentido se o construirmos, criarmos um novo arquivo na fonte chamado Student dash hook dot ts. Dentro deste arquivo irá criar qualquer newme, uma constante de interface e uma função. Este e newme é uma conveniência que irá usar para marcar um aluno está ausente ou presente. Em seguida, vamos criar um objeto estudante como uma interface. Lembre-se, as interfaces não existem em JavaScript e desaparecerão completamente após a compilação. Seu único propósito é permitir que o tipo de parâmetro verificação de auto-completar código e informações sobre um sentido dentro do código. Insira 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 identificação, um nome e um sobrenome. 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 vamos criar uma matriz de alunos que podemos usar no lugar de um banco de dados. Por enquanto, estou chamando de Mark Students. Agora, o gancho personalizado. A função que estou exportando será chamada usar estudantes. Por convenção, todos os ganchos começam com a palavra usar dentro da função. Estou simplesmente chamando reage sua função de estado, passando a matriz de estudantes simulados como seu valor padrão, retornando indiretamente o que você diz nos fornece. É enganosamente simples, mas só porque não faz muito. Agora vamos voltar para a página da lista e fazer uso dela 14. Roster de estudantes: de volta à página da lista. Precisamos de uma referência ao gancho. Nós acabamos de criar apenas dentro de sua função de lista em uma linha para chamá-lo Lembre-se de você estudantes é essencialmente uma passagem para reagir. Use função de estado, mas ele envolve e esconde que matriz simulada. Nossa página de lista não se importa de onde vêm os alunos, então não contaremos. Agora que temos alguns alunos, vamos listá-los na tela. Remova essa tag de parágrafo e em um olho na tag de página. Lembre-se, todas as páginas Ionic React precisam de um olho na tag página como seu componente raiz. Como sempre, quando inserimos essas próximas tags de componentes na página, você precisa ter certeza de que elas estão sendo importadas do Ionic React. Em seguida, vamos criar o cabeçalho da página em certa uma tag de cabeçalho de íon. Foi uma etiqueta de barra de ferramentas de íons dentro dela em uma tag de título de íons. Dentro disso, defina o texto dos títulos de íons para a lista. Espero que você ache que o cabeçalho Ion é familiar, como vimos na página inicial e também durante a visita guiada imediatamente após o cabeçalho iônico . Precisamos de um teor de íons dentro do teor de ferro. 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, rabino em rótulos altos em botões, ícones de íons, campos de entrada de formulário 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 novamente no código. Imediatamente dentro da lista de íons, enfraquecer iterado sobre a matriz de alunos usando a função de mapa de matriz. Precisamos fornecer uma função estreita para mapear que irá descrever o que queremos fazer com cada aluno na matriz. Então pense assim. Estamos exibindo uma lista de comprimento desconhecido, mas cada item da matriz será exibido usando o mesmo modelo dentro dos mapas. função Aero retornará alguma marca para cima. Vamos começar com o item de íon deslizante item de íon deslizando irá nos fornecer um novo item, deslizar ou deslizar opção. 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 o slot ícone. Atributo para iniciar e o atributo ícone para contorno de pessoa e novamente, não se esqueça de importar seus ícones ou eles não funcionarão dentro do rótulo de íon. Vincular algum texto para os alunos por último em primeiro nome separado 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 definir para o ícone I. O segundo deve ser exibido quando o aluno está ausente. Então, para isso, vamos usar o olho fora do contorno, que é um contorno de um olho com uma linha através dele. A maneira como renderizamos os ícones condicionalmente é embrulhar toda a tag íon icon e um script Java . Expressão lógica. Comparar o status dos alunos com o valor de presente ou ausente, seguido do lógico e do próprio operador, seguido do ícone de íon. As regras de curto-circuito do JavaScript impedirão que a segunda metade da expressão seja avaliada se a primeira metade for avaliada como falsa nota que é inteiramente possível para o status de alunos não ser nenhum valor porque o campo de status é facultativo. 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 terminar. 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 aparecem dentro dessa tag em uma única opção de item íon Tech. 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, salvar o arquivo e atualizar a página. Neste ponto, a única interatividade é um controle deslizante em si. Portanto, clique e arraste um item para o início do item. Você deve ver o botão excluir. 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 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 estão presentes na lista. 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 no olho na lista. Podemos criar o menu primeiro ou o botão para iniciar o menu. Primeiro, vamos criar o menu primeiro. 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 botões de ação, mas geralmente 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 cancelar. 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 renderizados de 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ções irá incluir botões para marcar um aluno está presente ou ausente, excluir um aluno ou cancelar o ação e não fazer nada. Para fazer isso, precisamos fazer um pouco de configuração First na lista dot tsx. Vamos precisar de um novo gancho e um objeto para representar uma estudante vazia para controlar a ação que ela aparecerá no topo do componente funcional. Criar um novo objeto estudante chamado Vazio Student, mas disse que é três campos obrigatórios para vazio string. Em seguida, faça uma chamada para a reação. Use a função de estado. Passando o objeto de estudante vazio como seu nome padrão. Os valores de retorno selecionado aluno e define eleito aluno Este é um gancho que nos permitirá manter o controle de qual aluno é selecionado e nos ajudar a mostrar e ocultar a folha de ação tem necessário. Próximo. Criar duas funções para lidar com o evento clique Inserido a licença Um aluno de uma lista. O 1º 1 é Excluir Estudante e o 2º 1 Vamos chamar Click Student Delete Student irá filtrar o aluno selecionado da matriz atual de alunos e, em seguida, passou isso para definir alunos. A função. Click estudante chamará conjuntos eleitos aluno passando este aluno selecionado. Agora é finalmente hora de adicionarmos a marcação da folha de ação. Coloque uma tag de folha de ação iônica logo abaixo do olho na tag de fechamento de listas. Isso vai torná-lo um irmão da lista de íons. Esta tag terá muita atriz, mas nenhum componente infantil. O primeiro atributo a definir é o Aberto depois disse que o seu valor para a expressão de ligação do bang bang selecionado aluno ponto i d. Os pontos de exclamação duplos coage o valor da string em um barras verdadeiro. Se o I D tiver um valor , será verdadeiro. Caso contrário, será falso porque seu aluno padrão no gancho de estado é o objeto estudante vazio . Podemos ter certeza de duas coisas que seu valor nunca será não, e o I D será um valor real ou uma string vazia. Em seguida, crie um cabeçalho depois com seu valor definido para a ação King Canton dos alunos selecionados . Primeiro e último nomes. Não se esqueça do homem do aparelho encaracolado. Queremos especificar a ação a tomar quando a folha de ação for rejeitada. Para isso, usamos o on fez dispensar Depois de você. Este é um evento na própria folha de ação. Defina este atributo para ser uma função estreita que simplesmente chama o conjunto selecionado função estudante passando estudante vazio. Isso fará com que a folha de ação se oculte porque o valor de é aberto se tornará falso. Finalmente, precisamos criar a matriz de botões. Esta é uma matriz de objetos de botão. Cada botão vamos precisar de um campo de texto em um campo de ícone, uma função de manipulador que é chamado quando o usuário clica nele e, opcionalmente, um valor de função para esta folha de ação. Quero apagar quatro botões com um rolo de destrutivo o ícone do lixo. E se você quiser ah, função manipuladora que chama deletar aluno, eu não vou me incomodar agora porque eu vou ligar isso de forma diferente. Na próxima lição. Marcar Presente terá o ícone I e uma função manipuladora, que define o status dos alunos selecionados para apresentar. Mark, ausente com o ícone de contorno de olho fora e sua função de manipulador, irá definir o status de alunos selecionados como ausente e, finalmente, um botão de cancelamento com o ícone de roupas e o papel de Cancelar. Eu disse que precisaríamos de quatro manipuladores, mas este não precisa de um. E essa é a totalidade da ação. Agora vamos criar um botão para lançar a ação e uma tag botões de íon imediatamente após o ícone dois existente e logo antes do imposto de fechamento do item íon, dar a tag botões de íon um slot depois e disse seu fim, que significa que ele vai aparecem no final do item. Em seguida, adicionar a tags de botão de íon como Crianças da tag botões novamente assistir aqueles singular e plural dentro de cada botão em um olho na minha calma com o slot, atributos disse Toe Ícone em Lee, Especifique o ícone do primeiro como contorno horizontal de reticências e defina o segundo 1 como contorno dianteiro Chevron em um manipulador de cliques para o botão com as reticências. Quando clicado, queremos chamar a função de estudante clique, passando o aluno atual da matriz. 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. Vamos guardar o resto da funcionalidade para Ah, futura lição. Por enquanto, no entanto, se você quiser, sinta-se livre 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 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 no Android e iPhone no topo da página de lista, criar um novo gancho para controlar a visibilidade do alerta dentro da folha de ação. Se você ligou, o aluno principal substituiu essa chamada por uma chamada para o conjunto de ganchos mostra a função de alerta Excluir . Passando verdadeiro se você pulou como eu fiz, basta adicionar o manipulador para chamar. Set mostrou alerta de elite passando verdadeiro. De qualquer forma, a definição de botões de exclusão agora deve ser assim. Agora, quando o usuário seleciona o botão excluir em vez de o aluno ser excluído imediatamente, o olho no alerta aparecerá. Se você se lembrar, há outro botão de exclusão na página com um dentro da opção de item de íon que você deseja colocar. A mesma chamada para definir mostrou alerta elite aqui como é no manipulador clique para implementar o próprio alerta em um olho no componente alerta imediatamente após a ação íon, ela sua tag de fechamento para exibir o alerta que vai precisar e é atributos abertos que para o valor do show. Excluir variável de alerta. isso que o gancho servia a seguir. Em um on fez descartar atributos definido dedo do pé. Uma função estreita para chamar conjunto mostrou alerta lead desta vez passando false. Isso fará com que o alerta desapareça. Existem três atributos que controlam o texto dentro e eu um alerta. Os atributos de cabeçalho como uma string. Ele aparece no topo do alerta. Você é algo como deletar esse aluno. O atributo message é o corpo principal do alerta. Use uma string como esta operação e não pode ser desfeita. O atributo subcabeçalho aparece apenas dentro do corpo do alerta. Defina este atributo como uma contaminação dos nomes e sobrenomes dos alunos, para que o usuário saiba exatamente qual aluno está prestes a ser excluído. Finalmente, o alerta precisa de uma matriz de botões. Você define esses botões exatamente da mesma maneira que fez para a folha de ações. O primeiro botão é o botão excluir. Ele precisa de um manipulador que irá excluir um aluno para fornecer uma função estreita que simplesmente chama a função delete student. De antes podemos fazer isso, porque agora confirmamos que é isso que o usuário quer fazer. O segundo botão deve ser um botão de cancelamento com a função de cancelar, e ele não precisa de um manipulador. E agora não se esqueça de fechar os olhos na tag alerta ou você terá alguns problemas de compilação. Salve e verifique seu trabalho. Se tudo correu bem, perdi o meu rato. Se tudo correu bem, tentar excluir um aluno não deve mais fazer isso automaticamente. Em vez disso, você receberá o alerta pedindo que você exclua ou, no meu caso, não importa clicar. Isso deve rejeitar o alerta sem nenhuma ação tomada. Apenas alguns excluir e, em seguida, dizer-lhe novamente para excluir bem, o aluno realmente ser excluído. Em seguida, criaremos uma pequena confirmação para que o usuário saiba que o aluno realmente foi excluído . Muitas vezes, um aplicativo precisa fornecer uma notificação ao usuário de 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, então a notificação do sistema é 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 faremos nada disso se você quiser personalizar seu olho no brinde depois de terminar a lição, sinta-se livre no topo da página da lista. Crie outro gancho para usar para controlar a visibilidade do brinde, assim como controlamos a invisibilidade da folha de ação e do alerta. Em seguida, modifique a função delete student para chamar a função hook Set imediatamente após o lead acontecer em um olho na tag toast imediatamente após a tag I alert. Exatamente como com o olho em alerta, ele precisa de um é atributos abertos que para o valor do show, excluir brinde, variável de gancho e em fez descartar atributos disse para chamar a função de conjunto de gancho. Seus atributos de mensagem devem conter uma mensagem curta indicando que o aluno foi excluído. Seja mais simples, tão detalhado quanto você quiser, mas lembre-se Shorter é geralmente melhor para um brinde. O atributo duration controla quanto tempo o olho no brinde aguardará antes de se despedir automaticamente . A duração é um inteiro e em milissegundos, então tenha cuidado para não especificar uma duração que é muito curta e definitivamente não passar uma força Se você esquecer e omitir a duração. Atributo. O brinde permanecerá na tela indefinidamente, exigindo a intervenção do usuário para descartá-la. Uma posição padrão do sistema é centralizada verticalmente. Decidi movê-lo para o topo, mas deixaremos a decisão final para você. Você pode fornecer uma matriz de botões para um I sou brinde, assim como você fez com a folha de ação I N e I um alerta. Se você se sente tão inclinado a ir em frente e adicionar um, eu estou escolhendo não salvar o arquivo e deixei o navegador. Refresque. Agora, quando você exclui 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 da 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. É sobreposição de atributos de tipo. 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 quiser que um item no menu feche o menu ao selecioná-lo, seja mais curto. Embrulhe-o 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. Por padrão, ele se esconderá automaticamente sempre que detectar que seu menu está desativado ou está sendo apresentado em um problema dividido, como estamos fazendo aqui. Por causa disso, se você quiser que ele fique visível o tempo todo, certifique-se de definir sua auto hide realmente como false. Não me pergunte quanto tempo levei para depurar a primeira vez que esqueci. Há mais em um menu, mas esses são os conceitos básicos, então vamos construir um. Agora crie um novo arquivo na pasta Componentes. Chame de menu dot tsx. Aqui é onde irá definir o menu, replicando o que vimos durante a turnê criar uma interface de página APP perto do topo que irá definir como uma página se parece. Dê um título, seu l e um ícone. Em seguida, crie uma matriz desses objetos dentro da matriz. Forneça aos liberais objeto um para a página inicial com o You Earl and Icon apropriados e , em seguida, um para a página de lista com sua lista de Seu L-Slash. E vamos usar o ícone chamado pessoas. Se o editor não reconhecer os ícones, você pode importá-los a partir de ícones de barra de íons. Em seguida, vem o menu em si, assim como a página da lista. É um componente de função reagir. Chamá-lo de menu e disse que a uma função estreita que irá retornar algum conteúdo iônico para construir o conteúdo do menu. Criar um elemento de menu de íons com seu conteúdo i d definido como Maine. Este valor deve corresponder ao elemento HTML i. D. da saída do roteador de íons, que era principal. Confie em mim nessa, mas vamos verificar se vou adicionar o menu à marcação para o tipo. Eu sou parcial para sobrepor, mas sinta-se livre para tentar, empurrar ou revelar dentro de um cabeçalho de íon com um olho na barra de ferramentas e um olho no título dentro do título fornecem um título como Menu logo após o cabeçalho de íon em uma tag de conteúdo de íons. E só dentro disso e eu na lista. Este é o lugar onde o menu será construído vai fazer isso por iteração sobre a matriz de páginas at . A estratégia é semelhante à que acabamos de ver com os alunos. Para fazer isso, abra uma chave para executar algum código, chame as páginas em uma função de mapa de elevação. Esta função terá uma função estreita a ser executada para cada elemento da matriz. Essa função receberá dois parâmetros. O objeto de página e o índice de matriz desse objeto. 0123 assim por diante. A função de seta precisa retornar a marcação para cada objeto. O primeiro elemento é uma alternância de menu de íons, com sua chave definida para a variável de índice. Se não fornecermos este índice, reagir irá reclamar que cada criança em uma lista deve ter uma chave. Ele ainda vai renderizar, mas adora um aviso feio. E nós não precisamos disso, como eu mencionei anteriormente, definir a propriedade auto hide como falsa a menos que você goste de ver 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. Defina a direção do roteador como nenhum ou faça root à sua escolha. Isso afeta a animação. É sutil, então eu vou deixar você jogar com ele e decidir o que você prefere se você quiser um linhas visíveis separando seus itens de menu que as linhas atributos para cheio para um mithi depois dele inteiramente . Eu não sou um fã da forma como ele parece, então eu estou escolhendo nenhum dentro do item em um ícone de íon com seu slot definido para iniciar e é ícone definido para o ícone de ponto de página AP novamente. Preste atenção a essa sintaxe de vinculação. Certifique-se de fechar todas as suas etiquetas corretamente e, em seguida, todas as suas chaves, ar fechado, combinado e alinhado. Só resta uma linha. Precisamos exportar a função de menu, caso contrário não poderemos importá-la para o app para torná-los visíveis. Abra o aplicativo dot ts X página imediatamente dentro do roteador Ion React como seu primeiro filho em um componente de dor de divisão de íons com seu conteúdo I d definido para Maine certifique-se de que a dor dividida envolve completamente a tomada do roteador de íons. Estou fazendo isso aqui com a macro. Uma opção de atalho seta para baixo no Windows e Lennox. Deve ser alterado seta para baixo. Adicione a etiqueta de menu do primeiro filho da dor de divisão de íons imediatamente antes da saída do roteador de íons . Nós já adicionamos a rota à página da lista, mas no caso de você não precisar aqui dentro da tomada do roteador de íons. Finalmente, para este arquivo, você precisa definir as saídas do roteador de íons I d para Maine. Pensei que já tinha sido feito, mas aparentemente não. Próximo. Precisamos adicionar um ícone de menu para ambas as nossas páginas. Não, não é automático. Abra a página inicial em ponto inicial tsx. Dentro da barra de ferramentas de íons pouco antes do título de íon, você precisa adicionar um componente de botões de íons com slot igual iniciar sido e I no componente botão de menu . 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 estes e isso praticamente 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 acessar a página. Se você quiser que a página em seus aplicativos menu lateral adicionado à matriz de páginas APP com o título da 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 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 executar o aplicativo Demo em um dispositivo real iOS: 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 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. 24. Í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. 25. Material 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.