Minha jornada de reaprendizagem do iOS Parte 1

A ideia deste blog é compartilhar com vocês o que aprendi com o máximo de detalhes possível e solidificar/responder quaisquer dúvidas que tive quando estava aprendendo com os tutoriais “zero-to-hero”.

Neste post, começarei com algo EXTREMAMENTE simples que talvez um desenvolvedor experiente leve 5 minutos ou menos para criar. Mas ei, todos nós começamos de algum lugar, então por que não aqui

Aqui está uma prévia do que faremos aqui:

Como em qualquer tradição de linguagem de programação, faremos um aplicativo “hello world” que, quando um usuário tocar no botão, o texto acima exibirá o texto “hello world” em diferentes idiomas aleatoriamente.

O objetivo deste aplicativo é entender o básico de:

1. UILable, UIButton e UIImageView do UIKit.
2. Declarações de Variável e Array do Swift.
3. IBOutlets e IBActions.

Então vamos começar!

Primeiro, abra seu Xcode e crie um novo App assim:

Aqui está a parte principal: selecione o toque do iOS em vez do toque multiplataforma ou você não pode escolher o Storyboard mais tarde e deve trabalhar com o SwiftUI.

Agora, em Nome do produto, digite “Hello World App” ou qualquer outro nome sofisticado que você queira chamar. É realmente até sua criatividade!

Agora, o que diabos é um identificador de organização?

um identificador de organização é um nome exclusivo para seu aplicativo para que outras pessoas encontrem seu aplicativo na App Store. Eu recomendo que você digite seu sobrenome e depois o primeiro nome aqui para tornar as coisas mais simples para este projeto.

Portanto, seu Bundle Identifier (diretamente abaixo do Organization Identifier) ​​será algo como:

doejohn.Hello-World-App

Algumas versões mais antigas do Xcode podem mostrar com.doejohn.Hello-World-App. Isso é chamado de nome de domínio reverso apenas para sua informação.

Agora clique em Avançar e salve seu projeto em algum lugar de sua preferência e clique em Criar e lá vamos nós para a parte divertida!

Depois de concluído, seu Xcode deve se parecer com isto:

Então, vamos examinar brevemente o que estamos vendo aqui:

• A seção laranja é o lado do navegador onde está exibindo o navegador do projeto. Aqui você vê que tem seu Projeto Hello World no topo com três pastas: Hello World , Hello WorldTest s e Hello WorldUITests . A pasta Hello World é onde faremos toda a nossa codificação e edição. Hello WorldTest s e Hello WorldUITests são criados automaticamente para nós quando deixamos a caixa de seleção Include Tests quando criamos nosso projeto durante a fase de criação de nomes. Irei abordar as duas pastas em outro post, portanto, fique atento!
• A Seção Verde é a parte sobre as informações gerais e edição do nosso aplicativo. Sob o toque geral aqui, podemos ver que temos Nome de exibição (o nome do nosso aplicativo), Identificador de pacote (o que discutimos anteriormente sobre o nome de domínio reverso), versão (como jogos, temos a versão 1.0, 1.1, 2.x… etc)
• As informações de desenvolvimento da seção roxa são onde eu gostaria de passar um pouco mais de tempo discutindo aqui. Vamos de cima para baixo aqui.
• No topo, temos o iOS 15.2 com iPhone e iPad marcados, mas o Mac Catalyst. Isso porque, ao criarmos nosso projeto, selecionamos “iOS” e não “multiplataforma”, dizendo assim “queremos que nosso aplicativo seja executado apenas em dispositivos iOS”. A parte do iOS 15.2 está dizendo “A versão mínima do iOS para executar nosso aplicativo”. Você pode clicar nele e selecionar outra versão do iOS que gostaria que seus usuários usassem pelo menos. Certifique-se de verificar se as funcionalidades que você deseja executar são suportadas na versão mínima que você deseja que seus usuários executem. Para este aplicativo, você deve estar bem. A orientação do dispositivo diz que seu aplicativo é executado apenas em retrato, de cabeça para baixo, paisagem à esquerda ou paisagem à direita , como você pode imaginar, pois alguns jogos só permitiriam que os jogadores jogassem em determinada orientação. oBarra de status é onde você pode definir o estilo de exibição de sua barra de status. Você pode brincar com ele e ver como você gosta da aparência do seu aplicativo. Para este aplicativo, manteremos tudo na configuração padrão para manter as coisas simples.
• A Seção Amarela é onde estão seus inspetores. Portanto, coisas como o nome do seu aplicativo, caminho completo para o arquivo, etc., podem ser encontradas nessa seção. Isso se tornará mais útil quando estivermos desenvolvendo nosso aplicativo com o Storyboard.

