iOS do princípio com Swift: Criando seu primeiro aplicativo iOS

Apesar de ja termos aprendido um pouco sobre desenvolvimento iOS nesta série, tenho certeza que você esta ansioso para começar a construir aplicativos iOS que fazem algum coisa útil ou legal. Neste tutorial, seu desejo será concedido. Usando o Xcode, você irá criar um projeto iOS do começo, modificar o código fonte do projeto e rodar seu aplicativo no simulador ou em um dispositivo físico.

Apresentando o Colorific

Colorific é o nome do aplicativo que você esta preste a construir. A idéia por trás do Colorific é simples, a tela do aplicativo mudará de cor a cada toque do usuário. Mesmo que o conceito seja básico, o Colorific é perfeito para se começar e explorar as entradas e saídas do desenvolvimento iOS.

1. Criar um novo projeto no Xcode

Como vimos anteriormente nesta serie, todo aplicativo iOS passa a vida como um projeto do Xcode. O que é um projeto do Xcode? Um projeto do Xcode é um container ou repositório que contém os arquivos, os ativos e informações que são exigidos para construir um ou mais produtos.

Note que isto não se limita a um código-fonte e ativos do projeto, tais como imagens e outras mídias. Um projeto também mantém controle sobre as conexões entre seus vários elementos e sabe como construir os produtos finais de seus elementos.

Abra o Xcode e crie um novo projeto do Xcode escolhendo New > Project... no menu File. Você pode fazer o mesmo usando Shift + Command + N.

Se a janela de boas-vidas do Xcode aparecer quando você inicia o Xcode, então eu sugiro que você feche ela para que você aprenda como criar um projeto usando o menu do Xcode.

2. Escolha um template da aplicativo

Iniciar um novo aplicativo ou projeto é fácil no Xcode, graças aos templates de aplicativo que ele inclui. Para o aplicativo que vamos criar, nós precisamos do template Single View Application. Sinta-se livre para dar uma olhada em outros templates de aplicativo, mas tenha certeza que escolheu o template Single View Application para o Colorific.

3. Configurar o projeto

Após selecionar o template Single View Application e clicar no botão Next, o Xcode apresenta para você uma lista de opções para configurar seu novo projeto. Vamos dar uma olhada nessas várias opções.

• Product Name: O nome do produto será o nome do seu aplicativo. Eu nomearei meu aplicativo de Colorific, mas sinta-se livre para nomear seu aplicativo como achar melhor.
• Organization Name: O nome da organização pode ser seu próprio nome ou o nome da sua empresa. O Xcode usa o nome da organização para vário propósitos, como adicionar uma notificação de direitos autorias em cada arquivo fonte.
• Organization Identifier: O identificador da organização é uma literal única que o Xcode usa (junto com o nome do produto) para criar o identificador do pacote do aplicativo. A Apple recomenda adotar o notação do nome do domínio reverso para evitar colisão de nomenclaturas. Note que o domino que você usa não tem laços com o DNS (Domain Name System). Por exemplo, minha companhia se chama Code Foundry BVBA e é localizada na Bélgica, o que significa que o meu identificador da companhia é be.codefoundry. No entanto, eu poderia usar também be.code-foundry ou com.codefoundry. Para o propósito deste tutorial, eu defini o identificador da companhia como com.tutsplus.
• Bundle Identifier: Mesmo que você não especifique o identificador do pacote quando cria um novo projeto, você pode altera-lo uma que você tenha criado seu projeto. Por padrão, o identificador do pacote é a combinação do identificador da organização e o nome do produto. Tenha em mente que os espaços no nome do produto são substituídos com traços no identificador do pacote, porque o identificado do pacote não pode conter espaços em branco.
• Language: A versão atual do Xcode suporta ambas, o Objective-C e o Swift. Esta serie foca no desenvolvimento iOS usando o Swift 2.1, então esta é a opção que escolhi para este projeto.
• Devices: Na versão atual do Xcode (7 até o momento desta escrita), o menu de dispositivos contem três opções: Universal, iPhone e iPad. Esta opção de configuração diz ao Xcode quais dispositivos seu projeto será focado. Selecione a primeira opção, Universal, seu projeto será focado em ambas as famílias de dispositivos iPad e iPhone. O iPode Touch é um membro da família de dispositivos do iPhone como você deve ter imaginado.
• Use Code Data: Se você marcar está opção, o Xcode irá criar alguns arquivos adicionais e adicionar alguns códigos padrões para ajuda-lo a começar com o Code Data, um framework de persistência da Apple para o OS X e o iOS. Como o Core Data não é um tópico para iniciante, vamos deixar está opção desmarcada.
• Include Unit Test: Testar é um aspecto importante para o desenvolvimento de software. O Xcode possui suporte interno para testes unitários. Para manter as coisas simples, entretanto, vamos ignorar está opção por enquanto.
• Include UI Tests: O Xcode 7 é a primeira versão do IDE da Apple que tem suporte interno para o teste da interface do usuário. Isto é um grande negócio para os desenvolvedores do OS X e do iOS. Teste de interface do usuário está fora do escopo desta série, no entanto.

