{"id":2702,"date":"2020-07-28T15:32:00","date_gmt":"2020-07-28T18:32:00","guid":{"rendered":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/?p=2702"},"modified":"2025-09-02T14:03:39","modified_gmt":"2025-09-02T17:03:39","slug":"desenvolvimento-de-aplicativos-utilizando-swift","status":"publish","type":"post","link":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/2020\/07\/28\/desenvolvimento-de-aplicativos-utilizando-swift","title":{"rendered":"Desenvolvimento de aplicativos utilizando SWIFT"},"content":{"rendered":"\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Ol\u00e1 pessoal, tudo bem? Desta vez o PET-Reda\u00e7\u00e3o abordar\u00e1 a linguagem Swift. Swift \u00e9 uma linguagem de programa\u00e7\u00e3o criada pela Apple para o desenvolvimento de aplicativos para Apple TV, Apple Watch, iOS e Mac que foi desenvolvida com o intuito de ser de f\u00e1cil uso, com c\u00f3digo aberto a todos que queiram cooperar. Em compara\u00e7\u00e3o com outras linguagens como Objetive-C e Python 2.7, a linguagem Swift obteve um desempenho relevante em testes,foi utilizado o algoritmo de busca em profundidade (DFS) com 10000 n\u00fameros inteiros, tendo como resultado 2,6 e 8,4 vezes mais r\u00e1pida que essas linguagens, respectivamente. Usu\u00e1rios de Linux e Mac podem desfrutar de todos os recursos que esta linguagem pode oferecer. Que tal desenvolvermos um joguinho simples para iOS e vermos o qu\u00e3o interessante \u00e9 o Swift? Iremos desenvolver um Jokenp\u00f4 ou Pedra, Papel ou Tesoura!<\/p>\n

Para isso vamos utilizar a IDE Xcode 11. Abrimos o Xcode e criamos um novo projeto Xcode:<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\u00a0<\/div>\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Ao clicar em criar um novo projeto vamos precisar escolher o tipo de projeto a ser desenvolvido, onde escolhemos um aplicativo para iOS de visualiza\u00e7\u00e3o simples e passamos para a pr\u00f3xima configura\u00e7\u00e3o:<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\u00a0<\/div>\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Devemos colocar um nome para o projeto, selecionar a linguagem de programa\u00e7\u00e3o (no nosso caso Swift) e a interface de usu\u00e1rio como storyboard, e escolhemos, ent\u00e3o, um diret\u00f3rio para salvar o projeto.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\u00a0<\/div>\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Aparecer\u00e1 o projeto criado e a seguinte tela:<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\u00a0<\/div>\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Agora vamos criar um novo arquivo clicando no nome do projeto e, em novo arquivo, escolhemos um nome (no nosso caso estadoJogo do tipo Swift). Neste arquivo iremos colocar os estados poss\u00edveis do jogo – in\u00edcio, derrota, empate e vit\u00f3ria – atrav\u00e9s de uma enumera\u00e7\u00e3o (enum em Swift), utilizando o case para os casos poss\u00edveis do estado do jogo. A imagem abaixo mostra como ficar\u00e1 nosso arquivo estadoJogo.swift .<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\u00a0<\/div>\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Criamos ent\u00e3o, outro arquivo, com o nome Sinais do tipo Swift. Vamos incluir a biblioteca GameplayKit, que engloba uma fun\u00e7\u00e3o que iremos utilizar: a de randomizar. Para isso, utilizamos import e o nome da biblioteca. Vamos criar uma constante que ser\u00e1 denominada escolha_aleatoria e fazemos a randomiza\u00e7\u00e3o de 0 a 2 representando as 3 possibilidades de jogada do computador. Para isso utilizamos a fun\u00e7\u00e3o da biblioteca GameplayKit GKRandomDistribution(lowestValue: 0, highestValue: 2). Criamos ent\u00e3o a fun\u00e7\u00e3o chamada sinal_aleatorio para especificar qual foi o sinal sorteado pela fun\u00e7\u00e3o acima. Com essa finalidade, cria-se a constante sinal e utilizamos a fun\u00e7\u00e3o com o intervalo que foi criada (escolha_aleatoria), junto com a fun\u00e7\u00e3o para ser feito a randomiza\u00e7\u00e3o nesse intervalo definido (nextInt). Fazemos a sele\u00e7\u00e3o: se o n\u00famero aleat\u00f3rio for igual a 0, ser\u00e1 pedra, se igual a 1 ser\u00e1 papel e se igual a 2 ser\u00e1 tesoura.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\u00a0<\/div>\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Vamos criar outra enumera\u00e7\u00e3o para os poss\u00edveis sinais do jogo – pedra, papel ou tesoura. Para isso, vamos utilizar o case. Criamos uma vari\u00e1vel do tipo String para os emojis que ser\u00e3o utilizados e ser\u00e1 utilizado um switch (switch self no Swift) com as tr\u00eas possibilidades: pedra, papel ou tesoura e os respectivos emojis para represent\u00e1-los.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\u00a0<\/div>\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Devemos criar, tamb\u00e9m, uma fun\u00e7\u00e3o para verificar se o jogador vai ganhar, perder ou se vai empatar com o computador. Para isso, utilizamos um switch case (switch self no Swift) e para cada uma das tr\u00eas possibilidades, pode-se ter vit\u00f3ria, perda ou empate.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\u00a0<\/div>\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

A parte de jogabilidade est\u00e1 pronta. Vamos agora no arquivo Main.storyboard para a cria\u00e7\u00e3o da parte visual do aplicativo. Clicamos em View Controller e depois em + para adicionar os elementos a tela.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\u00a0<\/div>\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Para o joguinho vamos necessitar dos r\u00f3tulos (Label), que s\u00e3o basicamente textos, e dos bot\u00f5es (Button). Adicionamos ent\u00e3o conforme a imagem abaixo. Para alterar um r\u00f3tulo ou bot\u00e3o, mudamos o texto nas configura\u00e7\u00f5es de cada elemento. Nossa interface deve ficar mais ou menos assim:<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\u00a0<\/div>\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Agora estamos na etapa final, e temos que resolver as intera\u00e7\u00f5es da tela com a jogabilidade. Para isso, vamos abrir o arquivo ViewController.swift e deixar ao lado do arquivo Main.storyboard. Vamos clicar com o bot\u00e3o direito em cada um dos bot\u00f5es e arrastar at\u00e9 o arquivo ViewController, dentro da classe ViewController. A seguir, ser\u00e1 requisitado o nome do r\u00f3tulo\/bot\u00e3o que desejarmos. Ap\u00f3s realizar a a\u00e7\u00e3o com todos, teremos a seguinte situa\u00e7\u00e3o:<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\u00a0<\/div>\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Criamos uma vari\u00e1vel (var em Swift) para receber o atual estado do jogo (in\u00edcio) e ter um controle. Utilizamos a seguinte sintaxe:\u00a0var<\/strong>\u00a0atualEstado: estadoJogo = estadoJogo.inicio\u00a0.\u00a0Devemos criar uma fun\u00e7\u00e3o para resetar o display para seu estado inicial, onde alguns elementos devem estar desabilitados\/escondidos e outros n\u00e3o. Fazemos isso utilizando o nome do elemento e as propriedades isHidden (true se o elemento deve estar escondido, false para o contr\u00e1rio) e isEnabled (true se o elemento deve estar desabilitado, false para o contr\u00e1rio):<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\u00a0<\/div>\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Agora devemos criar a fun\u00e7\u00e3o do jogo, e para isso colocamos os bot\u00f5es das tr\u00eas possibilidades como n\u00e3o habilitados, criamos uma constante para receber um sinal aleat\u00f3rio (representando a jogada do computador), e a label do rob\u00f4 ent\u00e3o receber\u00e1 o emoji atualizado conforme a jogada que foi randomizado o que representa o computador, o estado ent\u00e3o \u00e9 atualizado conforme \u00e9 verificado a situa\u00e7\u00e3o da partida atrav\u00e9s da verifica\u00e7\u00e3o das jogadas. Criamos, ent\u00e3o, um switch para verificar o atual estado do jogo e atualizar o r\u00f3tulo – se houve uma derrota, empate, vit\u00f3ria ou se ser\u00e1 iniciada uma nova partida. Teremos o seguinte c\u00f3digo:<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\u00a0<\/div>\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Agora vamos atualizar a tela conforme o que o jogador escolheu para deixar apenas a sua escolha:<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\u00a0<\/div>\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Para finalizar, escolhemos as a\u00e7\u00f5es que ocorrer\u00e3o quando os bot\u00f5es forem clicados, para isso clicamos com o bot\u00e3o direito do mouse e arrastamos at\u00e9 a classe ViewController, da mesma forma que foi feito anteriormente, mas dessa vez representar\u00e1 uma a\u00e7\u00e3o que deve conter um nome. Ficar\u00e1 assim:<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\u00a0<\/div>\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Adicionamos ent\u00e3o, as fun\u00e7\u00f5es que ocorrer\u00e3o cada vez que um desses bot\u00f5es for clicado:<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\u00a0<\/div>\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Nosso jogo est\u00e1 pronto, para test\u00e1-lo clicamos no bot\u00e3o de executar, ent\u00e3o o simulador e o aplicativo ser\u00e3o iniciados.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\"\" \"\" \"\"<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

\u00a0<\/p>\n

\u00a0<\/p>\n

\u00a0<\/p>\n

\u00a0<\/p>\n

\u00a0<\/p>\n

\u00a0<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\u00a0<\/p>\n

\n
\n
\n
\n
\n
\n

\u00a0<\/p>\n

\u00a0<\/p>\n

\u00a0<\/p>\n

Agora resta nos divertir e aproveitar o jogo simples e r\u00e1pido de desenvolver que fizemos. Conseguimos entender melhor como funciona e como desenvolver um aplicativo utilizando essa incr\u00edvel linguagem, boas cria\u00e7\u00f5es! =)<\/p>\n

Refer\u00eancias<\/strong>:<\/p>\n