Agora quero que você clique no botão que destaquei com um quadrado amarelo. Isso nos permitirá dividir a seção intermediária do nosso Xcode em dois lados: um para exibir o arquivo principal e o outro para exibir nosso arquivo ViewController.

Sua tela pode parecer assim no início, mas você pode facilmente clicar em qualquer um dos lados que deseja alterar para exibir ViewController e clicar em ViewController na seção Navigator, então ele mudará.

Sua tela deve ficar assim quando terminar. Agora vamos repassar rapidamente o que significam as linhas de código que estamos vendo no ViewController:

Bem no topo, vemos a linha import UIKit que diz “ei, queremos importar este framework/biblioteca para ser usado neste arquivo ViewController!” Neste caso, queremos trabalhar com o UIKit, por isso o importamos aqui. Importaremos mais no futuro, como o Firebase do Google ou algumas bibliotecas de animação de interface do usuário que você deseja adicionar!

Em seguida, temos a classe ViewController: UIViewController{} isso diz que temos uma classe chamada ViewController e ela herda de UIViewController. Herança na classe significa que nós, a subclasse (ViewController), queremos poder usar todos os métodos, propriedades e outras características da superclasse (UIViewController).

Dentro da nossa classe ViewController, temos o seguinte:

Isso é chamado de função. Essa função específica diz o que deve acontecer quando essa exibição for carregada inicialmente. Por exemplo, se quisermos que uma variável Star seja sempre 0 quando esta view for carregada, teremos var star = 0 aqui.

Agora eu quero que você olhe para a seção intermediária do seu Xcode, na barra superior deve haver um sinal de + assim:

Clique nele e veremos uma lista de objetos que podemos arrastar e soltar em nosso Storyboard principal.

Como você vê no Xcode, temos todos esses objetos predefinidos prontos para serem usados ​​por nós. Então, vamos arrastar os objetos Label e Button para o nosso Story Board principal.

Como você pode ver quando soltamos o objeto Label pela primeira vez em nosso storyboard, podemos soltá-lo onde quisermos, do tamanho que quisermos. Então, vamos expandir nosso rótulo para a largura das primeiras linhas pontilhadas azuis nos lados esquerdo e direito. Essas linhas são o que o Xcode está nos dizendo sobre a “zona segura” para a existência de nossos objetos. Vamos também alterar o texto de Label para Hello World nesse meio tempo, clicando duas vezes no objeto Label.

Agora, antes disso, quero que olhemos para a seção quadrada amarela na imagem acima. Isso é chamado de Attribute Inspector , onde podemos alterar coisas como a cor do texto, fonte, tamanho da fonte, etc., para o objeto selecionado. Aqui vamos alterar o tamanho da fonte para 50 e o texto de Label para Hello World, como vemos abaixo.

Em seguida, faremos a mesma coisa para o objeto Button. Vou economizar algum tempo e passar para você fazer isso (definitivamente não estou sendo preguiçoso aqui )

Como resultado final, você deve ter algo parecido com isso. Agora estamos (um pouco) seguros para dizer que nossa parte da interface do usuário está completa! Dê um grande tapinha nas costas

Agora, aqui está a grande questão: como nosso incrível aplicativo sabe o que fazer quando um usuário toca no botão? Ou o que deve fazer quando o usuário toca no botão? Ou o que o App deve fazer quando detecta que nossos usuários estão passando por alguma crise existencial como o escritor?