Agora você tem uma boa compreensão das diferentes opções de configuração quando for configurar um novo projeto do Xcode. Para este projeto, eu recomendo que você use as opções que eu mostrei no screenshot acima. Note que a maioria das opções podem ser alteradas facilmente após você ter criado seu projeto. Clique em Next quando terminar de configurar seu projeto.

4. Salvar o projeto

No próximo passo, o Xcode pergunta à você onde você quer salvar seu novo projeto. Você deve ter percebido a pequena caixa de seleção na parte de baixo da janela chamado Create Git repositor on My Mac. O texto cinza abaixo da caixa de seleção descrito Xcode will place your project under version control.

Como eu mencionei anteriormente nesta série, o controle de fontes é indispensável no desenvolvimento de software. Esta série não irá cobrir este tópico com detalhe, mas se você quiser se aprofundar no desenvolvimento de software, então eu recomendo a leitura sobre o controle de fontes.

Git é o mais popular sistema SCM (Source Code Management) na comunidade Cocoa. Entretanto, é perfeitamente possível usar um sistema SCM diferente, como o SVN ou Mercurial.

Diga ao Xcode onde você quer salvar o seu projeto, marque a caixa de seleção para autorizar o Xcode a criar um repositório Git para seu projeto e clique em Create na parte inferior do dialogo.

5. Explorando a User Interface do Xcode.

Antes de seguirmos, eu quero gastar alguns minutos explorando a user interface do Xcode. Há quatro áreas distintas:

• uma barra de ferramentas na parte superior
• uma barra lateral na esquerda
• uma vista principal no centro
• uma barra lateral na direito

Barra de ferramentas

A barra de ferramenta na parte superior contém os botões e menus que você procurará com mais freqüência. Como nós vimos anteriormente nesta serie, os botões para rodar e parar um aplicativo também estão na barra de ferramentas.

O display no centro da barra de ferramenta é similar ao display encontrado no iTunes. Este display informa sobre o estado do seu projeto ou o que o Xcode está fazendo atualmente em segundo plano. Ele irá te dizer, por exemplo, quando a construção irá ser bem sucedida ou falhar.

Os dois segmentos de controle na direita da barra de ferramentas podem ser usados para cusonizar a user interface do Xcode. Brinque com os vários controles para encontrar o que cada um deles alteram na user interface do Xcode.

Navegador

A principal proposta da barra lateral esquerda é a navegação e é muitas vezes referido como navegador do Xcode.

O navegador tem diferentes abas com o Project Navigator na extrema esquerda. A seleção na barra lateral da esquerda determina o que é mostrado na vista principal, a área de trabalho.

Vista principal ou área de trabalho

A vista principal ou área de trabalho é a área onde você vai passar a maior parte do seu tempo. É o laborioso do Xcode e mostra tudo o que está selecionado no navegador.

Inspetor

Enquanto a barra lateral esquerda controla o que está sendo exibido na vista principal do Xcode, o conteúdo da barra lateral direita reflete o que está sendo exibido ou selecionado na vista principal.

A barra lateral direita, também conhecida como inspector, adapta-se a qualquer seleção do usuário na vista principal. 

6. Explorando o projeto

Agora vamos dar uma olhada no projeto em si. O conteúdo do projeto é mostrado no Project Navigator, a primeira aba da barra lateral esquerda. Selecione o primeiro item no Project Navigator e veja os detalhes do projeto na vista principal.

A vista principal é composta por duas seções, uma barra lateral na esquerda e uma vista de detalhe na direita. Na barra lateral, você ve dois itens, o project com um item e o targets com um item.

É importante saber antecipadamente qual a diferença entre o project e o target. Lembre que o project é um repositório para os arquivos, ativos e dados que são exigidos para construir um ou mais produtos. O target refere-se a um desses produtos. O target contém os instrumentos necessários para construir um produto com os recursos do projeto. Isso significa que um project pode conter múltiplos targets para construir múltiplos produtos. Como você pode ver, um projeto do Xcode é mais do que apenas uma pasta com um monte de arquivos nele.

7. Compilar e Executar: Tomada 1

