Oficina de desenvolvimento de aplicativos móveis com Ionic e Angular

1. CoursePromo: Você quer criar aplicativos móveis? Você quer atingir andróides ou iPhones? Se você gostaria de criar seu próprio aplicativo móvel, mas não quer perder tempo aprendendo várias tecnologias. Então este curso é para você. Com tecnologias modernas, como a ionic, você não precisa ignorar as tecnologias padrão da Web como HTML, Javascript e texto datilografado Eu vou te mostrar não só como é fácil criar seu próprio aplicativo, mas também como ele pode ser divertido. Além disso, você poderá escrever um único aplicativo que funcione tanto em Androids quanto em iPhones Dê uma olhada nesses aplicativos. Todos eles foram desenvolvidos com iônico. E esses são apenas alguns que eu mesmo construí. Existem milhares mais. Na verdade, quase 20% de cada aplicativo é iônico . Quão incrível é isso? Alguns dos principais tópicos abordados no curso incluem a criação da interface do usuário com a estrutura iônica, destacando o trabalho que o ionic faz por você criação de um aplicativo de demonstração que parece perfeitamente adequado quando executado em iPhones, Androids Mostrarei como criar uma experiência de aparência nativa com componentes iônicos, como menus, cartões, planilhas de ação, alertas e notificações de brindes Usaremos um layout de painel dividido que funciona tão bem em um desktop ou tablet grande quanto em um telefone pequeno Ao final deste curso, você verá como pode ser simples criar um aplicativo móvel que funcione no mundo real com o ionic Agora, antes de começar este curso, ele ajudará você a se familiarizar com os conceitos básicos do desenvolvimento web usando HTML Não espero que você seja um especialista, e abordarei os tópicos mais complicados à medida que avançamos. Se você sabe como criar um botão HTML ou adicionar um manipulador de cliques, tudo bem Então, prepare suas ideias de aplicativos e junte-se a mim nessa jornada rápida para aprender como você pode se tornar um especialista em desenvolvimento de aplicativos móveis com a estrutura Ionic 2. Sessão1: Tudo bem. Então, bem-vindos a todos no que espero ser o primeiro de muitos workshops iônicos de desenvolvimento móvel Angular Como mencionei, sou Mike Callahan e estou ansioso para passar por isso e construir algo com No chat, eu te dei esses URLs. O primeiro é o link central para o projeto que construiremos ao longo do workshop. Então, está tudo funcionando completamente, então você pode usá-lo como referência. O segundo URL é um get ub gist com alguns arquivos convenientes para que você não precise digitar tudo se não quiser Os próximos dois são minhas informações de contato. Você já deveria ter esse Michael em Walking River, e meu perfil no Twitter está em Walking River. Ok. Suponho que você tenha programação geral, HTML e um pouco de javascript. Vou usar o código do Visual Studio. Você não precisa, mas é aí que minhas capturas de tela estarão Também sou um grande fã do angular essentials de John Papa. É uma coleção de extensões que facilitam o desenvolvimento angular. Há também algumas extensões para trechos iônicos. Eu não os achei tão úteis quanto eu esperava que fossem. Mas acho que este é absolutamente essencial. Ok. Você precisa conhecer o angular? Não é necessariamente que não vamos gastar muito tempo no angular. Os conceitos, se você precisar de algo, se não fizer sentido ou ei, Mike, o que é isso? Me pare, e nós vamos rever isso. Como regra geral, usaremos os seguintes ismos angulares. Então, usaremos as diretivas G quatro e G. Faremos uso da separação angular das preocupações. Sei que ultimamente se fala muito em juntar tudo em um E há o novo suporte experimental do Angular 14 para componentes livres de módulos. Eu vou com a velha escola aqui. É angular. Então, terei arquivo JS, arquivo CSS diferente, arquivo HTML diferente. Se você quiser, pode combiná-los sozinho Essas são as expressões vinculativas que provavelmente usaremos, e não acho que seremos mais complicados do que isso. A primeira é uma expressão de texto. Portanto, se você tiver uma variável chamada nesse caso, EXPR em seu componente, e quiser que seu valor esteja em seu HTML, basta colocá-la entre duas chaves. Se não for texto ou se você simplesmente preferir o segundo estilo. Você pode colocar o nome da variável entre aspas sem as chaves Carla, mas você coloca o nome da coisa que você está vinculando ao atributo do elemento HTML entre colchetes A única vez que isso é importante é se a variável à qual você está vinculando não for uma string. Por exemplo, se você estivesse vinculando, digamos, ao atributo desabilitado e quisesse desabilitá-la para ser igual a false e usar a primeira expressão com as chaves curvas, na verdade você estaria vinculando à string false e isso pode ou não avaliado como falso em tempo de execução a string false é uma verdade avaliada ou pode ser. Finalmente, o evento de clique lá. Então, sempre que quisermos vincular uma função em nosso componente a um evento HTML Você coloca o nome do evento parênteses e a função que deseja chamar Acho que é quase tão angular quanto precisamos. Ok, então vamos passar por tudo isso. Esta é minha introdução angular. Ok. Todo mundo tem a CLI iônica instalada, certo Isso significa que você também já tem a CLI do nó instalada Provavelmente não é crítico exceto que acredito que o Ionic CLI requer Git ou pelo menos presume Digamos que você já não tenha um G. Todo mundo está instalado. Sim. Caso contrário, o NPM instala G na CLI Aqueles de vocês que apareceram mais cedo ou mais cedo me viram fazer isso há pouco tempo porque eu estava em uma versão mais antiga. Tudo bem. Então, vamos criar uma interface de usuário muito básica e assim por diante. Ele consistirá em uma página inicial, uma página de lista de alunos, uma página de informações do aluno e um menu lateral Isso é essencialmente o que vai parecer. Desculpe-me. Portanto, esta é a página inicial. aqui que o aplicativo será iniciado. A página da lista, quando concluída, terá a seguinte aparência. Será uma lista dos alunos da nossa turma. A página do galo é construída com uma lista ativa, que é um componente iônico, e não contém ícones, botões e todos os tipos de recursos iônicos interessantes implementaremos à medida que avançamos A página de informações do aluno é onde você pode selecionar um aluno individual. Serão formas iônicas, um pouco mais relacionadas ao armazenamento iônico Como você pode ver, eventualmente chegaremos lá, integração por meio de capacitor para acessar a câmera do dispositivo Tudo bem. Então, vamos direto para a criação do aplicativo. Onde quer que precisemos, é um atalho. Eu coloquei o link da lista no chat. Também estará aqui em qualquer slide em que precisaremos dele ou em que possa ser útil. A primeira coisa que queremos fazer para criar um aplicativo interno é digitar o comando ao iniciar. Vamos em frente. Vamos fazer isso. Não vou usar o assistente de criação de aplicativos. É legal, mas não é realmente necessário. Se você quiser brincar com isso, fique à vontade. Vou usar o angular. Meu nome vai ser. Vou ligar para o horário de atendimento. Eventualmente, vou ter um menu lateral. Mas o modelo do menu lateral oferece muitos clichês que eu não gosto Portanto, minha preferência é começar com um aplicativo iônico em branco. Parece que estamos recebendo um capacitor por padrão. Isso é bom. E ele vai instalar todas essas coisas para mim. Tire isso do caminho até lá. Não preciso ver. Todo mundo está acompanhando, ok? Sim. Sim. Obrigada Bem, aí está. Agora, para seguir em frente e ver isso, basta digitar ionic serve Eu tenho que estar nesse aplicativo primeiro, eu tenho que estar na pasta. CD para isso? Então eu posso servir ionicamente E como você pode ver aqui, ionic serve está, na verdade, apenas delegando muitas de suas funcionalidades à CLI angular Então eu digitei ionic serve e o ionic serve foi em frente e gerou esse comando G run, e ele inicia automaticamente meu navegador padrão, que no meu caso é o Safari e me dá exatamente o que eu pedi Um aplicativo em branco com muito conteúdo. OK. Agora, todo mundo está acompanhando e você chegou a esse ponto? Sim. Sim. Tudo bem Quase lá. Quase lá. Tudo bem. Vou passar para o próximo slide. O que eu queria discutir rapidamente são as desenvolvedores ou as ferramentas para desenvolvedores de navegadores. Se você estiver no Windows, basta digitar F 12. Se você estiver em um Mac, é a opção de comando e, obviamente, não parece. Sim. Eu estou lá. Tudo bem. Com as ferramentas do desenvolvedor abertas? Você deve ser capaz. Nunca me lembro de como fazer isso no Safari. Lá vamos nós. Entre no modo de design responsivo Então, agora eu posso emular diferentes dispositivos Apple. Se você não estiver no Safari, não, mesmo se estiver no Savi, se estiver usando, acho que em qualquer dispositivo Eu recomendo usar o Chrome ou edge para a experiência das ferramentas do desenvolvedor. A coisa muito legal e você não a verá aqui. Você verá isso daqui a pouco. Mas deixe-me falar sobre isso. Na verdade, deixe-me trazer isso até aqui. Eu já o tenho aqui, então eu posso te mostrar o que eu quero te mostrar. No limite, se eu disser, quero um dispositivo como um iPhone 12 Pro. Isso me dá o que estou procurando. Isso me dá a resolução certa. Então eu posso escolher um iPhone. Eu posso escolher um andróide. Observe que isso não muda muito, mas é aqui que fica muito legal. Deixe-me entrar. Deixe-me atualizar a página Depois que as ferramentas do desenvolvedor estiverem abertas , você configurar seu dispositivo e atualizar a página, o ionic reconhecerá isso e dirá: Ah, você está executando um Android Vou mudar a aparência disso. Então, seus ícones serão Androidificados. Seus botões serão Android, seus menus suspensos serão Então, tudo deve parecer Android. Então, observe como eles se parecem. E então, quando clico no botão Iniciar, esse é um modelo Android. Então, deixe-me voltar para um iPhone. Isso ainda não mudará até que eu atualize a página. Veja a diferença. Essa é a aparência de uma maçã. Posso voltar à configuração, o botão um pouco mais arredondado. O menu suspenso parece diferente. Os ícones são um pouco diferentes, os menus laterais são um pouco diferentes. Tudo é um pouco diferente. Você verá em um dispositivo Apple, sua central de títulos justificada, onde fica qualquer um dos Androids Então, você obterá toda essa funcionalidade, essa mudança visual pronta para uso com o ionic E essa é uma das principais razões pelas quais eu o uso. Ok. Então é isso que vamos construir. Então eu tenho aqui. Como eu disse, F 12 para abrir suas ferramentas de desenvolvimento e janelas ou opção de comando em um Mac. Acabei de te mostrar o design diferente. Esse é o botão para entrar no modo de design responsivo no Safari Ok. Vamos lá, nove. Ok. E eu já te falei sobre isso. Se você mudar de uma para a outra, precisará recarregar as páginas para ver a alteração da interface do usuário Ok. Agora vamos criar nossa primeira página iônica Ou, nesse caso, vamos criar uma interface. Eu vou sair, eu vou sair. OK. Então, vou usar o comando on generate. Eu também posso fazer com a interface G. Então, vou pedir à CLI iônica que gere um arquivo de interface datilografado para que eu mantenha a definição E foi muito rápido. Também vou abrir o Sd no meu projeto, correto? Ok. Existe uma maneira tornar sua frente um pouco maior quando você tem isso? Eu absolutamente posso. Como é isso? Isso é incrível. Obrigada Eu vou fazer a mesma coisa aqui. A propósito, Command plus. Certo. A interface está na minha pasta de origem app student. Não há muita coisa lá dentro. Tire isso do caminho para você. Ok. Ok. Então esse é um dos lugares onde essa essência será útil E esse é o Student TS aqui. Vou pegar o arquivo bruto. Novamente, você não precisa ver isso, mas sou preguiçoso e não quero digitar tudo isso de novo. Então essa é a definição de estudante. Alguém sabe por que estou fazendo meu aluno uma interface e não uma aula? Algum tipo de assistente de script que você queira avaliar? Alguém sabe para que uma interface de script de tipo compila quando é compilada em Javascript Não. Ok. Deixe-me ver se eu posso te mostrar. Você já foi digitar script ou eu tenho um playground de pipe script. E de um lado está o texto datilografado, do outro lado está o javascript Se você entrar na interface Avian, é isso que ela cria. Absolutamente nada. As interfaces não existem. Portanto, eles são puramente para conveniência do desenvolvedor. Se, por outro lado, eu criei uma classe, não é uma classe válida. Por que essa não é uma aula válida? Ok. Oh, eu entendo. Preciso de coisas assim. Portanto, não há muito mais código, mas é mais código de código. E, francamente, eu não preciso de uma aula. Não sei, meu objeto estudantil não precisa conter métodos. Portanto, se for apenas um objeto de transferência de dados, sempre optarei por uma interface. Ok. Ok. Então, vamos dar uma olhada rápida nessa interface. Cada aluno tem um ID, nome e sobrenome. Alguém sabe o que o ponto de interrogação significa para o resto dos campos? Opção. Eles são opcionais. Portanto, a data de nascimento nome dos pais, e-mail, telefone, etc Tudo isso é opcional. Eu não vou deixar isso aqui. No entanto, isso significa que eu posso criar que isso não será válido. Para que eu possa criar um poço, copiloto do Hub faz o trabalho por mim. Então, eu posso usar um inicializador literal de objeto. Opa. Isso mesmo. Tudo bem. Agora, Pile está ficando um pouco zelosa demais. Ok. Se o aluno fosse uma turma, eu não poderia fazer isso. Eu não poderia usar um inicializador de objetos como esse. OK. Não seria válido. Eu teria que usar o novo aluno e depois passar os valores para o construtor ou fazer os campos individualmente Mas como eu tenho uma interface, script de tipo e o script Java me permitem inicializar um novo objeto desse tipo apenas usando um objeto literal Além disso, por ser uma interface, recebo erros se não fornecer todos os campos obrigatórios. Finalmente, quem pode me dizer o que significa status? Por que não defini o status para o que está na linha dez? Esta é mais uma pergunta de outro tipo de script, não uma questão angular tônica. Embora o angular seja parte do motivo pelo qual eu fiz isso. Não tenho certeza se é algum tipo de tipo personalizado. Está limitando o valor estar presente ou ausente Correto. Definido neste caso como opcional. Correto. Então, a maioria das pessoas especialmente se você vem do mundo.net, provavelmente está acostumado a fazer isso com um nome Então você teria uma enumeração em que presente é igual zero e ausente é igual a um ou vice-versa E então o compilador garantiria que fosse digitado com força O problema de fazer isso no angular é que seus modelos não conseguem ver esses enumes A menos que você crie uma variável local para conter o número e isso fique estranho Mas se eu fizer isso dessa maneira, estou basicamente dizendo ao texto datilografado que o valor do status é uma string, mas só pode ser uma string de um dos dois valores, como você disse, e vou obter inteligência Então, está me dizendo automaticamente quais são meus valores . Muito deslize, hein Ok. Michael, você poderia adicionar um número inteiro nessa lista, não é? Você quer dizer. Assim. Sim. Gosto do que o Co Pilot sugeriu. Alguém já usou o copilot? Eu pretendia desligá-lo. Eu achei isso útil. Descobri que o Co Pilot é muito bom em saber o que eu quero que ele faça. E é muito bom para criar testes unitários para mim. Ok. Alguma pergunta sobre a interface? Tudo bem Eu tinha uma pergunta. Meu inter está reclamando Acho que é porque o arquivo de conflito TS para ionic? Isso não é. Está usando TS e não ES em. Você notou? Eu não tenho. É isso que está fazendo? Ainda estamos padronizando? O padrão ainda é S n. Min é dois, então. Não sei por que ele está reclamando disso. Sim. Não vejo nenhum TSN na fila Não. Ok. Algo está reclamando disso, mas eu não O pai da Microsoft está reclamando disso. Então, você pode nos mostrar o plug-in de um copiloto que você estava usando Parece que são dois deles. Essa é uma boa pergunta. Ok. No momento, não estou pagando por isso. Então eu tenho esse. 3131. Eu não sei o que é esse. Oh, todas as noites Sim. Eu fui em frente e não estou usando. Estou usando o oficial do G Hub. E, como eu disse, ainda não estou pagando por isso. Acho que o tenho de graça por mais algumas semanas. Ou talvez eu comece a manter um repositório de código aberto. Tudo bem. A próxima coisa que precisamos fazer. Estou tentando fazer a coisa chata de esclarecer tudo isso mais cedo: precisamos gerar um serviço estudantil Essa é a coisa que vai lidar com toda a interação de dados para lidar com os alunos, e esse é o arquivo realmente grande que eu tenho para você. O que eu quero fazer aqui é isso. Traga de volta minha linha de comando A aqui. E lá vamos nós. Tire isso do caminho. Ok. Então, aqui, eu não estou usando a CLI. E a razão pela qual eu não estou usando o CL é para mostrar que eles são na verdade a mesma coisa. Portanto, a CLI iônica simplesmente delegará ao CL angular. A razão pela qual eu o prefixo com PX é porque não quero usar a CLI angular instalada globalmente Quero usar o que está embutido no meu projeto iônico. Todos estão familiarizados com o PX, o que isso faz? Sim. Quero dizer, ele faz muitas coisas. Mas o principal é que ele usará a versão do NG que está na minha pasta de módulos de nós em vez da minha pasta global. Ok. Então, vou gerar um serviço chamado estudantes. Uma coisa que eu gosto muito de fazer. Eu gosto de usar o comando dry run só para ver o que ele vai fazer antes de fazer isso. Isso vai gerar dois arquivos para mim. Ele gerará um arquivo de teste e meu arquivo de texto datilografado de serviço e os colocará diretamente na pasta do aplicativo. Tudo bem. Em um projeto maior, eu não gostaria de fazer isso. Quero manter muitas coisas um pouco mais organizadas. Então, eu diria que, para colocá-lo em outro lugar em dívida, eu poderia colocá-lo em estudantes de serviço, por exemplo. Agora você pode ver que ele vai colocá-lo em uma pasta chamada serviços. Bem, vá em frente e deixe assim. Vou tirar a bandeira de corrida seca e deixar que ela a construa. O serviço estudantil nos dará estudantes que poderemos exibir. Sem uma lista de estudantes, não há muito que possamos fazer. Novamente, podemos voltar à minha lista, que estava aqui. Vá até o serviço estudantil. Pegue a versão. Selecione uma cópia. Encontre meu serviço estudantil e cole-o. E não gosta disso. Por que não é assim? Ok. Isso é justo. Alguém vê os problemas imediatos aqui? Essa é óbvia. É porque eu coloquei os serviços em uma pasta. Então, deixe-me mostrar que, se você não está acostumado com isso no código BS, vou remover essa linha. E então eu vou ver que o erro está aqui. Clique nela e clique na lâmpada azul e ela a encontrará para mim e reconstruirá a declaração de importação para Ok. Esse é um pouco mais difícil de superar. Então, o que acontece é esse serviço usa armazenamento de capacitores da Ionic Mas eu não sei. Ok. Nós o usamos. Estou usando isso. Então, precisamos instalar o armazenamento de capacitores. Então, vou abrir códigos S embutidos no terminal, que é o control back tick. E então eu posso simplesmente instalar o armazenamento de capacitores. Ok. E então esse problema deve desaparecer. Assim. Perguntas, comentários, preocupações. Todo mundo ainda está atualizado? Sim. Estou familiarizado com isso. Ainda há um monte de outras coisas acontecendo nisso. Se você sentir que está começando a ficar muito atrasado, me pare, me avise. Ok. Ok. Então você deve ter um serviço estudantil agora. Agora, o que eu quero fazer. O serviço estudantil tem um método de inicialização. Novamente, apenas para facilitar o acesso à interface do usuário. Então, o que eu preciso fazer no componente do aplicativo T. Vou pressionar Command P ou Windows Control P para abrir esse menu rápido e vou digitar o componente do aplicativo. Gosto de manter minhas mãos no teclado. Me dê um segundo aqui. Então eu tenho o construtor E isso é na verdade um erro de digitação porque isso não chama initialize É necessário que o componente do aplicativo seja implementado nele. E agora, vou deixar o piloto fazer outro trabalho para mim. Não é uma má suposição. Mas precisamos passar no serviço estudantil. Ok. E observe que foi em frente e encontrou todas essas informações para nós. Ele descobriu para onde importar o serviço estudantil. Então, agora. Novamente, nada mal, mas não é o que estou procurando. Precisamos comercializar uma sincronização porque queremos esperar. Sim. Deveria ser dentro ou fora da sala de aula? Deveria estar lá dentro. Obrigada Ok. Agora, como é que não é? Desculpe. Aqui vamos nós. Eu não o importei. Eu não sei sobre o resto de vocês, mas uma das minhas fraquezas, se você quiser, é o angular. Eu esqueço de importar coisas. É por isso que eu realmente gosto que o código VS faça isso por mim. E qualquer configuração de ES que eu tenha não tem um arquivo de origem que não tenha uma linha em branco no final, então ele vai reclamar muito disso Alguma pergunta aqui? Queremos ver o que isso está fazendo ou entendemos o que está fazendo? Quando o componente do aplicativo for inicializado, ele ligará para nosso serviço estudantil e solicitará que ele inicialize A inicialização do serviço estudantil faz algumas coisas Ele vai para o armazenamento iônico para tentar tirar todos os alunos do armazenamento Mas na primeira vez que você passar por ele , não haverá nenhum. Portanto, o comprimento dessa matriz de estudantes será zero. Então, nesse ponto, eu ligo para os dados e vejo que os dados simplesmente pegam essa variedade de estudantes simulados e os armazenam para mim Então, isso nos dá algo para mostrar. Isso faz sentido? Aliás, são todas pessoas reais que concordaram em me deixar usar seus nomes Tudo bem. Estamos bem. Seguindo em frente. Ok. Eu mencionei as importações. O código VS me manterá honesto. Mas se isso não acontecer, você está convidado a intervir e me manter honesto A maioria dos exemplos de código que mostro nos meus slides não tem as importações. Foi mais fácil economizar espaço. Ok. Agora vamos gerar a página da lista. Ok. É aqui que as coisas se afastam um pouco do andaime CLI angular padrão Quando você constrói um projeto iônico com partida iônica, ao instalar a CLI iônica, o Ionic não oferece alguns andaimes angulares que o angular O Angular não tem o conceito de página. Não sei se você já pensou nisso, mas quando você quer criar uma página e um angular, você cria um componente. Mas iônico tem o conceito de página iônica. Então eles te dão esse andaime. Portanto, posso digitar qualquer um desses dois comandos porque eles são funcionalmente idênticos Assim, posso criar uma página de geração iônica e chamá-la de lista. Tudo o que faz é chamar G generate page. Mas como o Ionic criou esse andaime para a página, o andaime realmente existe, podemos gerar uma página com iônico que não poderíamos fazer com iônico que não poderíamos Então, novamente, vou lavá-lo a seco. E você vê isso literalmente muito bem, não exatamente, mas o comando NG generate. A maior diferença entre criar um componente angular para nós como uma página e realmente uma página iônica é que as páginas iônicas são construídas com seu próprio módulo por padrão e são Portanto, uma página iônica não será carregada até o momento da execução, quando você realmente a chamar Isso ajuda os aplicativos iônicos a se ativarem e iniciarem muito rapidamente Tudo isso faz sentido? Sim. Tudo bem Vou desfazer meu comando de execução a seco e deixá-lo pra lá. Ok. Eu preciso fazer. Não, eu não preciso fazer a mudança. O InCars já fez essa mudança para mim. Então, se olharmos para o módulo de roteamento de aplicativos, a CLI iônica ou a CI angular adicionaram essa forma e essa é a carga lenta do módulo de lista Isso significa que quando acessamos nosso aplicativo e usamos como nosso caminho no final de nossa URL, ele instanciará esse módulo de página de lista, o que fará com que a página de roteamento da lista carregue a página Então, recebemos tudo isso de graça. Você pode fazer isso com a CLI angular, mas nunca me lembro de como você não cria um componente, você cria um módulo Eu acredito que é assim que funciona. Mas eu preferiria que mesmo que não estivesse usando um projeto iônico, eu ainda poderia ficar tentado a usar a CLI iônica para criar minhas páginas, porque você vai tirar esse carregamento lento Então eu acabei de mostrar isso. Agora vamos gerar nossa página final, que é nossa página de informações para estudantes. Use qualquer um desses dois comandos com os quais você se sinta confortável Novamente, ele construirá quase exatamente o mesmo andaime Eu vou deixar isso pra lá. De volta ao meu aplicativo, você pode ver que tenho minha página de lista e minha página de informações do aluno Agora, há uma mudança que preciso fazer. Se você já criou algum tipo de visualização de detalhes principal, sabe que, quando chega à visualização de detalhes, normalmente precisa passar a ID da coisa que deseja ver. E então isso não é diferente. Ele ainda fez uma alteração no módulo apparalti para mim, mas não preciso tocar nesse Mas na rota da página de informações do aluno, preciso adicionar esse ID de dois pontos ao caminho Então, abra o roteamento de informações do aluno, encontre o caminho e adicione o ID de dois pontos O que isso significa é que, em nosso aplicativo, teremos uma rota parecida com essa. OK. Então, teremos apenas uma taxa de identificação no final da rota. E isso será passado como o parâmetro de rota de ID. Eu tenho uma pergunta. Há alguma diferença em fazer isso dessa maneira do que fazer o parâmetro de rota no roteamento carregado com lacy Você quer dizer colocá-lo em um módulo de roteamento. Colocando aqui, você quer dizer? Sim. Existe alguma diferença dizer o ID legal Info do aluno? Você poderia fazer isso , mas não conseguiria acessar roteamento de informações do aluno e fazer nenhuma modificação aqui Talvez esteja tudo bem. Então, talvez esteja tudo bem. Então, talvez você tenha um caminho chamado Editar. Isso faz sentido? Ok. Sim. Eu entendo. Então, ao colocar isso aqui, você diria, ok, as informações do aluno reduzem a carteira de estudante E agora, no módulo de informações do aluno, talvez você tenha uma edição. Mas talvez você também tenha um Delete. E esses são e o que você acaba tendo são componentes diferentes. Então, talvez você tenha uma página de informações do aluno e uma página de exclusão do aluno. Mas essas duas páginas compartilhariam o mesmo módulo. Eu não tinha pensado nisso. Na verdade, isso é muito inteligente. Então, sim, você poderia fazer isso. O que você não pode fazer agora , porém, é como adicionar um novo aluno? Porque você não teria uma identidade. Então, eu gosto de mantê-los , eu gostaria de mantê-los limpos nesse nível. OK. E então coloque tudo aqui porque agora você poderia fazer coisas como se você quisesse, agora você poderia fazer Você poderia cortar as informações do aluno e. Ok. Sim. E então eu posso reutilizar o mesmo componente. Certo. E eu acredito que é assim que eu faço isso mais tarde. Obrigada. Todos estão bem aqui até agora? Caso contrário, acho que este fará mais sentido à medida que começarmos a detalhar as páginas. Eu continuo olhando para Andrew e ele fica tipo, Ok. Normalmente, a essa altura, quero dizer, estou sentado aqui há uma hora e meia. Quando estou fazendo esse workshop pessoalmente. Neste ponto, todo mundo está praticamente pronto para fazer uma pausa. Você quer pegar cinco ou quer seguir em frente? Estamos programados para ir até as dez, mais uma hora. Faça uma pausa ou continue. Estou bem de qualquer maneira. Sim. Eu estou bem se continuarmos, tudo bem. Ok. Vamos continuar. Tudo bem. Menu lateral. Então, vamos entrar em algumas interfaces de usuário agora. O menu lateral, nesse caso, usa a bandeja dividida. E a panela dividida é um pouco complicada. Provavelmente todos vocês já viram isso. Quando a tela é estreita, ela se transforma em um menu de hambúrguer Mas quando é largo, como vemos aqui, está sempre visível. Portanto, é uma peça de interface de usuário muito responsiva. O importante que você precisa saber ao lidar com um pino dividido. R, o ID do conteúdo. Portanto, no atributo ID do conteúdo do painel dividido está o ID do elemento em sua página que conterá seu conteúdo principal Isso ficará claro em um momento. Normalmente, é a tomada do seu roteador. Portanto, a tomada do roteador é um dos principais componentes de toda a página. O atributo desativado faz o que você acha que faz. Quando estiver desativado, o pino dividido e o menu não serão exibidos. Não consigo dizer como é frustrante ter um menu desativado que, por um motivo bizarro, você não consegue descobrir por que ele não aparece E quando diz ao painel dividido sob quais circunstâncias ele deve estar visível Pode ser um Bolan. Assim, você pode configurá-lo programaticamente como verdadeiro ou falso, ou pode ser uma consulta de mídia CSS completa Portanto, pode ser uma consulta de mídia que diz largura máxima da tela de 500, por exemplo, largura mínima de 500. Costumo usar os padrões para coisas assim. Então, eu não costumo mexer com eles. Também temos o ID do menu. Portanto, quando você estiver usando uma bandeja dividida, a bandeja dividida normalmente terá um menu anexado a ela. Portanto, ele também precisará do ID HTML do menu ao qual está anexado. Também precisamos dizer de que lado da tela queremos. As versões anteriores do Ionic usavam a esquerda e a direita, mas o Ionic agora suporta culturas e layouts da direita para a esquerda Então, é começo e fim. Na maioria das culturas ocidentais, início seria à esquerda e o fim à direita. E, finalmente, você precisa dizer como deve ser. Esse é o tipo de menu. E eu tenho uma animação aqui. Espero que apareça. Eu tive que criar essa animação apenas para provar para mim mesma que esses três tipos de menu são diferentes. Observe-os por alguns segundos. Diga-me se você consegue descobrir qual é a diferença entre Push e Reveal. A sobreposição é bem simples. Mas qual é a diferença entre Push e Reveal? Qualquer um? Os planos de fundo se movem no Push. Não é seguir em frente, revelar. Qual plano de fundo? O menu é o menu traseiro que diz casa em Roster? Correto. Sim. Levei muito tempo para descobrir isso. Na verdade, eu coloquei essa animação no Twitter e ainda tinha um monte de gente perguntando: qual é a diferença entre Push e Reveal? Então você está certo. O menu não se move ao revelar. Ok. Por que eles lutaram contra eles naquele iônico Eu não tenho muita certeza. Essa nunca teria me ocorrido. Parece mais um arrasto e eu meio que acho que as especificações do material são o que ele considera o eixo Z. Portanto, há camadas em cima das coisas. O design de materiais normalmente usa revelação? É uma das especificações. A biblioteca de materiais deve ser construída de maneira semelhante a essas especificações. Mas sim, o design de materiais diz que deveria haver um eixo Z. Entendi você. E empurre eles juntos e eles estão apenas empurrando um deles para fora do caminho, certo? Sim. Acho que esse seria o raciocínio deles Muito legal. Eu só usei a sobreposição pessoalmente Ok. Então, no painel dividido, teríamos um menu, e o menu teria duas páginas, a página inicial e a página da lista E a maneira como fazemos a implementação disso é uma matriz de páginas do aplicativo no componente do aplicativo. Se eu não me engano. Esse também está aqui. Sim. Os componentes do aplicativo já estão prontos, então podemos simplesmente extraí-los da essência Abra o componente do aplicativo. E eu acredito que é só colar. Não, eu não gostei disso. Oh, eu entendo. Porque mudei o serviço estudantil. Então, novamente, eu quero excluí-lo. Volte aqui e deixe o VS Code encontrá-lo para mim. Lá vamos nós. E então ele quer minha linha vazia. Então, agora eu tenho uma variedade de páginas, página inicial e lista. Então, o que estamos fazendo aqui é ter um rótulo para o título do menu, Início e Lista. Qual é o URL. Então, para onde essa coisa vai? Qual rota? Você ia usar a rota inicial ou a rota do plantel? E então qual ícone usar? Claro até agora. A próxima coisa que faremos é iterar sobre essa matriz e criar o menu Portanto, se nosso aplicativo tiver mudado no navegador , ainda é um plano de distribuição. Se você deixou o ionic serve em execução , não verá nenhuma alteração porque ainda não fizemos alterações na página inicial Ok. Ok. Por isso, criamos vários outros arquivos e fizemos alterações no aplicativo, que deve ser continuamente reconstruído e renderizado Mas como ainda não fizemos alterações na página inicial, você não a verá Ok. E a razão pela qual estou fazendo isso nessa ordem, essencialmente, é que a revelação final será um pouco mais impressionante. Fizemos tudo certo. Só estou curioso. Tudo bem Então, a seguir, isso é o que vamos fazer para criar Well, para iniciar nosso pino dividido. Isso ocorre no HTML do componente do aplicativo. Então, no momento, a única coisa no HTML do componente do aplicativo deve ser o aplicativo e a saída do roteador. Portanto, o mínimo absoluto para exibir qualquer coisa em um aplicativo iônico OK. E essa, eu não te dei a possibilidade de copiar e colar. Então, eu vou tirar isso do caminho. E parece que fiquei preso no meu outro monitor. Ok. Vou fazer uma pequena pausa enquanto todos vocês digitam isso em seu próprio aplicativo Então você pode ver na parte inferior aqui, eu tenho a tomada do roteador ligado. Então, todo o painel dividido envolve a saída do roteador e todo esse código vai para dentro da tag on app Isso faz sentido? Sim. Eu vou digitar isso também. OK. Bem, você quer me ver digitando ou quer que eu digite fora da tela para que você possa copiar isso. Você pode fazer isso fora da tela, para facilitar. Ok. Curiosamente, o copiloto fez um trabalho muito bom. Então, dentro da bandeja dividida, temos o menu ligado, e é isso que estará no componente esquerdo do menu. Então, começamos com um cabeçalho on, que é aquela pequena área cinza na parte superior, e o cabeçalho consiste em uma barra de ferramentas, que consiste no título com o menu de palavras nele. Esse é um padrão que você verá repetido repetidamente em iônico Um cabeçalho ou rodapé contém uma barra de ferramentas, que contém uma coleção de botões de título, que contém botões É muito hierárquico, mas muito consistente. Então, aqui, teremos apenas uma barra de ferramentas com o menu de palavras dentro do cabeçalho. Abaixo do cabeçalho, não temos conteúdo. Quase tudo o que você deseja renderizar em iônico precisa estar em um conteúdo de íons E no próximo slide, eu acredito, vamos colocar o conteúdo do menu lá. Assim, você não precisa digitar no menu. Nós vamos aqui. O que é ID de conteúdo neste exemplo. Isso é uma coisa direcionada ou alguma outra coisa. Desculpa. Ok. Então você está falando com esse ID de conteúdo na parte superior? Sim. O que isso nos diz é que o painel dividido e o menu estão controlando as coisas que estão em outro elemento HTM cujo ID é o conteúdo principal Então você verá isso aqui embaixo, sua própria tomada de roteador. Precisamos adicionar o conteúdo principal do ID a ele. Ok. Isso faz sentido? Sim. Como isso é alcançado por meio de uma visão infantil ou, normalmente, como alguém faz isso se você está criando a sua própria? Não precisamos entrar nisso agora. Sério. Não tenho certeza se entendi a pergunta. Se você quisesse criar seu próprio componente que fizesse algo semelhante. Você usaria child ou algum outro. Você poderia? Sim. Você poderia usar uma criança. Eu uso a criança em alguns lugares. Não me lembro se faço isso aqui. Mas sim. Se você queria seu próprio componente personalizado, quer dizer que atuou na tomada do roteador ou outra coisa que tivesse um ID? Se eu entendi sua pergunta corretamente, então sim, você poderia fazer isso com um teste de visualização. Ótimo. Sim. Estamos prontos para passar para o menu? Ok. Eu sou. Ok. Então, novamente, a partir do conteúdo. Dentro do conteúdo, teremos uma lista de itens ativados. Entrar na lista é praticamente o que você esperaria. É uma lista de coisas. É uma coleção de um componente de contêiner que pode conter outras coisas. Para onde vai o conteúdo? Quais arquivos estão agora? Isso está no HTML do componente do aplicativo. Então, se você observar que o que vamos fazer está dentro da lista ativa, vamos adicionar uma opção no menu Esse será um componente ativo que sabe como interagir com esse menu. OK. Então, vamos ter uma opção de ocultação automática no menu definida como falsa E teremos um para cada elemento em nossa página de arte da matriz. Então, lembre-se. Espere um pouco. Meu código BS está preso. Ok. Lá vamos nós. Lembre-se de que temos isso na matriz de páginas. Ent 3. Sessão2: Ok. OK. Todo mundo. Bem-vindo à segunda sessão. Neste momento, todos nós deveríamos ter uma lista de classes parecida com esta, e hoje à noite vamos tentar aprimorá-la com algumas funcionalidades e mais alguns componentes de interface E, assim como antes, se eu descobrir que estou indo rápido demais ou se estou pulando um conceito importante que não é óbvio para todos, vá em frente e me pare e diminuiremos um pouco Novamente, assim como da última vez que terminamos, posso ficar por aqui um pouco e visitar qualquer coisa quando precisarmos de você. Soa bem? Sim. Tudo bem Então, a partir daqui, acho que temos a foto do indivíduo e o nome, correto? Não temos nenhuma dessas outras coisas aqui em cima, e não temos o botão Fab aqui embaixo Correto. E, por alguma razão, ela realmente não gosta de avançar. OK. Já falamos sobre ícones. Então, eu não acho que precisamos revisitar isso novamente. Mas, para recapitular, se há ícones que você deseja procurar, você precisa saber onde encontrá-los, basta obtê-los nos ícones Ok. Então, vamos direto ao assunto. E é isso que vamos adicionar à página da lista. E vendo esse código bem rápido. Isso criará os dois botões no lado direito do nome de cada aluno. Então, vamos criar contêiner de botões dentro de cada item de íon, e cada contêiner de botões conterá dois botões, e esses botões serão compostos apenas pelo ícone das reticências para nos fornecer um menu detalhado e seguida, pela divisa frontal que nos levará à página do Rofter . OK. Faz sentido? Sim. Tudo bem. Vamos ver. Se eu puder fazer isso ao seu lado, mas ainda ter. Vai ser difícil fazer isso simultaneamente, não é? Vamos fazer isso dessa maneira. Se eu for para minha página de galo, eu vou para minha página HTML de lista E temos a lista “on” e a “on om” com o ícone de contorno da pessoa e, em seguida, uma etiqueta para o nome da pessoa Então, logo depois disso, queremos alguns botões e, dentro deles, botões colocados iguais ao final em um minuto aqui no manipulador de botões Essa função ainda não existe, mas vamos escrever uma função chamada present action sheet e passaremos o aluno atual, para cada linha tenha seu próprio aluno por causa do NG quatro. Ok. E depois dentro do botão. Sim, vamos usar um ícone ligado com apenas o ícone de slot, então não haverá texto nesse botão. E eu quero o contorno horizontal da elipse . Se eu não fizer mais nada, deixe-me começar minha própria curva. Texto absoluto. Ah. OK. Você está mudo. Você está mudo. OK. OK. Há quanto tempo estou silenciado? Desde que você foi embora. Tudo bem. Eu preciso voltar para trás Acho que não ouvimos quando você estava deslizando. Sim. Então chegamos aqui, certo? Todo mundo está bem com esse? Quero dizer, pelo menos minha lista de resultados se parece com a que você está apresentando. Todo mundo tem algo assim? Ok. Sim. OK. Eu peço desculpas Então, todo mundo criou uma função vazia para apresentar uma folha de ação? Não faz nada. Isso apenas impede que tenhamos um erro no console? Sim. Tudo bem. Então, vamos escolher esse. Ok. Então, agora, vamos voltar aqui. OK. Agora vamos aprimorar um pouco mais a interface com o controle deslizante Acho que todos nós já vimos essa interface de usuário antes. O que fazemos aqui é adicionar um componente de opções de itens de íons. E com isso, podemos adicionar um botão em cada lado do item. Portanto, ele permanecerá oculto até que o usuário deslize para a esquerda ou para a direita Nesse caso, o que eu quero fazer é criar um botão de exclusão no lado direito. Então, se o usuário deslizar para a esquerda, ele verá o botão de exclusão. Essa é a marcação que precisamos para que isso aconteça, e ela vem logo após a tag fechada dos itens de íons Faça isso aqui. Eu encontro a etiqueta fechada do item de íon e adiciono a extremidade lateral das opções ativadas, que significa que ela estará à direita para a maioria de nós. Aqui, vou usar a cor perigosa, que por padrão é vermelha quatro iônica, e vou deletar o botão Então, algumas coisas. Acho que mencionei isso da última vez. Sempre que você tem um contêiner, um iônico que pode lidar com várias coisas, como botão ou, neste caso, uma opção de item Normalmente, você colocará isso em uma versão plural do mesmo nome de tag Portanto, nenhum botão cercado contém objetos de botão. Nesse caso, uma opção contém a opção. Isso faz sentido? OK. E então, por aqui, teremos eventos de cliques que eu vou chamar. Confirme se o aluno é aprovado pelo aluno atual. Ainda estamos dentro do NG Four, então ainda temos um aluno. Ok. OK. E, novamente , ainda não existe. Agora, uma coisa muito legal sobre isso. Deixe-me te mostrar isso bem rápido. Vá para a página renderizada. Então, agora eu devo ser capaz de deslizá-lo e pegar o botão de exclusão. E como não há função, não fará nada, nós me damos um erro no console. Mas para sorrir, você não está limitado porque não está limitado a um e isso deve ser garantido porque tem o contêiner de componentes plurais Então, para sorrir, se eu der dois, são dois. E então eu estava me perguntando um dia, eu me pergunto quantos aguentam. E, curiosamente, ele suporta o máximo que você pode jogar nele E faz a coisa certa. A marcação, quero dizer, parece boba, mas funciona. Então eu achei isso meio legal , mas eles apoiam isso. Quantos eu precisei remover? Ok. Muito poucos. Ok. E presumo que você também possa usar como ícone em vez das palavras de Kevin Curiosamente, não. Porque você percebe que esse não é um botão ligado. É uma opção de item de íon. Mas você mencionou um bom ponto. Deixe-me começar, eu nunca fiz isso antes. Então, vamos ver se o que eu digo temos que fazer lá. Então essa era a opção. Você pode colocar um ícone nele? Parece que não suporta um ícone. Está na parte deslizante do item da documentação. Tudo bem Então, aqui está o que estamos fazendo agora? Não, aí está. Sim. OK. Estou feliz por estar errado aqui. Isso faz muito sentido. Portanto, neste caso, poderíamos ter, em vez da opção de item de íon. Bem, vamos tentar. Poderíamos ter feito acho que é válido. E então, para onde vem o clique? Sobre o Offman's Bill? Isso faz? Não. Eu preciso de um slot. Tudo bem Nunca quis me esquivar de programar ao vivo e fazer experiências em Essa é a morte de Demo God, certo? Certo. Agora a pergunta é: onde está meu aplicativo? Aqui está meu aplicativo. Olha isso. Não está certo. Do tipo que eu ainda tinha um extra. OK. Então, acho que poderíamos ter feito a mesma coisa aqui. Roller é igual a perigo. Não. Então, isso seria colocar esse na opção. Aí está. Como é isso? Honestamente, acho que gosto mais disso. Então, eu vou me livrar desse. Eu só tenho uma opção com o ícone. E renderiza. OK. Nada mal. Boa chamada. Sinceramente, nunca me ocorreu colocar um ícone lá. Eu nunca vi isso ser feito. É sempre um botão de texto. Tudo bem. Todo mundo está preso aqui? Sim. Deixe-me pegar o código bem rápido. Ah, claro. Ou você quer o código do ícone? Ah, o código do ícone. Sim. Código de ícone que eu tenho aqui. Você consegue ler isso? Sim. Sim. OK. Tudo bem Avise-me quando tiver. E você provavelmente pode adivinhar o que está por vir. A próxima coisa que precisamos fazer é detalhar a função que falta. Tudo bem, entendi. E então faremos isso. Ok. Não, pelo menos por enquanto. Ok. A próxima coisa que eu quero fazer. Mantenha isso fora do caminho novamente. Isso aqui embaixo é um botão de ação flutuante. É fabuloso e acredito que seja usado principalmente em design de materiais Acho que não vi muito isso no iOS. Os aplicativos do Google usam o Gmail e o Google Docs Ok. Então, para usar isso, que eu tenho aqui é apenas um menu pop-up rápido quase para fins de depuração Então, este é um botão de adicionar aluno, e isso é uma redefinição do aplicativo para seu estado original, e eu acredito que este seria deletar tudo e depois ver o banco de dados. Para fazer isso. Apenas algumas coisas que você deve saber sobre um fabuloso. Quando está aberto, é ativado. Você pode definir o atributo de borda como verdadeiro ou falso. Se for verdade, veja se eu entendi direito, o fab será exibido na borda do cabeçalho se estiver vertical Portanto, horizontal e vertical para determinar onde a fábrica está posicionada na tela Ok. Eu só o vi no canto, mas você também pode colocá-los no meio. Acredito que quando a borda é verdadeira, ela realmente se sobrepõe um pouco ao cabeçalho E se for falso, ficará embaixo do cabeçalho do conteúdo E eu tenho outra nota aqui. Se a vertical estiver na parte inferior, ela deverá ser usada com o slot fixo. Essa é uma nota que tenho para mim mesma e, sinceramente, não me lembro do que isso significa Ok. Então. Essa é a marcação para tornar esse menu fabuloso funcional Então, vamos criar uma visão do contêiner na extremidade horizontal inferior direita, então é o canto inferior direito. E aqui eu uso o slot fixo. E consistirá em um botão fabuloso. É aí que você vê quando o menu não está expandido. Será apenas um ícone com uma elipse vertical. Quando for expandido, teremos a lista on fab E ele se expandirá para a esquerda até o início da página. E terá alguns botões. E lembre-se de como eu estava dizendo que o iônico é realmente consistente na forma como ele nomeia as coisas Isso parece ser uma exceção porque a lista contém os botões. Não é uma coleção de botões fabulosos. É uma coleção na fabulosa lista. Vamos fazer isso bem rápido. Veja se consigo fazer isso. Isso é muito texto na tela. Deixe-me fazer em pedaços. Esse será o elemento esquerdo dentro do conteúdo ativado. Então, no fabuloso. Não tenho ideia de como ele sabe que eu queria fazer isso. Tudo bem, acho que se você pegar uma cópia , está ficando um pouco assustador. OK. Vocês estão usando o copilot e podem me dar o link para isso Sim. Estávamos falando sobre isso da última vez. Eu tenho a carga de extensão aqui. Não, não importa, desculpe. Eu estava pensando que você está usando os trechos. Sim. Eu tenho alguns trechos. Tudo bem Eu só vou digitar. Eu sou, eu não consigo ver isso agora. Eu tenho alguns que são iônicos. Eu tenho alguns em trechos. É este em just called on snippets. Eu quero voltar aqui. Eu provavelmente poderia simplesmente desligar o co-piloto. Tudo bem Então, aqui, estamos no Fab Button As elipses verticais. E depois do botão. Ok. Oh, muito bom. Eu vou ter apenas mais alguns. OK. O ícone é um ovo, mas, para mim, parecia próximo o suficiente de uma semente e decidi usá-lo para semear o banco de dados. Mas, por enquanto, nem conseguiremos adicionar nenhuma funcionalidade a isso. Se estiver funcionando, usamos o menu de trabalho. É isso que todo mundo tem? OK. Se você quiser, pode brincar com o jogador do lado defeituoso, com partida igual Se você preferir que ele cresça, então devemos ser capazes de mudá-lo para um lado igual ao topo. Então cresça. OK. Isso é legal. É um pequeno recurso interessante. Eu o uso muito para depuração. Vou criar uma pequena fábrica de depuração que só é ativada quando o modo de produção é falso ou o modo de desenvolvimento é verdadeiro ou o que for usado Vou inserir coisas como banco de dados, limpar o banco de dados, limpar os registros, me mostrar informações do dispositivo, coisas assim. Ou, se eu estiver escrevendo um jogo, terei um que jogará o jogo inteiro até a última jogada que eu possa testar o cenário do final do jogo. Ok. OK. Você também pode mexer com eles programaticamente. Todos eles têm uma API, mas eu tento fazer o máximo possível de marcação Todos estão prontos para seguir em frente. Todo mundo tem um fabuloso? Sim. Sim. Tudo bem Então, agora é hora de colocar algumas funcionalidades por trás dessas interfaces de usuário. Então, lembre-se de que mencionei que precisaremos de alguns controladores imperativos Então, vamos fazer isso agora. Todos estão familiarizados com a ficha de ação? Esse é o pequeno menu que aparece na parte inferior? Acho que tanto o IOS quanto o Android têm uma versão disso. E, como seria de esperar, Monic fornecerá o que parece negativo para o seu dispositivo No entanto, você os constrói programaticamente. Você não os constrói em HTML. Você os constrói em texto datilografado. Ok. Mas temos essa função lá vazia. Precisaremos marcá-la como uma sincronização porque todos os controladores iônicos são todos assíncronos, então vamos querer aguardar as funções que chamamos controladores iônicos são todos assíncronos, então vamos querer aguardar as funções que chamamos. Então, a primeira coisa que eu quero fazer é criar alguns botões. Normalmente, eu faria tudo isso em uma grande função gigante, mas isso é muito difícil de apresentar. Então, o que vou fazer é criar os botões primeiro e depois combiná-los todos e exibi-los. Isso faz sentido? Então, com meu código aqui. Não. Lá vamos nós. B no texto datilografado da lista Antes de apresentarmos a ficha de ação, não, desculpe. Dentro da folha de ação. Então, vamos criar um botão. É um tipo de botão de folha de ação. O que dá essa boa inteligência. Ok. OK. E o que queremos que essa função faça ou o que queremos que o botão faça quando o usuário clica nele Então, a primeira coisa é o rótulo de texto do item de menu, o ícone que queremos apresentar, que é apenas o nome dos ícones dos ícones. E então a função que queremos executar pode ser uma função de nome, mas neste caso, vou usar apenas uma função de seta. E a função já existe no serviço estudantil. Então, esse serviço estudantil que Mark apresenta. Eu preciso de uma vírgula. E depois um ponto e vírgula E então, como sempre faço, esqueci de importar o botão da folha de ação do angular iônico Tudo isso está claro? Ok. Todo mundo tem esse? Sim. Então, são realmente os tiques inversos assim ou são aspas simples Pode ser qualquer um. OK. Acho que em um lugar, na verdade, eu me lembro por que fiz isso. Se você digitar aspas simples no PowerPoint, ele as transformará automaticamente Curly, o que significa que você não pode copiar e colar Então eu comecei a usar backticks slides. C. Ok. Boa pergunta. OK. Então, a ausência de Mark será quase exatamente a mesma coisa. Então, preguiçoso. Vou destacar isso. Em seguida, desloque as opções para baixo. Faça uma cópia do bloco. Algumas delas atrapalham. OK. Marque o botão ausente. Marque como ausente. E esse é o esboço E neste, vou chamar o serviço estudantil para Mark Absent Avise-me quando eu puder seguir em frente. E no meu, era tudo quando eu os colocava lá, tudo era vermelho. Então eu devo tê-los no lugar errado. Você quer compartilhar sua tela bem rápido? Eu não posso porque não estou no meu tablet fazendo isso. OK. Certifique-se de que estejam dentro das constantes que apresentem uma função de folha de ação Essa seria a razão pela qual eu fiz a mesma coisa. Quando eu era, comecei a digitar neles do lado de fora. E então eu lembrei que você não pode ter uma constante em sua aula. OK. OK. Isso acabou. Eu fiz isso. OK. Então, só temos mais alguns botões para criar, mas todos eles serão criados de forma muito semelhante. Novamente, vou fazer um novo bloco. E isso é excluir rótulos de texto do botão excluir. Use o ícone de trach. E esta, observe que estou adicionando outra propriedade a ela. Estou adicionando um papel, e esse papel é destrutivo. OK. Destrutivo só faz diferença no IOS Android, isso não fará nenhuma diferença. Mas no IOS, ele mostrará esse item de menu específico em vermelho. E então, para o manipulador, vou chamar esse aluno de exclusão confirmada Todo mundo tem isso? 1 segundo. Claro. Michael, temos dois botões no aluno confirmado para Excluir? Temos dois botões na exclusão confirmada do aluno? Bem, você pode mostrar o código do avaliador lá por um segundo A mina? Sim. Isso é bom. OK. Então, todas essas são ações presentes. OK. Esse é o meu problema. Correto. Corrija facilmente. Certo. E confirme, vamos acabar colocando, você sabe, um diálogo de confirmação e dizer: Tem certeza de que deseja excluir essa pessoa? É por isso que eu nunca vou ligar para Delete no serviço estudantil ainda. Entendi você. Faz sentido. OK. Deixe-me colocar isso de volta aqui por enquanto. OK. E esse é, acredito, nosso último botão, e esse é o botão de cancelar. Então, a folha de ação aparece. Você não quer fazer nada. Você só quer cancelá-lo. É um botão de cancelamento. Observe que este não tem manipulador. Então, porque não precisa de um. Então, eu vou pegar. A mesma coisa, duplique, livre-se do manipulador. Chame isso de botão de cancelamento, Texas cancela roupas e o papel é cancelar. Portanto, existem algumas funções incorporadas no botão Cancelar da planilha de ação como uma delas, e isso significa simplesmente não fazer nada. E, como você viu, também é destrutivo. OK. Então, agora devemos ter quatro botões que não fazem nada, certo? Eles ainda não existem. Na verdade, eles não estão sendo referenciados por nada Então, o próximo passo é criar a planilha de ações a partir desses botões. Deixe-me mudar isso para baixo. Aqui fora do seu caminho. Então, agora queremos criar a folha de ação. Para fazer isso. Desculpe, continue da mesma forma. Desculpe, isso está na mesma planilha de ação atual. Ainda estamos na presente folha de ação. Função. Mas essa primeira linha não vai funcionar porque Mike nunca se lembra de injetar coisas em seu Portanto, antes de fazermos isso, suba ao seu construtor e adicione um controlador de folha de ação do controlador de ação de tubulação Por que não está gostando disso? Porque eu não o importei. Então, vou importar o controlador de folha de ação do ionic angular Depois de fazer isso, agora podemos voltar à presente planilha de ação e digitar o resto. Então, vamos criar uma planilha de ação e aguardar esse controlador de planilha de ação Eu já mencionei isso antes. Todas essas funções são assíncronas e Para criar a planilha de ação, fornecemos a ela um único objeto de opções. É aqui que dizemos o que queremos dentro dela. Queremos um cabeçalho onde os tiques invertidos sejam realmente úteis. Queremos o nome e o sobrenome do aluno. E então vamos criar. Isso também é muito bom. E devemos criar o botão criando uma matriz desses botões constantes que já criamos. Isso faz sentido? Temos algum tipo de script ou guru angular aqui? Eu sempre fiz essa pergunta e nunca recebi uma resposta consistente. OK. Faz sentido aguardar a última declaração de uma função assíncrona Ok. Se você observar agora um botão de planilha de ação, o Typescript acha que ele retorna uma promessa nula porque marcamos em uma sincronização e não estamos Mas eu também poderia apresentar, o que retorna uma promessa. E então o Typescript acha que retorna uma promessa nula. Qual é a diferença entre retribuir a promessa feita a nós pela ação presente ou simplesmente esperar por ela Há uma diferença e é muito sutil. E, sinceramente, não me lembro o que é. Acho que tem algo a ver com a pilha de chamadas e com erros Acho que se você não retornar a ação, veja por cento, o resultado da promessa é indefinido Mas se você retornar a porcentagem da ação, estará retornando o valor da promessa presente O que também é promessa nula. Sim. Então, a diferença , a meu ver, é que decidimos retornar indefinido Então, esse método praticamente se torna um incêndio e esquece, correto? Acho que sim. Você vê algum valor em retribuir a promessa? Eu nem sei por que eles devolvem promessa, porque se eles retornarem é nula, e talvez você queira ver se ela falha, eu não sei Honestamente, em todos os aplicativos iônicos que escrevi, nunca encontrei um motivo para fazer isso. Você pode até mesmo fazer isso. Você nem precisa esperar. E eu acredito que ainda pensa. É promessa nula. Mas já vi outras pessoas fazerem coisas assim. Eles farão algo depois do presente. Mas se você vai fazer isso, você já escolheu o padrão de espera assíncrona, você pode simplesmente fazer Algo parecido. Preencha isso. OK. OK. OK. Então, se você tem isso agora, quando ele renderiza, devemos obter uma folha de ação Então, o que vamos fazer com Casey McBry? Vamos marcar o presente, marcar o ausente, etc. Vamos excluir, excluir não fará nada e podemos cancelar. Você também pode descartar uma folha de ação apenas clicando em qualquer lugar fora dela E a tecla de escape no seu teclado. Sim. Todos têm uma folha de ação em funcionamento? Sim. Sim. Tudo bem Então, vamos fazer muitas coisas semelhantes novamente. Ao implementar o alerta para excluir. Para fazer isso, precisaremos do controlador de alerta. A API é quase idêntica ao controlador da folha de ação. Então, novamente, o que eu quero fazer por uma questão de simplicidade ou por uma questão de espaço na tela é criar alguns botões, e isso tem que ser uma sincronização. Esse botão de exclusão. Exclua o manipulador de seleções. Sim, claro. Excluir aluno. Isso. Ok. Então, erro de digitação no slide. Acredito que Delete student esteja procurando a identificação do aluno. Então, nós apenas passamos a carteira de estudante em vez do aluno inteiro. E então o botão cancelar. OK. OK. E, assim como antes, a função de cancelar funciona automaticamente da maneira que você espera. Ele descarta automaticamente o alerta. Só estou faltando aqui. Fizemos um método de exclusão de alunos? Deve ser um método de exclusão de alunos no serviço de atendimento ao aluno. Sim, eu vejo um. E depois, exatamente como antes. Qual foi o papel? Desculpe, foi cancelado? Cancelamento de função. Sim. OK. E, portanto, nenhum manipulador é necessário. Você ainda pode adicionar o Handler a todas essas coisas com o cancelamento da função E eu posso imaginar que você pode querer registrar. Sabe, eles acabaram de deletar um estudante, esse tipo de coisa. Assim como antes, no controlador de alerta. Todo mundo tem seus dois botões? E o controlador de alerta? Não. Então, acho que estou onde você está. Meu controlador de alerta está desatualizado e nunca é usado. Certo. Porque ainda não o usamos. OK. Então, fazer isso agora. OK. Eu estou bem. E, novamente, é muito semelhante ao controlador da folha de ação. Nesse caso, também teremos um subcabeçalho e uma mensagem Nós temos os dois botões. Agora, precisamos assim como o outro controlador, que tem uma função de criação que usa um objeto de opções. OK. E isso está dentro da exclusão confirmada? Ainda estamos dentro da exclusão confirmada, sim. OK. OK. Então, o que eu quero fazer aqui é mostrar, ei, você deseja excluir o aluno, mostrar o nome e o sobrenome dos alunos para que o usuário saiba o que está excluindo Você sabe, nada pior do que clicar na pessoa errada. E depois mensagem. Isso realmente pode ser feito. Mas em outra ocasião. E então adicionamos os dois botões. E, finalmente, se você pegar tudo corretamente. OK. Algumas coisas. Uma, é que isso deve funcionar. E isso deve funcionar. E o botão de exclusão simplesmente chama o serviço. Se eu excluir a série é. Eu posso me livrar do Greg. Livre-se de Neil e assim por diante. Como eles estão no armazenamento local, mesmo que eu atualize várias vezes Tudo bem Acho que vamos. Todos vocês estão liderando estudantes com alunos abandonados? Não. Eu não. Não estou recebendo o alerta. OK. Então, vamos exagerar um pouco. Sua exclusão confirmada deve ter esta aparência . Aluno confirmado. Botão Excluir, excluir manipulador, excluir aluno, sim. Botão de cancelamento, cancelamento de fechamento, não importa roupas. E, em seguida, alerta constante. Oh, tudo bem. Esse é o meu problema. E isso está bem. Sim. Ok, funciona. Eu estava perdendo a linha 70. OK. Tudo bem Então, agora. Me dê um segundo aqui. OK. Tudo bem Nós vamos fazer uma pequena mudança. E isso ajudaria você a ver os slides. OK. Quero adicionar uma função de exclusão de aluno ao componente. E eu vou te mostrar o porquê. Vamos entrar no código e adicionar outra função. Lembre-se que eu tinha isso. Isso é o que eu quero ver. que significa que aqui no Delete confirmado, chamaremos isso de Delete student em vez disso. Neste ponto, nada deveria mudar. Chamando, mudei o manipulador do botão de exclusão de chamar o serviço estudantil para chamar esse aluno de exclusão OK. É uma API um pouco mais consistente, você sabe, passamos o componente para o aluno . E isso esconde o fato de que o serviço estudantil só quer fazer isso por identificação Então, passando o aluno completo para este. Bem, dentro e fora da chamada. OK. Consegui. OK. Então, o que eu quero fazer aqui é usar o último dos controladores iônicos que usaremos aqui, que é o controlador toast Então, muitas vezes você quer dar ao usuário uma mensagem de que algo aconteceu. Mas isso não é crítico o suficiente para impedir o usuário de seguir em frente. E se o usuário perder a mensagem, talvez não seja grande coisa, certo? Então esse é o caso de uso perfeito para um brinde. Ok. Então, e você pode ver a foto aqui da torrada. Então, o que eu quero fazer agora é implementar o resto da função delete student. Ok. Então, você verá que a API do controlador de torrada é quase exatamente a mesma do controlador de alerta Mas, nesse caso, eu não tenho nenhum botão, então é uma função muito mais simples Deixe-me tirar isso do seu caminho. Entre na minha função de exclusão de alunos e configure isso. Excluir aluno retorna uma promessa para que possamos aguardar. Em seguida, vamos criar um brinde. E você provavelmente já viu o erro que eu tenho? E isso é que eu ainda não tenho um controlador de torrada. Então, volte para o construtor, poste o controlador e importe-o do angular iônico Então eu posso vir aqui e terminar. Minha torrada tem uma mensagem. E um bom. Foi excluído. OK. E agora, a mensagem é bem direta. O que você quer dizer ao usuário. O resto delas são as outras opções por quanto tempo você deseja exibir essas informações? E onde você deseja exibir essas informações? E no meu caso, eu quero ir em frente e vamos mostrar 3 segundos. Então, isso é em milissegundos. E eu vou colocá-lo na parte superior da tela. Há outras coisas que podemos fazer. Podemos colocar a cor em perigo para mostrá-la em vermelho. OK. Acho que o legal é que, se você controla o espaço, você pode realmente fazer com que todos saibam quais são as outras opções aqui. Assim, você pode adicionar botões a uma torrada da mesma forma que adicionamos a matriz de botões aos outros. E é literalmente a mesma API. Assim, você pode criar um botão no qual o usuário possa clicar para fechá-lo antes de decorridos os 3 segundos . Isso já passou Você pode colocar um ícone no lado esquerdo, um ícone em quase um cabeçalho ao lado da mensagem. Então podemos fazer, podemos fazer um trato de ícones e, seguida , apresentar a torrada Agora, quando eu vou deletar. O usuário. Recebo a confirmação e, em seguida, devo fazer um brinde no topo E você pode ver o pequeno ícone de lixeira e ele foi excluído. OK. E eu também posso colocá-lo no meio. Preciso acreditar, Bobby. Aí está. Ou na parte inferior. Perguntas. Todo mundo tem esse funcionando? Ok. Normalmente, neste momento, estaríamos no horário de cada intervalo Temos aproximadamente meia hora restante. E a próxima coisa que vamos abordar é a página de informações do aluno. Então, o que eu acho que quero fazer, geralmente é fazer isso depois do almoço. Portanto, há algo que perdemos na página de informações do aluno. Alguém sabe o que é? Alguém percebe isso? Vamos voltar ao aplicativo. Na verdade, há algumas coisas que perdemos. Podemos nos aprofundar nos próximos 20 minutos. Não há código por trás de nenhum deles, exceto o novo. Nenhum desses faz nada. E nada acontece se marcarmos como presente. Então, vou pedir um consenso de grupo. No que você gostaria de trabalhar a seguir? Você deseja marcá-los como ausentes e presentes ou deseja eliminá-los, instalando o banco dados e excluindo todos no banco excluindo todos no Bem, vamos para o presente e para o ausente. Tudo bem. OK. Então, presente e ausente, você traz o código S de volta OK. Portanto, a interface do usuário que eu imaginei para presente e ausente seria outro ícone em algum lugar da lista, ou talvez substituindo o ícone por um presente ou Você tem uma preferência? Algum desses soa melhor ou pior para alguém? Imaginar que isso pode acabar sendo uma interface de usuário muito pequena. Acho que vamos tentar isso. Logo após o ícone do contorno da pessoa. Vamos adicionar outro ícone. Acredito que ainda queremos um slot igual a um início. E esta é uma das maneiras pelas quais podemos fazer isso. Eu vou fazer isso de forma prolixo Este vai ser igual Usaremos os mesmos ícones que usamos para marcar presente e excluir. Então, o presente e o off-line são ausentes. Se fizermos isso, teremos um ícone presente e, em seguida, teremos um ausente, o que significa que precisamos decidir qual mostrar Podemos fazer isso de duas maneiras. Nós podemos fazer isso. Este ícone só será renderizado se o status do estudante for igual ao atual. OK. E então podemos fazer isso: um status de estudante é igual a. Ausente Então, antes de salvar isso e renderizá-lo, o que ele vai nos mostrar agora? O que isso vai fazer? Ele vai mostrar um dos dois botões. Você tem certeza? Desculpe. Um dos dois. Eu e se for? Porque você lembra que é um campo opcional, então pode ser nulo Então, olhando para isso. Não estou muito satisfeito com essa interface de usuário. O que você acha? OK. E acho que funciona. Adicione um terceiro ícone. Um ícone do nada? O que acontece se você. Você certamente poderia. Então, podemos adicionar para que possamos ter outro. E você pode realmente fazer isso, eu acho, se você der um nome que não existe. Então eu vou chamá-lo de Mike. E você pode simplesmente dizer NG Não é status de estudante. Então, se não tem valor algum, acho que o que vai acontecer Sim. É isso que você tinha em mente? Não tenho nada agora, renderizando. Incrível. O que você mudou? Eu adicionei um. Eu coloquei uma Tilda em vez de um Okay. Eu estou bem. OK. Então isso não é ruim. Mas então comecei a me perguntar: qual é o propósito do ícone da pessoa? Mas talvez a coisa a fazer seja colocar o ícone da pessoa, se não o status de estudante, e depois se livrar totalmente desse ícone. Como isso acontece? Eu te avisei há alguns dias. Eu não sou designer. É por isso que eu uso iônico, porque geralmente consigo copiar seus padrões muito bem Você pode ver o código novamente? Claro. Parece que precisamos de dois novos sabores do ícone da pessoa Bem, com uma vantagem ao lado e algo com um corte nela Tudo bem Então, vamos dar uma olhada em Examinar ícones. E vamos dar uma olhada em toda a nossa Pessoa. Aí está. Plus e Mus. Estamos usando isso para adicionar uma pessoa. Sim. OK. Mas temos preenchido e vazio Então você tem um esboço e preencheu. OK. Em vez do globo ocular E então você tem o Sharp, mas eu não acho que isso realmente nos ajude aqui. Quero dizer, novamente, é meio que. Mas havia outro, não era? O que é esse? Eu não teria imaginado que fosse acessibilidade, mas tudo bem. Então, podemos usar esse para eu não sei, ou podemos usar este para. Esse corpo. E então você poderia usar Ok. Esboço de pessoa e pessoa? Você pode mudar a cor deles? Sim, ela poderia. O que você está pensando? Eu não sei. Contorno preto sólido preto ou cinza ou desconhecido Bem, quero dizer, é um problema de design com você que eu não sou designer, então eu realmente não me importo. Mas, como você pode ver, tudo o que você precisa fazer aqui é mudar essa parte. Mas você tinha razão, então você poderia ter este , eles têm um cinza. Que cor é essa, ok. Deixe-me voltar às cores deles nos botões com uma lista de cores. A cor do voo é igual à luz. Nós trabalhamos. E então você poderia fazer se eles estivessem ausentes. Ok. Esboço da pessoa. E se eles estão aqui, uma pessoa e você podem até mesmo fazer cores com o mesmo sucesso. Não, não essa. OK. Como é isso? Claro. Bem, esse é quase invisível, não é? Então eu acho que mudaria isso para cor igual. Foi médio? Médio. Sim. Sim, isso também não me ajuda. Existe um meio preenchido? Nós poderíamos fazer isso. Então isso seria apenas uma pessoa. Sim. Eu poderia viver com isso. Então, descreva, eles estão ausentes, verdes, estão presentes e são médios que ainda não conhecemos E esse era o objetivo do botão de reset : reinicializar todos eles para que não soubéssemos o que são. Não consigo fazer com que nenhum dos ícones apareça além do contorno OK. Você é capaz de compartilhar sua tela? Não. Deixe-me dar uma olhada no código mais uma vez para que eu possa Ok. Ok. Preste atenção ao fato de que o nome deve diferenciar maiúsculas de minúsculas. Verifique se o NGF e os slots estão corretos. Parece certo. Sim. OK. Seu GFS tem as aspas corretas? Sim. Tudo parece o mesmo, mas por algum motivo , simplesmente não está funcionando. Eu não sei. Estranho Você pode copiar e colar seu ícone? Não, eu acho que você não pode ir ao chat? Acho que você também não pode fazer isso. Sim. Não. Eu estou bem. Bem, todo mundo tem os ícones funcionando? Sim. Então eu peço desculpas. Eu não tinha a janela dos participantes aberta. Quem está tendo o problema atualmente? D. Ok. Então, se você quiser, podemos ficar por aqui um pouco depois. Bem, podemos continuar seguindo em frente. Eu não quero atrasar todo mundo. Bem, vamos conectar esses botões aqui porque acredito que o serviço estudantil tem todas as funções para eles. Então, se voltarmos para R, aqui está, se voltarmos para os botões fabulosos, então isso é mais programação ao vivo, então temos que ter cuidado Este deveria ser chamado de reset, e isso não existe. E então, para o contorno circular, acho que foi a remoção de ervas daninhas Deixe-me voltar para esse e esse é o clique. Semente. Agora, se eu voltar para o componente, preciso reiniciá-lo. Eu acho que está certo. Não. Redefinir a frequência. E eu acredito que isso retorna uma promessa. Mas, neste caso, não preciso esperar que alguém o devolva E então eu preciso de uma semente. E esse é o dado inicial, que retorna uma promessa. Então, com isso, eu deveria ser capaz de vir aqui e reiniciar minha frequência, que os torna todos cinzentos E então eu posso marcá-los como presentes. Um de cada vez. E eu posso receber meu banco de dados, 4. Sessão3: Ok. Eu habilitei transcrição ao vivo antes? Isso acabou de acontecer? Bem, aí está. Ok. Então, a transcrição está ativada. Se você quiser ver, acho que está no menu Mais. Você pode visualizá-lo, alterar o tamanho, etc. Todos. Tudo bem. Sem mais delongas. Então, neste momento, devemos ter uma página de lista praticamente funcional E não sei se todo mundo viu, mas deixei um desafio tanto no e-mail quanto no Slack para ver como poderíamos nos livrar dos três ícones Alguém tem alguma ideia ou opinião sobre como fazer isso? Se sim, vá lá, sim. Eu fiz isso funcionar. O que você fez? Então eu poderia compartilhar se você quiser. Claro. Deixe-me ter certeza de que vou compartilhar a tela, mas acho que preciso parar de compartilhar. Ok. Vamos ver como faço para compartilhar a tela? Não sei se vocês conseguem ver isso. Então, eu acho que coloquei isso. Então eu comentei todas essas coisas. Não, está aqui. Então, linha 28. Sim. Então, o nome foi vinculado ao nome do ícone, passando-o para o aluno, e eu também colori. Perfeito. A cor é baseada na espera, o que você fez? Acabei de passar, então estou apenas passando no registro estudantil. A cor é igual ao aluno entre os pais. O que estou perdendo? O que você sabia? O que eu estava mexendo com isso? Desculpe. Desculpe. Sim. Eu estava tipo, eu já vi essa sintaxe antes. Não. E então as funções são apenas duas declarações H aqui começando por aí. Ok. Você notou a falha em fazer isso porque está certo Essa é uma maneira fácil de fazer isso e muitas pessoas fazem dessa maneira. Mas há uma falha em fazer isso dessa maneira e angular. Eu quero saber se você notou isso? Acho que não. OK. Eu estava escrevendo coisas para o console e não sei. É um pouco difícil de acompanhar. Ok. Então me diga. Então, coloque uma declaração de log do console dentro de cada função com o nome da função. E se eu estiver errado, ficarei muito feliz em estar errado. Ok. Perfeito. E depois outro para colorir. Alguém sabe o que vai acontecer? Ok. Então abra suas ferramentas de morte. Aí está. Isso é o que vai acontecer. Sim. Então, eles estão sendo chamados o tempo todo. Sim. Toda vez que angular precisa verificar se alguma coisa mudou, para vinculação de dados, ele precisa chamar essas funções porque não tem como saber que não precisa repintar Em um aplicativo como esse, não é grande coisa, você nunca o verá. Mas se você pudesse imaginar algo com centenas de componentes vinculados a dados, seria muito desagradável. Especialmente se essas funções fizessem algo mais do que apenas o que elas fazem lá, certo? Essas funções não fazem muita coisa. Então, não é grande coisa. Eu estava em um projeto em que eles passaram mouse e fizeram uma chamada de descanso OK. Como você pode imaginar, isso não foi bonito. Então eu acho que você está no caminho certo. Mas a maneira como vi isso feito para evitar isso é transformar o nome e cor do ícone em um tubo angular. OK. E com um tubo angular , são literalmente as mesmas funções. Mas porque a entrada para o tubo não mudou. O Angular sabe que não precisa se lembrar da função. Isso é algo que é feito facilmente? Ah, sim. Claro. quer que eu fale com você sobre isso ou você quer que eu fale com certeza. Ok. Então, vamos ver onde paramos a execução do aplicativo. E vá em frente e pergunte ao angular. Se você quiser, podemos fazer isso em um, o nome ou a cor. Não importa quais eram o nome. Ok. Portanto, faça com que o angular CLI gere um tubo e o PXG E então o nome do cano, então talvez o nome do ícone. Capital ou eu não importaria. Talvez você esteja bem. Isso é bom. Então, agora abra o tubo de nome do ícone. Isso será: Você pode comandar ou controlar o clique nele. No terminal. Onde diz o nome do ícone do aplicativo de origem? O controle clica no nome do arquivo na saída? Esse cara, certo? Não. Aquele ao lado daquele. Eu entendi você. Esse é o arquivo de teste. Sim. Vamos clicar no outro. O arquivo que não é de teste. Esse é o módulo do aplicativo. Tudo bem, vamos pegar o do meio. Aí está. OK. OK. Então, quando você usa um tubo, tudo o que você passa para o valor do limite de dados será passado para valor. Então, basicamente, o que você quer aqui é o nome do aluno. Os estudantes. Status de atendimento, certo? Sim. Você provavelmente não gostaria de passar todo o valor do aluno para isso porque só se preocupa com esse valor. OK. Então vá em frente. Então, o valor será uma string. Eu não acho que você precise do resto desses parâmetros. Mas não é uma corda. Você está correto. Não é uma corda. É status de estudante? Correto. Então, quero dizer, quando você começa a refatorar esse ponto, provavelmente faz sentido torná-lo seu próprio tipo OK. Mas, por enquanto, você pode fazer isso. Deve ser normal ser uma corda. E se eu me sair bem. Ok. Você poderia fazer exatamente o mesmo. Você pode torná-lo ausente ou presente. Vamos com o aluno agora e eu vou. Você pode refatorar mais tarde. Então, sim, agora é só uma questão de copiar e colar o mesmo código Ok. E isso é valor. OK. Ok. Então isso parece muito bom. Agora, de volta ao seu HTML, onde você está passando o ícone chamando o nome de aluno, basta passar aluno em aluno. Apenas estudante e depois coloque o nome do cachimbo. Nome do ícone. E então se livre dessa caneta, ok. E eu acredito que provavelmente há outra coisa que você pode deixar de lado, se quiser porque você deveria vê-la no console. Você verá que um deles não é chamado repetidamente. O que eu não lembro se há algo que você não pode mais usar. Sim, livre-se disso. OK. E eu colocaria um registro de console semelhante no cano. Dessa forma, você pode provar a todos que ela só está sendo chamada quando precisa ser. E há outra coisa que você ainda precisa fazer aqui. Estou esquecendo o que é por enquanto, então teremos que descobrir isso juntos Vá em frente e execute. O fato de estar ativado no módulo pode ser tudo o que você precisava fazer , pois foi adicionado automaticamente. Não, há um advogado. Ok. Tudo bem. Isso é o que eu estava com medo. Ele pode ser encontrado. Isso é pior do que revestimento salva-vidas. Isso é tentar dizer a outra pessoa como usar um colete salva-vidas. Eu sei. Tudo bem. Então o cachimbo está lá. Eu preciso ser? Preciso estar no módulo de lista. Volte para o módulo A. Acho que talvez tenhamos que declarar isso. Não, senhor. E eu pretendia fazer isso, você sabe, esta tarde para ter certeza de que estou pronto. Oh, meu Deus. Não, eu me sinto mal. É isso? O que foi? Qual é o nome do cachimbo? No arquivo TS de pontos tubulares. Aí está. Talvez não. Não. Abra seu arquivo pipe TS novamente. É a terceira guia do seu editor. Não, está aqui. OK. Sim. Então, como deveria ser chamado. Sim, meu cérebro está tendo dificuldade se lembrar disso e eu os uso o tempo todo É uma daquelas coisas que, depois de escrevê-la, você nunca mais precisa pensar nisso. Ele quer ter certeza de que foi declarado ou importado no módulo da página Roster Oh, talvez não entre no módulo A. Talvez você esteja certo. Talvez esteja no módulo da página de lista Ok. Então declare isso aqui. Em importação ou não tem seu próprio módulo. Então, apenas declare isso. Se você digitar o nome do ícone, ele deverá encontrá-lo para você. Aí está. E talvez seja necessário retirá-lo do módulo App. Aqui, isso mesmo. OK. Aí está. Tudo bem. Então, ainda é chamado quantas vezes? Uma vez para cada pessoa, certo? Sim. E veja quantas vezes mais a cor do ícone digite nove. Então, agora, se você clicar, basta clicar em qualquer lugar. Ok. Sim. Tudo bem. Bem, ficou um pouco melhor, então não continua ligando, meus botões sumiram. Não tenho certeza do que fiz lá. Sim. Aí está. Sim, nove vezes. Curiosamente, o nome do ícone pipe entendeu o que você fez? Você redefiniu alguma coisa? Acho que não. Eu acho que você fez. Acho que você apertou o botão reset no botão Fab. Porque todo esse tempo eu quebro a água. Sim, provavelmente. Todos os seus status de frequência desapareceram? Sim. OK. Ok. Então, o objetivo principal desse exercício. Eu não deveria desperdiçar 15 minutos do seu tempo. Foi para impressionar você que chamar funções a partir de seus modelos angulares nunca é realmente uma boa ideia Foi essa a mensagem que você recebeu disso? Sim. Totalmente. Eu não tinha ideia. Quer dizer, eu já vi esse comportamento antes. Nunca soube por quê? Nunca soube que eu nunca entendia. Quer dizer, eu não sei muito sobre angular. Todo mundo aqui vai abandonar o angular e reagir na próxima semana Não. Uma das coisas que eu tenho é pouco desse curso um pouco desse curso em formato de livro e vídeo para react. Eu costumo usar o angular com muito mais frequência, então é aí que me sinto confortável. Tudo bem. Então, vamos compartilhar novamente. E acessaremos a página de detalhes do aluno. Andrew, você vai precisar recuperar esses botões para poder acessar os detalhes do aluno? Eu vou trabalhar. Eu vou trabalhar nisso. Eu vou descobrir isso. Tudo bem. OK. Ok. Então, a página de informações do aluno, essa é a página de detalhes, e será principalmente a criação de formulários na validação. E, como você pode imaginar, iônico tem muitos componentes, muitas funcionalidades para tornar isso o mais fácil possível Mas, ironicamente, também é muito complicado. Então, em nossa página de informações para estudantes, vamos querer implementar um botão Voltar para que você possa voltar ao Rosa. Vamos reutilizar em rótulos. Você já os viu, mas vamos usá-los no contexto de um formulário. Vamos usar uma entrada ativa, e a entrada na entrada é essencialmente a mesma que a entrada HTML. É qualquer coisa que você queira obter dados do usuário. Uma dessas entradas é a nova na versão seis, que é a nova data e hora Ok. Então, vamos abrir uma lista de estudantes e implementar uma lista de pendências Então, devemos mover um pouco disso para você novamente. Livre-se disso. Vamos abrir a página de informações do aluno. Obtenha a outra página de informações do aluno, então esse é o HTML. Ok. Então, já temos um cabeçalho com uma barra de ferramentas e temos um título. Desculpe. Deveríamos criar uma página de informações para estudantes? Você já deve ter uma página de informações do aluno. B desde o primeiro dia. Criamos todas essas páginas e o roteamento para elas. Ok. Acho que não tenho um. Você não. Então, se você quiser compartilhar novamente, podemos voltar e fazer isso para você rapidamente. Isso é um iônico? Ionic gera informações do aluno na página. E se você fizer as informações do aluno dessa forma sob seu comando? Sim. OK. Ele colocará letras maiúsculas de minúsculas e fará os nomes dos arquivos corretamente. OK. Eu tenho isso. OK. Então você tem a página de informações do aluno? Sim. OK. Então, sua página de informações do aluno deve ter uma barra de título ou cabeçalho, mas com uma barra de ferramentas parecida com esta? Sim. Então, eu quero mudar isso um pouco. Para que mostre o nome e o sobrenome do aluno. E faremos isso com a vinculação de dados de string regular angular . Estudante primeiro significa um espaço entre eles. Está reclamando porque eu ainda não tenho um aluno. Então, para colocar um botão Voltar lá, já temos a barra de ferramentas e agora precisamos de um contêiner para nosso botão, que será um botão ligado e, em seguida, um botão específico para voltar. E o que vamos ter aqui é esse HRF padrão. E o que isso diz é no caso de chegarmos diretamente à página da lista, não há nada na história E eles apertaram o botão Voltar de qualquer maneira. Precisamos dar a eles um lugar para ir. Portanto, mesmo que não haja nenhum lugar para o botão Voltar, estamos definindo que essa é a página da lista Você não costuma ver muito esse problema em um aplicativo móvel porque, como desenvolvedor, pode controlar como o usuário vai de um lugar para outro. Mas em um navegador da web, eles poderiam simplesmente inserir qualquer URL que quisessem e ir direto para lá. Isso faz sentido? E então também vamos querer um botão de menu. Embora possamos argumentar que um botão de menu não faz sentido na página de detalhes. Vai ser uma decisão deixada para você, na verdade. Então deixe-me fazer meu senhor correr novamente. OK. Está compilando. Alguém tem alguma dúvida sobre esse código em particular? A sintaxe? Tudo, exceto o botão Voltar, deve ser familiar neste momento. Ok. Então deixe-me voltar aqui. E aqui está o meu. Então, se eu for, deixe-me abrir Você sabe o que? Eu não vou fazer isso dessa maneira. Vamos usar bordas. OK. Então, na minha lista, isso pode realmente dar errado porque eu não tenho o primeiro nome ou sobrenome do aluno Então, se você está acompanhando, isso é o que você também deveria ver, você ainda não tem um aluno. OK. que deve trazer à tona a questão: como colocamos um aluno na página? Se você olhar a URL, bem, acho que não pode ver a URL porque ela falhou O URL das informações de um aluno. Se você se lembra que o itinerante era a informação do aluno, corte a ID do aluno, no momento, isso não está funcionando por causa do erro de sintaxe ou do erro Então, eu posso resolver isso rapidamente entrando aqui e dizendo: Ok. Eu posso simplesmente dar a ele um aluno vazio no meu componente e , pelo menos, ele não deve falhar, certo? Mas o título, não há nada aqui. Então, da mesma forma, se eu entrasse aqui e dissesse. Primeiro nome John, sobrenome Do Let it rebuild. E agora vemos John Doe. E ainda temos nosso botão de menu e nosso backbon. Mas isso não nos ajuda a colocar o aluno na página. Sim. A minha não vai nem um pouco para a página do estudante. O que você está fazendo? Simplesmente nada. Ok. Você quer compartilhar e diagnosticar Quero dizer, para mim, é aqui que o verdadeiro aprendizado acontece quando realmente nos sentamos e resolvemos os problemas? Sim. Deixe-me me juntar à coisa novamente. Ok. Amplie novamente. OK. Vou acabar com o compartilhamento aqui. Definitivamente, quero ter certeza de que acertamos essa parte porque criar o formulário na verdade não é tão difícil. Então, acho que temos mais tempo na programação desta noite. A primeira parte do formulário será irritante. O resto é simples. Muita duplicação de HTML. OK. O que estamos vendo? Então eu acho que é essa linha aqui, certo? Ele chama informações do aluno? Sim Então você tem o link do roteador e está passando a matriz, as informações do aluno e a carteira de estudante. E o que acontece quando você clica nesse link? Sim. Acho que sei qual é o problema, mas quero verificar primeiro. Então, aqui estou bem. Você tem erros no seu console. Clique no número cinco lá em cima com o ícone de erro. OK. O mesmo problema que eu tinha antes, certo? Porque eu tenho nome e sobrenome. OK. Então, estava na minha que nem mesmo foi renderizada na página. OK. OK. Me desculpe. Sim, eu também não fiz isso por mim. Então, se você quiser corrigi-lo por enquanto, apenas para ter certeza de que está chegando lá, vá em frente e adicione o objeto estudantil fictício em seu arquivo TS de informações do aluno Sim, isso deve funcionar. Vá em frente e adicione um nome e sobrenome a ele. Deveria ser um cólon. O nome e o sobrenome devem ter dois pontos em vez de um sinal de igual Porque você está criando um objeto de script de tipo literal. Sim, aí está. Sim. Esse é o Java em mim. Eu não posso te dizer quantas vezes eu fiz isso. Obrigada. OK. Então, é renderizado. Ainda não está renderizando? Não. Estudante simbólico inesperado na coluna 19. Abra seu arquivo HTML. Parece que você tem um erro de digitação aí. Como eu vejo qual é o problema. O aluno na página. O que eu fiz? O ponto HTML da página de informações do aluno é o que você deseja abrir. E você pode até ver que o código do VS está informando que você tem dois erros nele. Veja o fato à esquerda. O arquivo está listado em vermelho. OK. Então clique no arquivo vermelho ou laranja à esquerda. Sim. Você tem dois erros. Então, o que você tem aqui é que você só precisa colocar os colchetes Curly ao redor de cada um Então, é o primeiro nome do estudante, close brace. Caneta espacial, você vai. Agora deve estar bem. OK. Aí está. Acho que sim. Eu vou fazer isso um pouco rápido demais. Não. Eu fiz. Não, eu fiz. OK. Entendi você. Tudo bem. Vou parar de compartilhar. Já. Não, vou continuar compartilhando. OK. Então, precisamos colocar um aluno em uma página. E tudo bem. Acho que falei sobre isso outro dia. Sou um grande fã do nosso X JS e uso o X JS talvez mais do que é saudável, mas acho que, quando você se sente realmente confortável com ele, escreve um código melhor. Então, esse código aqui. Bem, primeiro, deixe-me perguntar, alguém já se sente confortável com nosso XJS ou sabemos se você sabe o que é nosso HKS Já ouvi falar disso. OK. Então, isso pode demorar um pouco, certamente leva um pouco para se acostumar. Então, o que estamos fazendo aqui e vou tentar ir devagar é que tenho um observável na minha página de informações estudantis que chamo de cifrão estudantil. E o que está acontecendo é que eu tenho a rota da página, que contém um mapa de parâmetros. Esse é o mapa par. E o Angular disponibiliza isso como um observável, para que você possa escrever um código assim quando a rota mudar Então, se a página de informações do aluno for a página de informações do aluno, é a primeira vez que você visita essa página. Seu componente é renderizado, o construtor é chamado, o G é ligado e executado, e tudo isso acontece no ciclo de vida da página angular, da maneira que deveria Se a rota mudar, mas a página não precisar. Então, das informações do aluno um às informações do aluno dois. Angular sabe que não precisa reconstruir a página inteira do zero porque apenas uma parte do mapa de parâmetros foi alterada Então você pode prestar atenção. Você pode assinar essas mudanças. O componente não renderizará, a página não será renderizada. Mas você pode responder prestando atenção assinando o mapa de parâmetros Então, o que estou fazendo aqui é configurar um novo observável baseado nas mudanças no p promovendo essas alterações para para outra função RX JS chamada Switch Map diz: Esse observável acabou de acionar o novo valor Pegue esse valor e troque-o para outro observável que obteremos chamando essa função Então, vamos pegar o parâmetro, o parâmetro ID de params get ID E vamos passar esse valor para o serviço estudantil para obter estudantes. Então, vamos pedir ao serviço estudantil que nos dê o aluno um, o aluno dois, o aluno três. Vamos pegar esse valor e executar um operador R XJS chamado TAP, que significa que vamos apenas dar uma olhada no Não vamos fazer nada de especial com isso. Nós só vamos dar uma olhada nisso. Então, o aluno nos devolverá um aluno, ou não nos dará nada se não conseguirmos encontrar um. Portanto, se não houver nenhum aluno com esse ID, diremos ao roteador angular que volte à página da lista Isso está claro até agora? É legal se não for. Na verdade, há uma forma secundária de implementarmos isso, e talvez seja mais fácil de entender. Mas eu queria passar pela maneira mais difícil primeiro. OK. O aluno se torna essencialmente um observável dos alunos Quando o parâmetro, quando a rota muda, o aluno observável recebe o novo aluno Essa é a coisa importante a ser lembrada fora dessas linhas. O observável da VM do aluno se baseia no observável do aluno e simplesmente canaliza esse valor por meio um mapeador que clona esse aluno para nos dar uma cópia exata E o aluno do Clone apenas faz uma sequência de partes do JS. É um clone de Forman que você já deve ter visto antes. Tudo isso para dizer que, quando recebemos um objeto estudantil do serviço estudantil, recebemos uma cópia dele sempre que a rota muda. Para onde vai esse trecho de código? Isso é o que vou te mostrar a seguir. OK. OK. E eu vou tentar fazer esse tipo de live. última vez que fiz esse workshop, Mike Cartington, da Ionic, passou por aqui quando eu estava examinando esse código E uma das coisas que ele me disse foi que com um aplicativo Ionic, você não precisa fazer isso Então, o que vamos fazer desta vez. Então, vamos ver. A página de informações do aluno. Eu ainda quero um estudante. Mas desta vez, vou predefini-lo como “ Deixe-me pensar sobre isso por um segundo Porque eu quero fazer isso do jeito que Mike me disse. Bem, deixe-me te perguntar. Você quer que eu faça dessa maneira e depois simplifique ou você quer fazer da maneira simples primeiro? Vamos nos dois sentidos para ver o que muda. OK. É justo. Então eu quero os alunos e tudo bem. OK. Então, vamos deixar isso aí por um segundo, porque eu ainda não tenho o roteador. Lembre-se do que eu disse outro dia sobre não fazer minhas importações ou não mostrar minhas importações nos slides. Então, precisamos da rota, que é tentar fazer isso de memória aqui. Também não é isso . É o certo. Você já teve um daqueles dias que não consegue se lembrar do seu nome? Não é o roteador angular? Não. Não, não, não. Mas precisamos disso também. Então esse é o roteador. Nós precisamos disso. E é assim que roteamos a navegação. É o choro em voz alta. Me dê um segundo. Uma daquelas coisas que não consigo lembrar meu nome. Ativei t. Então lembre-se disso. A rota ativada tem informações sobre a rota usada para renderizar sua página. OK. Então nós temos isso e o mapa de parâmetros está na rota ativada. Como você pode ver, é um tipo observável. Toda vez que isso mudar, vamos canalizar seu valor. Este serviço estudantil, o que significa que precisamos obter o serviço estudantil. Você está se perguntando se Mike realmente codifica assim? Sim, ele tem. Serviço estudantil, serviço estudantil, estudantes. OK. OK. Se não forem estudantes. Também estou perto, mas voltaremos para Roster. E, claro, agora temos que descobrir todos os adoráveis ps que estão confusos Para gostar disso. Caso contrário, não está feliz comigo. Então, roteador ou mapa. Ah. Precisamos de mais imóveis. Este mapa de interruptor canalizado Obtenha o serviço. Isso não é um problema. OK. Tudo bem. Portanto, não há estudantes. Acho que o que está acontecendo aqui, faltam algumas importações. Importe, troque, mapas, feitiços, importação, perfo. Aí está. Então, tudo bem. Lá vamos nós. Portanto, troque o mapa e o Taper dos operadores X JS OK. Então, assim que a carteira de identidade muda, a rota muda, nos arrependemos da identidade, ligamos para buscar o aluno. Se não conseguirmos um aluno, voltamos para a lista. Isso está correto. Você pode deixar isso como está por 1 segundo. O slide ou o código. Eles são iguais. Qual deles você consegue ler melhor? A coisa no vermelho. OK. Obter. Eu troco de homem. OK. O mapa Switch basicamente pega o valor de um observável e cria um novo observável e muda para esse novo Em última análise, se acabarmos com um aluno, é um aluno observável E sempre que estiver trabalhando com RXJS dessa forma, preencha-os lentamente e componha-os Não tente transformar tudo em um único observável. Até isso pode ser demais. Mas agora, vou criar um modelo de visão do aluno para aumentar isso. MP também vem de nossos operadores JS, e o Clone Student ainda não existe Veja se o co-piloto sabe o que fazer aqui? Não é bem assim. Agora funciona. E então os estudantes choraram. OK. OK. OK. Isso foi o suficiente para levar o aluno da rota na página para o componente. Então, em nosso modelo, trabalharemos apenas com este. Mike, desculpe, tudo isso é código, o que está guardado? Está dentro de um it? Está no construtor? Não está no construtor. É só uma parte do componente. Na verdade, esses são componentes. O meu está bem bagunçado. Não tenho certeza do que está acontecendo. OK. Você quer que eu coloque isso no canal do Slack para que você possa copiar e colar É útil, mas não é necessário entender a porção iônica. Não. Só que tenho rabiscos vermelhos por todo o lado. Sim. Eu também fiz. Principalmente porque se você não tem todas essas coisas. Sim. À frente, vou me conectar com você depois. OK. Sim. Estou ficando irritado com meu construtor Diz que o construtor Member deve ser declarado antes de todas as definições de métodos de instância pública Correto. Sim, eu tenho isso, você tem aquilo. Sim. E isso é porque eu não coloquei o aluno abaixo dela. Isso deve deixá-lo feliz. Dependendo do que você está usando para empréstimos, a forma como os aplicativos angulares devem ser arquitetados aqui é que você tem suas variáveis de instância, seus campos logo no topo da classe, depois seu construtor, seus eventos de ciclo de vida e, em seguida, suas a forma como os aplicativos angulares devem ser arquitetados aqui é que você tem suas variáveis de instância, seus campos logo no topo da classe, depois seu construtor, seus eventos de ciclo de vida e, em seguida, suas funções. OK. Tudo bem É assim que colocamos o aluno na página. OK. Essencialmente, toda a página de informações do aluno, todo o HTML, é empacotado com uma tag de contêiner G usando uma diretiva NG para que ela seja renderizada somente se houver um aluno Eu vou dizer isso de novo. Vamos agrupar todo o HTML da página com um contêiner. E o contêiner G só será renderizado se tivermos um aluno válido. Isso evita erros de referência nula essencialmente indefinidos OK. coisas, se você já deve saber sobre o NGF, então ele não renderizará a menos que o NGF seja verdadeiro Além disso, o contêiner NG é uma tag angular especial que não renderiza nenhuma saída Isso não afeta a marcação. Então, essencialmente, isso quer dizer que tudo dentro do contêiner G não existirá se não tivermos um aluno válido. O resto dessa linha é um tubo angular, e nós o chamamos de tubo a. Portanto, o canal Async cuidará da e cancelamento da assinatura para nós, não precisamos Sempre que a VM estudantil dispara uma propriedade, um novo valor. Tudo dentro desse recipiente de energia será instruído a repintar A última coisa que fazemos é dizer ao canal An que qualquer valor que estamos obtendo desse observável internamente para o meu modelo Vou me referir a ele como o nome invariável de estudante. É por isso que posso dizer primeiro nome, nome do aluno, dallast name. Eu coloquei isso em prática. Se eu entrar aqui agora e retirar todo o meu conteúdo. Eu posso simplesmente fazer o container GF Not VM dollar. Como estudante. E então feche o recipiente de energia , não sei de onde veio. E está reclamando porque eu ainda tenho um aluno? Eu não recebi o filme. Eu me livrei do estudante, não é? Por que está reclamando? Porque eu não estou fechando. Obrigada. Formato. OK. OK. Agora, voltamos para o Edge. Ainda estou recebendo minha mineração de dados. A mineração de dados está funcionando. OK. Então, eu quero ter certeza de que todo mundo chegue pelo menos até esse ponto. E então eu vou te mostrar a maneira mais simples que Mike nos deu. Não é muito mais simples. Um mais simples. Você vê o poder aqui? Não estou, não estou assinando observáveis. Não estou esperando que as promessas sejam resolvidas. Não estou. Não estou fazendo uma chamada HTTP diretamente do meu componente. Não estou lidando com tratamento de erros. Tudo isso pode ser feito dentro do meu serviço, e o componente pode ser escrito de forma que só seja renderizado quando tiver dados válidos Assim, você pode realmente se concentrar no que o componente precisa fazer. Isso faz sentido? Deveria ser, esse é todo o código que você precisa no componente. Todo mundo tem esses? Está funcionando do meu lado. Incrível. Qualquer outra pessoa. Qualquer pessoa que não esteja funcionando queira. Eu estou lá. OK. OK. Vocês estão bem em passar um pouco de tempo esta noite? Eu estou bem com isso se você estiver. Depende de quanto tempo vamos fazer isso direito. OK. E o feedback do workshop, eu espero que vocês participem. OK. Não passe uma hora no nosso J. Eu já vou fazer uma rápida pausa na natureza. Tudo bem. Quem ainda estamos esperando? Portanto, devo estar sentindo falta das importações para alternar Mapa, toque e mapa. Vamos ver. Sim. PS é muito bom em adivinhar, mas apenas quando você tem um deles OK. Pronto para seguir em frente? Chegamos ao ponto em que podemos fazer isso. OK. Então, a partir daqui, o que vamos querer fazer é criar um formulário. Provavelmente já fiz isso antes em HTML. Então, precisaremos de um formulário para todos os valores que são editáveis em um aluno Podemos usar um rótulo ligado com uma entrada ativa juntos, vamos ver. Coisas que você deve saber nos rótulos. Os mais importantes provavelmente não colorem, quase tudo pode ser alterado de cor. Mas a posição do rótulo em relação ao item de entrada. Então, fica assim. Então, se você tiver um padrão, receberá o rótulo ao lado do espaço reservado X parece o mesmo. Eu costumo usar pilha ou flutuante. O que fazer isso? OK. OK. O carregamento é meio legal porque parece uma etiqueta fixa. E então, quando você clica nele, ele se torna um rótulo de pilha. Então, ele se anima para cima e para fora do caminho para que você possa digitar. Qual deles você realmente usará dependerá de você. Quaisquer que sejam suas opções de design. Portanto, a entrada é um tópico enorme. Pense em tudo o que você pode fazer com uma tag de entrada HTML e sobrecarregue On, eles trabalharam muito para torná-lo muito, muito poderoso, então pode parecer um pouco cansativo Na verdade, não precisa ser todo o resto com angular e iônico Se você começar com o básico e depois partir daí, não é tão ruim. Aqui estão algumas outras coisas importantes para a entrada. Então imagine que você tem uma entrada de texto. Novamente, você pode criar a cor. Você pode atribuir a ele um valor de debounce Cada entrada N acionará um evento de alteração à medida que o usuário o estiver alterando Mas se você fizer um valor de debounce maior que zero, você não obterá esse evento de alteração até que tenham decorrido tantos milissegundos após o usuário ter decorrido tantos milissegundos após o usuário Então, por exemplo, você coloca um debounce de 500 e o usuário está digitando Você não receberá essa mensagem de mudança até que passe meio segundo sem que eles façam nenhuma alteração. Se você viu em um dispositivo móvel onde você pode inserir uma string de pesquisa e, em vez de uma tecla Enter ou Return no teclado na tela, diz, pesquise ou Essa é a dica da tecla enter. Você também pode dar ao dispositivo móvel uma dica sobre qual tipo de teclado mostrar com base no modo de entrada E, finalmente, o tipo é como um tipo de entrada HTML. Que tipo de dados você está procurando? O padrão será texto. Assim, você pode usar todos esses atributos diferentes para personalizar e personalizar a experiência do seu usuário Também podemos validar nossas entradas. Essas são as validações integradas que estão disponíveis para você Máximo mínimo de comprimento de string, valores numéricos máximos mínimos, padrão reg x e se um campo é obrigatório ou não O próximo, eu vou te mostrar. Não tente absorver tudo. Essas são todas as dicas de preenchimento automático que as entradas permitem Então, se você já acessou uma página da web e seu navegador disse: Ei, deixe-me inserir isso para você. É por causa de coisas assim. Então, seu primeiro nome, seu endereço, sua cidade-estado. E se o seu navegador souber essas informações, ele as inserirá para você. Faz sentido? OK. Vamos embora. Tudo bem Eu só queria me esforçar para abordar isso bem rápido. Então, o que precisamos fazer para obter a entrada do usuário para o aluno é criar um formulário, apenas um formulário HTML normal. Com uma forma angular, queremos fornecer um manipulador de eventos para N G submit Isso é o que a função é chamada quando o usuário envia o formulário O formulário estudantil em libras é igual ao formulário N G. Esse é outro angularismo. O que isso quer dizer é que, quando tivermos uma forma em angular, ela nos exporá uma forma G que representa toda a forma renderizada E vamos atribuir esse formulário ao modelo local de formulário de estudante variável. E quando fizermos isso, poderemos, dentro do nosso HTML, referenciar esse formulário, perguntar ao angular se ele é válido, solicitar erros e assim por diante. O que eu quero fazer aqui é voltar aqui dentro do conteúdo atualmente vazio. Quero criar um formulário. Envio vazio é igual a envio. Enviaremos o objeto estudantil quando o formulário for enviado e teremos um modelo local de formulário de estudante variável, que é o formulário NG criado para nós. No envio ainda não existe. Para mantê-lo feliz, basta entrar aqui e criar um. Sim. Mesmo que não faça nada. Agora, pelo menos, está feliz. Próximo. Vamos criar um único campo de entrada porque todos os campos de entrada terão essa aparência. E acho que quero entrar na lista. Queremos um item único. Não, eu não quero que o co-piloto faça o trabalho para mim. No item “on”, quero um “on label”. E eu vou definir sua cor. Primeiro nome válido. Vou explicar isso em um segundo. Estou indo muito bem. OK. Eu quero parar aí por um segundo. Estou criando uma lista para todas as entradas. Então, eu só preciso de um desses. Opa. OK. E então, cada um dos elementos de entrada do meu formulário estará dentro de um item de íon. O rótulo simplesmente me diz o que vamos colocar lá. Definir a cor como zero, que será a cor padrão para o formulário ou a cor iônica chamada perigo no caso de o campo do primeiro nome não ser válido Mas note que ele não gosta do primeiro nome porque ele não existe, certo? Então, eu preciso de uma entrada e vou configurá-la para o primeiro nome. Vou configurá-lo como obrigatório. Sim, vou usar a memória de dados bidirecional para o primeiro nome do modelo NG Eu também preciso. Isso é o que eu estava perdendo lá. A entrada também precisa de uma variável de modelo? Quer dizer, eu perdi alguma coisa do slide, mas tudo bem. Tudo bem. Você vê o que vai acontecer aqui? Acesse o navegador. OK. Então, o primeiro nome é Casey Então eu posso notar que o primeiro nome ficou vermelho. Chegou a esse estado de perigo, aquela cor perigosa porque o primeiro nome é obrigatório, mas eu não o estou mais fornecendo. Isso faz sentido? Para a outra coisa que eu posso fazer. Vamos ver. OK. Eu mudei a posição para flutuar. Sim, eu mudei para cima, mudei a etiqueta para cima. OK. OK. E então, quando você não está , quando você não tem, o campo não tem foco. Ele anima B, o que é bem legal. Eu gosto disso. E então eu fiz mais uma coisa aqui. E isso estava dentro do rótulo. Eu queria um fã. Não é bem assim. Como eu fiz isso? São necessários erros de 5. Sessão4: Tudo bem, pessoal. Bem-vindo ao quarto e último workshop. Quero começar esta noite falando sobre o armazenamento de aplicativos e como tudo isso funciona. Com o ionic, há várias opções de armazenamento diferentes. E porque eu geralmente trabalho principalmente com dispositivos. Eu faço muito armazenamento no dispositivo. Portanto, não vou abordar os diferentes tipos de armazenamento em nuvem e a Ionic tem uma oferta corporativa que protege o armazenamento em nuvem Literalmente, é assim que você coloca dados simples no dispositivo. E é isso que estou fazendo aqui. Então, o que eu uso como armazenamento de capacitores. Você deve se lembrar da primeira sessão que tivemos que instalar o capacitor Slash Storage para obter a porta de serviço de armazenamento ou a porta de serviço para estudantes E, como você pode ver aqui, é uma API bastante simplista Você tem métodos definidos, um método remove, limpa o método de banco de dados e um método para obter a matriz de todas as chaves em seu banco de dados. E eu digo banco de dados. Eu uso o termo vagamente porque, na verdade, é apenas um armazenamento de valores-chave anexado ao seu aplicativo E o que quero dizer com isso é que ele está anexado ao seu esquema HTTP You. Então, se você fosse usar o NPM start, que inicia o servidor NG com o padrão de Port four tan 200 Jogue com o aplicativo , configure sua loja, crie alguns novos alunos e os edite. Em seguida, feche o aplicativo e inicie-o novamente com ionic serve, que acredito ser a porta 8.100 Não teria o mesmo banco de dados. Então, da mesma forma, se fosse HTTP versus HTTPS, acho que eles até têm bancos de dados diferentes. Na verdade, está apenas vinculado aos incidentes de execução de seus aplicativos Em um navegador de desktop, ele usará armazenamento local, o que significa que é volátil Pode ser destruído a qualquer momento. Em um dispositivo real, ele indexou o banco de dados ou qual é o outro SQL Light? Não. Você pode dizer para usar o SQL Light. Portanto, há uma opção para isso, e tudo bem com ela. Assim, você pode usar o SQL Light. Mas essa não é a Index TV e outra. Está me escapando agora, mas não importa. Ele usará o correto para o dispositivo certo. E isso é uma das coisas que você obtém usando o armazenamento de capacitores Você não precisa se preocupar com isso. Então, se você é um PWA, se você é Android, IOS, isso não importa Então, para configurar o serviço estudantil com apenas essas cinco chamadas de API, eu basicamente criei vários métodos públicos. O serviço de armazenamento de capacitores é totalmente baseado em promessas, então você verá que tudo o que eu faço aqui também é baseado em promessas Só que parece o segundo. Todos os alunos são o observável em que nosso componente de lista de componentes se baseia Então, a forma como isso funciona é quando algo acontece com um aluno, quer você o marque como ausente, esteja presente, exclua-o, salve, recupere , compre um novo, o que quer que seja O que o serviço de armazenamento faz é pegar as informações que você acabou de fornecer. Então, aqui está um novo aluno. Aqui está um novo objeto estudantil totalmente hidratado. Ele o salva no armazenamento ou armazenamento local e, em seguida, informa imediatamente que todos os alunos observam que uma nova matriz totalmente regenerada foi criada para você e que faz com que o componente se atualize Como você provavelmente pode imaginar. Se você tem uma dúzia de estudantes, isso não é um problema. Se você tem 1.000 alunos ou 10.000 alunos, isso pode ser um problema. A forma como o serviço estudantil é escrito é que você pode estendê-lo fornecendo paginação, classificação e todo tipo de coisas E então você ainda teria que prestar atenção a esse observável Vou deixar isso como um exercício para o espectador. Também dentro do serviço estudantil, há algumas peças particulares que serão publicadas em breve, ou seja, a própria matriz estudantil é implementada como um assunto de comportamento do RHS E o que isso faz é manter um dinheiro local dentro do serviço estudantil, que é atualizado sempre que há um troco. E então é isso que é enviado ao componente para os assinantes. E ele faz isso por meio da função chamada push A. Push A simplesmente diz: Ei, temos um novo assunto de comportamento. Temos uma nova matriz, vá processá-la. As outras três funções aqui são simplesmente instrumentações internas que veremos em breve e são basicamente Então, dentro do serviço estudantil, criei um objeto genérico chamado nova interface aluno-aluno e, como você pode ver, ele simplesmente esvazia todos os campos, transformando-os em fluxos vazios Então, ainda não experimentamos. Mas se você for para Se você acessar a página de informações do aluno. Há um código no serviço estudantil que retornará esse aluno, o aluno vazio em vez daquele, o aluno pelo documento de identidade que você solicitou. Aqui está o assunto do comportamento. Novamente, ele acomoda uma variedade de estudantes internamente. E quando o aplicativo é iniciado, o componente da lista de alunos simplesmente solicita função de todos os alunos que torna esse assunto de comportamento inobservável Como regra geral, se você está lidando com um assunto de comportamento com vários inscritos, você não quer expor o assunto real aos o assunto real aos seus assinantes, pois assim todos eles poderiam começar a atribuir novos valores de forma incontrolável Portanto, o padrão geral é devolver aos seus assinantes o comportamento do assunto como inobservável, e é isso que essas poucas linhas fazem Sinta-se à vontade para me parar se eu for rápido demais ou se precisar de algo esclarecido Você viu isso, eu acredito, no início do serviço estudantil. Temos uma função inicializada e tudo o que ela faz é chamar push na primeira vez Então, o Push A diz: pegue todos os meus alunos e depois diga ao sujeito comportamental que emita outro valor com esses alunos Então, novamente, meio que não é uma semente de banco de dados, é uma semente de aplicativo. Então, aqui está o valor inicial. com que todos os alunos peçam ao sistema de armazenamento, o sistema de armazenamento de capacitores, que me dê todas as minhas chaves do banco de A próxima coisa que faço é filtrar essa matriz apenas pelas teclas que começam com a constante chave do aluno, que acredito ser apenas a palavra sublinhado do aluno Você não tem Você não tem muito a dizer sobre como eles são armazenados, como os dados são armazenados aqui. Assim, você pode armazenar qualquer coisa. Então, se eu quiser armazenar alunos ou coisas que não sejam estudantes, o que eu poderia fazer em algum momento, talvez eu queira armazenar professores em algum momento ou turma. Preciso diferenciá-los , pois há um único armazenamento de valores-chave Então eu criei uma chave do aluno, que é apenas a palavra estudante. Então, filtrei todas as chaves do banco de dados com base na chave do aluno. E então, na próxima linha, tenho que esperar uma promessa completa e pegar a chave de cada aluno Isso faz sentido? Então, quando toda essa promessa se resolve, eu tenho uma variedade de estudantes E os astutos entre vocês notarão que eu não tenho nenhum tratamento de erros aqui, e provavelmente deveria OK. E aqui está a contratação de um único aluno e aqui está aquele caso especial para novos. Então, se você passar a carteira de estudante de novo, eu simplesmente resolverei a promessa com aquele aluno vazio. Caso contrário, entro no banco de dados e procuro o aluno pelo hífen da chave, seu ID Então, estudantes tecla um, estudantes tecla dois, etc E pegue o aluno pela chave. Você notará que parece um pouco estranho. Então eu tenho que ir e chamar a função de armazenamento, é o método get. E eu preciso passar um objeto. Não sei por que você não passa a chave, mas precisa passá-la como um objeto. É por isso que há as chaves curvas dentro do parâmetro Então, na verdade, estou passando um objeto com a chave da chave e o valor desse parâmetro-chave do aluno sendo passado. É meio bizarro O armazenamento de capacitores armazenará apenas sequências de caracteres. Ele não faz análise ou serialização de JSON para você, é por isso que preciso E não apenas o resultado, mas o valor do resultado. Novamente, o que o DG de armazenamento está me devolvendo como promessa de um objeto E nesse objeto, há um valor. Isso faz sentido? É meio estranho E eu acho que existem bibliotecas de armazenamento mais simples por aí, mas eu queria ficar com o material iônico para isso. Da mesma forma, exclua o aluno, novamente, você chama storage remove e precisa passar essa chave Para salvar um aluno, tenho uma biblioteca UUID Então, se você criar um novo aluno, você me passa um aluno para salvar o aluno sem uma carteira de identidade. Em vez de apenas tentar encontrar um, dois, três, quatro, vou criar um UUID e salvar esse ID de ativos É único o suficiente para que eu ache que você nunca se depararia uma colisão local Provavelmente também não globalmente, mas nunca se sabe. O que significa o ponto de interrogação duplo? Isso equivale a dizer que a carteira de estudante é igual à carteira de estudante. A menos que seja nulo, atribua quatro UUID. Isso é relativamente novo no script de tipos. Eu acho que é inteligente. Ele economiza cerca de dez pressionamentos de tecla, mas não sei se é mais claro Você concordaria? Sim. Quer dizer, é a primeira vez que eu vi isso, então é por isso que eu estava me perguntando. Sim, acho que às vezes sou. Às vezes, sou muito inteligente para mim mesma, porque quando vi isso pela primeira vez outro dia, tive que me lembrar do que isso faz Então, sim, eu acho que provavelmente deveria ser apenas estudante igual a ID de ponto de estudante E então ponto de interrogação, ponto , o que significa, você sabe, não está dentro. Então, isso pode ser um pouco mais fácil. Vamos ver. Então, depois de uma exclusão ou de um aluno, chamamos push All e isso envia a matriz para todos os assinantes novamente. Do save student é a implementação interna do save student. Portanto, ele pressupõe que você já tenha uma carteira de estudante ou uma chave e simplesmente chama a função de conjunto de armazenamento passando a chave no valor Observe novamente que eu tenho que estringificar o resultado porque isso não vai funcionar para Marcar presente é muito simples. Eu defini o status de estudante como atual. O mesmo acontece com a ausência e então eu ligo para Save student. Salve o aluno atualiza o armazenamento, chama Push All novamente. redefinição de frequência passa por cada aluno e, em seguida, cancela o status E, novamente, estou sendo inteligente porque você pode ver que a declaração do mapa tem um atalho Então, estou retirando a propriedade status do objeto estudantil e, em seguida, passando o resto do objeto estudantil com o operador rest. Isso seria o equivalente a acessar e simplesmente chamar o status de estudante não definido Mas, novamente, eu tinha que ser inteligente, então. Se você acha que gostaria de me criticar por inteligência, não receberá nenhum argumento Isso é claro ou é simplesmente bizarro. Bem, eu também venho fazendo a loucura do Java Streams Então, quero dizer, isso faz sentido. Você sabe, novamente, você sabe, essas palavras são apenas para os humanos entenderem. Você sabe, tudo está traduzido para o que os computadores vão usar. Certo. Você sabe, é tudo sobre o que precisamos para compreender o que estamos fazendo. Sim. E, francamente, o que fizemos na última sessão com a eliminação de todos os observáveis para colocar o aluno na página de informações do aluno, está muito mais legível agora Acho que o HGS tem seu lugar e esse lugar em particular não era seu lugar OK. Então, essas são algumas outras coisas que tínhamos. Acho que vimos isso. Temos dados temáticos, desculpe, dados iniciais. E isso foi logo no começo, se não temos nada no banco de dados, podemos vê-lo e pegar alguns. Acho que temos dez alunos falsos, e então dados claros são o oposto E essa é fácil. Nós apenas chamamos o armazenamento de dados limpo. OK. E isso é tudo para armazenamento. Você tem alguma dúvida antes de irmos para a câmera. Ah, quero dizer, isso é literalmente tudo que você precisa fazer para usar o armazenamento local. Uau. Sim. E os códigos estão todos lá. Tudo está no serviço estudantil. Sim. OK. Então, o que eu vou fazer agora? Me dê um segundo aqui. Bem, acho que posso editá-lo mais tarde. Eu vou voltar. Antes, tudo isso era material suplementar OK. Tudo bem. Então, vamos falar sobre a câmera. OK. Então, vimos o Pixabay uma vez antes. E o que eu fiz aqui foi encontrar a foto de uma câmera. O que eu queria era uma imagem de espaço reservado. Então, se não houvesse uma foto do aluno, eu queria que algo fosse exibido em seu lugar. Então, se você quiser acompanhar, vá até o Pixabay e encontre uma bela foto de uma câmera Nem importa qual. Esse é legal. OK. Então, na verdade, eu não fiz isso aqui, então eu tenho que fazer isso aqui. Sim, eu não o tenho aqui. Então, vamos continuar. Qual deles você gosta? Eu tenho muitos deles. Primeiro, eu quero usar o poloid Então, eu quero baixar a versão SVG. E então eu faço com. Por que não teve a ver com? Tente isso de novo. OK. Aí está. Eu vou dar um nome a ele? Câmera. E vou arrastá-lo para minhas imagens. Eu não preciso ver isso lá. OK. Então, está em imagens. OK. OK. Aqui eu digo salvar no ponto PNG da câmera, mas você quer salvá-lo em qualquer coisa que você baixe. Se você baixar um PNG, obviamente, use a extensão correta. OK. Agora precisamos desses dois pacotes NPM. Temos que dizer ao capacitor que vamos usar a câmera E então, como acho que todos nós agora estamos em um navegador, precisamos dos elementos iônicos do PWA para fazê-lo funcionar em um Então eu vou fazer isso. OK. OK. E eu instalo. Ambos. Tudo bem. E isso está feito. Alguém está acompanhando e você precisa esperar que o NPM termine Sim. Desculpe. Eu estava tentando tirar a imagem, então deixe-me fazer isso bem rápido. OK. Então você vai querer isso? Tudo bem, D. Tudo bem. Todo mundo tem uma câmera e a barraca do NPM está pronta. OK. Em seguida, você vai abrir. A maior parte disso já deveria estar lá. Mas eu lembro que tive que pedir a alguém que no primeiro dia, comentasse algumas dessas coisas, como esta importação aqui. E isso definiu elementos personalizados. Você o excluiu ou comentou. Não me lembro qual. Então, Open T. Sim. Eu não tenho nada disso. Há algumas coisas que temos que fazer aqui. Tire isso do caminho. Eu fecho isso. OK. Então, precisamos criar uma plataforma, precisamos inicializar a plataforma. O que quer que esteja lá. OK. Então, já temos isso na armadilha. Então, precisamos chamar isso Ok. Isso não funcionou. Então, precisaremos definir ou importar elementos personalizados e fazer isso digitando corretamente Lá vamos nós. Carregador de elementos B. Tudo bem. Todos concordam que isso parece o mesmo? Opa. Tudo bem. Todo mundo tem isso? Ainda não. Tudo bem. Opa Não consigo imaginar quantas vezes eu tenho operações seguidas pela seta para a esquerda. Quantos deles eu vou ter que editar? O apoio de braço da minha cadeira continua sentado no meu teclado. Tudo bem. OK. Na página de informações do aluno, precisamos importar essas coisas na parte superior do arquivo. Portanto, o tipo de resultado da câmera e fonte da câmera são da câmera do capacitor Deixe-me ver se consigo fazer isso. Lá vamos nós. Então, de volta à página de informações do aluno. Bom. E então é assim que tiramos uma foto. Você notará que o objeto ou classe do capacitor iônico também é muito promissor Então, vamos criar uma função de sincronização chamada tirar foto, que chamará a função de tirar foto da câmera e usará um único objeto de configuração. Há muitas coisas diferentes que você pode passar aqui. Isso deve nos dar uma imagem JPEG de qualidade razoável que podemos então atribuir à imagem de dados real al Os dados das imagens U. Como estamos atribuindo-os na última linha à imagem do aluno, será uma string Será uma sequência codificada de base 64 da imagem. Anexado ao objeto do aluno para que, ao salvá-lo, ele também seja salvo no armazenamento local. Tudo automaticamente. Deixe-me trazer meu código VS, ver se consigo fazer isso do outro lado do caminho. Então, isso vai para o componente de informações do aluno. Isso é muito bom. Mas eu não vou fazer isso dessa maneira. Alguém precisa me lembrar de desligar o copiloto. Tudo bem. Isso não é ruim. Não queremos a base 64 como tipo de resultado. Queremos o URL dos dados. Se ao menos tivéssemos inteligência lá. A qualidade 90 provavelmente está bem. Sinta-se à vontade para jogar com ele. Permitir edição é verdade , ou seja, dê ao usuário uma chance ou brinque um pouco com ela antes de aceitá-la. Isso também é opcional. E a fonte será a câmera. Acho que você também pode fazer isso se não estiver em uma máquina com uma câmera, basta acessar as fotos de origem. Acho que isso pode funcionar para um Mac ou Windows, se você não tiver uma câmera. Eu tenho uma webcam, então vou deixá-la como câmera. Então, isso obterá nossa imagem. Eu preciso de uma etiqueta de tecido. E então não sei por que tenho duas linhas lá. Por que não disse isso? Oh, eu entendo. Mas eu quero obter o URL dos dados da imagem. E então eu quero definir isso. E isso é um erro de digitação, tem que ser isso, não importa. Me desculpe. Vamos deixar o aluno entrar, certo? Então, a imagem do aluno será igual ao URL da imagem. Isso está claro? Sim. Mas eu fico um pouco confuso quando diz que a imagem não é propriedade do estudante Eu não sei por que isso acontece, mas bem, a razão pela qual eu não sou é porque eu não dei , eu não contei o que é estudante. Então, você está certo. Então, se dissermos que é um estudante, eu tenho o mesmo problema, certo? Sim. Então, eu vou clicar no comando do aluno. E vou acrescentar Esse é um texto didático do tipo script. Se você pensar sobre isso. Porque na linha 39, eu não tinha dito ao evento que estava levando um aluno Portanto, o padrão é qualquer. Portanto, a imagem do aluno está boa. Você ficou com os rabiscos porque recebeu o erro porque disse que era um estudante Então, o que teria acontecido se eu tivesse deixado meu objeto de estudante, do jeito que eu estava. E não tinha uma imagem. Você consegue adivinhar? Bem , ou vai funcionar ou não. Funcionará muito bem porque as informações de tipo realmente só existem em tempo de compilação Uma vez que toda a segurança de digitação que você obtém do texto datilografado tenha desaparecido Depois de fazer a transferência para o Javascript e executá-lo É só Javascript. Vai dizer: Oh, você definiu um campo de você me deu uma corda e disse para torná-la a imagem de um estudante. Legal. Eu vou fazer isso por você. Como funcionaria em Javascript, funcionaria muito bem. OK. Mas nós gostamos de jogar bem aqui, então. Então, vamos fazer isso dessa maneira. Então, você atualizou seu aluno com uma string opcional chamada image? Sim. Tudo bem. Então, agora precisamos conectar algo à função de tirar foto. E faremos isso no HTML. Então, o que eu quero fazer aqui com as informações do aluno em HTML. Deixe-me tirar tudo isso do seu caminho novamente. Então, temos nosso formulário de estudante e temos a lista. Então, o que eu quero fazer aqui é adicionar outro item com um manipulador de cliques E eu vou passar o aluno para ela. Lá dentro, eu vendo o aluno de forma errada. Aqui, eu tenho duas imagens. A primeira imagem só aparece se a imagem do aluno existir, e eu vou configurá-la como classe, atualizaremos o CSS em um minuto. Foto do estudante. OK. É a idade do estudante. Se tivermos uma foto do aluno no objeto estudantil, criaremos uma tag de imagem com essa imagem do aluno como fonte. E minha tag de imagem está reclamando porque eu não tenho Altex Assim, podemos configurar o texto alternativo igual a “faça isso dessa maneira”. Tudo pela primeira vez. Um nome LQUfst. Estudante por último. Então, são todos textos com o nome do aluno. Se, por outro lado, não tivermos uma imagem de estudante. Nem uma força é igual a ativos, imagens, M era um A é igual a k uma imagem. Como isso parece? Vou iniciar meu servidor NG ou iniciar o NPM E antes de darmos uma olhada, vamos corrigir o CSS. Não falamos muito sobre CSS neste workshop. Não me considero um especialista em CSS, mas, para isso, não é muito difícil fazer isso com eles. Lá vamos nós. Então, aquela aula de fotos para estudantes que eu coloquei na imagem? Vou dar a ele uma altura máxima de 25% do espaço vertical. Então, não mais do que isso. E eu vou configurar seu objeto adequado para cobrir. Então, ele cortará a imagem, mas ainda ocupará todo o retângulo Nós fazemos isso. Em seguida, voltamos e atualizamos a página aqui. Não vejo nenhum erro, então vamos entrar aqui. Aí está minha política, o texto, então eu não o vejo fazer nada. Mas se eu clicar nele, você poderá ver minha câmera. Isso é legal. Usando a outra câmera. Se eu quiser tirar uma foto. Bem, eu não trabalhei muito bem. Vamos tentar isso de novo. Lá vamos nós. E então eu posso salvá-lo. E aí está minha foto. Então, se eu salvar Jonathan Bennett. Volte para dentro. A foto ainda está lá. Quão legal é isso? OK. Sem aplausos, sem nada. Tudo bem. Como estão todos os outros? Desculpe, eu estava no modo mudo, mas não, tudo bem. Está funcionando para você? Sim. Eu tinha a imagem. Foi então que diz que nenhuma câmera foi encontrada. OK. Me dá a opção de escolher uma imagem. Então, deixe-me tentar isso e ver. Então, agora, se eu disser, você pode voltar. W. Muito legal. Sim. Isso é legal. Eu gosto disso. Então isso é capacitor, essencialmente em poucas palavras O capacitor fornecerá uma API consistente. Em todos os dispositivos e páginas da web. Agora, nem todo capacitor se conecta, trabalharemos com o navegador do desktop. Muitos o farão. Se você acessar os plug-ins oficiais e eles também tiverem plug-ins comunitários, eles lhe dirão com o que funcionam. Há coisas como o Face ID que obviamente só funcionam com um produto da Apple, e acho que funcionam com iPhones ou IOS Mas você pode acessar o GPS por meio de qualquer coisa. Vou usar a API do navegador. Vou usar se você estiver em uma mesa, ela será mais profunda e usará seu WiFi Se você estiver em um iPhone, eles usarão esse GPS. No Android, ele usará esse GPS. Mas ele fornece uma API consistente para você desenvolver, então você não precisa se lembrar bem, Android, eu tenho que fazer isso ou IOS, eu tenho que fazer aquilo. Isso faz sentido? Então, agora, agora vamos fazer. Bem, antes de prosseguir, há alguém que queira fazer a câmera funcionar, mas ainda não o fez? Tome isso como um não. Então, agora chegamos à parte provavelmente mais perigosa do workshop. Porque eu não tenho slides sobre essas coisas. Este eu simplesmente vivo em tempo real. Então, como você pode imaginar, é muito emocionante. Então, neste momento, temos um aplicativo em funcionamento. E acho que é bom o suficiente para ser colocado na loja de aplicativos ou na Play Store. Então, deixe-me ter certeza de que tenho a extensão iônica em execução, carregada e em execução Não. Certifique-se de que tudo esteja bem. Tudo bem. OK. Onde está? Aí está o iônico. Aí está. OK. Todos vocês já viram a extensão iônica? Nós realmente não o usamos porque eu não gosto necessariamente de confiar nele. Mas tem algumas coisas legais que ele pode fazer. O que ele quer que façamos? Ele quer migrar Ele quer que adicionemos esses recursos. Essas são recomendações que o plugue iônico nos dará A primeira coisa que quero fazer agora é adicionar um projeto IOS, basta clicar ali mesmo. Sim, eu gostaria de adicionar suporte ao IOS ao meu projeto de capacitor E está me mostrando no terminal aqui os comandos que está executando. OK. OK. Então, não pude. Não foi possível afundar, faltava WWW. E sim, eu mesmo sempre esqueço isso. Para fazer uma sincronização com o capacitor, você deve pelo menos criar uma versão de produção do seu aplicativo uma vez Então, acabei de executar o NPM run build. Então, o que é Coco Pods? Em que você está acostumado a se desenvolver? Com qual aplicativo de desktop nativo você está acostumado? No Mac, pensei que talvez você fosse um desenvolvedor de pontos. Oh, bem, não, eu sou um desenvolvedor Java, então eu acho que é equivalente ao Maven É um gerenciador de pacotes. OK. Ou pelo menos essa é uma das coisas que o Maven pode fazer, certo? Eu sei que pode fazer muita coisa. Sim. OK. É um CocoaPods, acredito que seja apenas um gerenciador de dependências O legal é que, a menos que você construa seus próprios plugues de capacitor, você realmente não precisa se importar muito Mas agora que criamos o aplicativo, devemos ser capazes de sincronizar com o capacitor OK. E deixe-me abrir. Pacote, Jason. Oh, eles não o têm aqui. OK. Eu estava esperando algum roteiro. Então, scripts NPM OK. Então, parecia ter terminado. Volte aqui. Vamos ver o que ele fez. Então, o NPM run build construiu meu aplicativo Angular iônico e colocou todos os ativos na WWW Portanto, esse é todo o aplicativo criado. Capacitor Sync copiou todo o aplicativo iônico angular para este projeto IOS Portanto, este é um projeto de código X. Tecnicamente, não precisamos nos preocupar muito com isso porque a Ionic fez muito trabalho por E eu serei o primeiro a admitir não sou um cara do código X um cara C objetivo ou um cara rápido. Simplesmente não é algo que nunca tenha sido muito atraente para mim. Mas agora que eu criei e sincronizei, posso abrir esse projeto no Xcode E eu tinha medo disso. OK. Portanto, meu O F foi atualizado desde a última vez que executei o XCode, o que significa que preciso atualizar o EXCO, ou pelo menos parte do Agora, vamos ver o que ele faz. Algum de vocês está acompanhando no seu mac? Sim. Tudo bem. Quero clicar aqui novamente. Isso parece melhor. OK. Portanto, há o código X. Você é desenvolvedor da Apple? Não. Não. Estou registrado como desenvolvedor da Apple, mas não pago a taxa de assinatura, então não posso enviar nada para a App Store. Mas eu deveria pelo menos ser capaz de fazer isso se eu pudesse encontrá-lo. OK. Então, eu tenho um identificador de pacote A assinatura é automática, mas eu não tenho uma equipe, então preciso ir para minha equipe pessoal. E isso deve falhar no registro porque você não pode. O identificador do pacote precisa ser globalmente exclusivo Bem, meu porque eu uso a caminhada como meu domínio. E meu relógio quer que eu confie no meu computador. Sim, você pode. Venha caminhar. Vamos chamá-lo de julho de 2022. Tente novamente. OK. Então, ele criou um certificado de sinalização e um perfil de provisionamento para mim Então, neste momento, eu deveria ser capaz de escolher um simulador ou, se eu quiser, conectar meu iPhone real se eu tiver um cabo elétrico. Em algum lugar por aqui. Se tivermos tempo, vou fazer isso. Vamos usar um iPhone oito, um dos menores e mais antigos. Eu deveria conseguir clicar em Jogar. Está construindo. Eu te disse que o Macbook era rápido, não é? OK. Sim. Não vi o código X aberto embaixo do meu capacitor no Você não fez isso? Sim. Eu não tinha isso. Você fez a construção na pia? Sim. Bem, e você fez o anúncio do projeto IOS? Sim. Sim. Porque é por isso que eu tinha aquela vagem de coca OK. Certo. Bem, deixe-me tentar construí-lo mais uma vez para ver. Tudo bem. Os simuladores estão funcionando agora. Então, no iPhone 8 com IOS 1155. Você pode ver no topo. Se você pode ver, é pequeno, diz , rodando a Apple no iPhone 8. Aí está. Com todos os três botões. Agora, eu posso te dizer que isso vai falhar. Não é que o aplicativo vai funcionar, certo? Eu posso entrar aqui. Eu posso marcar o presente. Eu posso marcar como ausente Eu posso ir, posso mudar o nome da Jennifer para Jen. OK. E está se comportando como um iPhone E vamos dizer que Jen nasceu em março de 95 no dia 10 E vamos salvar a Jen. Então agora é Jen e ainda faz aniversário no mesmo dia. Eu posso deletar Troy. E tudo o que criamos nas últimas 3,5 sessões está funcionando completamente como se fosse um aplicativo nativo para iPhone. Ainda precisamos fazer algumas coisas para melhorá-lo, mas está funcionando. Então, se eu vier aqui para Casey, alguém sabe o que vai acontecer quando eu clicar na foto da câmera Não há um simulador de câmera, então não vai funcionar, vai falhar por isso Provavelmente vou pedir que você escolha uma imagem ou simplesmente morra. Não, simplesmente morre. Não. Mas acredito que a razão pela qual ele morreu não é porque não há câmera. Está aqui mesmo. Então é aqui que começa a chegar. Na verdade, não estamos mais no reino iônico. E se você acessar a documentação do plugue da câmera do capacitor , ela o avisará sobre A câmera não funcionará a menos que você diga ao código X que deseja pedir permissão para usar a câmera e. Todos vocês já viram isso, certo? O aplicativo X quer usar sua câmera e, em seguida, há uma pequena frase ou duas abaixo que informa o que eles farão com a imagem ou como usarão esses dados Certo. Isso está aqui. Isso está no código X. Você não pode fazer isso com ionic e é diferente no Android do que no IOS É a mesma coisa. Você ainda precisa pedir permissão, mas a forma como você pediu permissão é diferente no Android. Então, se bem me lembro, deixe-me encerrar o aplicativo. OK. Pelo que me lembro, está aqui em algum lugar. Estou na informação. E o que eles me dizem que eu estou procurando. Você não tem a descrição de uso do anúncio da Biblioteca de Fotos Anna. Capacidades necessárias do dispositivo. Eu sempre esqueço esse. Então, eu vou pegar isso. Eu vou voltar para as interwebs. OK. E a Apple diz, uma mensagem que diz ao usuário por que o aplicativo está solicitando esse anúncio, para onde ele vai? Lá vamos nós. Como adicionar isso no código x. Então, estamos em informações, alvos personalizados do IOS. Eu não vejo isso. Você vê isso? Não. Claro, eles mudaram as coisas com quase todas, aqui está um costume que eu sempre comecei. É bem aqui à esquerda. Clique com o botão direito do mouse em qualquer linha de chave e clique em Adicionar linha. Adicionar. Isso parece. Eu vejo errado, não é? Eu não acho que isso pertença. OK. E quanto aos valores de R s? Não, eu gosto desse. Ok , o que é isso na lista? Ly. Esse é o que eu quero. Lá vamos nós. Isso é o que eu quero. Não essa. Então, agora que eu tenho isso aí, acredito que é exatamente por isso que queremos usá-lo. Escreva o valor descrevendo por que seu aplicativo precisa dele. Aqui, podemos tirar uma foto sua. OK. Isso faz sentido? Vamos executá-lo novamente. O simulador ainda está funcionando. E agora eu vou para a lista. Clique aqui, espero. Eu ainda não gostei. É por isso que usamos iônico e não falta. Vamos verificar novamente aqui. Desapareceu, não é? Não. Aqui na parte inferior. Aqui está. Isso deveria estar dentro dos recursos necessários do dispositivo? Não. Eles fizeram isso no pacote, exceto no pacote Eles fizeram isso aqui em algum lugar. Sim. Então, qual era o valor que eles tinham? Talvez essa seja a diferença. O valor da chave será mostrado como uma descrição do pop-up exibido ao usuário, então escreva o valor descrevendo por que seu aplicativo precisa acessar a biblioteca de fotos? Isso parece bom. Vamos tentar. Volte para o aplicativo. Você precisa construí-lo novamente? Isso é o que eu estava pensando. Vamos apenas limpar a pasta de compilação. E então construa o run it novamente. Ah. Uau. Sim. Ainda está feliz com isso, não é? É possível. Oh, está aqui também, não é? É assim que está na lista Info P. Está até mesmo aí. Tenho certeza que não está na cápsula. Acho que está aqui. É sempre divertido lidar com o IOS. Então, vamos ao capacitor. Vamos ver o que eles dizem. Apenas conecte. Isso requer mais do que apenas isso. Então fizemos esse, certo? Não. Nós fizemos essa parede. Tudo bem. Então, nós temos esse. São todos iguais, não é? OK. OK. torná-los um pouco diferentes para saber qual é qual. OK. Vamos tentar isso. Asador diz que precisamos de três, então temos três agora. Não pareceu que foi construído, não é? Você disse que sim? Não. Vamos tentar. Aí está. Mas era disso que precisávamos. Precisávamos dos três. Tudo bem. Então, vamos tentar ver se eu tenho um cabo aqui. O que significa que eu tenho que me desconectar. Esse é o problema com o erro do Macbook. Só tem duas portas. Então, vou desconectar minha energia, pois a coisa funcionará por seis ou 7 horas com uma bateria Estou no meu iPhone 11. OK. Agora que temos isso funcional. Veja, eu tenho meu iPhone 11 aqui para desbloquear para usar os acessórios. Agora o iPhone de Michael. Eu ainda estou compartilhando a tela, certo? Sim. Sim. OK. OK. Então, eu selecionei meu iPhone. E agora vou reiniciá-lo. E acho que Bill teve sucesso. Michael, tudo bem. Vou parar de compartilhar por um momento. Eu quero tentar algo. Não. Não está aí, está. O que você vê agora? Você vê o iPhone, certo? Sim. A EXCO ainda está esperando. Tudo bem. Então, enquanto o XCoda ainda espera? Vamos voltar aqui. E eu quero criar telas iniciais e ícones. OK. Eu só fiz isso na linha de comando com a biblioteca de outra pessoa. O que acontece se clicarmos nisso? Não vai funcionar, certo? Precisamos selecionar o arquivo, um arquivo PNG de 10204 quadrados que não contém transparência O que vou fazer aqui então é voltar para o Pixabay e procurar um ícone de pessoas Esse não é um animal de estimação. Mas esse provavelmente tem transparência, certo? Sim. Tudo bem. O que mais podemos encontrar? Acho que no passado, eu costumava pranchetar imagens Isso também tem transparência, mas talvez eu consiga corrigir isso. Então, 10204 por 10204. Essa é estranha. Vamos ver. O que mais seria uma boa? Desculpe, aquela. Tudo bem. 12 80 por 12 80 P e G. Vou baixar isso. Abra-o na pré-visualização. Na verdade, para baixo. Vamos dizer não, não, não. Vá em frente, isso vai funcionar. Vou te mostrar o que vou fazer. Então, eu diminuo um pouco. Agora eu vou cortá-lo. Volte para o tamanho da imagem. Não proporcional. Faça exatamente 10204 por 10204. E faça uma caixa branca. Ele usa um plano de fundo e, em seguida, cola minha área de transferência dentro dele Um pouco pouco ortodoxo, mas faz o trabalho. Agora