Bem, a última pergunta provavelmente está além do escopo deste tutorial, mas ei, podemos resolver as duas primeiras sem problemas.

O Xcode nos fez um favor e tornou isso super simples: Control + Clique no Obecjt e arraste-o para o arquivo ViewController da seguinte forma:

Tenha muito cuidado para NÃO arrastá-lo para o método viewDidLoad().

Uma caixa de diálogo aparecerá como a que vemos na seção quadrada amarela, e o Xcode solicitará um nome para este rótulo, vamos chamá-lo de helloWorldText . Essa convenção de nomenclatura é chamada de Camel Casing.

Agora que temos nosso Label conectado ao nosso código! Podemos dizer-lhe programaticamente para fazer o nosso lance! Muwahahaha!

Observe que você pode ver o círculo preenchido pela linha de código IBOutlet lá. Isso significa que este Objeto está conectado a algo no Storyboard.

Agora, para o botão, faremos a mesma coisa, mas um pouco diferente; queremos que nosso botão seja uma ação, algo com o qual possamos interagir e não apenas para exibição. Então, vamos fazer o seguinte

Certifique-se de que em Conexão, Ação esteja selecionada. Podemos chamá-lo de HelloWorldAction aqui. Na seção Evento é onde definimos o que acontece quando o usuário faz algo aqui. Aqui selecionamos Touch Up Inside, o que significa quando o usuário toca (toca e solta) o botão.

Agora podemos dizer o que nosso aplicativo deve fazer quando o usuário toca nele de forma programática! Viva See More

Tudo bem, vamos chegar às partes interessantes do nosso aplicativo. Vamos adicionar duas linhas de código em nosso UILabel:

var olaTextNumber = 0

var helloTextArray = ["olá mundo", "Hej Verden!", "Hallo Wereld!", "Ciao mondo!", "Hei Verden!", "你好世界!"]

Vamos discutir um pouco sobre o que são essas duas variáveis.

helloTextArray é o Array que queremos usar para escolher nosso “Hello World” no idioma diferente aqui. Aqui temos um array String de 6 Strings (Strings são apenas um tipo com “” nele). Como em muitas outras linguagens, o Array começa com 0, não 1! Portanto, tenha cuidado ao percorrer os Arrays do Swift!

Então helloTextArray[0] será “hello world”, helloTextArray[3] será “Ciao mondo” e helloTextArray[5] será “你好世界! ”

Aqui está um link para a documentação Swift da Apple sobre Array. Você pode ler mais a fundo sobre isso aqui:

Como vimos acima, para obter um elemento de hellTextArray, precisamos dizer qual número queremos (então primeiro dizemos helloTextArray[0], segundo helloTextArray[1], terceiro helloTextArray[2] … etc ) mas não podemos simplesmente digitar cada um manualmente, nem devemos esperar que nossos usuários insiram um número para nós (sempre espere o mínimo do usuário. Um princípio que aprendi). Então, o que fazemos?

Aí vem helloTextNumber. helloTextNumber é a variável Integer (Int) que queremos usar como um espaço reservado para qual elemento de nossa matriz queremos exibir. Teremos um método que gera um Integer aleatório entre 0 e 5 e utilizamos helloTextNumber para guardar esse número para nós. Assim, podemos exibir um elemento de nosso helloTextArray aleatoriamente. Se você está um pouco confuso sobre esta parte, não se preocupe, isso será esclarecido na próxima parte.

Aqui está o código que eu quero que você adicione:

Vamos ver o que dentro do nosso bloco de código hellowWorldAction faz.

Aqui definimos nosso helloTextNumber como Int.random(in:0…5). O que esta linha de código significa é que queremos que nosso helloTextNumber seja um Integer gerado aleatoriamente de 0 a 5 inclusive (o que significa incluindo 5).

Aqui está algo que eu quero ir um pouco mais longe também. Vamos falar sobre a próxima linha

helloWorldText.text = helloTextArray[helloTextNumber]