Antes de começarmos a modificar o código-fonte do projeto, pode ser interessante compilar e executar seu novo projeto para ver o que o modelo de aplicativo nos deu de graça. Clique no botão Run na parte superior esquerda e certifique-se de que o esquema ativo esteja configurado para executar o aplicativo no simulador, selecionando o iPhone 6 ou outro simulador para iPhone.

Se deu tudo certo, o simular irá iniciar seu aplicativo e exibir em branco, uma view em branco com a familiar barra de status na parte superior.

8. Modificar a interface

Vamos colocar a mão na massa e modificar a interface do seu aplicativo. Abra o Project Navigator e selecione o arquivo chamado Main.storyboard. Um arquivo com uma extensão .storyboard é um arquivo de interface. Neste arquivo, nós criamos a interface do aplicativo.

O storyboard contém um item, uma view controller com a view branca que você viu no simulador a poucos segundos atrás. A área de trabalho é composta por uma barra lateral mostrando a representação do objeto das cenas do storyboard. A maior parte da área de trabalho contém as cenas ou interfaces do aplicativo.

Selecione o objeto chamada View na View Controller Scene na barra lateral esquerda e veja como a área de trabalho e a barra lateral direita atualizam seu contendo. Um monte de guias aparecem na parte superior da barra lateral direita. Cada aba contém uma coleção de atributos relacionados ao objeto chamado View.

A metade de baixo da barra lateral direita contém uma seção com quatro abas. A terceira aba é representada por uma imagem de uma caixa tridimensional. Está caixa é como os objetos são geralmente mostrados no Xcode.

Selecione a aba com o ícone de caixa e percorra a lista que aparecer. A lista é referida como Object Library e contém vários elementos da interface, como botões, slides e switches.

No começar este tutorial, eu disse a você que iríamos criar um aplicativo funcional. O usuário será capaz de tocar na tela para trocar sua cor.

Há várias maneiras de detectar toques em um aplicativo iOS. Uma solução é usar um botão. Na Object Library, procure pelo item chamado Button e arraste ele da Object Library para o view em branco na área de trabalho do Xcode.

O usuário será capaz de clicar em qualquer parte da tela, o que significa que o botão deverá cobrir o tela inteira. Você reparou nos seis pequenas quadrados nas bordas do botão? Se mover os pequenos quadrados, você pode modificar a dimensão do botão. Ajuste o tamanho do botão para cobrir toda a tela. Não se preocupe com a barra de status na parte superior da tela.

A view atrás do botão é a view que irá mudar de cor quando o usuário tocar na tela. No momento, o botão está bloqueando a visão da view do usuário então so precisamos modificar os atributos dos botões.

Você deve ter notado que o botão foi adicionado a lista de objetos na barra lateral esquerda, abaixo do objeto chamado View. Selecione o botão na lista de objetos e selecione Atributes Inspector na barra lateral direita - a quarta aba da esquerda. Precisamos fazer apenas dois ajustes.

Comece alterando o tipo do botão de System para Custom. Isto tornará o botão transparente.

A segunda alteração que precisamos fazer é instruir o usuário o que fazer, alterando o titulo do botão. O campo de texto após o rótulo Title é o texto que aparece no Button. Altere ele para Tap to Change Color e defina o Text Color para preto para torna-lo legível.

9. Adicione uma ação à View Controller

Se você conhece o padrão MVC (Model-View-Controller), então você está pronto para começar a aprender desenvolvimento em iOS. O padrão MVC é um padrão contido em muitos linguagens e frameworks, como Laravel e Ruby on Rails.

A view em nossa interface cai na categoria V do padrão MVC. A view é controlada pelo controller. De uma olhada no arquivo com este nome no Project Navigator na esquerda. A ViewController.swift representa uma view controller que controla a view em nossas interface.

O que uma view controller faz? A view controller pode fazer qualquer coisa que você quiser, mas sua principal responsabilidade é manipular tudo que acontece na view que ele gerencia. Isto inclui, por exemplo, os toques do usuário. Se o usuário tocar no botão na view, é da view controller a responsabilidade de manipular o evento do toque.

Como manipulamos o evento de toque? No caso do nosso botão, adicionamos uma ação na view controller. Uma ação é um nome fantasia para um método. O que é um método? Um método é uma função no Swift. Espere. O que? Não se preocupe muito com a terminologia neste ponto. Nas próximos duas postagens vamos cobrir a linguagem de programação Swift com mais detalhes. O que você precisa se lembra é que um método é como um método em Ruby e PHP, ou uma função em JavaScritp.

Se você chamar um método de uma view controller, ele fará algo em resposta. Em outras palavras, se o usuário tocar no botão e conectarmos um método para o evento de toque, a view controller irá responder somente ao evento de toque. 

