Aprenda a desenvolver aplicativos para iOS e SwiftUI (2021)

1. Introdução: Olá e seja bem-vindo. Neste desafio para iniciantes de 14 dias, você começará sua jornada com um estrondo. Você aprenderá como os aplicativos são feitos e como eles acabam na loja de aplicativos. Você se familiarizará com o Xcode e portanto, iniciará seu próprio projeto de aplicativo. Você aprenderá a criar interfaces de usuário com a interface do usuário Swift. E você aprenderá os conceitos básicos de programação Swift para que você possa ler e escrever um código Swift simples. Agora, nas próximas 14 lições, você ganhará todas essas novas habilidades. E você criará seu próprio aplicativo que pode instalar no seu dispositivo e mostrar a todos os seus amigos e familiares o que você fez. Mais importante do que isso, no entanto, você ficará extremamente confiante e animado para continuar crescendo suas habilidades de desenvolvimento de aplicativos além do que abordamos aqui. Isso realmente pode ser o começo de algo novo para você. Ok, então se você estiver pronto, vamos arregaçar as mangas e começar. 2. 01: o Ecosystem da Apple: Vou percorrer este diagrama e depois, vou te dizer onde obter todas as peças, tudo começa com o Xcode IDE. Agora, IDE significa Integrated Development Environment, que é um termo para o aplicativo e todas as ferramentas que um desenvolvedor usa para criar algo. Para o resto deste curso, vamos simplesmente chamá-lo de Xcode. É aqui que criamos nosso aplicativo escrevendo código Swift, construindo a interface do usuário ou a interface do usuário para abreviar e conectá-lo com todos os nossos dados. Swift é a linguagem de programação que usamos para expressar nossa lógica e dizer ao sistema o que queremos fazer. Podemos até criar a interface do usuário por meio de código rápido, como você verá em breve. Agora, o Swift UI é uma estrutura de interface do usuário que facilita a criação rápida aplicativos para todas as plataformas apple. Um bom benefício de aprender a interface do usuário Xcode, rápida e rápida é que elas são as mesmas habilidades e ferramentas usadas para criar todos os aplicativos para todas as plataformas da Apple, incluindo iOS, iPadOS, tvOS, watchOS, e Mac OS. E, em alguns casos, seu aplicativo poderá funcionar em várias plataformas sem muitas alterações. Agora, depois que seu aplicativo for criado, você pode distribuí-lo com a App Store da Apple. Isso é feito juntando-se ao Apple Developer Program, que requer uma taxa de inscrição anual. Depois de se inscrever, você terá acesso a vários benefícios, incluindo o portal de conexão da App Store, voo de teste e o portal de provisionamento. Há mais alguns benefícios , incluindo acesso ao software beta e suporte dos engenheiros da Apple. E fornecerei um link para a lista completa abaixo. O portal de provisionamento oferece acesso a ferramentas para identificação e assinatura de código do aplicativo. É como colocar sua assinatura no aplicativo para que a Apple possa identificar quem a criou. E isso é importante para a segurança dos usuários finais baixando seu aplicativo. E também é importante para você porque impede codificadores maliciosos de fingir ser você. Quando seu aplicativo estiver em um estado testável, o voo de teste permite que você convide pessoas para baixar e testar o aplicativo beta. Será possível enviar comentários e relatórios de bugs diretamente para você através do programa de voo de teste. Use o voo de teste para garantir que seu aplicativo seja mais refinado possível antes do lançamento. E, finalmente, a App Store connect é onde você criará a coisa do atlas para seu aplicativo, incluindo todos os metadados e capturas de tela. Se o aplicativo tiver compras de aplicativos, também é aqui que você os configuraria. Depois que seu aplicativo for testado e a listagem estiver pronta, você poderá fazer o upload do aplicativo do Xcode para a App Store connect a partir daí, a equipe de certificação da Apple analisará seu aplicativo para garantir que ele atenda ao aplicativo Diretrizes de qualidade da loja. Isso leva alguns dias e não se preocupe se você falhar porque você pode corrigir o que eles apontam e reenviá-lo para revisão. Se tudo estiver bem, eles aprovarão o aplicativo e seu aplicativo estará ativo. Parabéns. Tudo bem, então onde você pode obter essas diferentes partes do Apple Developer Ecosystem? Você pode baixar o Xcode gratuitamente na Mac App Store. Vou fornecer um link abaixo. Você não precisa obter a interface do usuário Swift ou Swift. Acabam de vir com o Xcode. Quanto ao Apple Developer Program, fornecerei um link para a página de inscrição abaixo. Quero mencionar que ingressar no Apple Developer Program é completamente opcional se seu objetivo não for distribuir aplicativos na App Store, não participe dele. Você ainda poderá aprender a criar aplicativos para você mesmo. Então esse é o ecossistema de desenvolvedores da Apple. É o processo pelo qual vou te levar se você continuar com esta jornada do aplicativo. Agora, ao final desse caminho de aprendizado, você estará criando seus próprios aplicativos usando todas essas ferramentas que abordamos, mesmo que você não tenha nenhuma experiência de codificação agora, eu prometo que você será o que você pode fazer até o final deste desafio. Na próxima lição, vamos mergulhar direto no Xcode. Tudo bem, te vejo lá. 3. 02: Tutorial de Xcode: Olá e seja bem-vindo. Neste tutorial do Xcode, você se familiarizará com o ambiente de desenvolvimento no qual você criará aplicativos. Mostrarei onde baixar o Xcode e como iniciar um novo projeto de aplicativo. E então vamos passar pelas principais áreas do Xcode e, em seguida, o que cada um dos arquivos em seu projeto de aplicativo é quatro. E, finalmente, terminaremos a lição com algumas dicas rápidas sobre como navegar no Xcode. Tudo bem, com isso dito, vamos mergulhar. Vamos começar falando sobre onde obter o Xcode. É grátis, então você não precisa pagar por isso. Basta iniciar a Mac App Store no seu computador e depois procurar o Xcode. Você chegará a uma página como essa nos resultados da pesquisa. Clique nele e você poderá baixá-lo gratuitamente. Então eu já o baixei. É por isso que diz atualizar aqui. Quero que você ignore o aviso aqui. Na verdade, é um aplicativo muito grande com muitos recursos diferentes. É compreensível que existam alguns bugs. E se você olhar para os comentários, há pessoas reclamando outras coisas não relacionadas ao aplicativo. Eles estão reclamando da forma como a Apple está administrando seus negócios e assim por diante. E alguns deles são muito, muito antigos. Ok, eu quero que você tome nota dessa informação importante. Clique nisso apenas para garantir quais são os requisitos para instalar o Xcode. E também verifique se você tem espaço livre suficiente no disco rígido. Agora, na minha experiência, na verdade, é preciso mais espaço no disco rígido ao longo do tempo. Então o que diz aqui. Então, se você tem algo como 12 shows grátis, talvez não permita que você instale isso porque durante o processo de instalação ele realmente ocupa mais espaço e acho que ele se livra de um monte de arquivos e ele pára neste tamanho. No entanto, com o tempo, quando você baixa componentes adicionais do desenvolvedor e simuladores iOS adicionais, isso pode ficar ainda maior. Portanto, certifique-se de ter espaço suficiente no disco rígido. Tudo bem, então, se por algum motivo você não conseguir acesso à Mac App Store, também poderá visitar a página oficial do Xcode no site do desenvolvedor da Apple. Portanto, o URL é o ponto do desenvolvedor apple.com slash Xcode. E você pode clicar imediatamente no link Recursos aqui. E então você será levado para uma página onde você pode baixar o Xcode aqui, basta levá-lo pela Mac App Store. Na verdade, você também pode baixar versões beta do Xcode. Agora eu não recomendaria isso porque muitas vezes é realmente muito buggy. Há software beta. Então eu recomendaria ficar com os lançamentos oficiais. Se, por algum motivo, você quiser baixar uma versão mais antiga do Xcode, você pode rolar aqui para baixo e clicar neste link aqui. Agora, apenas uma nota, para baixar versões beta do software Apple, você precisa estar inscrito no Apple Developer Program, sobre o qual falamos na lição anterior. Para baixar versões mais antigas do Xcode, acho que você não precisa estar inscrito nesse programa. Acho que você só precisa de um Apple ID gratuito. E, por fim, se você estiver em um PC, você está executando o Windows. Verifique os recursos no início do curso para obter opções para você. Tudo bem, então agora aproveite a oportunidade para baixar e instalar o Xcode se você ainda não e inicie-o pela primeira vez. Durante o primeiro lançamento, ele solicitará sua senha administrativa para sua senha administrativa para instalar componentes de desenvolvimento adicionais. Você vai querer fazer isso. Então vá em frente e insira sua senha de administrador. Depois de fazer isso, vamos continuar com o resto do vídeo. Tudo bem, então agora vamos falar sobre como iniciar um novo projeto Xcode. Esta deve ser a primeira tela de boas-vindas que você vê ao iniciar o Xcode. Se você não vir isso, não se preocupe, você sempre pode ir para Arquivo Novo e escolher projeto. Caso contrário, nesta tela de boas-vindas, você pode seguir em frente e clicar em Criar um novo projeto Xcode daqui. A partir daqui, você escolherá um modelo para seu novo projeto. Você configurará as propriedades do projeto para isso e, em seguida, escolherá um local para salvá-lo. Então, vamos começar escolhendo um modelo. O mais básico para nossos propósitos está no iOS e no aplicativo. Então vá em frente e escolha isso e clique em Avançar. E aqui você configurará as propriedades do seu projeto. Então, se você não tem uma equipe aqui, não se preocupe. Posteriormente, você pode adicionar sua conta Apple aqui e, em seguida, você pode configurar a equipe para o projeto. Uma coisa que você vai querer ter certeza é definir o identificador da sua organização aqui. Se você tem uma empresa ou um site, você pode usar o nome de estilo de domínio reverso aqui, com ponto, seja lá o que for. E você pode até usar seu nome e sobrenome aqui, se quiser. E aqui você preencheria o nome do aplicativo ou do nome do produto. Então aqui, se eu colocá-lo em teste, você verá que esse identificador de pacote é uma combinação do identificador da organização o nome do produto. E isso juntos forma esse identificador de pacote exclusivo. Esse identificador de pacote é usado em locais diferentes para identificar seu aplicativo, como na loja de aplicativos ou no portal de provisionamento, ou na App Store connect. Portanto, isso é muito importante. Não se preocupe, você pode alterar o identificador do pacote para seu projeto mais tarde. Eu só quero chamar sua atenção para como ela é formada e para que ela é usada. Tudo bem, em seguida. Sua interface, você garantirá que você tenha a interface do usuário Swift selecionada. E para o ciclo de vida, você garantirá que tenha o aplicativo Swift UI selecionado. E, finalmente, para o idioma, escolha swift e para essas opções, basta deixá-las todas desmarcadas ou se estiverem verificadas, basta desmarcar. Agora, uma breve nota sobre esses suspensos aqui. Com o tempo, à medida que o desenvolvimento de aplicativos para iOS evoluiu, houve algumas linguagens de programação e também algumas maneiras de criar interfaces de usuário. O mais recente e melhor é a interface rápida e rápida. Então é isso que queremos usar. Vamos em frente e aperte Next. Se você estiver feliz com todas as suas seleções aqui e, em seguida, escolher um lugar para salvá-lo. Vou salvá-lo na minha área de trabalho para que seja fácil de encontrar. Como já tenho o projeto dela lá, eu ia substituí-lo. Tudo bem, bem-vindo ao seu novo projeto Xcode. Agora pode parecer esmagador com todos os diferentes painéis e áreas, mas na verdade não é tão complexo uma vez que você sabe como ele é quebrado, existem apenas quatro áreas principais do Xcode. Vamos começar da muito, muito à esquerda. Aqui temos o painel do navegador ou a Área do Navegador, como você pode ver aqui, temos uma lista de arquivos de todos os arquivos diferentes em nosso projeto de aplicativo. A área do navegador, na verdade, tem guias diferentes para navegar por coisas diferentes também, às quais chegaremos em lições futuras por enquanto, está definida para a primeira guia e temos um listagem de nossos arquivos. Quando você clica em um arquivo, ele muda o que é mostrado nesta grande área principal, e isso é chamado de área do editor. Ele nos permite editar os arquivos que escolhemos no navegador de arquivos, você pode ver que ele se adapta ao tipo de arquivo escolhido. Escolha um arquivo rápido de ponto, esses são arquivos de código. Se eu escolher esse arquivo de ativos XC, esta é uma biblioteca de imagens, então está me mostrando algo assim. A área do editor é um lugar para editar o arquivo que eu escolho aqui. Portanto, a última guia está no lado direito e isso é chamado de área do inspetor. E isso me mostra informações suplementares adicionais sobre o que selecionei a área do editor, ou me permite configurar ou editar a coisa que eu seleciono na área do editor, dependendo em que tipo de editor estou trabalhando atualmente. Por exemplo, este é um editor de código porque estou olhando para um arquivo rápido de ponto. Quando eu passar o mouse sobre ou selecionar a palavra-chave aqui, se eu estiver nesta guia Ajuda rápida, ela está me mostrando algumas informações rápidas sobre o que serve esse pedaço de código ou palavra-chave. O painel do inspetor também tem algumas abas diferentes aqui. Por exemplo, esta é uma guia de identidade. Ele me mostra informações sobre esse arquivo que selecionei sobre onde ele está localizado e qual aplicativo ele está incluído em um se estivéssemos criando nossa interface de usuário. Agora, se eu selecionasse um desses elementos e vá para essa guia, isso me permitiria configurá-lo. Então, para resumir, o painel do inspetor aqui é contextual ao que você seleciona na área do editor. E a área do editor é contextual ao que você seleciona na área do navegador. Então, tudo decorre do que você seleciona aqui no lado esquerdo primeiro. E, em seguida, no topo, temos a barra de ferramentas aqui. Deixe-me explicar o que é isso. Há um botão aqui à esquerda e à direita para esconder e mostrar o navegador e o inspetor. Eles são úteis se você não tiver muitos imóveis de tela. A próxima coisa que eu quero chamar sua atenção é no meio aqui. Esta é a barra de status. Ele diz o que está acontecendo atualmente. O que o Xcode está fazendo? Você tem algum erro? Você tem algum aviso, e assim por diante e assim por diante. À esquerda disso, você tem uma lista suspensa para selecionar um simulador. E este simulador iOS é basicamente um dispositivo virtual que aparece na tela onde você pode executar seu aplicativo e testá-lo. Na verdade, você não precisa de um dispositivo físico. Se você tiver um, por mais novo, conecte-o e deseja executar seu projeto Xcode em seu dispositivo real, você descobrirá que ele será selecionável a partir daqui depois de conectá-lo. E, à esquerda deste menu, você verá alguns botões aqui para executar seu projeto. Pressionar este botão realmente executará seu projeto neste simulador. E apertar o botão de parada parará de executar seu projeto no simulador. E então, no lado direito, também há mais dois botões. Este é o botão da biblioteca onde você encontrará diferentes elementos da interface do usuário, diferentes maneiras de modificar esses elementos. Trechos de código nos ativos que você adicionou ao projeto, as cores especificadas para o projeto e assim por diante. Este pequeno painel de biblioteca é útil para fazer uma pesquisa. E para selecionar e adicionar coisas rapidamente na área do editor. Vamos chegar a isso na próxima lição. Mas, por enquanto, essa é a área da biblioteca. Isso, você provavelmente não usará muito no começo. Este é um tipo de botão de revisão ou revisão de código que mostrará se você estiver usando o controle de origem, como seus arquivos foram alterados ao longo do tempo. Portanto, essas são as quatro principais áreas da interface de usuário do Xcode. Tudo bem, agora vamos rever os arquivos em seu novo projeto. Vamos começar do topo. Este é o nó raiz ou é o arquivo do projeto. Se você selecionou, a área do editor mudará esta tela de configuração para que você edite alguns dos detalhes que pertencem ao seu projeto. Por exemplo, aqui está o identificador do pacote que é mutável. Você pode configurar a orientação do dispositivo em quais dispositivos e quais plataformas podem ser executadas, coisas assim. Se descermos um nível, você pode ver que há duas pastas aqui. Este contém todos os seus arquivos de código e arquivos de projeto. Este produto contém a saída. Quando você constrói seu aplicativo e o compila, ele é transformado neste aplicativo, que, em última análise, é aquele pequeno pacote ou pacote implantável que enviamos para a App Store. Você realmente não precisa fazer muito aqui com isso, mas é aí que ele está armazenado. Tudo bem, vamos dar uma olhada neste arquivo. Isso será nomeado após o nome do seu produto, app dot swift. E você pode ver aqui com esta tag principal aqui, esse é o ponto de entrada do seu aplicativo. Neste ponto, não há muito para configurar aqui. Tudo o que realmente faz é criar a primeira visualização que o usuário vê, que é a visualização de conteúdo. E você pode ver que esse nome mapeia para o ponto de exibição de conteúdo rápido. Então, vamos dar uma olhada nisso. Esse arquivo representa a exibição que o usuário vê. Agora você pode criar visualizações adicionais, mas, por padrão, você obtém essa visualização de conteúdo para começar. E sim, é tudo código aqui. Isso significa que a interface do usuário é gerada pelo código. Mas também há uma maneira visual de personalizar a interface do usuário, que você verá na próxima lição. Vamos seguir em frente com nossos outros arquivos. Este, como mencionei antes, é nossa biblioteca de ativos. É aqui que podemos armazenar as cores do nosso aplicativo, bem como os ícones do aplicativo, bem como quaisquer outras imagens que queremos adicionar ao nosso projeto. Nós apenas arrastamos e soltamos aqui. E esse é o nosso ativo de imagem. Bem, não apenas imagens, mas a Biblioteca de ativos. E então temos um info.plist e essas são algumas informações de configuração adicionais para o projeto. Aqui temos conteúdo de visualização, e essa é outra biblioteca de ativos, mas estes são apenas para ativos de pré-produção. Portanto, apenas imagens, texto e cores e coisas como essa com as quais você está testando , como sugere a visualização do nome, se for um ativo que acabará por chegar ao aplicativo que você vai empurrar o App Store, então você pode colocá-lo na biblioteca de ativos aqui. Então, essa é uma explicação rápida de todos os arquivos em seu projeto em poucas palavras. Nas lições futuras, vamos nos aprofundar em cada uma delas e você verá como cada um desses arquivos desempenha um papel na construção do seu aplicativo. A última coisa que quero fazer nesta lição é dar algumas dicas rápidas sobre como navegar pelo Xcode em termos de percorrer seus arquivos e também em termos de edição de código. Então, antes de tudo, vamos falar sobre navegar e arquivos. Você notará essas duas flechas aqui. Eles são realmente úteis porque isso vai deixar você ir para o último arquivo que você estava vendo. E embora pareça um pouco trivial agora, quando você está pulando em torno de edição e arquivos, isso se torna realmente útil. Em vez de ter que selecionar novamente esse arquivo no navegador, você pode simplesmente clicar de volta e voltar para o arquivo anterior. Você também notará que você pode ter várias guias aqui. Assim, você pode manter o controle pressionado e clicar em um arquivo e você sempre pode escolher abrir em nova guia. Você também pode abrir em uma nova janela, se quiser. Então, como eu já tenho isso como guia, ele não abrirá uma segunda guia para mim. Agora, se você quiser ter coisas lado a lado, você também pode fazer isso. Então, digamos que eu queria ver esses dois arquivos lado a lado. Então eu posso fechar isso. E então eu posso ir em frente e posso adicionar outro painel do editor no lado direito, para poder dividir minha área do editor em duas áreas do Editor. Você pode ver que aqui estou olhando para a visualização de conteúdo tão rápida por aqui. Vejamos o aplicativo de teste. Então, são áreas independentes. Talvez eu queira me livrar da minha tela. E então eu posso ver os dois PFOS assim. Se você preferir que eles sejam empilhados horizontalmente, você pode manter a opção pressionada. E você pode ver que esse ícone muda. Certo, se você apertar este botão novamente, ele adicionará outra área do editor à direita. Então você vai se dividir em três. Ou você pode manter pressionada Option e você pode adicionar um editor na parte inferior. Então você faz isso. Você também pode fazer isso aqui, mantenha pressionada a opção e faça isso. Agora, uma maneira rápida de iniciar um arquivo em uma visualização do editor dividido. Então, digamos que eu esteja analisando o aplicativo de teste e queira abrir a visualização de conteúdo como uma área de editor separada. Posso manter pressionada a opção e clicar no arquivo que quero abrir em uma exibição separada do editor. Portanto, essas são algumas das maneiras pelas quais você pode trabalhar com seus arquivos. Só para recapitular, você pode navegar. Você pode voltar e seguir em frente. Você pode ter guias diferentes. E, em seguida, você também pode dividir sua área do editor em várias instâncias do editor. Agora eu quero falar sobre edição de código porque isso é muito do que você vai fazer. E o código parece bem curto agora, mas pode ficar mais longo. Portanto, é útil saber algumas maneiras de lidar com isso. No topo aqui, você verá esse tipo de menu de pão ralado. E você notará que esse é o nó raiz corresponde a isso, certo? Esta é uma pasta ou grupo, pode ver isso. E então esta é a visualização de conteúdo, que é o arquivo que você está vendo, que está aqui dentro dos testes. E aqui, podemos realmente clicar nisso e você pode pular para diferentes seções do seu código. Você pode ver que a visualização de conteúdo corresponde a isso. O corpo combina com isso, certo? Portanto, essa é uma ótima maneira de pular para diferentes seções em seu arquivo de código caso seu arquivo de código fique muito longo. Você também pode adicionar comentários diferentes aqui que corresponderão ao que você vê aqui. Então você pode ver aqui, eu criei minha própria documentação e ela a adiciona aqui. Portanto, essa é uma ótima maneira de organizar seu arquivo. Vamos falar novamente sobre isso no futuro. Portanto, não se preocupe se isso estiver indo um pouco rápido demais. Tudo bem, agora vamos falar sobre esse pequeno botão aqui. Você me viu usar isso para abrir o Canvas, mas você também pode abrir este minimapa aqui. E esse minimapa mostrará um esboço do arquivo de código. Você pode arrastar isso para esfregar seu código. Infelizmente, não posso fazer isso muito aqui porque esse arquivo de código não é muito longo. Mas se você tivesse um arquivo de código muito longo, ele mostraria o esboço desse arquivo de código aqui. E você pode navegar facilmente clicando e arrastando isso. Você vai notar que, mesmo que eu destaquei, isso vai me mostrar as diferentes partes do meu código correspondentes ao que temos aqui. Mais uma vez, essas foram apenas algumas dicas de fogo rápido. Não se preocupe se isso voou muito rápido porque usaremos todas essas coisas juntos nas próximas lições. Então esse é um tutorial rápido para você começar. Não é tão complicado quando você sabe onde as coisas estão certas, apenas para recapitular, você descobriu onde baixar o Xcode e como iniciar um novo projeto de aplicativo. Você aprende para que serve cada um dos arquivos em seu projeto. E você aprende as principais áreas do Xcode, incluindo o navegador, o editor, o inspetor, a barra de ferramentas. Finalmente, você também aprenderá algumas dicas rápidas sobre como navegar com esse Xcode. Agora, não se preocupe se for um pouco avassalador agora, você se sentirá em casa com Xcode, pois o usamos com mais frequência juntos nas próximas lições para ajudá-lo a se instalar, Na verdade, criei uma folha de truques do Xcode que você pode imprimir e manter ao seu lado enquanto aprende a usar o Xcode, eu recomendo que você tente criar seu próprio projeto Xcode no seu próprio computador apenas para prática extra. Na próxima lição, e vamos usar o Xcode para criar nossa primeira interface de usuário. Tudo bem, te vejo lá. 4. 03: como criar interfaces de usuários: Olá e seja bem-vindo. Nesta lição, você aprenderá como usar o Xcode pode criar interfaces de usuário com a interface do usuário Swift. Primeiro, vamos aprender a visualizar o aplicativo para que você possa ver como a interface do usuário se parece. Eles não mostram como usar o Xcode para construir visualmente a interface do usuário ou a interface do usuário para abreviar. Até agora, o aprendizado tem sido praticamente passivo, o que significa que você pode simplesmente sentar e assistir aos vídeos. Mas a partir de agora, vamos mudar para um aprendizado mais ativo. Eu quero que você faça o que eu faço, replique-o em seu próprio projeto Xcode. E eu quero que você tente qualquer um dos desafios que você, esta é a melhor maneira de aprender. E, francamente, se você só vai sentar e assistir as lições e não fazer nenhum trabalho. Você não está aproveitando o melhor do seu tempo. Esta tem sido minha experiência pessoal e acho que será a mesma para você. Então, se você estiver pronto, vamos começar a sujar nossas mãos. Vamos fazer isso. Vamos começar criando um novo projeto Xcode. Vamos escolher o aplicativo iOS. E vou chamar este teste de interface do usuário. Apenas certifique-se de que as interfaces ciclo de vida da IU Swift seja rápido aplicativo de interface do usuário e o idioma é rápido. Fora isso, você pode nomear tudo o que quiser. Vamos seguir em frente e salvar nosso projeto. E, como mencionei na lição anterior, o ponto de visualização de conteúdo Swift representa sua visualização. Mas, como você pode ver, é tudo código. Então, como você realmente vê como sua interface de usuário se parece? Bem, existem duas maneiras diferentes. A primeira maneira é iniciar seu aplicativo em um simulador iOS, como mencionei antes. Então, vamos em frente e faça isso primeiro. Selecione um que você gosta. Então, vou selecionar o iPhone 11. E eu vou apertar este botão de compilação e execução. Agora é a primeira vez que você está lançando o simulador iOS. Vai demorar um pouco para inicializar, assim como seria para inicializar um dispositivo real para mim porque eu lancei o simulador antes. Está acontecendo muito, muito rapidamente. Como você pode ver, por padrão, seu projeto tem um rótulo Hello World. Vamos falar sobre isso em um segundo. Mas primeiro, deixe-me mostrar a outra maneira de visualizar seu aplicativo. Então, vamos em frente e interromper nosso projeto. E isso impedirá que o aplicativo executado no simulador. A segunda maneira é visualizar seu aplicativo nesta tela aqui. Isso faz parte da área do editor. Se você não vir isso, você pode clicar neste pequeno botão aqui e garantir que haja uma marca de seleção ao lado do Canvas. E se você estiver olhando para um arquivo rápido de ponto, que é uma visualização, você poderá ver esta tela. Caso contrário, se você estiver olhando para este arquivo de ponto de entrada aqui, você pode ver que não há pré-visualização. Então, vamos voltar para a visualização de conteúdo. Certifique-se de que temos nossa pré-visualização aqui e clique em currículo. Ele vai construí-lo e executá-lo. E então você verá a pré-visualização aqui. Mais uma vez. Se esta for a primeira vez que você faz isso, pode demorar um pouco. Vamos usar os controles de zoom aqui e diminuir um pouco para que possamos ver a coisa toda. Agora só de cara, há algumas coisas que eu quero mencionar aqui. Isso é simplesmente uma pré-visualização, enquanto quando você inicia isso no simulador, você está realmente instalando esse aplicativo em um dispositivo virtual para que possa interagir com ele e testá-lo. Aqui, esta é uma prévia com a qual você não pode interagir, mas há uma maneira que você pode. Então, se você clicar neste botão aqui, visualização ao vivo, ele entra em um modo em que é exatamente como o simulador que você viu antes. Mas está nesta tela de visualização. Então você pode ir em frente e clicar em Stop. E, novamente, ele só se torna uma prévia normal. Isso é apenas para fins de visualização. Outra coisa legal sobre o uso desta tela de visualização é que você pode apertar este botão aqui e escolher um dispositivo diferente. Você pode escolher um layout, escolher o modo escuro ou o modo claro e escolher várias coisas diferentes. Essa é a maneira preferida de visualizar sua interface do usuário porque, à medida que você está construindo sua interface do usuário por meio de código desse lado, sua interface do usuário por meio de código desse lado, você poderá ver as coisas mudarem à direita aqui sem ter para relançar o aplicativo no simulador. Tudo bem, agora vamos mergulhar e falar sobre como vamos realmente construir a interface do usuário. Portanto, certifique-se de ter o ponto de exibição de conteúdo rapidamente destacado e vá em frente e oculte o navegador de arquivos. Agora há um monte de código aqui que compõem a exibição. Mas vamos passar por isso em profundidade mais tarde quando você aprender algumas das noções básicas de programação Swift por enquanto, para evitar confusão, eu só queria chamar sua atenção para uma coisa, que é esse pedaço de código aqui. O que eu destaquei na tela é o que está gerando esse rótulo aqui que você vê na visualização. Observe que temos uma palavra-chave de texto. Temos o texto helloworld que você pode ver aqui. E também temos esse elemento de preenchimento aqui, que dá o preenchimento em torno da palavra. Vamos dar uma olhada neste pedaço de código e dividi-lo. Na verdade, vou apenas ir em frente e excluí-lo. Como você pode ver, o Xcode lançará todos os tipos de reclamações e erros. Mas não se preocupe, vamos consertá-lo imediatamente. Agora, nossos elementos de interface de usuário precisam estar entre esse suporte de abertura e esse suporte de fechamento. E você só pode ter um elemento de interface de usuário. Agora, obviamente, isso não faz sentido porque nossas interfaces de usuário são compostas de mais de um elemento. Mas é aí que os elementos do contêiner entram em jogo. E eu vou mostrar alguns desses nesta lição também. Por enquanto, vamos recriar esse elemento de texto. Então, o que escrevemos é aquela palavra-chave de texto seguida por um par de colchetes como esse, colchetes arredondados. E então lá dentro temos um par de aspas. E então colocamos o pedaço de texto que queremos exibir. Então aqui vou colocar olá. Mas você notará que essa moldura azul aumenta muito firmemente contra o meu texto de saudação. Se você quisesse adicionar o preenchimento de volta , escreveria ponto. E então você simplesmente digitaria preenchimento e usando o preenchimento automático, basta selecionar esse mesmo ali. E assim, recriamos esse rótulo com preenchimento. Este aqui é o elemento de texto ou o rótulo. Esta parte com o preenchimento de pontos. Isso é chamado de modificador. E você pode pensar em um modificador como um anexo a um elemento que altera a aparência e o comportamento dele. Nesse caso, esse modificador de preenchimento adiciona preenchimento aos elementos de texto para que , se houver um elemento ao lado dele, haverá algum espaço ao redor do nosso elemento de texto. E, na verdade, existem muitos outros modificadores que podemos adicionar aos nossos elementos de interface de usuário. Por exemplo, posso adicionar um plano de fundo chamado e vou adicioná-lo ao final do preenchimento. E vou dizer que o plano de fundo desse rótulo deve ser azul. Então você pode ver que nossa tela de visualização representa muito bem o que estamos escrevendo aqui através do código. Se houver algum momento em que as coisas ficam fora de sincronia, talvez o código que você está escrevendo aqui esteja dizendo que o plano de fundo deve ser verde, mas você não está vendo aqui. O código é considerado a fonte da verdade porque, em última análise, a tela de visualização e até mesmo o que você vê no painel Inspetor são apenas representações visuais do código. E isso me leva ao meu próximo ponto, que é quando você está construindo a interface do usuário, você não precisa escrever código. Existem muitas maneiras visuais de você criar o código. Vamos apagar esse elemento de texto e novamente, e deixe-me mostrar algumas das maneiras pelas quais você pode criar visualmente a interface do usuário. Eu falei sobre o painel da biblioteca antes. Assim, você pode ver aqui que podemos simplesmente selecionar, procurar o elemento de texto selecionado e podemos arrastá-lo para o nosso editor de código aqui. E então podemos alterar o texto do espaço reservado, mas nem precisamos alterar o texto aqui. Se você clicar neste elemento de texto e entrar no painel do inspetor, poderá alterá-lo aqui assim. E também neste painel do inspetor, você verá que há um monte de modificadores que podemos adicionar. Então, adicionando o preenchimento, eu poderia clicar nele para adicionar apenas o preenchimento superior. E você pode ver que o código muda. E está especificando que ele apenas um preenchimento na parte superior. E você pode vê-lo refletido aqui. Ou posso clicar neste aqui e ativar ou desativar o preenchimento. E você pode ver agora eu tenho preenchimento por todos os lados. Então, além de alguns dos modificadores que você vê aqui, aqui embaixo, há uma caixa de texto onde você pode procurar mais modificadores. Assim, posso procurar o plano de fundo e clicar nele. E, em seguida, selecione esse fundo azul, como você pode ver aqui. E então também posso adicionar esse preenchimento. Agora, além de usar os modificadores que você vê aqui e usar esta caixa de texto Adicionar modificador, você também pode usar a biblioteca para adicionar modificadores. Portanto, esta primeira guia fornece todos os elementos da interface do usuário que você pode adicionar à sua exibição aqui na segunda guia ou modificadores. Então, como você pode ver, há o preenchimento, há o segundo plano. Então, como você adiciona esses modificadores? Bem, basta clicar e arrastá-lo. Mas aqui você tem que se certificar arrastá-lo para o final do código. Porque se você arrastá-lo acidentalmente no meio do seu código, talvez não seja necessário, ou você pode obter algo assim. Isso claramente é um erro. Então, vamos desfazer isso. Então, como se isso não bastasse, há mais algumas maneiras mostrar a você sobre como você pode modificar os elementos da interface do usuário visualmente em vez de escrever código. Primeiro de tudo, vamos terminar de configurar esse plano de fundo e vamos selecionar azul ali mesmo, ou talvez verde. Certo, isso não está mudando isso. Então, está mudando isso, mas não está mudando aqui. Então vou seguir em frente e selecionar a cor, e vamos fazer verde, minúsculas g. Tudo bem, para que você possa manter pressionada o Command no seu teclado e, em seguida, você pode clicar no elemento da interface do usuário da sua pré-visualização aqui. E, em seguida, há várias coisas que você pode fazer com esse elemento, incluindo este, mostrar Swift UI inspector. E, novamente, você obtém esse Modificador Adicionar, TextField, o que você pode procurar por modificadores para adicionar. Então, vou adicionar um chamado Blur. Você pode ver que ele está desfocando a cor verde. E você pode ver que agora meu fundo é um verde embaçado. Agora você pode fazer a mesma coisa nos lados do editor de código. Assim, você pode manter pressionado o comando e clicar no elemento de texto e obter este menu. Você pode, novamente, clicar em Mostrar inspetor de interface do usuário Swift. E a partir daqui você pode ver que esse menu se parece com o inspetor aqui. E também podemos adicionar modificadores também. Então, para ilustrar meu ponto, mostrei várias maneiras diferentes de você modificar sua interface de usuário visualmente. Você não precisa escrever o código. Mas com o tempo, como você está fazendo isso da maneira visual, você está vendo o código que é gerado repetidamente. Você chegará a um ponto em que é tão familiar, será mais rápido para você apenas digitá-lo em vez de clicar em todos os lugares. Portanto, é uma maneira muito boa de aprender o código da interface do usuário. Isso não é muito legal? Xcode percorreu um longo caminho no passado. Costumava ser muito exigente usar o construtor de interface visual com o Xcode, mas o Swift UI realmente mudou as coisas para melhor. Agora, nesta lição, você aprenderá a usar o elemento de texto e modificou sua aparência e comportamento usando modificadores. Além disso, você também aprende que a interface do usuário é realmente gerada a partir do código Swift. No entanto, existem várias maneiras no Xcode para criar sua interface do usuário visualmente. E à medida que você constrói sua IU visualmente através do painel anterior do Canvas ou do inspetor, como demonstramos, o código rápido no editor de código é atualizado automaticamente para refletir essas alterações. Portanto, essa é uma ótima maneira de aprender o código rápido. Na próxima vez que nos sentarmos juntos, apresentarei visualizações e contêineres adicionais que você pode usar para que você possa criar interfaces de usuário mais complicadas. Tudo bem, te vejo lá. 5. 04: visualizações que and containers: Olá e seja bem-vindo. Nesta lição, você aprenderá a usar uma variedade de diferentes elementos e contêineres da interface do usuário. E, no final da lição, mostrarei algumas interfaces de usuário que eu gostaria que você tentasse se construir como prática. Lembre-se, você vai tirar muito mais deste curso se você parou durante toda a lição e tentar replicar o que eu fiz em seu próprio projeto Xcode. Tudo bem o suficiente para falar. Vamos para a parte divertida. Tudo bem, certo, então você aprendeu sobre o elemento de texto. Agora eu quero mostrar a você o elemento da imagem. Então, vamos seguir em frente e apagar isso. E por que não usamos a biblioteca para procurar o elemento de imagem. Então, vamos seguir em frente e arrastar e soltar a imagem lá. Agora, o problema é que não temos nenhuma imagem para exibir. Mas antes de eu lhe dizer como especificar isso, apenas percebi que está no mesmo formato que o elemento de texto certo? Há a palavra-chave image aqui e, em seguida, há um conjunto de colchetes redondos. E no meio, vamos colocar o nome da nossa imagem. Agora, esse nome de imagem é mapeado para qualquer ativo gráfico que colocamos em nossa biblioteca de ativos. Então, se abrirmos nosso navegador de arquivos e entrarmos em nossa biblioteca de ativos, você poderá ver que está tudo vazio. Não temos nada aqui. Então, vamos seguir em frente e colocar uma imagem aqui. Se você entrar nos recursos da aula, verá um arquivo zip chamado Logotipo assets. E vamos em frente e descompactá-los. E então, dentro, você encontrará uma imagem local. Você vai encontrar três arquivos na verdade. E eles são nomeados da mesma maneira, exceto com um apt to x e depois adicionam três x. e isso é literalmente apenas duas vezes maior do que o primeiro. E este é três vezes maior do que o primeiro. E a razão pela qual eles vêm em tamanhos diferentes é porque existem dispositivos iOS com diferentes resoluções de tela. Portanto, adicionando todos os três tamanhos, a plataforma escolherá o tamanho certo para usar para a resolução da tela. Ele está sendo exibido em. Então, tudo o que você precisa fazer é pegar todos os três e arrastá-los para a biblioteca de ativos assim. Vai ser inteligente o suficiente para saber que esses três estão no mesmo grupo. E isso vai dar um nome a ele. Você sempre pode renomear isso para que você possa clicar nele e dar o nome do que quiser. Mas esse nome aqui é o que você fará referência no elemento de imagem. Então vá em frente e coloque aspas, nome do ativo da imagem, e você deve vê-lo aparecer aqui. Na verdade, pré-visualização automática, atualização, pausa, vá em frente e clique em Continuar. Tudo bem, lá vemos nossa imagem. Agora, por padrão, ele exibe a imagem no tamanho do ativo gráfico que você importou. No entanto, se você quiser redimensioná-lo, dimensioná-lo para cima ou para baixo, você pode adicionar um modificador chamado redimensionável. Quando você acertar isso, ele poderá se esticar. Quando ele se estende se você quiser manter a proporção porque você pode ver aqui tudo está esticado e não se parece com a imagem original. Você pode adicionar outro modificador chamado proporção. E não se esqueça, mesmo que eu esteja digitando esses modificadores por meio de código aqui, você sempre pode adicioná-los neste menu. Você pode encontrá-lo ali mesmo. E, em seguida, o modificador de proporção permite que você selecione diferentes maneiras pelas quais isso deve ser dimensionado. Então, se eu disser adequado, ele vai escalá-lo para caber dentro dos limites. Mas com a manutenção da proporção. E enquanto estamos adicionando esses modificadores, esse seria um bom ponto para mencionar que uma boa prática é pressionar Enter em seus modificadores aqui para que eles se alinhem. Como alguns elementos podem ter uma lista de modificadores e colocá-los todos em uma nova linha, eles recuam automaticamente sob os elementos da interface do usuário aos quais pertencem e torna-se muito fácil leia. Tudo bem, agora você sabe sobre texto e elementos de imagem. Como vamos combinar os dois? Como podemos ter mais de um elemento para nossa interface de usuário? É aqui que os elementos do contêiner entram em jogo. Então, vamos em frente para nossa biblioteca e vamos procurar por pilha v. Este é o que estou me referindo, pilha vertical. E você pode ir em frente e clicar e arrastá-lo para aqui. Agora, você vai ter alguns erros porque isso conta como um elemento para. Agora, parece que o Xcode não alcançou, mas isso não seria uma interface do usuário válida. Essencialmente, temos dois elementos aqui. O que queremos fazer é pegar nossa imagem e eu vou cortar esse código e vou colá-lo entre esse suporte de abertura e o esse suporte de abertura e fechamento da pilha vertical. Dentro da pilha vertical, você pode colocar até 10 elementos e isso os empilhará verticalmente um sobre o outro. Então aqui eu também vou colocar. Elemento de texto assim. E você pode ver que agora eu sou capaz de ter dois elementos e eles são automaticamente empilhados um sobre o outro. Além da pilha vertical, há também uma horizontal. E em vez da pilha, isso é a pilha H. E se você mudar isso para um H de volta, verá que agora está empilhado horizontalmente um ao lado do outro. E há também um chamado zed stack, estou no Canadá, ou pilha z se você preferir. E isso coloca as coisas umas sobre as outras, com os elementos no topo sendo os mais distantes na parte de trás. Então você pode ver que nosso elemento de texto hello fica no topo da imagem. Agora, a coisa legal é que você pode aninhar esses diferentes elementos de contêiner. Então eu posso ter, digamos, quero que minha imagem, logotipo seja o plano de fundo e, por cima, quero ter que texto elementos lado a lado. Então eu posso usar uma pilha H aqui. E em vez de digitá-lo ou arrastá-lo da biblioteca, mostrarei outra maneira incorporar seus elementos nas pilhas. Se você pressionar Command e clicar no elemento, você já viu esse menu antes. Você pode incorporar na pilha H e ela só criará isso para você. E essa é provavelmente a maneira mais fácil de fazer isso. Então, nesta pilha H, vou adicionar hello world. Você pode ver aqui que agora minha imagem está por trás dessa pilha H com dois elementos de texto. Agora parece bastante intuitivo usar essas pilhas, certo? Mas como você organiza os elementos dentro desse imposto? Bem, existem algumas opções. Então, se eu clicar nesta pilha aqui, na verdade, vamos dar uma olhada na pilha. Então, vou seguir em frente e clicar nisso. Este realmente tem alinhamento. Assim como esse veado não acontece porque ele apenas coloca tudo um em cima do outro. Mas para a pilha H e a pilha, há um alinhamento. Assim, você pode optar por alinhar tudo por seus meios, alinhar tudo por suas linhas de base ou alinhar tudo pelo topo. E você também pode adicionar espaçamento. Então você pode ver aqui que estou adicionando um espaçamento de três. Você pode ver como ele muda o código e, na verdade, adiciona um espaçamento lá. Agora é muito pouco para você perceber que deixe-me adicionar 20. Você pode ver que há uma lacuna agora. Tudo bem, então você aprendeu que pode alinhar os elementos dentro de uma pilha e também pode adicionar espaçamento entre elementos em uma pilha. Mas quero mostrar outra maneira de organizar elementos dentro de uma pilha. Para fazer isso, vou mudar essa pilha em pilha V. Então, vamos conseguir algo assim. Agora vamos dizer que eu queria que esse logotipo estivesse no topo, e eu queria que meus dois rótulos de texto aqui estivessem na parte inferior. Uma maneira que eu poderia fazer isso é na verdade, adicionando espaçamento na minha pilha v, certo? Então, digamos que eu adicione um 100. Você pode ver que eles estão afastados. Se eu puder adicionar mais, 300. Mas esse é um valor fixo. E, como você sabe, há uma tonelada de tamanhos e resoluções de tela diferentes. Portanto, essa não é uma boa maneira de se aproximar disso. Deixe-me me livrar desse valor de espaçamento. Em vez disso, o que podemos usar é um elemento chamado espaçador. Então deixe-me mostrar como isso funciona. Entre o elemento de imagem e a pilha H que contém os dois elementos de texto. Vou inserir um elemento espaçador. E o nome desse elemento é espaçador, seguido por dois colchetes arredondados. O que esse elemento espaçador faz é ocupar todo o espaço disponível. Ele só se expande e empurra tudo para longe. Então você pode ver, eu tenho a imagem aqui. Tenho o espaçador ocupando o máximo de espaço possível. E então minha pilha H contendo os dois elementos lá. O legal sobre o elemento espaçador, no entanto, é que ele joga bem com outros elementos espaçadores na mesma pilha. Então, se eu subir aqui acima do logotipo e adicionar outro elemento espaçador, o que acaba acontecendo é que os dois elementos espaçadores ocupam uma quantidade igual de espaço. Você pode ver acima e abaixo do logotipo da guerra, há uma quantidade igual de espaço. Se eu adicionar um terceiro elemento espaçador abaixo da minha pilha H, o que você acha que vai acontecer? Bem, todos os três espaços onde os elementos compartilharão o espaço em branco disponível. Então, os primeiros elementos espaçadores aqui, o segundo aqui, e o terceiro está lá, e tudo tem uma quantidade igual de espaço. Esta é uma ótima maneira de espaçar as coisas igualmente. Agora, na verdade, eu poderia fazer a mesma coisa com minha pilha H em vez de especificar o espaçamento aqui. E observe desta vez eu vou excluir esse espaçamento 20 lá. Em vez de alterá-lo no Inspetor. Posso adicionar um espaçador lá. Vou copiar isso. E você pode ver aqui que ocupa todo o espaço disponível, empurrando meus dois rótulos para o lado. Mas se eu adicionar um aqui no lado direito, ele vai empurrá-lo para o meio. E então, se eu adicionar um no meio, isso vai torná-lo tudo equidistante. Incrível. Você aprendeu a usar a imagem e o espaço para elementos além do elemento de texto. Você também aprenderá a usar os contêineres Stack, HCI Stack e zed stack. Na próxima vez que nos sentarmos juntos, estaremos construindo a interface de usuário do jogo duro. 6. 05: crie a interface de cartões de guerra: Olá e seja bem-vindo. Nesta lição, estaremos construindo a interface do usuário do jogo de cartas de guerra. Na verdade, vou fazer você mesmo construí-lo primeiro porque acho que você pode fazer isso. Vamos lá. Vou começar você. Você faz uma tentativa honesta e depois passaremos pela solução juntos. Negócio. Vamos lá, você tem isso, vamos fazer isso. Tudo bem, então vamos começar com um projeto Xcode, lançar o Xcode e vamos criar um novo projeto Xcode. Vamos escolher o aplicativo no iOS. E você pode nomear isso o que quiser. Mas vou chamar esse desafio de guerra porque é isso que é e é um desafio que estou confiante que você pode fazer. Interfaces O ciclo de vida da interface Swift UI é rápido aplicativo de interface do usuário e o idioma é rápido. Deixe o resto desmarcado e vamos salvá-lo em algum lugar. Então, vou salvá-lo na minha área de trabalho. Tudo bem, aqui está nosso novo projeto Xcode. Vamos para a biblioteca de ativos primeiro porque vamos adicionar todos os ativos de imagem que precisamos para este aplicativo. Se você entrar na pasta Recursos do curso nesta lição especificamente , encontrará um arquivo zip com todos os ativos de imagem. Então vá em frente e descompacte isso. E então vamos arrastar todos esses ativos para a biblioteca de ativos. Agora você deve ter o cartão de volta, o plano de fundo para todo o aplicativo. E então você deve ter cartões dois a 14 e não, você não está faltando o carrinho número um. O ás é carbono-14. E a razão pela qual eu os numerei dessa maneira é porque vamos usar esse número no final dos nomes dos cartões aqui para representar o valor. E vamos comparar esse valor para ver qual cartão supera o outro. E então vamos ter uma imagem de botão de negócio e uma imagem de logotipo. Agora, caso eu não tenha mencionado isso antes, temos três tamanhos diferentes para cada imagem porque existem diferentes resoluções de tela para dispositivos iOS. Então, todos os dispositivos mais novos têm tela super retina e, portanto, eles estão usando os a3x e eu não acho que eles realmente criam dispositivos que usam o ativo de imagem única. Mas esse aplicativo foi de muito tempo atrás e nós reconstruímos em muitos momentos diferentes, então ainda temos todos os três. Agora deixe-me mostrar a interface de usuário finalizada. E esse é o resultado final que você tentará alcançar sozinho. Isso é o que parece. Não preste muita atenção ao espaçamento, desde que você tenha tudo geralmente no lugar certo. Acho que isso é ótimo. Outra coisa a mencionar é que isso deveria ser um botão, mas como ainda não passamos por botões, sinta-se à vontade para usar um elemento de imagem para isso. E isso será perfeito para quando fizermos a transição para usar botões. E posso mostrar como alterar esse elemento de imagem para um botão. Outra coisa que tenho que mencionar para você é o conceito da área segura. Agora, a área segura é essa região que começa aqui sob o entalhe deles, e termina aqui acima deste pequeno guiador. E, em alguns casos, existem margens no lado esquerdo e direito também. E qualquer coisa dentro desta região está na área segura. Agora, esta área está garantida para não ser obstruída. Qualquer coisa fora da área segura. Então, qualquer coisa neste canto ou neste canto pode ser obstruída como você pode ver por ícones ou no momento. E, obviamente, há esse guidão aqui que pode estar bloqueando as coisas também. Se você quiser um plano de fundo de tela cheia, como este fundo verde que temos aqui, você terá que ignorar a área segura porque, por padrão, quando você adicionar elementos à exibição, ele tentará ficar dentro da área segura. Então, há um modificador que ainda não mostrei. É chamado ignorar área segura que você pode aplicar a uma imagem que permitirá que ela se estenda além da área segura que ela atinja as bordas. E essa é provavelmente a única outra informação que você precisa. Além disso, você aprendeu sobre pilhas, aprendeu sobre elementos de imagem e texto, tudo o que você precisa para criar essa interface de usuário. Então vá em frente, pause este vídeo e experimente você mesmo. E depois, voltaremos juntos e eu o guiarei sobre como construir isso. Então, bem-vindo de volta. Como você conseguiu construir essa interface de usuário? Parabéns, se você conseguir construir isso ou algo parecido com isso. E se você ficou preso ou não conseguiu se preocupar porque vamos passar por isso agora. E muitas vezes eu acho que se você tentar você mesmo, ficar preso e depois encontrar a solução. Essas são muitas vezes as melhores experiências de aprendizado. Tudo bem, vamos passar por isso juntos agora. Agora, antes de mergulharmos e começarmos a construir essa interface de usuário, quero tirar um momento para dividir quais elementos posso ver aqui. Então, antes de tudo, posso ver que precisaremos de uma pilha zed porque. Temos uma imagem por trás de todos esses elementos. E assim como essa pilha nos permitirá posicionar elementos uns sobre os outros. Em seguida, temos uma pilha V onde os elementos são empilhados uns sobre os outros verticalmente. Assim, você pode ver uma pilha V percorrendo toda essa interface de usuário de cima para baixo. Agora, alguns dos elementos nesta pilha V estarão realmente contidos em uma pilha H, como essas duas placas lado a lado, por exemplo. E esse elemento aqui em baixo será uma pilha H de pilhas TUV. Portanto, esta é uma pilha V contendo os dois elementos de texto. Esta é uma pilha V contendo os dois elementos e, em seguida, você os encapsula em uma pilha H. Então esse é o colapso que eu vejo. E agora vamos entrar em nosso ponto de visualização de conteúdo rapidamente, e vamos construí-lo. Tudo bem, então aqui estou vendo o conteúdo Vue.js Swift. A primeira coisa que vou fazer é mudar esse simulador para o iPhone 11. E vamos acertar Resume. E em alguns segundos, o tempo pode ser maior, verá uma prévia aqui. Perfeito. Agora vamos alterar esse elemento de texto padrão. Livre-se disso. Vamos colocar uma pilha z lá, abrir um par de suportes encaracolados. Agora, o que está sentado atrás de todos esses elementos é uma imagem. E a imagem que temos é chamada de fundo. Observe que ele não chega até o topo. Agora ele se sobrepõe um pouco a essa área segura. Eu disse que a área segura estava sob o entalhe aqui. Então você vê que ele transborda, mas não vai até lá. Assim, podemos adicionar um modificador chamado ignora área segura. Quando você faz isso, ele só vai cobrir tudo. Então, tudo bem. Então, o que vai estar em cima desse plano de fundo? Bem, como eu disse antes, teremos uma pilha vertical contendo todos esses elementos. O primeiro é o logotipo. E então teremos uma pilha H com duas cartas e, em seguida, um elemento de imagem representando o botão de negociação. E depois disso, teremos a pontuação pilhas verticais em uma pilha horizontal. Então deixe-me, deixe-me digitar isso para que faça um pouco mais de sentido. Vamos começar com o logotipo na parte superior. Vamos ter uma imagem e nosso nome de ativo de imagem é logotipo. Então você pode ver que ele simplesmente aparece no tamanho certo lá. E isso porque nosso ativo de imagem é desse tamanho. Ok, agora vamos colocar uma pilha H aqui. E aqui dentro vamos colocar mais dois elementos de imagem. Vamos colocar o cartão, vamos colocar também. E depois cartão três. Então, temos duas cartas em uma pilha H. E depois disso, vamos colocar outro elemento de imagem. E este vai ser o botão de negociação. E agora vem os rótulos de pontuação. Então, vai ser uma pilha H. Mas dentro da pilha , na verdade, temos dois V's. Obrigado. Cada VSAT contém dois elementos de texto. Então, vamos ter o Jogador e teremos a pontuação real. E então, para este, vamos ter CPU. E vamos ter a pontuação real, a CPU. Então, basicamente, temos todos os nossos elementos dispostos. Agora, vamos adicionar algum espaçamento a eles. Então, para fazer isso, podemos usar espaçadores. Então, vamos começar adicionando um espaçador logo acima, logo acima da pilha H das duas cartas abaixo da imagem do logotipo. Então, vou colocar um elemento espaçador ali mesmo. E o que você aprendeu sobre elementos espaçadores, certo? Ele ocupa todo o espaço disponível. No entanto, se você tiver vários elementos espaçadores no mesmo contêiner, ele dividirá uniformemente esse espaço entre os dois espaçadores. Então, vou colocar outro espaçador logo abaixo das cartas. Então agora você pode ver que há duas quantidades iguais de espaços. Vou colocar outro espaçador abaixo do botão de negociação ou imagem por enquanto. E então vou colocar um espaçador abaixo dos rótulos de pontuação. Então você tem que se certificar de que você não o coloca no lugar errado aqui. Queremos colocá-lo abaixo desta pilha H. E se você clicar neste colchete final, verá que o Xcode acende brevemente os colchetes iniciais para que você possa verificar se é onde você deseja. Tudo bem, e a última coisa a fazer é colocar um elemento espaçador acima do logotipo do pensamento. Então isso está bem aqui. Agora, do ponto de vista vertical, está tudo bem espaçado. Para esta pilha H com as duas cartas. Por que não colocamos alguns espaços lá? Então, vamos começar colocando um espaçador entre as duas cartas. E então o espaço dela antes todas as cartas e o espaçador depois das cartas. Vamos fazer a mesma coisa com os rótulos de texto aqui embaixo. Nesta pilha H. Vamos colocar um espaçador entre o imposto dos dois V. E então vamos colocar um espaçador antes da TI. E o espaço ou depois dele. Tudo bem, e agora a última coisa a fazer é apenas alterar as cores da fonte desses elementos de texto. E também para alterar seus pesos de fonte e tamanhos de fonte. E talvez adicione um pouco de espaço entre a pontuação e o rótulo. Ok, então vamos clicar neste elemento de texto e dar uma olhada no que poderíamos fazer. Portanto, se você procurar no painel do inspetor a fonte, poderá escolher um desses tamanhos de fonte predefinidos. Para este, vamos escolher o título. E você pode vê-lo. Fica um pouco mais ousado lá. Vamos mudar isso para branco. Faremos a mesma coisa pelo rótulo da CPU. Vamos mudá-lo para título. Vamos mudar a cor para branco. Então, para a pontuação real, vamos mudar a fonte para, digamos, subtítulo. E vamos mudar a cor para branco também. E para esse rótulo de pontuação, vamos mudá-lo para sub-título, e vamos mudá-lo para branco também. Tudo bem, e se quiséssemos fazer isso realmente, acho que na interface de usuário original eu tinha como título grande. Então, vou mudá-lo para isso. Então, vou mudar o 0 de sub-título para título grande. Agora, para adicionar algum preenchimento entre o rótulo e a pontuação aqui. O que você pode fazer é escolher o rótulo. Vamos começar com o jogador aqui. E vamos clicar apenas neste preenchimento inferior. Então habilite isso. E então você pode alterar esse número para, digamos 20. Você pode ver esse aumento. E isso parece um pouco demais. Então, talvez vamos ficar com 10. Faremos a mesma coisa com a CPU aqui e clicaremos apenas no preenchimento inferior e, em seguida, adicionaremos 10. Você pode ver o código correspondente aqui. Está adicionando preenchimento, mas está especificando apenas para a borda inferior e em 10 pontos. E esta é uma boa prática sempre que você modifica algo, visualmente, adicionando um modificador ou alterando algo no painel do inspetor aqui, É uma boa prática dar uma olhada no que mudou no lado do código, só para que você possa se lembrar ao longo do tempo, quanto mais você vê, mais você se lembra disso, ei, se eu quisesse alterá-lo para uma fonte de estilo de título, eu teria que adicionar um modificador de fonte de ponto e passar em uma opção de título. mesma coisa para a cor de primeiro plano para este elemento de texto, cor do primeiro plano do ponto, ponto de cor branco. Você não precisa tentar memorizá-lo, mas apenas preste atenção nisso. E com o tempo, você só vai se lembrar. E digitá-lo acabará sendo mais rápido do que ter que clicar visualmente e configurar as coisas através do painel do inspetor ou da tela de visualização. Tudo bem, última coisa a fazer, certifique-se salvar o projeto e está pronto. Então, nesta lição, você construiu a interface do usuário do jogo de cartas de guerra, mas para responder à interação do usuário e alterar programaticamente as imagens do cartão, teremos que aprender alguma programação rápida. Então, nas próximas quatro lições, você será apresentado ao básico de codificação com o Swift. Agora, se esta é a primeira vez que aprende a codificar, leve-a devagar e não tente memorizar nenhuma das palavras-chave. E depois disso, vamos voltar para essa interface de usuário do jogo de cartas de guerra e dar vida a ela com código. Tudo bem, te vejo lá. 7. 06: variáveis constants e tipos de dados: Olá e bem-vindo. Nesta lição e nas próximas três, você aprenderá o básico da linguagem de programação Swift. Agora, essas são as habilidades que você terá que ter para completar o jogo de cartas de guerra, bem como a criação do aplicativo de recursos que vamos fazer juntos. Agora, se você nunca codificou antes, eu sei que isso pode parecer um pouco intimidante, mas eu realmente quero que você fique com isso e realmente preste muita atenção. Na verdade, abra o Xcode em sua própria máquina e digite exatamente o que estou mostrando. Isso realmente ajudará a reforçar a estrutura da linguagem e todas as palavras-chave. Não há necessidade de memorizar nada. Garanto que até o final deste módulo, você estará escrevendo seu próprio código Swift. Tudo bem, vamos mergulhar. Quero começar analisando ciclo de vida da Atualização de visualização de um aplicativo simples e mostrar-lhe onde o código Swift desempenha um papel em cada parte do ciclo de vida. Vamos começar com o que você já aprendeu nas lições anteriores que a interface do usuário é gerada a partir do código Swift. Vamos chamar isso de seu código de visualização. Ele gera uma interface do usuário para o usuário ver. Agora, normalmente, com um aplicativo, temos algum tipo de dados que queremos recuperar e exibir. Por exemplo, um aplicativo de notícias. Gostaríamos de obter esses dados de uma fonte de dados e depois recuperá-los em nosso aplicativo e exibi-los em nossa interface do usuário. Você pode usar o código Swift para isso. O código rápido pode buscar os dados e depois processá-los em um formato que nosso aplicativo possa entender. Em seguida, usando o código Swift, também podemos vincular esses dados ao nosso código de visualização para que, quando a interface do usuário for renderizada a partir desse código de visualização, esses dados possam ser exibidos para o usuário. Além disso, quando o usuário interage com a interface do usuário, como tocar em um botão, podemos usar o código Swift para capturar esse evento e responder a ele. Agora, com base no que o usuário acessou, podemos usar algum código Swift para alterar nossos dados. Quando essa alteração de dados acontece porque vinculamos esses dados ao nosso código de visualização. Essas alterações de dados são detectadas automaticamente e a nova interface do usuário é renderizada novamente com os dados atualizados para que o usuário possa ver o que mudou. Agora, esse ciclo é essencialmente tudo o que o aplicativo está fazendo repetidamente. E vamos explorar este aplicativo, visualizar, atualizar o ciclo de vida com mais detalhes em lições futuras. Mas, por enquanto, só quero que você entenda que o código Swift tem um papel a desempenhar em cada parte desse ciclo de vida. Das últimas lições, você já viu o código para criar UI. Então você meio que sabe como esse código de visualização se parece. Vamos mudar nosso foco para a parte de dados onde podemos ver qual código Swift é usado para acompanhar os dados. Além disso, o que isso parece no nosso aplicativo? Para experimentar alguns dos códigos rápidos e encontrar a resposta para nossa pergunta, vamos usar um playground Xcode. Um playground é uma maneira leve testar alguns dos nossos códigos sem comprometer com um projeto de aplicativo completo que podemos fazer aqui. Pense nisso no playground do Xcode como o seu bloco de rabiscos, mas para o código, agora basta começar um novo. Vá para Arquivo, clique em Novo e, em seguida, vamos clicar no playground. Vamos escolher um playground em branco. E vamos dar um nome a ele. E vamos salvá-lo em algum lugar. Vamos fechar esta guia do navegador clicando neste botão porque não precisamos disso. Agora, aqui no canto inferior esquerdo, você notará que temos um botão chamado mostrou a área do bug. Vá em frente e clique nisso para revelar essa bandeja. Essa área do console do depurador é onde vamos gerar muitos dados. Então, basta ligar isso, certifique-se de ver esta pequena área aqui embaixo. E então este botão, quero que você clique nele agora, ele estará executando o playground. Ele executará todas as linhas de código na área do editor aqui. Observe, no entanto, que você também tem esse pequeno botão Run azul ao longo dos números de linha. E isso permite que você selecione qual linha você deseja executar o código até. Então, se eu passar o mouse sobre a linha três e eu apertar o botão aqui, ele vai rodar as linhas 123 oposição a este botão aqui, que executa tudo. Então, a primeira vez que você executa este playground, pode demorar algum tempo. Você mostra o spinner por até um minuto. Eu quero que você faça isso e deixe-o funcionar até que ele diga pronto para continuar. E isso vai nos configurar para executar algum código na próxima parte. Por enquanto, vamos apenas ir em frente e excluir essas linhas de código para que possamos começar de novo. Tudo bem, agora que sua configuração, vamos voltar à nossa pergunta original. Como são os dados e como usamos o código Swift para acompanhá-los? Vejamos alguns tipos diferentes de dados. Primeiro, vamos começar com um tipo de dados comum, um pedaço de texto. Em Swift, você cerca textos com aspas como esta. E isso é conhecido como um pedaço de dados de string. Vamos adicionar uma nota para nós mesmos aqui com duas barras para frente. Quando você faz isso, é chamado de comentário, e é uma maneira de deixarmos uma nota ou um pequeno pedaço de documentação para lembrarmos a nós mesmos ou a outras pessoas que podem estar olhando nosso código, o que esse código faz. E quando o Xcode vê essas duas barras, ele não executará essa linha. Agora vamos dar uma olhada em outro tipo de dados, números inteiros. Então, algo que se parece com isso. Em Swift, isso é conhecido como int, abreviação de inteiro. E quanto aos números decimais? Bem, sim, esse também é um tipo de dados que o Swift pode reconhecer e lidar. Cada um desses. Eles são conhecidos como um duplo. E o swift também pode lidar com valores booleanos. Então coisas como verdadeiras e falsas. Em Swift, isso é conhecido como bool. Agora string, int, double e bool. Esses são todos chamados de tipos de dados e é como o Swift classifica os dados. Agora, esses não são todos os tipos de dados disponíveis, mas esses são os, longe, os mais comuns que você usará, pelo menos no começo. E é um ótimo ponto de partida para nós. Tudo bem, agora vamos dar uma olhada em criar e manter o controle dos dados. No Swift, existem muitas maneiras de acompanhar os dados, mas duas delas são maneiras básicas usar variáveis e constantes. Vamos voltar ao nosso playground Xcode e dar uma olhada em um exemplo. Vamos começar com nossos dados de string hello aqui. Agora, esse pedaço de dados por conta própria será inútil para nós, a menos que tenhamos uma maneira de referenciá-los e rastreá-los. E poderíamos fazer isso com uma variável. Então, vamos ver como podemos declarar uma variável para acompanhar esse pedaço de dados de saudação. Então, usamos a palavra-chave var e isso é para declarar uma nova variável. E depois digitamos o nome da variável. Esse nome é o que vamos usar para referenciar esse pedaço de dados e lembrá-los. Então eu vou chamar isso de MyVar, e depois seguimos com dois pontos. E depois disso, colocamos o tipo de dados que essa variável vai rastrear. Como os dados que queremos referenciar são um pedaço de dados de string, vou colocar string aqui. E, em seguida, geralmente na mesma linha que declaramos a variável, atribuímos os dados à variável para acompanhar. E podemos fazer isso usando o operador de atribuição, que é apenas um símbolo igual. E, no lado direito disso, colocamos os dados que queremos atribuir a essa variável. Vou pegar isso e mover isso aqui. Então, essencialmente, o que esta linha de código está dizendo, estamos declarando uma nova variável chamada MyVar. Estamos dizendo que ele mantém o controle dos dados do tipo de string. E, em seguida, estamos atribuindo esses dados de string de saudação a essa variável. É como se estivéssemos anexando um rótulo a esse pedaço de dados chamado MyVar. Agora, sempre que eu quero fazer referência a esse pedaço de dados, tudo o que preciso fazer é referenciá-lo pelo nome da variável. Então, vamos tentar isso. Podemos usar um comando especial que emitirá os dados para a área do console abaixo aqui no playground. E esse comando é apenas impresso seguido por dois colchetes arredondados. E entre esses colchetes você coloca a variável ou quaisquer dados que você deseja produzir. Então, vou fazer isso. E então aqui eu vou parar meu playground e executar todo o código nele novamente. E então, como você pode ver lá embaixo e diz olá, que o conteúdo do MyVar, que é exatamente o que esperaríamos. Observe que quando faço referência à minha variável, não preciso mais usar a palavra-chave var. Isso foi apenas para declarar a variável. E depois de declarar minha variável, posso apenas referenciá-la pelo final do nome. Também posso reatribuir novos dados a ele. Posso usá-lo repetidamente. Não preciso redeclará-lo. Então, por exemplo, depois declarar um olá atribuído a ele, posso me virar e atribuir outra coisa a ele. Vamos atribuir esse pedaço de dados de string chamado world para MyVar. E, essencialmente, o que fizemos aqui é que dissemos a essa variável para rastrear esse pedaço de dados. Então, o que você esperaria se eu executar o código no playground agora? Nós só produziríamos mundo porque MyVar não está mais rastreando esse pedaço de dados de saudação. Agora, uma coisa que quero enfatizar é o tipo de dados da variável. Se eu especificar que myVar é um tipo de string, só poderei rastrear partes de dados de string. Por exemplo, se eu tivesse um número inteiro como 100 e tentei atribuí-lo ao MyVar, bem, receberei um erro que não é permitido. O que eu preciso fazer é declarar uma nova variável do tipo int para acompanhar esse pedaço de dados int. Então, vamos seguir em frente e usar a palavra-chave var e nomeá-la. E depois dois pontos e depois o tipo de dados que eu quero que isso rastreie. E agora está tudo bem. Vamos tentar imprimir isso. O Xcode não ajudará você a corrigir automaticamente nenhum erro ortográfico. Tudo bem, então temos mundo e 100. Agora, à medida que estamos codificando mais juntos, você começará a notar diferentes tipos de convenções de nomenclatura, como o que você vê aqui, onde meus nomes de variáveis começam com uma letra minúscula e então cada palavra subseqüente no nome da minha variável começa com uma letra maiúscula. Então isso é uma espécie de convenção de nomenclatura padrão. Você realmente poderia fazer o que quiser. Mas quando você começa a codificar mais e trabalhar em equipes, é importante ter. Padrão que todos usam, e esse é comum. Tudo bem, agora mais uma coisa que eu quero falar antes de avançarmos para o próximo tópico é o fato de que existem taquigrafias no Xcode. Você realmente não precisa digitar todas as informações. Por exemplo, aqui, estamos declarando que essa variável, meu int, é um tipo int e estamos atribuindo dados inteiros a ela. Mas o problema é poderíamos realmente omitir esse tipo de dados e simplesmente atribuí-lo 102. Quando fazemos isso, o Xcode pode ver que este é um pedaço de dados int. Então, vai supor que meu int só vai rastrear em tipos. Agora, essa mesma regra ainda se aplica. Quero dizer, depois que o Xcode infere que essa variável é do tipo n porque você atribuiu 100 a ela. Não posso ir e atribuir uma string a ela. Isso não será permitido porque o Xcode é, já detectou que isso deveria ser um tipo n. Então, a mesma coisa vale para aqui em cima. Não preciso especificar o tipo de dados. Se eu vou atribuir um pedaço de dados de string a ele imediatamente porque isso diz ao Xcode que essa será uma variável do tipo string. Então isso é apenas um pouco abreviado para poupar algum tipo de digitação. Tudo bem, então você aprendeu a declarar uma nova variável, atribuir dados a ela e recuperar esses dados usando o nome da variável. E você também aprendeu a atribuir novos dados a essa variável. Vamos falar sobre a outra maneira de acompanhar os dados. Constantes. Portanto, as constantes são como variáveis, exceto que você não pode reatribuir dados a elas depois atribuir o primeiro pedaço de dados a ele. Então sigillata, como declarar uma constante para acompanhar esses dados de string. Em vez da palavra-chave var, você usa a palavra-chave let. E então o resto é o mesmo que uma variável. Então, começamos com um nome constante, meus dois pontos, e então você adivinhou que o tipo de dados seguido pelo operador de atribuição. E então vamos mover esse pedaço de dados para o lado direito desse operador de atribuição assim. Agora vamos tentar fazer referência a essa constante. Vamos tentar imprimir os dados no meu contexto. Como você pode ver, funciona conforme o esperado. Agora, vamos tentar fazer o que não é permitido. Vamos tentar atribuir outra coisa a ele. E, como esperado, não podemos reatribuir dados a eles porque é uma constante. Agora as constantes são úteis. É uma ferramenta adicional que podemos usar se não esperarmos que esse pedaço de dados mude. E, portanto, não precisamos fazer nenhuma alteração nisso nunca. Então, quando você usaria uma constante sobre uma variável? Bem, isso realmente depende do que você está tentando fazer. Você provavelmente vai se encontrar usando variáveis na maioria das vezes por causa de sua versatilidade e porque os dados mudam, no entanto, a melhor prática é preferir constantes em vez de variáveis onde ele faz senso. Na verdade, o Xcode é inteligente o suficiente para saber se você usa uma variável e nunca acaba alterando essa variável, isso sugerirá que você altere essa palavra-chave var para uma palavra-chave let e usar uma constante em vez disso. Tudo bem, vamos fazer uma rápida recapitulação antes de finalizar a lição, você aprendeu sobre o ciclo de vida da atualização de visualização e como o código Swift desempenha um papel nela. Você aprendeu sobre tipos de dados como string, int, bool e double. Você aprendeu sobre como usar variáveis e constantes para referenciar dados. Você está fazendo grandes progressos até agora. E na próxima lição, vou te ensinar como organizar suas instruções de código em funções. Tudo bem, te vejo lá. 8. 07: funções de programação Swift: Olá e bem-vindo. Na lição anterior, você aprendeu sobre variáveis e constantes Swift. Você aprenderá a criar alguns dados e declarar uma variável ou constante para acompanhá-los. Enquanto nesta lição você aprenderá a organizar, agrupe suas declarações de código. Portanto, esse número um, todas as instruções de código que você agrupou podem trabalhar juntas para uma tarefa comum. E o número dois, uma vez que seu código é organizado em grupos, você pode escolher qual grupo de coats executar dependendo da tarefa que você precisa ser feita. Esses grupos têm instruções de código são conhecidas como funções no Swift. Tudo bem, agora vamos dar uma olhada no diagrama do ciclo de vida da atualização da exibição da lição anterior e ver onde as funções podem desempenhar um papel nesse ciclo de vida. Lembre-se de que quando o usuário interage com a interface do usuário, código Swift captura esse evento e reage a ele. Bem, aqui podemos ter algumas funções diferentes, dependendo de como o usuário interage com nossa UI. Por exemplo, o usuário tocando em um botão pode acionar o aplicativo para alternar de tela. Nesse caso, talvez executemos função a para executar essa tarefa. Ou, por outro lado, se o usuário tocar em um item para ver mais detalhes? Então, nesse caso, executaremos função B para abrir a tela de detalhes. Agora vamos examinar o código que executa a recuperação de dados. Por exemplo, podemos ter uma função C que faça a recuperação real dos dados, talvez o código de rede. E ele pega os dados e, em seguida , fornece a função D como entrada. E a responsabilidade dessa função pode ser processar esses dados e transformá-los em um formato que nosso aplicativo possa entender. Portanto, a função D usa esses dados como entrada e produz os dados formatados para o nosso aplicativo. Agora eu poderia continuar, mas como você pode ver, as funções são um componente básico da programação rápida. Está em todos os lugares. Então, agora vamos ver como podemos criar nossas próprias funções. Tudo bem, então aqui eu tenho um novo playground Xcode e vamos dar uma olhada na sintaxe da função. E no caso de eu ainda não ter explicado isso, a sintaxe da palavra é simplesmente uma palavra descreve a estrutura ou a gramática da linguagem. Então, sintaxe de função para declarar uma nova função, você começa com a palavra-chave func FUN, veja. É uma função funky. E então você o segue pelo nome da função. E então um conjunto de parênteses são colchetes arredondados e, em seguida, um conjunto de colchetes encaracolados. Dentro do conjunto de colchetes encaracolados, você coloca suas instruções de código, qualquer coisa que você queira executar ou executar sempre que chamarmos essa função. Então deixe-me colocar algumas declarações aqui. Digamos que declare duas constantes como esta e, em seguida, vamos imprimir um plus b. Então, se eu executar isso agora e executar todas essas linhas de código, nada vai acontecer. Você não vê nenhuma saída. E isso porque na verdade não chamamos essa função. Para chamar e executar essa função, só precisamos referenciá-la pelo nome da função. Então esse é o meu FUN, C, seguido pelos parênteses do par, e é assim que você executa todo o código entre aqui. Então, vamos experimentar isso. Vou parar de executar e depois executar meu playground novamente. E recebemos 30 como esperamos. Se eu quisesse executar esse conjunto de instruções novamente, então eu posso simplesmente chamá-lo novamente. E se eu imprimi-lo, agora executa esse código duas vezes. Agora eu quero voltar para esse diagrama de ciclo de vida de atualização de visualização por apenas um segundo. Porque se você notar de volta nessa área de recuperação de dados, eu disse que poderíamos ter duas funções, c e funções dy, onde C iria buscar os dados e passá-los para D como parâmetros de entrada. Assim, essa função D pode funcionar com esses dados e formatou como precisamos. Portanto, uma função poder aceitar dados nele para trabalhar com eles é um recurso muito poderoso. Vamos dar uma olhada em como declararíamos uma função que aceitaria algum tipo de dados de entrada. Tudo bem, então vou apagar essas duas linhas e vou modificar minha função aqui. Em vez de declarar duas constantes, a e b, vou especificar que a e b devem ser passados para a função. Então, a maneira como fazemos isso é através do uso de parâmetros de função entre os dois colchetes arredondados. É aí que especificaríamos todos os parâmetros que queremos passar para essa função. Você pode passar vários parâmetros, mas, na verdade, vamos começar com um e vamos começar com a. Então primeiro eu colocaria o nome do perímetro, então eu gostaria que fosse oito. E então eu colocaria dois pontos especificados pelo tipo de dados que esse parâmetro é. Como eu espero que seja, vou declarar esse parâmetro como um seguido pelo datatype int. E então eu posso apagar essa constante daqui. Como você pode ver, isso é quase como uma declaração de variável ou uma declaração constante, exceto sem o var e sem a esquerda. Aqui estamos especificando que sempre que essa função é chamada, um parâmetro int precisa ser passado junto com ela. E ele será referenciado por esse nome de parâmetro a dentro dessa função. Então agora você pode ver que em nenhum lugar eu declarei uma variável a ou constante a, mas ainda posso colocar um como parte da minha equação a mais B porque está sendo passado como um parâmetro. Então, vamos dar uma olhada em como seria chamar essa função. Agora, vou contar com o preenchimento automático. Então vou digitar MY FUN e você pode ver assim que eu fizer isso, ele detecta minha função aqui. Então, vou seguir em frente e clicar nisso. E você pode ver que agora, no processo de chamar essa função, eu também tenho que passar um pedaço inteiro de dados. Então eu vou seguir em frente e passar isso, passando algo diferente no passado e cinco, você pode ver aqui, indica que este é o parâmetro que estou passando. Vamos prosseguir e parar, executar e executar minhas linhas de código novamente. E desta vez a saída é 25, porque 5 estava sendo passado para a função. Mais 20 é 25. Agora, voltando ao diagrama do ciclo de vida View Update novamente, função D aceita entrada como parâmetro, mas também retorna a saída. Então esse é outro recurso muito poderoso das funções. Ser capaz de receber alguma entrada, trabalhar com esses dados e fornecer alguma saída de volta à cor da função. Vamos dar uma olhada em nosso playground e ver como podemos especificar que uma função deve retornar alguns dados. Então, para modificar essa função para indicar que ela retornará alguns dados. Subimos aqui logo após o suporte arredondado para o perímetro, e pouco antes do início dos suportes encaracolados. Aqui, escrevemos um traço seguido por um símbolo maior que, que faz uma espécie de seta como saída. E, em seguida, especificamos o tipo de dados da saída. Então, o que vou fazer é gerar a soma de a e B em vez de imprimi-la no console. Então, vou apagar essa linha. E então vou produzir um int. Então é aí que eu especifico isso depois desse traço maior que o símbolo. Agora você pode ver que o Xcode lança alguns erros agora porque além de especificar que sua função retorna um int, você realmente precisa retornar um int dentro das instruções de código. Então, como a última linha do nosso código, podemos usar a palavra-chave return, o que significa que esses são os dados que vamos retornar da função. E, em seguida, especificamos os dados que queremos retornar. Então, vou retornar a mais b. E tudo é, bem, agora lembre-se de que qualquer tipo de dados que você especificar aqui na declaração da função, esse é o tipo de dados que você tem para retornar se houver uma incompatibilidade. Por exemplo, se eu especifiquei que essa função retorna um int, mas vou em frente e retorno uma string. Como um pedaço de texto. Você vai ver o Xcode. Reclame disso também porque isto é, isso está incorreto. Então, vamos retornar a mais b e vamos retornar um int. Então, por que não executamos nossa função agora e vemos o que acontece. Nada acontece. Bem, o que está acontecendo? Estou devolvendo um plus b. Então aqui está o que está acontecendo. Chamar essa função está retornando esses dados, mas preciso de alguma forma referenciar e rastrear esses dados, certo? E é para isso que serve uma variável. Então, vou declarar uma variável aqui, var. Vamos declarar constante na verdade, já que não vou mudar isso, deixe minha soma ser igual ao resultado dessa função. Então você pode entender essa taxa de declaração de código, estamos declarando uma constante chamada minha soma. E então estamos chamando essa função na mesma linha que retorna 25 e estamos atribuindo 25 à minha soma. Então agora posso imprimir minha soma. E vamos verificar novamente se obtemos a saída. Lá vamos nós. Agora, antes de seguirmos em frente, há duas coisas muito importantes que eu quero mencionar. Portanto, essa instrução retorna realmente encerra a execução dessa função. Então, uma vez que essa instrução return é executada, a execução retorna dessa função. Então, qualquer declaração de código que você colocou aqui, digamos que eu tenha retornado um b ali mesmo, e eu imprimi a mais b aqui. Essa instrução print não será executada o código C depois que o retorno nunca será executado. Então, isso é importante ter em mente que quando você escreve retorno e ele executa essa linha de código, a execução pára e sai dessa função. Outra coisa que eu queria mencionar é esse tipo de retorno. Então, mais cedo, quando eu disse que declarar uma função não tinha um tipo de retorno como esse. Bem, na verdade aconteceu. Foi só que o tipo de retorno foi nulo. E vazio não significa nada. Então deixe-me, deixe-me fazer uma demonstração básica, na verdade, deixe-me declarar outra função aqui. Vou chamar isso de microfone para ver naquela época eu disse que era uma declaração básica de uma função, mas na verdade isso era uma abreviação. A declaração completa realmente tem um tipo de retorno de vazio como esse se você não for retornar nada. Mas é só que quando você não retorna nada, então você não precisa especificar o tipo de retorno de vazio. Então, pensei que tinha mencionado isso. Então você sabe o que essa palavra-chave vazia significa. Então, se você vir alguma função que tem um tipo de retorno de vazio, você sabe que isso basicamente significa que ela não está retornando nada. Tudo bem, então agora vamos redefinir um pouco. Está começando a ficar um pouco confuso. Então, vamos apagar tudo, exceto isso, exceto nossa função aqui. Agora eu quero mostrar como podemos passar em vários parâmetros. Então, em vez de especificar estar aqui, vamos colocar B na listagem de parâmetros aqui e fazer com que ela seja passada. Ok, então deixe-me apagar esta linha de código para que obtenhamos B apareça. Bem, como adicionamos outro parâmetro a este? O que você faz é simplesmente colocar vírgula e depois declarar outro parâmetro para sua função. Calma, certo? Vamos nomear este ser seguido por dois pontos e, em seguida, o tipo de dados de B, que será outro inteiro. Tudo bem, então agora vamos dar uma olhada em como chamamos essa função com dois parâmetros. Meu func, você pode ver isso aqui. Não, basta especificar, oh, uma coisa rápida é quando você está chamando funções, uma maneira fácil de preencher os parâmetros na lista é pressionando tab. Isso apenas leva você ao próximo parâmetro que você precisa preencher. Então vou colocar 2 e 3. Vamos executar todo esse código e obtemos um resultado. Não obtemos resultado. Lembre-se que apaguei minha linha de código. Então, por que não imprimimos o resultado em vez de atribuí-lo a uma variável desta vez. Então, vou prosseguir e passar diretamente essa chamada de função para a minha declaração de impressão. Isso imprimirá a saída da minha função. Vamos seguir em frente e executar esse código e obtemos 5. Agora, obviamente, você pode ter mais de dois parâmetros. Basta colocar uma vírgula entre cada parâmetro em sua função. E então outra coisa que eu queria mencionar que é muito legal com parâmetros, é que você pode especificar um valor padrão para um parâmetro. Então, por exemplo, para o parâmetro b, eu poderia tornar isso um dado de entrada opcional especificando um valor padrão para esse parâmetro. Se eu fizer isso, isso significa que quando essa função for chamada, passar dados para o parâmetro b será opcional. Vamos dar uma olhada em como isso funciona. Então, depois de especificar o tipo de dados para o meu parâmetro b, posso colocar um sinal de igual e, em seguida, posso dar um valor a ele. Digamos que 0 seja o valor padrão. Se b não for passado, então B será apenas 0. Agora, vamos apagar minha chamada de função, e vamos tentar chamá-la novamente e dar uma olhada no que o menu de preenchimento automático nos mostra. Aqui você pode ver que existem duas formas diferentes de minha chamada de função agora, uma é com os parâmetros a e b. Então eu passo em ambos os dados. E um é simplesmente passar um parâmetro a. Se eu fizer isso, v vai ser apenas 0. Mas se eu passar em ambos, digamos que eu passe 23 novamente, então B será três em vez de 0. Portanto, essa é uma maneira de tornar seus perímetros opcionais. Agora eu quero falar sobre rótulos de argumento. Como você pode imaginar, quanto mais parâmetros tivermos, mais coisas confusas serão em termos dessas chamadas de função, especialmente quando se trata de nomes de parâmetros como a e B. Bem, às vezes a e B fazem sentido no contexto do código dentro da função. Mas para a cor da função, a e B. Eles não significam nada. Portanto, há um recurso especial chamado rótulos de argumento. E deixe-me mostrar o que isso parece. Então, vou declarar uma nova função aqui. Vou chamá-lo de meu func também. E eu vou realmente, sabe o quê? Vou simplesmente copiar essa função e fazer uma cópia dela e mostrar como, como os rótulos de argumento a alteram. Portanto, um argumento rotulado vai na frente de cada parâmetro. Portanto, cada parâmetro pode ter seu próprio rótulo de argumento, e você está essencialmente apenas colocando um nome na frente desse parâmetro. Vou chamar esse primeiro parâmetro. Vou dar a ele um rótulo de argumento chamado primeiro número. E para o meu, para o segundo parâmetro, vou dar a ele um argumento chamado segundo número. Então isso é literalmente tudo o que é. Um rótulo de argumento é um nome na frente do nome do parâmetro separado por um espaço. Vamos dar uma olhada em como isso afeta a chamada de função. Se eu digitar meu func, você pode ver aqui que eu ainda tenho esses dois primeiros, a e B, e isso é da primeira função aqui. Mas olhe aqui, tenho o primeiro número e o primeiro número e o segundo número. E isso corresponde à minha segunda função aqui, porque o segundo número ainda é opcional, certo? Porque eu tenho esse valor padrão lá. Então, se eu chamar isso. Minha chamada de função se torna este myfunc primeiro número 1, segundo número 3. No entanto, internamente dentro dessa função, ainda estou referenciando esses parâmetros usando a e b. Portanto, rótulos de argumentos lá. Uma maneira de distinguir a nomeação uma chamada de função versus como ela é referenciada dentro do código. Considerando que, se você omitir os rótulos de argumento, como fizemos aqui, os nomes dos parâmetros serão usados tanto para a chamada de função quanto a referência desses parâmetros dentro de a função. Então, espero que você perceba a diferença aqui. Um truque legal que você pode fazer com rótulos de argumento é que se você não quiser mostrar nenhum texto em sua chamada de função, você pode usar um sublinhado como seu rótulo de argumento. Então, se você fizer isso, vamos ver o que acontece com sua chamada de função. Então meu func, você pode ver aqui esses dois correspondem ao que eu fiz aqui, usando sublinhados para os rótulos de argumento. Então, se você usar um sublinhado para o rótulo de argumento, as chamadas de função se tornam myfunc. E, em seguida, o primeiro pedaço de dados, vírgula, segundo pedaço de dados. Não há nomes de parâmetros, não há rótulos de argumento em sua chamada de função. Então, isso torna as coisas realmente sucintas e muito arrumadas e arrumadas, mas também torna as coisas mais confusas se não estiver claro quais esses parâmetros devem ser quatro. Portanto, há muita versatilidade aqui. Minha preferência pessoal é simplesmente fazer isso desta primeira maneira. E geralmente não especifico nenhum rótulo de argumento. E eu simplesmente uso os nomes do perímetro. Ok, a última coisa que prometi antes de terminarmos com funções é que não sei se você notou, mas declaramos duas funções diferentes aqui, ambas com o mesmo nome de função. Não podemos fazer isso com variáveis, certo? Se você tentar declarar a variável a e depois a variável a novamente, receberá um erro na segunda. E o Xcode vai reclamar, você não pode redeclarar a variável 8. Para funções. As coisas são um pouco diferentes. As funções têm o que é chamado de assinatura de função. E isso é composto pelo nome da função, na listagem de parâmetros e, em seguida, seguido pelo tipo de retorno. Então, vamos digitar myfunc e dar uma olhada no que o menu de preenchimento automático nos dá. Como você pode ver, todas essas quatro variações têm o mesmo nome de função chamado myfunc. Mas como os valores de parâmetros, rótulos de argumento, eles são diferentes, Xcode é capaz de discernir e saber qual função estamos tentando chamar, certo? Então, se eu chamar este e não especificar nenhum nome de parâmetro ou rótulo de argumento. Ele sabe que estou tentando chamar esse segundo aqui porque essa chamada de método, essa chamada de função. Quero dizer, não corresponde a este primeiro. Enquanto que se eu fizer meu func e especificar rótulos de parâmetros a e b, então ele definitivamente sabe que estou tentando chamar o primeiro porque essa chamada, essa listagem de parâmetros aqui corresponde aqui. Ok, então eu prometi que fomos um pouco mais fundo do que você provavelmente precisa saber agora, mostrando todas essas opções e maneiras pelas quais funções podem ser flexíveis à medida que codificamos mais juntos, você vai me ver apenas usando formas mais básicas de funções, mas pelo menos pague agora você sabe muito mais e tenho certeza que você pode apreciar o quão poderosas essas funções são. Tudo bem, esta lição foi bastante cheia de ação. Vamos fazer uma recapitulação antes de encerrarmos a lição. Primeiro de tudo, você aprendeu a declarar funções básicas e, em seguida, aprenderá a declarar funções que aceitam dados de entrada como parâmetros. Além disso, você aprenderá a declarar uma função com vários parâmetros. E, novamente, funciona quando quase tão útil se não puder produzir dados, certo? Você aprenderá a fazer isso usando tipos de retorno e a palavra-chave return. Você também aprendeu sobre rótulos de argumento. E, finalmente, você aprendeu sobre assinaturas de funções. Você está fazendo um grande progresso. E na próxima lição, mostrarei como organizar suas funções em duas estruturas. Então eu te vejo lá. 9. 08: estruturas de programação Swift: Olá e seja bem-vindo. Até agora você aprendeu sobre variáveis e constantes e como elas são usadas para acompanhar os dados. Você também aprendeu sobre funções para organizar e agrupar, você tem instruções de código. Enquanto estiver nesta lição, você aprenderá sobre estruturas ou estruturas resumidamente. E esses são os blocos básicos para representar seus dados ou representar algo em seu aplicativo. As estruturas reúnem as funções que variáveis e constantes, tudo o que você aprendeu até agora nas últimas lições, tudo em um pequeno pacote limpo. Tudo bem, vamos mergulhar e ver do que se trata. Agora vamos fazer uma recapitulação rápida. Primeiro, você tinha casacos, coisas como essas. E então mostrei a você como usar funções para organizá-las e agrupá-las. Agora, com estruturas, você pode agrupar suas funções. Você também pode ter variáveis e constantes, acompanhar os dados dentro de sua estrutura, mas fora de qualquer função. E vamos falar sobre isso um pouco mais tarde nesta lição. Agora vamos dar uma olhada no diagrama do ciclo de vida da atualização de exibição novamente. Para o código de visualização que representa a IU dela, você pode criar uma estrutura para representar sua tela inicial e todo o código de visualização da tela inicial entraria nessa estrutura. Se você tivesse uma segunda tela em seu aplicativo, talvez crie outra estrutura para essa segunda tela. E todo o código de visualização segunda primavera entraria nessa estrutura. Nesse caso, cada estrutura representa uma tela diferente em seu aplicativo. Agora vamos passar para a parte de recuperação de dados deste diagrama. Você pode criar uma estrutura e chamá-la de gerenciador de dados. E você colocará todos os códigos e funções relacionados à recuperação e processamento dos dados dentro dessa estrutura do gerenciador de dados. Nesse caso, a estrutura não representa uma triagem de seu aplicativo, em vez disso, representa um componente crucial do seu aplicativo. Assim, como você pode ver, as estruturas são muito flexíveis e leves e são usadas em todo o seu aplicativo. Agora vamos entrar em um playground do Xcode e dar uma olhada em como podemos declarar nossa própria estrutura. Tudo bem, então aqui eu tenho um novo playground vazio. Vamos dar uma olhada em como podemos definir nossas próprias estruturas. Primeiro, você começa com a palavra-chave struct, seguida por um espaço e, em seguida, o nome da sua estrutura. Então, vou chamar isso de minha estrutura. E então você coloca um espaço e abre um conjunto de suportes encaracolados. Dentro dos colchetes encaracolados, você colocaria todo o código em sua estrutura, e é isso. Nós declaramos nossa própria estrutura. Agora, antes de seguirmos em frente e dar uma olhada no que está dentro da estrutura, quero apontar a convenção de nomenclatura da estrutura. Observe que eu comecei com uma letra maiúscula. Esta é a convenção padrão. Isso é diferente do invólucro de camelo que usamos para as variáveis e constantes e os nomes das funções. Aqueles começaram com uma letra minúscula e tinha cada palavra subseqüente começando com uma letra maiúscula. Enquanto que para estruturas, ele começa com uma letra maiúscula e, em seguida, cada palavra subseqüente tem uma letra maiúscula. Tudo bem, agora que você sabe sobre nomear estruturas, vamos entrar e dar uma olhada em como organizamos as coisas dentro da estrutura. Então, geralmente no topo da estrutura, dentro dos colchetes encaracolados, declararíamos aqui todas as nossas variáveis e constantes usadas para rastrear dados relacionados à estrutura. Agora, eles têm um nome especial, como mencionei anteriormente, e chegaremos a isso mais tarde nesta lição. Então, aqui em cima, depois de declarar todas as variáveis e constantes dados de rastreamento para essa estrutura, a próxima seção que você tem são todas as funções relacionadas à estrutura. Agora, não há seções claramente definidas em uma estrutura. Você sabe, todo o código realmente vai entre os colchetes encaracolados. Mas geralmente é assim que você organizaria todos os diferentes pedaços de código dentro de sua estrutura. Então, na parte superior, variáveis e constantes e, em seguida, na parte inferior, todas as funções. Então, como você pode ver, as estruturas são ótimas para agrupar funções, variáveis e constantes estão relacionadas para uma coisa. Mas as estruturas geralmente são destinadas a representar algo em seu aplicativo no diagrama do ciclo de vida da View Update que você viu anteriormente, vimos exemplos de uma estrutura sendo usada para representar uma tela do seu app, bem como representar um componente crucial do seu aplicativo como o Network Manager. Então, por que não fazemos outro exemplo, e mostrarei uma estrutura que é um pouco mais concreta. Vamos modelá-lo depois de alguma coisa. Então, no início do diagrama do ciclo de vida da Atualização da visualização, você viu que poderíamos usar estruturas para representar uma visualização em nosso aplicativo. Então, vamos com isso. Vamos ter um aplicativo de bate-papo hipotético. E digamos que essa estrutura represente minha visualização de bate-papo. Então, vou mudar o nome da minha estrutura para a visualização de bate-papo. Agora, em variáveis e constantes, talvez eu tenha uma variável para acompanhar a mensagem, como a mensagem de bate-papo que estou digitando na caixa de bate-papo. Então, vou chamar essa mensagem. E o tipo de dados que isso seria, provavelmente seria uma string. E vou atribuir uma string vazia, nada no meio, apenas duas aspas. Então isso é o que é conhecido como uma string vazia. Agora, em funções, eu poderia ter grupos de código que executariam diferentes tarefas na tela. Por exemplo, talvez quando o usuário toca no botão enviar bate-papo, ele executaria algum código para enviar a mensagem de bate-papo para o servidor. Então eu declararia uma função. Então isso é funk, seguido de, vamos chamar isso de envio de bate-papo e dois parênteses arredondados. E vou abrir um par de suportes encaracolados. E aqui dentro, eu colocaria o código para enviar uma mensagem de bate-papo. E, em seguida, entre as variáveis e constantes e as funções, eu teria o código de visualização para esta tela e como todo o código para a interface do usuário. Então, agora, nesta estrutura de visualização de bate-papo, temos um pequeno pacote elegante contendo todo o código dessa tela. Agora, anteriormente mencionei que as variáveis e constantes que você declara no topo da estrutura, elas têm um nome diferente. Então agora eu quero te dizer o que é isso. Esta declaração de variável que tenho aqui em cima mensagem. Isso é conhecido como uma propriedade da estrutura de exibição de bate-papo. Se eu tivesse declarações adicionais de variáveis ou constantes, elas seriam conhecidas como propriedades do chat. Você estrutura também? E aqui em baixo, as funções também têm um nome diferente. Uma função dentro de uma estrutura é conhecida como um método dessa estrutura. Portanto, esta função de envio de bate-papo é , na verdade, um método de exibição de bate-papo. Então agora vamos apenas atualizar nossos comentários aqui para que usemos a terminologia adequada em vez de variáveis e constantes aqui. Vou renomear isso, bem não renomeado, mas basta redigitar meu comentário e chamar essas propriedades. E em vez de funções, essas serão chamadas de métodos, só para ficarmos claros. Agora, dentro de uma estrutura, propriedades e métodos podem realmente trabalhar juntos para cumprir os deveres da exibição de bate-papo. Vamos dar uma olhada em algumas das maneiras especiais pelas quais eles podem trabalhar juntos. Agora vamos dar uma olhada nisso enviar um método de bate-papo. Por exemplo, se escrevermos o código aqui para enviar uma mensagem de bate-papo, certeza seria útil se pudéssemos acessar a mensagem real nesta propriedade de mensagem, certo? Bem, na verdade, podemos. Então, se eu escrevi algo assim, imprima e depois dentro dos parênteses, coloquei o nome da propriedade. Na verdade, posso acessar esses dados. E a razão para isso é porque essa propriedade é declarada no escopo dessa estrutura. Portanto, o escopo da estrutura é qualquer coisa entre esses dois suportes encaracolados, essencialmente a abertura e fechamento de suportes encaracolados da estrutura. Então, qualquer um dos métodos que eu declaro aqui, por exemplo, se eu declarar outro, vamos chamar esse chat de exclusão. Porque esses dois métodos também estão no mesmo escopo. Você sabe, está dentro do escopo da visualização do chat. Sou capaz de acessar a propriedade. As propriedades que você declara aqui são avaliáveis para tudo dentro do mesmo escopo. Isso inclui todos os métodos que são declarados aqui em baixo. Agora tenho que dizer que cada método tem seu próprio escopo local. Portanto, esse método de bate-papo de envio tem um escopo dentro aqui. E esse método de chat de exclusão tem seu próprio escopo entre esses colchetes. Então, se eu declarar uma variável dentro do meu método de chat de envio, digamos que o prefixo var seja igual a Chris, digamos. E então digamos que eu use esse prefixo e prependi à minha mensagem de bate-papo. Então, toda a mensagem de bate-papo seria Chris diz, e depois alguma coisa. Então, talvez eu imprima o prefixo mais a mensagem para obter esse tipo de efeito. E eu queria fazer a mesma coisa dentro do chat de exclusão. Se eu tentar acessar a variável de prefixo, digitar, imprimir, prefixo mais mensagem aqui dentro do método delete chat, você verá que, o Xcode reclama. Nssa não consegue encontrar o prefixo no escopo porque essa variável não é declarada no mesmo escopo. Ele é declarado dentro do escopo do envio de bate-papo. Então, como resolveríamos isso? Bem, uma das maneiras que poderíamos fazer isso é transformar essa variável de prefixo em uma propriedade que declaramos no topo de nossa estrutura. Você sabe, mova-o para fora do escopo do chat do Sen e coloque-o aqui no escopo da exibição de bate-papo. Então, agora que estou declarando meu prefixo como uma propriedade da exibição de bate-papo, você pode ver que os erros desaparecem. E posso acessar essa propriedade de prefixo dentro. Ambos enviam um bate-papo e excluem métodos de bate-papo. Agora eu quero falar sobre outro tipo de propriedade. Primeiro, vamos definir quais são essas propriedades aqui. Eles são chamados de propriedades armazenadas. E o motivo é porque quando você acessa essas propriedades e referência a elas pelo nome próprio, ela só retorna o valor armazenado. Há outro tipo de propriedade quando você acessa, ela precisa calcular ou calcular o valor antes de devolvê-lo para você. Então, vamos dar uma olhada em como esse segundo novo tipo de propriedade se parece. Então, deixe-me começar apagando essa propriedade de prefixo aqui e excluindo isso. E então vou declarar esse novo tipo de propriedade. Começa como um normal. Use o espaço VAR e, em seguida, o nome da propriedade calculada. Vou chamá-lo de mensagem com prefixo, seguido pelo nome. Em vez de atribuir alguns dados, você abre um conjunto de colchetes. E aqui você pode colocar o código computacional para calcular o valor que você retornará quando essa propriedade for chamada. Uma coisa, porém, porque o valor não é imediatamente conhecido, Xcode não pode inferir qual é o tipo de dados. Portanto, você realmente precisa especificar o tipo de dados após o nome da propriedade computada. Então, depois de mensagem com prefixo, vou colocar dois pontos e vou colocar string porque esse é o tipo de valor que essa propriedade retornará. Isso é diferente dessa mensagem de propriedade armazenada aqui em cima , onde eu posso realmente usar a abreviação e apagar o tipo de dados. Portanto, é apenas mensagem var igual a string. E posso fazer isso porque estou atribuindo imediatamente um valor a essa propriedade. Assim, o xcode pode examinar esse valor e pode determinar e inferir qual deve ser o tipo de dados dessa propriedade. Com uma propriedade computada, preciso especificar explicitamente o tipo de dados. Tudo bem, então para minha mensagem de propriedade computada com prefixo, vamos dar uma olhada no código dentro dos colchetes encaracolados. Aqui, vou usar a palavra-chave return, assim como com funções, certo? Vou voltar. Chris diz, então esta é uma mensagem de string mais. Então, agora no meu método de envio de bate-papo, em vez de imprimir prefixo mais mensagem, posso simplesmente retornar mensagem com prefixo. A mesma coisa para excluir bate-papo. Em vez de prefixo mais mensagem, vou retornar a mensagem com prefixo. Portanto, toda vez que essa propriedade for acessada, ela executará o código dentro desses colchetes e retornará isso como o valor dessa propriedade e precisa computá-la. É por isso que ela é chamada de propriedade computada. Agora, com as propriedades do computador, também há um atalho. Se houver apenas uma linha de código aqui, não preciso da palavra-chave return porque o Xcode pode supor que essa única linha de código emitirá os dados que eu quero retornar para o meu computador propriedade. Então, na verdade, posso excluir a palavra-chave return. No entanto, se eu tiver várias linhas de código, eu definitivamente precisaria dessa palavra-chave de retorno porque o Xcode não sabe qual linha de código deve ser o valor que é retornado. Por exemplo, dentro da propriedade do meu computador, se eu disser let prefix é igual, diz Chris, e então aqui eu tenho prefixo mais mensagem. Ele não saberá qual instrução de código retorna o valor. Então, eu realmente tenho que usar a palavra-chave return assim. E isso vai ficar bem. Agora, no que diz respeito às propriedades calculadas, definitivamente há mais sobre os quais podemos falar, mas isso será suficiente por enquanto. Nos capítulos posteriores deste curso. Definitivamente vamos examinar as propriedades calculadas novamente. Tudo bem, vamos fazer uma rápida recapitulação antes de encerrarmos esta lição, você aprendeu a declarar uma estrutura básica. Você aprendeu sobre propriedades e métodos na estrutura, aprendeu sobre escopo e aprenderá sobre propriedades computadas também. Agora eu sei que a parte difícil é envolver sua cabeça em torno desses conceitos. À medida que codificamos ainda mais juntos, você verá esses conceitos colocados em prática. Só quero dizer uma coisa antes de terminarmos. Você fez isso. Se você é novo na codificação dessas três lições, onde as alucinantes. Na próxima lição, mostrarei como esses conceitos se relacionam com seu projeto Xcode real. Tudo bem, te vejo lá. 10. 09: instâncias de programação Swift: Olá e seja bem-vindo. Então você aprendeu que muitos Swift nas últimas lições, você começou com variáveis, constantes e tipos de dados. Então você aprendeu sobre as funções. E então você aprende sobre estruturas que você pode agrupar todas essas coisas para representar ou modelar algo em seu aplicativo. Agora esta lição será a peça final do quebra-cabeça. Não estou dizendo que você vai ser um mestre rápido ou algo assim. Mas até o final desta lição, você verá como todos os conceitos e códigos se encaixam e funcionam juntos dentro de um aplicativo rápido de interface do usuário. Tudo bem, com isso dito, vamos mergulhar bem. Tudo bem, então vamos começar com um playground vazio. Você se lembra naquela época quando aprendeu sobre funções e eu ensinei a declarar uma função usando a palavra-chave func seguida pelo nome da função. Digamos que minha função seguiu por um conjunto de parênteses e, em seguida, um conjunto de colchetes encaracolados. E dentro dos colchetes encaracolados, teríamos o código para a função. Mas isso é apenas uma declaração de função que nenhum código é executado, nada acontece. Não é até chamarmos a função que o código dentro dessa função é executado certo? Então eu chamaria a função dizendo minha função, e depois os parênteses. Se eu executar meu playground agora, você pode ver que ele envia Hello para o console. Portanto, as estruturas também são assim. Quando declaramos uma estrutura usando a palavra-chave struct seguida pelo nome da estrutura. Então, digamos que minha estrutura, seguida por um conjunto de colchetes encaracolados. E então colocamos o código dentro dessa estrutura. Deixe-me mover minha função aqui, e vamos declarar uma propriedade aqui em cima, mensagem var é igual a olá. E então vamos imprimir minha mensagem de propriedade dentro da minha função. Esta é apenas uma declaração de uma estrutura. Na verdade, não faz nada. Pense nisso como um projeto para um prédio. Para usarmos essa estrutura, precisamos trazê-la à vida. Precisamos criar o que é chamado de instância da estrutura. Você pode pensar nisso como transformar esse plano para construir em um edifício real. Então, como criamos uma instância dessa estrutura? Bem, isso é fácil. Você acabou de escrever o nome da estrutura seguido por um par de parênteses como esse. Agora, apenas no caso de você ainda estar confuso sobre o conceito de criar uma instância de uma estrutura. Deixe-me dar-lhe algumas analogias diferentes para ajudá-lo a tentar entender esse conceito. Algumas pessoas acham mais fácil quando digo que declarar uma estrutura ou a declaração dessa estrutura é como um modelo para um carro ou um plano de arquitetura para uma casa. Usando esse blueprint ou usando esse plano de arquitetura, posso criar carros e criar casas, e esses são os objetos reais. Enquanto o blueprint ou o plano de arquitetura é mais parecido com um modelo. Ele simplesmente descreve como essa coisa vai funcionar quando você a dar vida. Então é isso que está acontecendo aqui. Esta é uma declaração de uma estrutura. Ele descreve todas as suas propriedades e funções. Você sabe, as coisas que ele pode fazer. E então é só até darmos vida ao criar uma instância dela que podemos realmente usá-lo. Então, agora que criamos uma instância dela, vamos explorar o que podemos fazer com ela. Agora, antes de tudo, precisamos acompanhar essa instância porque ela é considerada um pedaço de dados, precisamos acompanhá-la e ter uma maneira de referenciá-la. Então, vamos criar uma variável chamada Eu vou chamá-la de uma questão de simplicidade. E vou atribuir essa nova instância à minha variável a. Ei, espere um minuto. Se essa instância for um pedaço de dados, qual é o tipo de dados desse pedaço de dados? E que tipo de dados essa variável está mantendo? Bem, o tipo de dados é o nome da sua estrutura. Isso mesmo. Então eu posso realmente mudar minha declaração de variável de var a, var a dois pontos, minha estrutura. Sim, sua estrutura é seu próprio tipo de dados. Portanto, essa instância que você criou, o tipo de dados é minha estrutura. Agora, essa pequena instância tem superpoderes porque nós a projetamos dessa maneira. Ele pode conter dados em sua propriedade message e pode gerar essa mensagem usando o método myfunction. Então, como podemos acessar essas coisas dessa instância? Bem, é aí que entra a notação de pontos. Vamos dar uma olhada no que é notação de pontos. Então, vamos fazer referência à variável a, seguida por um ponto ou um ponto. E, como você pode ver no menu de preenchimento automático, você pode escolher a mensagem que está acessando a propriedade, ou você pode selecionar minha função, que executará o código nesse método. Portanto, usando a notação de pontos, você pode acessar as propriedades e os métodos dessa instância. Vamos experimentar isso. Então, antes de tudo, vou atribuir algo à propriedade desta instância. Vou atribuir, vamos dizer oi. E depois vou imprimir. A.me, só para mostrar que eu realmente posso acessar esta propriedade e posso imprimi-la. Em seguida. Em vez de usar essa instrução print aqui, vou simplesmente chamar o método dessa instância. Vou chamar minha função. E vou executar esse código novamente. E ainda nos elevamos porque o código dentro desse método na verdade, apenas imprime a propriedade. Agora, essas pequenas instâncias, o herói de ação, não é? Ele pode fazer todas as coisas que projetamos para fazer. Agora, como essa declaração de estrutura é como um blueprint ou um plano de arquitetura, isso significa que podemos criar quantas instâncias quisermos. Então, vamos seguir em frente e criar uma segunda instância. Desta vez vou declarar outra variável, var ser para armazenar outra instância da minha estrutura. Agora, o importante a observar é que essas são instâncias completamente independentes. Voltando à analogia do projeto do carro, é como se a fábrica de carros fizesse dois carros da mesma planta. Esses dois carros são tratados como dois carros diferentes. A mesma coisa aqui. Acabei de criar duas instâncias da minha estrutura. Por exemplo, se eu atribuir uma mensagem para ser alta , imprimo o talão na mensagem, ou deixe-me atribuir outra coisa para ser.message e imprimo isso. Você verá que, para um ponto myfunction chamando esse método, ele imprime alto. E quando imprimo b.me, ele gera mundo para o console. Assim, você pode ver que cada instância controla seus próprios valores dentro da propriedade message. Agora você sabe que precisa criar uma instância de uma estrutura para usá-la. Vamos dar uma olhada em como instâncias de estruturas podem trabalhar juntas. Agora, para usar um exemplo anterior da lição anterior, suponha que eu tenha uma visualização de bate-papo no meu aplicativo, então declarei uma estrutura para representar essa visualização. Ele agrupa todas as propriedades, o código de visualização e os métodos relacionados à minha visualização de bate-papo. E suponha que eu tivesse outra estrutura para agrupar todo o código de rede ou o código do banco de dados para salvar os dados. Vamos declarar algo assim aqui. Então struct, vamos chamar isso de rede, ou vamos chamá-lo de gerenciador de banco de dados. Certo? E suponha que eu tivesse um método aqui. Então func, vamos chamar isso de dados salvos. E o parâmetro de entrada para isso são os dados que queremos salvar. Então, digamos que eu declare um único parâmetro chamado data e torne-o um tipo de string, e ele retorna um valor, ele retornará um valor booleano, true ou false, indicando se isso foi bem-sucedido ou não. Verdadeiro para um sucesso, falso por mal sucedido. E na vida real, não seria viável realmente retornar um resultado instantaneamente como este, porque dependendo das condições da rede e de outros fatores, você não quer esperar por os dados a serem salvos. Então você não quer que a execução pare. Mas, por uma questão de simplicidade, digamos que podemos retornar o resultado imediatamente. Então, quando você ouve isso, esse código salva os dados e retorna um resultado booleano. Então, neste exemplo, vou voltar a verdade. Então, vou transformar um valor codificado porque não vou implementar esse método. A principal coisa que quero mostrar é como a visualização de bate-papo usará o gerenciador de banco de dados para salvar a mensagem. Então, de volta à exibição de bate-papo, neste envie um método de bate-papo, por exemplo, eu poderia criar uma instância do gerenciador de banco de dados. Então, digamos que var d b seja igual ao gerenciador de banco de dados, seguido por um conjunto de parênteses. E assim, criei uma nova instância desse gerenciador de banco de dados. E agora, se eu quisesse salvar minha mensagem, chamaria de método de dados salvos. Então db dot salvou dados e eu passaria minha propriedade de mensagem como os dados de entrada. Vou seguir em frente e passar uma mensagem. Mas lembre-se, quando chamo esse método de dados salvos, ele retorna o valor booleano para que eu indique se o salvo foi bem-sucedido ou não. Assim, posso atribuir a saída desse método a uma constante. Vou chamar que isso foi sucesso, certo? Então, vou atribuir essa saída booleana em uma nova constante chamada foi sucesso. Ou talvez eu o chame de sucesso. E então aqui em baixo, posso escrever algum código. Verifique o valor booleano bem-sucedido. Se não for bem-sucedido. Mostrar alerta para o usuário. Agora, em lições futuras, você aprenderá a escrever essas declarações com base nas condições. Mas, por enquanto, esse comentário terá que fazer. O principal takeaway. Para este exemplo que estou mostrando é o fato de que dentro do método de envio de bate-papo da estrutura de visualização do chat, ele está usando outros métodos de estruturas criando uma instância dele. É assim que instâncias de estruturas podem trabalhar juntas para fazer com que seu aplicativo funcione. E isso é essencialmente tudo o que seu aplicativo é. São diferentes instâncias de estruturas trabalhando juntas para produzir as visualizações, lidar com a entrada do usuário e executar a lógica. Agora eu quero falar sobre níveis de acesso por um segundo. Suponha que, por exemplo, no meu gerenciador de banco de dados, eu tivesse algum tipo de informação que eu estava rastreando como uma propriedade que apenas o gerenciador de banco de dados precisava. Não seria relevante para nenhuma outra estrutura. Talvez seja um nome de servidor ou algo assim. Então, deixe-me escrever uma nova propriedade no meu gerenciador de banco de dados chamada nome do servidor. E atribuirei a ele uma string chamada server one. Agora, essa propriedade não seria interessante para nenhuma outra estrutura, mas como você pode ver no método send chat, declarei essa instância do gerenciador de banco de dados. Se eu escrever ponto db usando notação de ponto, poderei acessar essa propriedade de nome do servidor. E às vezes você pode não querer expor essas coisas. Então, o que você pode fazer é especificar um nível de acesso na frente dessa propriedade. Então, na frente do nome do servidor var, essa propriedade, posso colocar a palavra-chave privada, então agora se torna o nome do servidor var privado. E, ao fazer isso, ele mantém essa propriedade acessível somente dentro do escopo do gerenciador de banco de dados. Então, como você pode ver, ainda posso acessar nome do servidor dentro do método de dados salvos. Tudo bem, está no mesmo escopo, mas no método de bate-papo central da exibição de bate-papo aqui. Se eu usar a notação de ponto novamente, para minha instância, você poderá ver que não consigo acessar esse objetivo de propriedade ou não consigo vê-lo. E, além disso, você pode realmente fazer o mesmo com funções. Então eu posso colocar privado na frente da palavra-chave func. E agora você pode ver que o Xcode reclama. Não posso executar este método a partir do método de chat Sun da vista de chat. Agora é uma boa prática estar ciente de quais propriedades e métodos precisam ser acessíveis a outras instâncias e outras estruturas e marcar que tudo o resto é privado. Fazer isso é uma maneira proativa de evitar que comportamentos inesperados e bugs surjam. Tudo bem, e agora para a última parte da lição, quero relacionar tudo o que você aprendeu até agora a um aplicativo de interface de usuário rápido dentro do XCode. Então, vamos seguir em frente e fazer isso. Tudo bem, então agora vamos começar um novo projeto de aplicativo iOS. Vou apenas nomear este projeto de teste e garantir que interfaces Swift UI e ciclo de vida sejam rápidas linguagens de aplicativos de interface do usuário Swift, e estamos prontos para começar. Então, vou salvar isso na área de trabalho e vamos primeiro pular para o ponto de visualização de conteúdo rapidamente. Agora, vou mudar isso para o iPhone 12 e vou chegar ao currículo. Mas a parte importante é que a principal coisa que eu queria mostrar a você realmente é o código, certo? Dê uma olhada nessa estrutura. Você sabe que isso significa que a visualização de conteúdo é uma estrutura. Existem algumas palavras-chave e pedaços de código que vamos passar por enquanto, porque ainda não aprendemos isso e agora não é o momento certo para passar por cima disso. Então, vou brilhar sobre algumas coisas por realmente querer apontar os conceitos que você aprendeu até agora e mostrar onde eles se encaixam. Portanto, esta é uma declaração de estrutura. Deixe-me recolher esse código por um segundo. Lá vai você. Então você pode ver que isso é um struct. A exibição de conteúdo é o nome da estrutura seguido pela visualização de dois pontos. E vamos chegar a isso em apenas um segundo. E então você pode ver os colchetes encaracolados contendo todo o código dessa estrutura. Tudo bem, então vamos expandi-lo novamente. E vamos dar uma olhada no que mais conseguimos. Aqui embaixo. Temos a palavra-chave var. Então esse é o início de uma propriedade. O nome dessa propriedade é body. Ok, então depois disso temos dois pontos e depois temos alguma visão. E vamos chegar a isso de novo em apenas um segundo. Mas você pode ver que há um conjunto de colchetes encaracolados aqui. Isso diz que esta é uma propriedade computada. Então, deixe-me recolher o código novamente. E você pode ver que, de fato, isso se parece com um tipo de dados do corpo var da propriedade computada e, em seguida, um conjunto de colchetes dentro é o código que é calculado ou calculado para retornar o valor quando essa propriedade é acessada. Então você pode ver todos esses conceitos que aprendemos nas últimas quatro lições? Eles estão voltando? Agora eu quero falar sobre essa visão e alguma visão. Então, vamos falar sobre essa visão de dois pontos na declaração da estrutura primeiro. A julgar pela forma como você usou os dois pontos antes, você pode pensar que esse é o tipo de dados para a estrutura, mas não exatamente. Isso realmente não faz sentido, não é? Porque lembre-se, o nome da estrutura em si é o tipo de dados para instâncias dessa estrutura. Então, qual é essa visão de dois pontos após o nome da estrutura? Bem, quando você está declarando uma estrutura, os dois pontos após o nome da estrutura indicam que essa estrutura segue um protocolo. Nesse caso, ele segue o protocolo de exibição. Então, o que você acha quando ouve a palavra protocolo? Bem, para mim, penso nisso como um conjunto de regras ou um conjunto de ações. Por exemplo, como o protocolo de emergência de incêndio que um prédio pode ter para o que fazer quando ocorre um incêndio. Ou como o código de construção que um desenvolvedor precisa seguir para construir uma casa segura. Da mesma forma no Swift, um protocolo é uma especificação ou um conjunto de regras que a estrutura deve seguir. Essa parte de exibição de dois pontos indica que essa visualização de conteúdo segue o protocolo de exibição. Terminologia informal Swift. exibição de conteúdo está em conformidade com o protocolo de exibição. Agora, uma coisa importante a mencionar é que escrever dois pontos seguidos pelo protocolo é dizer e declarar que você está em conformidade com o protocolo. Mas você realmente, é como levantar a mão para declarar algo. Mas você realmente segue as regras desse protocolo? E, portanto, o código dentro dessa estrutura realmente tem que satisfazer as especificações desse protocolo. Nesse caso, para que o protocolo de exibição esteja em conformidade com ele, temos que ter uma propriedade body que retorne alguma visualização. Como você pode ver aqui, nossa estrutura de visualização de conteúdo realmente satisfaz essa regra. É por isso que ele está em conformidade com o protocolo de exibição. Então, agora que você entende quais protocolos são, você pode ver que o tipo de dados dessa propriedade body é na verdade, qualquer valor que esteja em conformidade com o protocolo de exibição. Sim, nesse caso, o tipo de dados dessa propriedade não é realmente um tipo de dados, mas na verdade é qualquer tipo de dados que esteja em conformidade com um determinado protocolo, nesse caso, o protocolo de exibição. Portanto, dentro desse código para essa propriedade computada, ela precisa retornar alguma instância que esteja em conformidade com o protocolo de exibição. Vamos abrir esse código e ver o que temos. Então, o que temos aqui, bem, temos uma única declaração de código. E lembre-se do que eu disse sobre propriedades computadas. Se for apenas uma única instrução de código, você pode omitir a palavra-chave return, mas vou especificá-la explicitamente para que fique claro para você. Então, o que está acontecendo aqui? Parece que estamos criando uma instância de uma estrutura de texto. Agora, uma maneira de descobrir isso é se você entrar no painel de utilitários ou no painel do inspetor e entrar na guia de ajuda rápida aqui. E você acabou de colocar o cursor sobre a coisa que você quer olhar. Então, vou clicar neste texto. Então, como você pode ver aqui, fato, o texto é uma estrutura. Portanto, estamos criando uma instância da estrutura de texto. No entanto, você notará que criar essa instância é diferente de como fizemos isso antes porque usamos um conjunto vazio de parênteses. Estou aqui quando estamos criando uma instância dessa estrutura de texto, estamos passando alguns dados de entrada. Então, sim, você pode realmente passar dados de entrada como um parâmetro para a criação de uma instância de uma estrutura. Esses são chamados de inicializadores. Agora ainda não falamos sobre isso e vamos nas próximas lições. Mas, por enquanto, apenas entenda que existe uma maneira de você passar dados de entrada para a criação de uma instância de uma estrutura. Então é exatamente isso que está acontecendo aqui. Agora você pode estar se perguntando, essa estrutura de texto está em conformidade com o protocolo de visualização? Bem, ele deve escrever porque acordo com essa propriedade do corpo, o que for retornado para essa propriedade computada tem que estar em conformidade com isso. Então, novamente, vamos mergulhar na ajuda rápida. Então, vou passar o mouse sobre os textos. Vou descer. E, de fato, vou abrir a documentação do desenvolvedor. Agora, se você estiver usando o Xcode 1.112, houve um bug que falhou quando você tenta abrir esta janela. Então você só precisa atualizar o Xcode dessas falhas para você. Ok, então esta é a documentação para textos. Você pode ver que é uma estrutura. E se você rolar todo o caminho para baixo, vou pular tudo isso porque quero apenas mostrar que ele está em conformidade com dois protocolos na verdade. Mas o que estamos interessados é que ele está em conformidade com o protocolo. Tudo bem, outra coisa que quero salientar é que isso, lembre-se disso desde cedo. Este é um modificador. E agora para você, deve parecer bem familiar, certo? Porque parece que estamos chamando um método. Isso é notação de pontos aqui. Estamos criando uma instância da estrutura de texto. E, em seguida, estamos chamando o método de preenchimento nessa instância. Veja se eu coloquei na mesma linha. Pode parecer um pouco mais familiar para você. Tudo bem, então espero que os pontos estejam começando a se conectar. Nenhum trocadilho pretendido. Ok, então para relacionar isso de volta à lição de estruturas anteriores onde eu mostrei a você como declarar uma estrutura. Tínhamos algumas seções diferentes, certo? Então, no topo aqui, declararíamos nossas propriedades. E, de fato, essa propriedade corporal é considerada um direito de propriedade. Mas também contém nosso código de visualização. Então, esse seria o lugar onde nosso código de visualização vai. E então aqui embaixo declararíamos os métodos para essa estrutura. Certo, acho que você entende que essa estrutura chamada exibição de conteúdo representa a visualização principal ou a tela principal deste aplicativo. Mas não dissemos que as estruturas por si só não fazem nada. Você precisa criar uma instância dela para que ele funcione. Bem, onde estamos criando uma instância de exibição de conteúdo? Para isso, precisamos fazer um drill-back up até o ponto de entrada do aplicativo, que é esse aqui. Assim, você pode ver isso por si só também é uma estrutura e o nome dessa estrutura é o nome do seu projeto e está em conformidade com um protocolo chamado app. Então, vamos dar uma olhada na ajuda rápida e ver o que se trata esse protocolo. Criando um aplicativo declarando uma estrutura que esteja em conformidade com o protocolo do aplicativo, implemente a propriedade computada do corpo necessária para definir o conteúdo do aplicativo. Agora temos outra propriedade computada pelo corpo. Vou pular um pouco dessa cena em coisas do grupo Window. Quero salientar que é aqui que estamos criando uma instância, essa estrutura de visualização de conteúdo. Então você vê como tudo se encaixa? Além disso, vamos voltar para a visualização de conteúdo e deixe-me mostrar outra coisa. Então, para isso, vou abrir a tela novamente. E vou retomar a pré-visualização. Olhe para essa estrutura aqui embaixo. Isso é o que está alimentando a visualização que você vê aqui. Essa estrutura não é realmente usada como parte do seu aplicativo. É apenas para visualizar no Canvas aqui. Portanto, ele está em conformidade com o protocolo do provedor de visualização. E tem uma propriedade chamada previews, palavra-chave estática ignorada. Por enquanto, explicaremos isso em uma lição futura. E aqui em baixo, você pode ver que uma instância da sua estrutura de visualização de conteúdo está sendo criada e isso é realmente o que está sendo mostrado aqui. Na verdade, posso aplicar modificadores a essa instância e isso mudará o que temos aqui. Tudo bem, então eu posso usar a notação de pontos para chamar modificadores, que agora, você sabe, são apenas métodos, certo? Dessa visão ou dessa instância. Na verdade. Em vez de fazer isso, por que não usamos a maneira visual e vemos como ele muda o código. Então, 10, eu visualizo essa alteração. Na verdade, vou mudar o esquema para o modo escuro. Assim, você pode ver que ele adiciona um modificador a essa instância. Vamos também mudar o dispositivo para iPod touch. Você pode ver que ele adiciona outro modificador chamado dispositivo de visualização. Agora, o que acontece se eu criar outra pré-visualização? Porque você pode clicar neste botão aqui e ele criará outra pré-visualização aqui. Você pode ver o que acontece com o código. Bem, ele criou outra instância de exibição de conteúdo e tem seus próprios modificadores. Agora, isso é agrupado por um contêiner, um contêiner chamado grupo, que ainda não abordamos, mas no futuro saberemos que ele agrupa visualizações. Portanto, essa instância de exibição de conteúdo é para esta aqui em cima, e essa instância é esta aqui em baixo. Veja, posso mudar esse esquema para luz. E você pode ver isso muda isso aqui. E posso mudar esse dispositivo para iPhone 12. E as mudanças desse modificador lá. Portanto, são instâncias independentes. Eu era muito para aceitar e é por isso que eu nunca recomendo que você memorize nada. Quanto mais prática você tiver, cedo ela se tornará uma segunda natureza para você. Vamos fazer uma rápida recapitulação, certo? Você aprendeu a criar instâncias de sua estrutura. Você aprendeu a usar a notação de pontos para acessar os métodos e as propriedades de suas instâncias. E você também aprendeu sobre os níveis de acesso. Assim, você pode controlar quais propriedades e quais métodos podem ser acessados com a notação de pontos. Finalmente, você viu como todos esses conceitos se relacionam com um aplicativo rápido de interface do usuário no Xcode. Agora, nas lições a seguir, vamos voltar ao nosso jogo de cartas de guerra e pegar todo esse novo conhecimento rápido e dar vida a esse jogo de cartas de guerra. Na próxima lição, mostrarei como usar o elemento botão para lidar com a interação do usuário. Tudo bem, te vejo lá. 11. 10: botões: SwiftUI: Olá e seja bem-vindo. Nas lições anteriores, você aprendeu o básico da programação Swift. E mostrei como esses conceitos se aplicavam ao seu projeto Xcode. Agora, vamos voltar à interface do usuário e às visualizações do Swift. Especificamente hoje eu quero falar sobre a visualização de botões. Vamos mergulhar diretamente. Tudo bem, então eu tenho um novo Swift que eu projecto aqui? Pensei em dar uma olhada na criação algumas instâncias de botão em um novo projeto juntos antes de voltarmos ao jogo de trabalho duro para usar a instância do botão lá. Então, vamos seguir em frente e excluir essa visualização de texto aqui. Na criação de algumas instâncias, um botão é uma estrutura como esse texto era. E precisamos criar uma instância de botão. Em outras palavras, precisamos instanciar um botão e é apenas outra maneira de dizer isso. Então, vamos em frente e digite o botão, seguido de abrir um suporte arredondado esquerdo. E isso vai abrir nosso menu de preenchimento automático. Existem alguns métodos de inicializador diferentes que podemos usar para criar uma instância de botão. E esses métodos de inicializador, lembre-se, são maneiras diferentes de criar uma instância ao transmitir alguns dados. Dois dos mais comuns que você vai usar é este aqui, onde você passa em uma string. E esse protocolo de string de tipo de dados significa apenas qualquer coisa que esteja conformidade com esse protocolo de string e um pedaço de texto faz. Este permitirá que você passe um pedaço de texto para usar como rótulo do botão. E também permitirá que você passe um bloco de código para ser executado quando esse botão for tocado. Então, vamos dar uma olhada nesses parâmetros com mais detalhes. Portanto, esse primeiro parâmetro para o rótulo do botão é bastante simples. Aqui você acabou de passar um pedaço de texto. Vou chamar esse botão, clique em mim. E se atualizarmos, nossa visualização fará qualquer coisa ainda antes de especificarmos o segundo parâmetro. O tipo de dados desse parâmetro de ação é algo que você ainda não viu. Mas parece uma assinatura de função sem o nome da função, certo? Isso é chamado de fechamento. E simplesmente, você pode pensar nisso como um bloco de código ou como uma função sem o nome da função, você passa um bloco de código como um parâmetro. Quando o botão estiver tocado, ele executará esse bloco de código. Novamente, isso é chamado de fechamento. Então, vamos dar uma olhada em como podemos especificar o fechamento como um parâmetro. Agora, uma das coisas mais fáceis que você pode fazer é destacar esse parâmetro e clicar em Enter. E o Xcode abrirá automaticamente um fechamento para você digitar seu bloco de código. Mas eu não vou fazer isso agora porque eu quero passar pelos passos e realmente dividi-lo para você e mostrar o que exatamente você está especificando. E então, no final, mostrarei o que acontece quando você clicar em Enter e deixar o Xcode abrir o fechamento para você. Vamos especificar esse fechamento manualmente por enquanto. Tudo bem, então o tipo de fechamento que isso espera é o tipo mais simples que você pode ver. Ele não aceita parâmetros. Esses dois suportes aqui, esses dois suportes arredondados. Essa é uma lista de parâmetros, assim como você teria quando declara uma função. Mas está vazio, então não há parâmetros. E, em seguida, você vê um traço seguido por um símbolo maior que. E você sabe que isso significa tipo de retorno, certo? E ele retorna vazio. Vazio não significa nada. Portanto, não retorna nada e não aceita nada. É muito simplesmente um bloco de código. Tudo bem, então agora que você conhece o tipo de função, então ela está esperando, vamos em frente e especificá-la. Então, vou excluir isso. E vou abrir um par de suportes encaracolados. E eu não preciso devolver nada. Não preciso especificar nenhum parâmetro. É muito simplesmente o bloco de código. Então você pode especificar isso com apenas um conjunto de colchetes encaracolados. E entre esses colchetes encaracolados, você coloca todas as instruções de código que quiser. Então, vou apenas imprimir o hello world. E esse é o botão completo. Vamos executar esse projeto e ver o que acontece. Ok, então nós estivemos no meio que diz clique em mim. Quando eu toco nele, ele executa o fechamento. Ele executa o código no fechamento. E você pode ver que, lá embaixo no console, ele imprime hello world toda vez que clico neste botão. Tudo bem, agora vamos voltar ao nosso projeto Xcode porque essa é apenas uma maneira de instanciar um botão. Vou adicionar um comentário aqui e chamar essa instância de botão com fechamento. Certo? E então eu também vou colocar isso dentro de uma pilha V. Na verdade, vou te mostrar uma forma abreviada e legal de fazer isso. Vou colocá-lo dentro da pilha porque queria mostrar algumas outras maneiras de criar botões. Então, vamos criar alguns botões juntos. Vá em frente e clique no comando neste botão e você pode simplesmente escolher incorporar e v stack. Faça isso. Ele coloca o elemento na pilha para você, embora não tenha conseguido mover meu comentário para lá. Então, vamos colocar isso ali. Tudo bem. Então, temos um botão e quero mostrar o mesmo botão, mas com uma mão curta, há algo chamado fechamento à direita. Deixe-me mostrar o que isso significa. Então, instância de botão com fechamento à direita, vou copiar e colar o botão que acabamos de declarar e criar outra cópia dele. Portanto, se na lista de parâmetros, o último parâmetro espera um fechamento, há uma abreviação. E como funciona é você tirar esse último parâmetro da lista de parâmetros e simplesmente colocar o fechamento após a chamada do método. Deixe-me mostrar o que quero dizer. Então, nesta lista de parâmetros, esse fechamento é o último parâmetro, certo? Portanto, este é um candidato principal para um atalho de fechamento à direita. Eu pego o fechamento em si. Então, vou cortar isso da lista de parâmetros. E eu simplesmente vou adicionar um espaço após o colchete arredondado final e, em seguida, basta colar o fechamento assim. E então eu posso ir em frente e remover o rótulo do perímetro ou o rótulo do argumento dessa lista de parâmetros assim. E essas declarações de dois botões são exatamente a mesma coisa. É só que eles são escritos de forma diferente. Um deles está especificando o fechamento dentro da lista de parâmetros e o outro está especificando-o usando um fechamento à direita. E é por isso que eu queria mostrar isso manualmente, em vez de apenas deixar o Xcode abrir um fechamento para você. Porque quando você deixar o Xcode fazer isso, ele reconhecerá que esses parâmetros de fechamento, o último, e o transformará em um fechamento final para você. Sou automaticamente, então deixe-me mostrar-lhe isso. Se eu declarar outro botão, vamos usar o mesmo. Clique em mim e, em seguida, toque nesse parâmetro de ação, clique duas vezes nele ou pressiono Enter e deixo Xcode abrir o fechamento. Ele o muda automaticamente em um fechamento à direita. Então eu pensei que isso seria muito confuso para você se você nunca tivesse visto isso antes. E pelo menos agora você sabe o que é um fechamento final e por que, você sabe, o Xcode faz isso por você. Ok, então isso é apenas criar um tipo de botão. Ambas as formas de criar botões onde você só tem um pedaço de texto como o rótulo. Mas e se você quisesse que seu botão fosse uma imagem ou um ícone ou algo assim, não apenas um simples pedaço de texto. Bem, há outro método inicializador para o botão que podemos usar para isso. Então, vamos dar uma olhada na instância do botão com visualização de rótulo. Então, vamos em frente e digite o botão, abra um suporte. E agora vamos dar uma olhada neste outro método inicializador com um parâmetro de ação e rótulo, cria um botão que exibe um rótulo personalizado. E você pode ver na lista de predadores que o primeiro me deixa, deixe-me voltar ao menu de preenchimento automático. Dando uma olhada nessa lista de parâmetros agora você pode ver que esse parâmetro de fechamento de ação é o primeiro parâmetro e, em seguida, o segundo parâmetro é um rótulo. Agora, para este parâmetro de rótulo, você pode retornar qualquer visualização que deseja representar seu botão. Então, vamos em frente e escolha esse método inicializador. Você pode ver o fechamento da ação aqui mesmo, se eu clicar duas vezes nele, ele não mudará para um fechamento à direita. E o motivo disso é porque ele não é o último parâmetro na lista de parâmetros. Portanto, isso não se qualifica para ser transformado em um fechamento final. Ok, então quando esse botão for tocado novamente, vou imprimir o Hello World no console. Mas, para o rótulo, você notará que tenho alguma liberdade para especificar que tipo de visualização eu quero retornar. Então, aqui está apenas retornando um TextView com um simples pedaço de texto aqui chamado botão. Mas eu posso retornar uma imagem B, por exemplo, eu poderia retornar uma pilha de visualizações diferentes. Você pode devolver o que quiser. Deixe-me retomar a pré-visualização aqui para que você possa ver os diferentes botões que declaramos. Certo? Então, o que vou retornar aqui talvez seja menos retorno em cada pilha. E vou retornar um texto que diz Editar. E também vou retornar uma imagem na frente disso. E para essa imagem, vou especificar, não adicionei nenhuma imagem à nossa biblioteca de ativos, mas vou usar algo chamado símbolo SF. Agora ainda não passamos por símbolos SF. Faremos isso em uma lição futura. No entanto, os símbolos SF são ótimos. Porque eles são basicamente um conjunto de ícones que vem com o Xcode que você pode usar apenas em seus aplicativos. E estes são recursos muito especiais desses símbolos SF que passaremos em uma lição futura neste curso, há um aplicativo mac gratuito chamado símbolos SF que você pode baixar onde você pode navegar por todos os diferentes símbolos que estão disponíveis para você gratuitamente. Por exemplo, vou usar este lápis. Cada um deles tem um nome que você pode simplesmente especificar e você poderá usá-lo. Portanto, para a imagem, o inicializador a usar, se você quiser usar S de símbolos, é chamado de nome do sistema. E então você especifica o nome que você viu embaixo do ícone. Lápis. Vou colocar lápis ali e você pode ver que o ícone aparece. Tudo bem, agora vamos executar este aplicativo no simulador e dar uma olhada no que acontece. Ok, então eu posso tocar neste aqui, diz Hello World Cup, aquela que diz Hello world. Ensinou este também diz helloworld. Esses são os fechamentos que eu especifiquei para todos os botões. Tudo bem, Agora você sabe como especificar um botão simples com apenas o texto para seu rótulo. Você sabe como especificar um botão que você pode usar qualquer visualização como o botão. Vamos voltar ao nosso jogo de cartas de guerra agora e transformar imagem do botão de negócio em um botão real. Tudo bem, então agora eu tenho o jogo de cartas de guerra em que estávamos trabalhando todo o caminho de volta, era menos de quatro ou cinco? Mas é aqui que chegamos. E se você se lembra, nós tínhamos usado uma imagem para esse botão de negócio. E esse é o código de visualização para isso. E você pode ver que é apenas uma imagem. Agora, você sabe como transformar isso em um botão. Então eu quero que você apenas pause o vídeo agora mesmo e experimente por conta própria, em seu próprio projeto, apenas como um pequeno exercício. Depois de ter experimentado por si mesmo. Ou se você acabou de ficar preso, continue reproduzindo este vídeo e faremos isso juntos. Certo, vamos experimentá-lo juntos. Então, vou criar um pouco de espaço aqui. E vamos declarar um botão. Usando o botão. Vamos abrir colchetes e vamos escolher esse método de inicializador de rótulo de ação. Agora, dentro da ação, vamos abrir esse bloco de código, mas ainda não vamos fazer nada. Faremos isso na próxima lição. Mas para o rótulo dentro de um botão de texto, rotule e exclua essa visualização. E vou simplesmente mover nossa imagem com o negócio entrando no rótulo do nosso botão. E assim, você não consegue ver nenhuma mudança visual. Mas, no entanto, se você executar isso no simulador, notará que você pode tocar nele. É um botão natural. Outra maneira, se você não quiser iniciar seu simulador é que você pode apertar este botão aqui para a visualização ao vivo e eu estou absolutamente começando. Sim. Então você pode ir em frente e eu tenho que acertar Currículo sobre isso. Certo. Você pode ver agora no Canvas, porque eu tenho a Visualização ao Vivo ativada, posso testar o botão. Essa foi sua primeira introdução ao lidar com a interação do usuário em um aplicativo rápido de interface do usuário. As peças estão realmente se unindo. Vamos fazer uma recapitulação rápida. Você aprendeu a instanciar botões, e essa é apenas uma maneira extravagante de dizer a criação de instâncias de botões. Você aprendeu sobre fechamentos e como eles são apenas blocos de funções como código sem um nome de função. E então você aprendeu sobre fechamentos à direita, que são apenas uma abreviação. E só para lembrá-lo, um fechamento final é quando você tem um fechamento como parâmetro em uma chamada de método. E, em seguida, ele é retirado dessa lista de parâmetros e, em vez disso, é colocado no final dessa chamada de método. Na próxima lição, mostrarei um conceito chave da interface do usuário do Swift que permitirá que você altere dados e faça com que a interface do usuário detecte automaticamente a alteração e atualize a IU sozinha. Tudo bem, te vejo na próxima lição. 12. 11: Propriedades do estado: Olá e bem-vindo. Na última lição, você aprendeu sobre o botão rápido da interface do usuário e como lidar com a interação do usuário. Bem, para alterar os dados e depois refletir essa mudança na interface do usuário, temos que aprender sobre as propriedades de estado e é disso que se trata essa lição. Vamos mergulhar diretamente. Tudo bem, então eu queria revisitar essa visualização, atualizar o diagrama do ciclo de vida por apenas um segundo. Você se lembra de quando mostramos um link dos dados para o código de visualização? Bem, vamos seguir em frente e fazer isso com nosso projeto de jogo de cartas de guerra. Então, que tipo de dados temos neste projeto? Bem, se você der uma olhada na interface do usuário aqui, você pode ver que precisamos acompanhar qual cartão o player tem, qual cartão a CPU possui e, em seguida, também as pontuações do player e da CPU. Então, são quatro dados. Vamos criar quatro propriedades em nossa estrutura de visualização de conteúdo para representar esses quatro dados. Então, logo abaixo do colchete de abertura da visualização de conteúdo, vou prosseguir e declarar var var CPU L2 player primeiro cartão de jogador igual. E vou imitar os carros que temos lá. Então, vamos ter cartão também. E, na verdade, vou me deixar apenas, vou mudá-lo. Podemos colocar outra coisa para iniciá-lo. E então a placa de CPU é igual, digamos que o cartão nove. E então vamos representar a pontuação do jogador. E isso vai ser um número inteiro. Vamos começar com 0 também. pontuação da CPU é igual a 0. Tudo bem, então agora temos essas quatro propriedades representando o estado do jogo. Essas quatro propriedades são nossa fonte de verdade porque representa a aparência da interface do usuário. Agora, como refletimos esses dados em nossa interface de usuário? Bem, precisamos fazer referência a essas propriedades dentro do nosso código de visualização. Lembre-se de que essas propriedades sendo declaradas no escopo dessa estrutura significam que ela está disponível para ser referenciada em qualquer um dos métodos na mesma estrutura, bem como neste bloco de código para nossa propriedade corporal computada. Então, se olharmos aqui para este primeiro cartão que está aqui, e nós codificamos uma string lá, dizendo cartão para. Em vez de codificar uma string lá, vamos colocar um valor dinâmico especificando nossa propriedade de cartão de jogador. Então, vamos atualizar nossa pré-visualização automática e apenas para garantir que isso seja executado e está tudo bem. E você pode ver que essa carta muda o cartão cinco porque é esse o valor da propriedade do cartão de jogador. Vamos fazer a mesma coisa para a placa de CPU em vez da placa de codificação rígida três aqui, Vamos colocar a propriedade da placa da CPU. Você vê essa mudança. E aqui embaixo, para a pontuação em vez de uma sequência de 0, vamos colocar nossa propriedade de pontuação de jogador. Agora você notará um erro aqui. Ele diz que não há correspondências exatas na chamada para inicializador. E isso porque, para inicializar uma instância de texto, precisamos passar um pedaço de dados de string. Mas a pontuação do jogador, lembre-se, Esta é uma propriedade int, por isso contém dados int. Mas como podemos contornar isso é que podemos transformar nosso int em uma string. Bem, pelo menos a representação de string de um número. Então, a maneira como fazemos isso é que podemos criar uma nova instância de string e simplesmente passar no, podemos passar no inteiro. Então este seria a pontuação do jogador. E vamos fazer a mesma coisa pela pontuação da CPU. Vamos criar uma nova string e vamos passar a pontuação da CPU. E, assim, temos nossos quatro dados sendo representados no código de visualização e, por sua vez, na interface do usuário. Agora tudo o que temos que fazer é quando o usuário toca no botão, podemos atualizar esses dados nas propriedades e fazer com que a interface do usuário mude automaticamente, certo? Bem, não tão rápido. Por que não vamos em frente e tentamos fazer isso e vamos dar uma olhada no que acontece. Então, na última lição, mudamos essa imagem de negócio em um botão real. Neste momento, esse fechamento de ação está vazio. Vamos colocar algum código dentro desse fechamento de ação para o nosso botão. Aqui vamos atualizar os cartões e também vamos atualizar a pontuação. Agora, se você tentar atualizar a propriedade como aqui, vamos tentar atualizar o cartão de jogador igual ao cartão 11. Você verá que não pode. Xcode reclamará e dirá, não é possível atribuir à propriedade self é imutável. Agora, auto se refere à instância de uma visualização de conteúdo e imutável significa que ela não pode ser alterada. Você vê que as instâncias são tipos de valor e , devido à maneira como elas são alocadas na memória, elas não podem ser alteradas. Agora, eu sei que isso não faz absolutamente nenhum sentido para você agora, mas eu prometo a você em uma lição futura, falaremos sobre isso e então fará todo o sentido por enquanto, apenas entenda que não podemos alterar o valor de nossa propriedade, a menos que usemos um invólucro de propriedade. Um invólucro de propriedade é uma palavra-chave na frente da nossa declaração de propriedade que altera seu comportamento. Agora, especificamente, estou falando sobre o invólucro de propriedade estadual. Então, vamos voltar para nossas declarações de propriedade e ver como ele usou esse invólucro de propriedade de estado para alterar os comportamentos dessas propriedades que possamos alterar os valores. Tudo o que temos fazer é na frente da palavra-chave var da nossa declaração de propriedade, vamos escrever no State. E adicionando essa palavra-chave no estado, isso indicará que a propriedade do cartão de jogador é na verdade uma propriedade de estado e nos permitirá atualizar o valor nela. Então, vamos em frente e colocar este invólucro de propriedade na frente de todas as nossas quatro propriedades para que sejam todas propriedades de estadia. As propriedades do estado têm duas características especiais. número um é que você pode alterar os dados neles. Já falamos sobre isso. Mas o número dois é que dentro do código de visualização, quaisquer referências às propriedades de estado, elas serão notificadas sobre as alterações de dados e seguida, sua interface do usuário será atualizada automaticamente com base nesses novos dados. Então, vamos em frente, vá até o fechamento de ação do nosso botão e tente atualizar algumas dessas propriedades de estado. E vamos assistir a mudança da interface do usuário. Certo, então aqui estamos nós. E, como você pode ver agora, o erro desapareceu. E eu posso colocar placa de CPU igual a cartão 12. E vamos avançar e atualizar a pontuação também. Poderia muito bem apenas para isso. Então, vou dizer que a pontuação do jogador mais é igual a uma. Isso significa incrementá-lo em um. pontuação da CPU mais também é igual a uma. E vamos salvar isso. Então. Vamos prosseguir e fazer uma prévia ao vivo, ver se poderíamos fazer isso. Tudo bem, então esta é uma pré-visualização ao vivo. Quando eu tocar neste botão, ele vai executar o fechamento aqui. Isso não foi legal? Então, quando eu tocei nesse botão, atualizamos os dados nas propriedades do estado. Certo? E como em nosso código de exibição, ele faz referência a essas propriedades de estado, elas foram notificadas e a interface do usuário foi renderizada novamente para mostrar os novos dados. Agora o problema é que toda vez que tocamos no botão, quero dizer, está incrementando a pontuação, o que é legal, mas as cartas do jogador não estão sendo randomizadas. Então, o que podemos fazer é usar o método aleatório do instrutor, gerar um número aleatório. E então vamos acrescentar esse número aleatório à parte de trás da string do cartão para gerar um novo cartão. Então, vamos dar uma olhada em como isso funcionaria. Gere um número aleatório entre dois e 13. Porque se você olhar para a biblioteca de ativos, temos cartão até o cartão 14 na verdade. Então eu provavelmente gostaria de gerar de dois a 14. Então eu vou dizer que jogador rand é igual a int dot aleatório. E esse método nos permite especificar um intervalo. Você pode especificar um intervalo com a extremidade inferior do intervalo, ponto, ponto, ponto e, em seguida, a extremidade superior. E deve ser inclusivo, se eu me lembro corretamente. E veremos em um segundo. E vamos declarar outro. Cpu rand é igual a int ponto-ponto-ponto aleatório em dois, ponto-ponto-ponto e 14. E então o que vamos fazer é, em vez de especificar o número dentro da string codificada, vou especificar cartão. E então vou adicionar o player Rand e adicionar o rand da CPU. Agora, talvez não consigamos fazer isso e, como esperado, não podemos. Porque, como você sabe anteriormente nesta lição, o que estamos tentando fazer aqui é que estamos tentando anexar um número inteiro a uma string. E o que temos que fazer é converter esse inteiro em uma string primeiro e obter a representação de string desse inteiro. E lá, isso deve ser dinâmico agora. Então, vamos dar uma olhada nisso e ver se é o que esperamos. Isso é perfeito. Os cartões são aleatórios. O que não é perfeito é a pontuação aqui em baixo. Ainda precisamos determinar qual lado ganha e, em seguida, incrementar a pontuação apropriada. Então, vou comentar esses dois pedaços de código porque não queremos apenas incrementá-lo em um a cada vez. Agora, antes de terminarmos esta lição, eu realmente quero apontar e enfatizar o quão poderosa essa estrutura é. O que estamos fazendo aqui é tocar em um botão. Ele está executando esse fechamento e estamos alterando o valor nessa propriedade state. E como a propriedade state está sendo referenciada dentro do nosso código de visualização aqui, está detectando essa alteração de dados e, em seguida, renderizando novamente o que vemos na interface do usuário. E isso acontece automaticamente. Tudo o que estamos fazendo é mudar os dados. No passado, com o kit de interface do usuário, esse sistema não existia. O que teríamos que fazer é atualizar os dados, assim como estamos fazendo aqui. Mas também teríamos que atualizar cada elemento de exibição manualmente e dizer o que exibir. Então, o que teríamos que fazer é obter uma referência a essa imagem e , em seguida, gerar uma imagem a partir desse nome de ativo da biblioteca de ativos e, em seguida, definir esse ativo de imagem para este ImageView. E nós teríamos que fazer isso por este também. Então, teríamos que fazer isso pelo texto aqui e pelos rótulos. Então, tudo o que tínhamos que fazer manualmente. Agora, tudo o que precisamos fazer é atualizar os dados em qualquer parte da interface do usuário vinculada a essas propriedades de estado detectará a alteração e a atualização automaticamente. Agora, por definição, uma propriedade state é um pedaço de dados dos quais essa visualização de conteúdo depende. Não é algo que outros pontos de vista se importam ou dependam. E assim, por essa natureza, podemos adicionar a palavra-chave privada e apenas controlar o nível de acesso a esses dados para que eles sejam acessíveis apenas dentro do contexto ou do escopo do esta estrutura de visualização de conteúdo. Como é somente essa visualização de conteúdo que depende dessas propriedades de estado. Tudo bem, estamos quase na linha de chegada. Só precisamos comparar os valores do cartão e, em seguida, atualizar as propriedades do estado da pontuação adequadamente. Ainda é uma recapitulação rápida. Agora, você aprende a fazer referência a propriedades em seu código de exibição. Aprendemos sobre o invólucro de propriedade estadual. Também aprendemos sobre algumas novas terminologias incluindo valores codificados, valores dinâmicos e imutáveis, o que significa que ela não pode ser alterada. Na próxima lição, vamos examinar condicionais e como comparar valores usando instruções if. Tudo bem, te vejo lá. 13. 12: se as declarações 12:: Olá e seja bem-vindo. Nesta lição, vamos falar sobre uma construção rápida que permitirá que você escreva código que diz se isso, então, agora isso é fácil de usar, mas uma sintaxe poderosa permitirá que você lógica expressa em um nível totalmente novo. Tudo bem, com isso dito, vamos mergulhar bem. Tudo bem, então eu tenho um novo playground aqui. Quero mostrar como se as declarações funcionarem antes aplicá-las ao nosso projeto de jogo de cartas de guerra. Tudo o que tenho aqui são algumas constantes, na verdade, mais do que um casal, tenho um monte de constantes com valores simples diferentes, alguns números inteiros, strings e valores booleanos. E eu quero usar essas constantes para demonstrar como as declarações IF funcionam. Agora, novamente, a instrução if é muito poderosa porque permite que você execute código com base em algumas condições. Então, vou usar essas constantes como minhas condições. Vamos primeiro dar uma olhada em uma declaração básica IF, declaração. Vou digitá-lo primeiro e depois explicarei cada uma das partes. Então você começa com a palavra-chave if e, em seguida, coloca algum tipo de valor ou condição que é avaliado para um resultado booleano. Então, vou colocar ie. E vou abrir um par de suportes encaracolados. E aqui dentro, vou imprimir o Hello World, certo? E isso por si só é a declaração if mais simples. Como você pode ver, começa com a palavra-chave if e, em seguida, seguido por um valor booleano ou algum tipo de instrução de código que seja avaliado como um resultado booleano, seguido por um conjunto de colchetes encaracolados. E dentro dos colchetes encaracolados, você coloca o código que deseja executar. Se a condição for verdadeira, neste caso, e é falsa, certo? Portanto, ele não vai executar esse código porque ele não é avaliado como verdadeiro. No entanto, se eu alterar esse E e eu estivesse testando F em vez disso, esse código seria executado porque ele é avaliado como verdadeiro. Agora pode ficar muito louco porque você pode encadear essas coisas juntas. Então, uma das maneiras pelas quais você pode encadeá-los é usar o end, e isso é um duplo e comercial. Então deixe-me apenas indicar isso lá. E como isso funciona é se você escrever f duplo e comercial, digamos g. Então, agora você está testando as duas condições e porque você está usando o final, ambas as condições devem ser verdadeiras para que esse código a ser executado. Então, neste caso, porque f e g são verdadeiros, verdadeiros e verdadeiros meios verdadeiros. Certo? E outro exemplo é que você pode usar ou. Então, esses são tubos duplos. A chave pipes, muitos iniciantes, eles não têm certeza de como pressioná-la. No meu teclado Mac, esta tecla está logo abaixo da tecla Delete e logo acima da tecla de retorno, e é o caractere na tecla de barra invertida. Então eu tenho que segurar o turno e tenho que bater na barra invertida para pegar esse cachimbo. Portanto, tubos duplos, pode ser diferente no seu teclado. Isso é OR quando você usa um OR em vez de um fim e você está se encadeando a condições como essa. Você está dizendo que se qualquer condição um for verdadeira ou a condição dois for verdadeira, então execute esse código. Então, por exemplo, f e g são ambos verdadeiros. Então isso definitivamente executará esse código. Se eu fizer f e e, isso é um falso. Lembre-se, esse código ainda será executado porque pelo menos uma das condições é verdadeira. Agora, novamente, isso pode ficar muito louco porque posso continuar mudando, posso continuar fazendo ors, ou posso até jogar um fim lá dentro. Então, vamos fazer isso. Mas esse tipo de confusão agora porque isso pode ser lido de algumas maneiras diferentes. É E e G? E então, ou F? Ou é F ou E e G? Estes veem o que estou dizendo. Então, para, se eu colocar colchetes em torno desses, isso pode fazer mais sentido. Se eu fizer isso. Isso diz que se f for verdadeiro ou E e G são verdadeiros, então execute o código. No entanto, eu também poderia colocar colchetes em torno dele assim. Se F ou E for verdadeiro e G for verdadeiro, execute o código. Assim, você pode usar colchetes, colchetes arredondados para ajudá-lo a diferenciar quais condições avaliar primeiro. Tudo bem, até agora estamos usando apenas os valores booleanos, mas ainda há mais. Quero mostrar a você com a sintaxe de uma instrução if antes de continuarmos a olhar para números inteiros e strings. Então, juntamente com a instrução if, você também pode estender essa instrução if para testar outra condição, porque isso é apenas testar uma condição, certo? Você pode seguir o colchete de fechamento do primeiro bloco de código, certo? Caso contrário, e então você escreve outra condição. Então, vamos dizer else-if. E, então coloque isso mais, se G, então faça isso. Então, o que vai acontecer aqui é que ele testará essa condição. Se isso for avaliado como falso, testará o próximo e ele vai cair em cascata. Se isso for falso, então ele vai para o próximo. A qualquer momento, enquanto está verificando essas condições. Se um deles for verdadeiro, então ele entrará nesse ramo. Ele vai executar esse bloco de código e vai pular o resto. Portanto, isso permite testar, neste caso, três ramos ou caminhos diferentes e apenas escolher um, sendo o primeiro verdadeiro. Mas tendo em mente que ele verifica esses ramos dessas condições, quero dizer, de cima para baixo. Então, o primeiro que atinge isso é verdade. Esse é o ramo que vai cair. E, finalmente, há também outra característica das declarações if. Pode haver uma espécie de pegar todos os ramos. Se nenhuma dessas condições acima for verdadeira, você poderá ter um bloco de código else. Portanto, esse bloco de código é executado no final. Se nenhuma das condições fosse verdadeira e não executasse nenhuma dessas ramificações. Então, isso é como se sua captura todos fossem à prova de falhas. E, novamente, todos são opcionais. Você pode ter um elsif, você não pode ter mais se. Você não pode ter mais nenhum e você pode simplesmente ter um outro. Então, se essa condição não for verdadeira, então ela virá aqui. Tudo bem, então essa afirmação se for realmente poderosa. A sintaxe é realmente simples de entender, mas oferece tanta flexibilidade em quais instruções de código serão executadas dependendo do que está acontecendo dentro do aplicativo. Ok, então eu vou desfazer isso que possamos ver uma declaração de pleno direito if aqui. E vou mostrar como talvez inteiros ou strings possam ser avaliados como condições. Agora, no exemplo até agora, acabei de fazer referência valores booleanos, e isso é simples. Mas trabalhando com outros tipos de dados como números inteiros e strings, você pode ter que usá-los em uma declaração real para avaliar para obter um resultado booleano, certo? Por exemplo, em vez de g, que é apenas um valor booleano verdadeiro, vamos usar a. Para avaliar um resultado booleano, tenho que usar um operador de comparação, certo? Então eu posso usar maior do que se a for maior que 0, certo? Isso pode ser avaliado como verdadeiro ou falso. E além de maior que, aqui estão alguns outros que você pode usar. Assim, maior que, menor que, maior ou igual a, e você tem menos ou igual a. E depois há igualdade. Com igualdade, você não usa um único sinal de igual porque isso é para atribuição. Como você pode ver aqui, estamos atribuindo esses valores a constantes. Para comparar a qualidade, você usa um sinal de igual duplo. Então eu posso dizer aqui embaixo, faz um igual a 0 e, claro, não acontece. Portanto, esta afirmação aqui será avaliada como falsa. E como este é um operador final, ambas as condições precisam ser verdadeiras. E como este já é falso, então ele não entrará nesse ramo. De qualquer forma. Podemos mudar isso também. Então, se b for menor que três ou quatro, quero dizer, e se c for igual a 10. Portanto, esses são alguns exemplos de operadores de comparação que avaliam como verdadeiro ou falso. Agora, para cordas, você também pode fazer isso. Você pode, você pode avaliar d, por exemplo, é uma string e você pode testar se ela é igual a hello. Então isso é uma coisa que você pode fazer com cordas. Você ainda pode usar maior ou igual a. Por exemplo, se tivéssemos deixado h igual a mundo. E podemos dizer se D é maior que h. Então podemos fazer isso. Nesse caso, ele vai comparar o H com o W. E porque h não é maior que w, porque vem antes de W, então isso vai ser falso. Mais uma coisa interessante que quero mostrar é o uso do ponto de exclamação. Então este, basicamente inverte o valor booleano. Então, se g fosse, G é verdade, certo? Se eu colocar o ponto de exclamação na frente dele, basicamente vai virar o valor booleano. Então g é verdade. Tenho o ponto de exclamação. Vai transformá-lo em falso. Então, ele não vai executar isso. Você poderia colocá-lo na frente disso, por exemplo. E uma dúzia, não é igual a 0 porque é um, como você pode ver lá em cima. Mas ter isso na frente dele vai virar isso para verdade. E agora que penso nisso, você pode testar a desigualdade também. Portanto, não é igual. Ok, então eu posso testar se a não é igual a 0, o que é verdade. Mas então, porque eu tenho esse ponto de exclamação na frente dele, ele vai virá-lo para falso. Então, muita flexibilidade aqui, e isso é apenas um exemplo, certo? Portanto, não precisa ser tão complicado. Agora eu quero voltar ao nosso jogo de cartas de guerra e usar a instrução if para determinar qual carta é maior e, em seguida, incrementar a pontuação do jogador ou a pontuação da CPU. Tudo bem, então aqui tenho o projeto de jogo de cartas de guerra. E se você der uma olhada nesta parte aqui onde estávamos atualizando a pontuação, estamos simplesmente incrementando a CPU e pontuação do jogador com cada um dado do botão. Agora que você aprendeu sobre instruções if no playground do Xcode, tenho certeza de que é muito trivial implementá-lo para que você esteja comparando o player ran versus CPU RAM e vendo qual número é maior para determinar qual pontuação atualizar. Agora, porque rotulamos nossos ativos corretamente para serem os mais baixos e o ACE sendo o mais alto, tendo um valor de 14. É muito trivial comparar. Você acabou de comparar esse número final, certo? E essencialmente esse é o número aleatório. Então, se você acha que pode fazer isso, pause o vídeo agora e experimente por si mesmo. Você aprenderá muito. Eu prometo, mesmo que você dê uma chance e você não entenda, a lição vai ficar muito mais. Então vá em frente e pause o vídeo, experimente e, em seguida, despause-o e me veja fazendo isso aqui. Tudo bem, então bem-vindo de volta. Vamos implementar essa declaração if para ver qual cartão é maior. Então, vou começar com se. E vou primeiro testar se o número do jogador é maior que o número de CPUs. Tudo bem, vou usar maior do que, se for esse o caso, então vou incrementar a pontuação do jogador. Caso contrário, vou apenas incrementar a pontuação da CPU. Agora. Não me importo com laços, e é por isso que não estou comparando a igualdade entre os dois números aleatórios. Mas você definitivamente poderia fazer isso em sua versão, se quiser. Na verdade, há um problema com a maneira como estou fazendo isso aqui. A CPU tem uma vantagem injusta porque, no caso de um empate, a CPU obtém a pontuação correta usando esta instrução else. Portanto, eu meio que tenho que testar o outro caso. Então, vou testar se o rand da CPU for maior do que o jogador ao redor, então a pontuação da CPU mais um. Caso contrário, se essas duas condições não forem verdadeiras, então é um empate e eu não quero fazer nada. Tudo bem, agora vamos experimentar isso. Então, vou tocar a pré-visualização ao vivo novamente, e faremos isso aqui mesmo no Canvas. Vou acertar o acordo. Então 14 é definitivamente maior que cinco. Então, o jogador recebe uma pontuação. Jack é definitivamente, bem, isso é um, que é um 11 é maior que 3, quatro é maior que três. Então, parece estar funcionando corretamente. Parabéns, o jogo de cartas de guerra está completo. Você aprendeu a criar interfaces de usuário, como codificar no Swift e concluiu seu primeiro aplicativo. Pense no primeiro dia desse desafio de 14 dias. Como você se sentiu naquela época? Você estava nervoso por achar que poderia fazer tudo isso? E agora olhe até onde você chegou. Como você se sente sobre o desenvolvimento de aplicativos agora? Agora eu tentei tornar isso o mais fácil possível de entender e espero que você seja capaz de ganhar novas habilidades. Agora sei que estou fazendo isso soar como o fim, mas na verdade é apenas o começo da sua jornada. Na próxima lição, direi quais são os próximos passos e para onde ir a partir daqui. 14. 13: desafio bônus: Olá e seja bem-vindo à Lição 13. Agora, nesta lição, será mais um desafio prático e prático. Quero que você tente criar este aplicativo por conta própria. Agora, você tem todas as habilidades necessárias com base nas lições de um a 12. E esse exercício será uma ótima maneira de reforçar o que você aprendeu e também identificar quaisquer lacunas em seu conhecimento neste momento para que possamos revisá-lo e também descobrir o que é que você precisa se atualizar antes de continuar. Ok, então deixe-me passar por este aplicativo. Você tem um título, você tem um número de créditos, você tem algumas imagens. E quando você aperta esse botão, ele simplesmente aleatoriamente as imagens. Se eles não corresponderem, você perderá créditos. Mas, no entanto, se você conseguir três correspondentes, o que não consigo fazer agora. Oh, lá vamos nós. Então você ganharia créditos. Então isso é muito parecido com o jogo de cartas de guerra, exceto que agora existem três coisas que você aleatoriamente em vez de duas. E os ativos de imagem estão na descrição em um link. Então você pode se certificar de agarrá-los. Então você terá tudo o que precisa. Se você acha que isso é muito fácil ou se é muito difícil, de qualquer forma, eu recomendo que você experimente porque é realmente a melhor maneira de aprender, mesmo se você ficar preso. Quando você olha para a solução e descobre como superar esse obstáculo em que você está preso. Vai ser muito significativo e realmente ajudará a comprometê-lo com a memória. E essa crença sobre o aprendizado prático se deve ao meu próprio fracasso no início, quando tentei aprender iOS. Então isso não é apenas algo que li ou algo que ouvi. Isso é da minha própria experiência pessoal que é, não há mais nada que possa substituir como a melhor maneira de aprender. 15. 14: o que está a ela?: Você fez isso. Onde você vai daqui? O que você aprende a seguir? Bem, ainda há uma tonelada de habilidades para dominar antes que você possa finalmente criar qualquer tipo de aplicativo que desejar. Mas espero que ao menos fazer o jogo de cartas de guerra e completar esse desafio, isso tenha ajudado você a romper algumas barreiras mentais sobre se você pode ou não fazer isso. Porque agora você deve saber que você pode fazer isso. E é só uma questão de tempo. Mais aprendizados, mais obstáculos superados e mais prática antes de você finalmente atingir seu objetivo, vou compartilhar com você as próximas cinco coisas que você pode fazer para progredir na jornada do aplicativo. Número um ou mais visualizações e contêineres ao fazer o jogo de cartas de guerra, você já aprendeu sobre alguns deles, como texto, botões de imagem, pilhas, mas há muito mais VMs e contêineres que você pode aprender, como alternâncias, seletores, status, formas de barras , grades, listas e a lista continua. Agora, aprender a usar mais visualizações e contêineres é como obter um caminhão carregado de peças de lego. Suas opções vão se expandir muito. Número dois, mais tipos de aplicativos. Por quê? Bem, pense nisso. Nada de novo nunca vem do zero. Você está sempre aproveitando suas experiências anteriores, o que você viu, o que você fez, o que você tentou. Então, se você quiser criar seu próprio aplicativo, a melhor coisa que você pode fazer neste momento da sua jornada é ficar exposto ao maior número possível de aplicativos diferentes . Com cada novo aplicativo, você aprenderá novas arquiteturas, novos padrões e novas formas de fazer as coisas. Por exemplo, como você navega de uma tela para a próxima? Como você baixa dados da Internet? Como você salva dados em um banco de dados? E como você permite que os usuários criem contas e façam login? Esses são todos os tipos diferentes de aplicativos aos quais você precisa ser exposto antes incorporar esses mesmos elementos em seu aplicativo. Número três, mais, Xcode e swift. Agora, neste desafio, abordamos levemente conceitos básicos do Swift e como navegar pelo próximo código, mas definitivamente há mais profundidade para ambos. Os Aplicativos do Azure ficam mais complexos em seus projetos, ficam maiores, você encontrará mais problemas e mais dinheiro para resolver. E você vai precisar de um comando mais profundo da linguagem de programação Swift. Então, como você aprende mais rápido e Xcode? Bem, ele volta a criar mais aplicativos. À medida que você cria cada aplicativo, você naturalmente aprenderá técnicas mais rápidas e Xcode. Número 4, MVVM. Agora este é muito importante na interface do usuário Swift. Este é o principal padrão de arquitetura e significa Model-View-ViewModel no jogo de cartas de guerra que você fez. Tínhamos a parte da visualização e tínhamos algumas propriedades de dados nela. Mas em um aplicativo Swift UI maior, você teria modelos representando seus dados também e visualizaria modelos que suportam suas visualizações. Esse padrão de arquitetura existe em qualquer aplicativo Swift UI maior. Portanto, é muito importante saber, fazer algumas pesquisas no Google ou YouTube no MVVM para entendê-lo em um nível conceitual. E, na próxima vez que você fizer um tutorial de interface do usuário rápido, tente identificar o padrão sozinho ou se você estiver criando seu próprio Swift aplicativos definitivamente tentam colocar o padrão em prática. Número cinco, mais estruturas da Apple. A Apple tem uma tonelada de estruturas que você pode acessar com seu aplicativo. Basta adicionar a estrutura ao seu projeto Xcode, ler a documentação e você adicionará novos recursos ao seu aplicativo, como aprendizado de máquina, realidade aumentada e assim por diante. Agora, isso vai levar um pouco mais de experiência porque você precisa ler e entender a documentação. Mas é uma boa habilidade começar a treinar porque todos os anos haverá novas ferramentas novas plataformas e novas estruturas para você aprender. Como desenvolvedor de aplicativos, o aprendizado nunca pára e sua capacidade de aprender rapidamente e experimentar as coisas realmente determinará seu sucesso a longo prazo. Essas são as cinco áreas que eu recomendo que você explorou progredir na jornada do aplicativo. Quero agradecer muito por enfrentar esse desafio e por aprender comigo. Espero que você tenha tido uma experiência incrível. E se você já teve, por favor, compartilhe com seus amigos e familiares. Por favor, me ajude a divulgar e contar a todos sobre código com Chris. Agradeço muito você e obrigado por me deixar fazer parte da jornada do seu aplicativo. Tudo bem, te vejo na próxima lição.