No Swift, essa notação de ponto segue a regra de

Quem.O que = Valor

que se decompõe em:

“Quem precisa ser mudado”

"ponto"

“o que precisa ser mudado”

"é igual a"

“para o que deve ser mudado.”

Assim, com nosso código, estamos dizendo que:

Queremos que o texto (o que) de helloWorldText (quem) seja alterado para o elemento helloTextNumber de helloTextArray.

Então, quando executarmos esta linha de código, estaremos alterando helloWorldText para exibir qualquer elemento no helloWorldTextArray o número gerado aleatoriamente pelo método Int.random() gerado para nosso helloWorldTextNumber.

Agora, quando executarmos nosso simulador (commnad + r, ou o botão ▶️ na barra superior do Xcode), ao clicarmos em nosso botão, nosso texto deve mudar sempre que pressionarmos o botão!

Viva! Concluímos a parte de codificação do nosso aplicativo!

Uma última coisa. Nosso plano de fundo é realmente meio feio Gostaríamos de adicionar algum tipo de imagem de plano de fundo para que não fique tão simples. Então, encontre uma imagem que você realmente goste de adicionar como plano de fundo para seu aplicativo. Para mim, usarei a imagem da terra (já que é olá, mundo, certo?).

Agora vamos clicar em 'Assests' na pasta Hello World, e você deve ver algo como o abaixo. Arraste a imagem que você escolheu e solte-a na coluna com “AccentColor” e “Appicon”. É aqui que nossa imagem residirá e será chamada para ser usada.

Agora vamos voltar para 'Main' e soltar um objeto Image da biblioteca de objetos (se você esqueceu como fazer isso, role para cima para ver onde falamos sobre os objetos Label e Button). Quero que você expanda o objeto Imagem tão grande que cubra toda a tela do seu telefone. Agora, quero que você clique no objeto Image e vá para os Inspetores (o painel à direita) e procure por isto:

Em Visualização de imagem, quero que você clique no menu suspenso Imagem e selecione a imagem de plano de fundo que você soltou em Ativos anteriormente. É aqui que podemos definir qual objeto de imagem deve ser exibido sem precisar codificar nada nele. Organizado! Quanto menos codificação melhor!

Agora sua tela pode ser algo como isto:

Espere um minuto... o que está acontecendo aqui? O que aconteceu com nosso rótulo e botão que trabalhamos tanto para fazer?

O que aconteceu aqui é simplesmente um problema de camada. Imagine que temos um prato, uma maçã e uma laranja. O que fizemos foi mostrar primeiro a Maçã e a Laranja, depois colocamos o prato em cima das duas, daí só vemos a tarde (a imagem de fundo), e não a nossa maçã (etiqueta) nem a laranja (botão). O que queremos é colocar nosso prato primeiro, depois nossa maçã e laranja por cima.

Então, como fazemos isso? Simplesmente temos que excluir todo o nosso projeto e refazer tudo?

Bem, se você quiser fazer isso para solidificar o que aprendeu aqui, será mais do que bem-vindo! MAS a Apple nos deu uma maneira muito mais simples de fazer isso.

No lado esquerdo da captura de tela anterior, vemos 'View Controller Scene'. Abaixo disso temos 'View Controller' e abaixo disso temos nossa 'View'. Esta é a camada de nossa visualização atual com nossos objetos nela (rótulo, botão e imagem) junto com a 'área segura' padrão, as linhas pontilhadas azuis que vemos quando arrastamos nossos objetos.

Agora basta arrastar o objeto de imagem da parte inferior para a direita abaixo de 'Área segura' da seguinte forma:

E voilá! Vemos nosso Label e Button! E quando executamos este aplicativo em nosso simulador, devemos ver tudo funcionando conforme o esperado!

Espero que isso tenha ajudado você a começar bem sua jornada de aprendizado do iOS. Por favor, deixe um comentário e bata palmas se você achar isso útil

Mas continuarei escrevendo mais tutoriais no futuro, não importa o que aconteça que pena se você não gosta de mim

Paz ✌