Para adicionar uma ação à view controller que gerencia a view na interface do aplicativo, nós precisamos fazer algumas alterações ao arquivo chamado ViewController.swif. Precisamos apenas adicionar algumas linhas ao código do ViewController.swift. De uma olhada em como eu modifiquei o conteúdo do arquivo.

1

import UIKit

2

3

class ViewController: UIViewController {

4

5

    override func viewDidLoad() {

6

        super.viewDidLoad()

7

        // Do any additional setup after loading the view, typically from a nib.

8

    }

9

10

    override func didReceiveMemoryWarning() {

11

        super.didReceiveMemoryWarning()

12

        // Dispose of any resources that can be recreated.

13

    }

14

15

    @IBAction func changeColor(sender: UIButton) {

16

17

    }

18

19

}

Mesmo que não iremos focar na sintaxe neste tutorial, é fácil de entender o que está sendo feito. O nome da ação ou método é changeColor(_:) e ele tem um parâmetro, sender. O tipo do parametro é UIButton. O que é UIButton? Paciência pequeno gafanhoto.

10. Implementar a ação

Adicionamos uma ação à view controller, mas a ação não faz muito. A ação ainda não tem implementação em seu corpo. Para implementar a ação changeColor(_:), precisamos adicionar uma ou mais instruções entre chaves, como mostrado no trecho de código abaixo. Eu não irei explicar cada linha do código com detalhes, mas vou lhe dar a essência do que está acontecendo.

1

@IBAction func changeColor(sender: UIButton) {

2

    // Generate Random Numbers

3

    let r = CGFloat(arc4random() % 255)

4

    let g = CGFloat(arc4random() % 255)

5

    let b = CGFloat(arc4random() % 255)

6

7

    // Create Color

8

    let color = UIColor(red: (r/255.0), green: (g/255.0), blue: (b/255.0), alpha: 1.0)

9

10

    // Update View

11

    view.backgroundColor = color

12

}

Como você deve saber, é possível quebrar uma cor entre as três cores primeiras: vermelho, verde e azul. Em nossa ação, iremos gerar três números aleatórios entre 0 e 255 e usar esses três números para criar uma cor aleatória.

O método que usaremos para criar a cor é muito descritivo, init(red:green:blue:alpha:). Com a última linha da nossa ação, definimos a cor de fundo da view em nossa interface com esta nova cor, gerada aleatoriamente.  

Comentários são importante quando for ler o código. O que achou dos comentários que coloquei na implementação do changeColor(_:)? Comentario de uma linha começa com duas barras invertidas, //,enquanto que comentários de múltiplas linhas começa com /* e termina com */.

11. Conectar a ação

O método esta implementado, mas nada acontecerá se compilarmos e executarmos o aplicativo. Tente se você não acreditar em mim.

O que está faltando é uma conexão entre o botão e a ação na view controller. Como a view controller irá saber que a ação changeColor(_:) precisa ser ativada quando o botão for tocado?

Fazer esta conexão é simples. Abra o storyboard selecionando o Main.storyboard e selecione o objeto View Controller na View Controller Scene.

Com o objeto View Controller selecionado, abra o Connections Inspector na barra lateral direita - a primeira aba da direita, Se você seguir os passos corretamente, você verá a ação que criamos na seção Received Actions.

Você verá um circulo vazio na direita da ação changeColor(_:). Clique e arraste o circulo para o botão na view da view controller.

Um menu irá aparecer quando você soltar o mouse. O menu contém uma lista de tipos de eventos de toque. O evento de toque que estamos interessados é chamado de Touch Up Inside. Este evento é ativado quando o usuário tocar no botão e tirar seu dedo. Este é o comportamento mais comum para botões.

Após conectar o botão e a ação, você verá que a barra lateral direita refletira a conexão que acabou de fazer. Ótimo. Você acaba de completar seus primeiro aplicativo real.

12. Compilar e Rodar: Tomada 2

Compile e execute seu aplicativo no simulador e comece a tocar a tela do simulador. Toda vez que você tocar na tela, sua cor irá mudar aleatoriamente para uma nova cor. Isso não é legal?

Conclusão

Cobrimos um pequeno pedaço neste tutorial. Mesmo que esta postagem tenha sido um pouco longa, não fizemos muita coisa. Se você souber a teoria, você pode criar o Colorific em menos de cinco minutos. Se você teve algum problema durante este tutorial, então certifique-se de baixar os arquivos fontes no GitHub.

Nos próximos dois tutoriais, iremos explorar o básico da linguagem de programação Swift. Isso irá prepará-lo para as coisas interessantes do resto da série.

Se tiver alguma pergunta ou comentário, você pode deixa-los nos comentários abaixo ou me procure no Twitter.

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!