1 Tópico UM

Meu primeiro app para iOS – Tópico UM Por André Luiz Salla

Quando estamos começando a aprender algo

novo, a primeira coisa que queremos é ver resultados;

ver algo em ação. Aqui não vai ser diferente.

Se esse é o primeiro tópico que você está lendo,

sugiro que comece pelo Tópico ZERO, Desenvolvendo

apps nativos para iOS, para que você possa ter uma ideia

do que lhe espera, e do que você precisa para começar a

desenvolver seus apps.

De início, vou pressupor que o “ambiente de

desenvolvimento” já esteja criado (no nosso caso, é só

ter instalado o XCode no seu OS X).

Nos exemplos e imagens à seguir, serão usados

o XCode 6.2, rodando sobre a versão Yosemite do OS X

(10.10.3).

Mãos à obra!

Quando você abrir o XCode, você verá uma tela

semelhante à da Imagem 2. Essa é a tela inicial do XCode.

Ela exibe os arquivos e projetos recentemente abertos à

direita, assim como algumas opções para abrir ou iniciar

um projeto à esquerda.

Vamos então criar nosso primeiro projeto.

MeuPrimeiroApp

1 - No menu do XCode, vá em "File -> New ->

Project...". (Imagem 1)

“Finalmente vou ver alguma

coisa acontecer! Quero meu

app rodando já!!!”

2 Meu primeiro app para iOS

Imagem 1: Criando um novo projeto

Como é possível ver, vamos nos deparar com

muitos atalhos enquanto estivermos usando o XCode.

Vale a pena tentar memorizar alguns deles, e resistir à

tentação de usar os menus. Com o tempo, o uso desses

atalhos irá se tornar automático, e você irá começar a se

perguntar onde era que você clicava pra exibir ou ocultar

algum assistente.

Para que ninguém se perca, esses são os botões

aos quais os símbolos se referem:

SÍMBOLO TECLA

⌘ Command

⌃ Control

⌥ Option

⇧ Shift

Imagem 3: Templates disponíveis

2 - Após o passo 1, você verá uma tela como

na Imagem 3. Nela selecionaremos o template para o

nosso novo projeto.

Existem vários templates pré-moldados para

aplicações iOS. Na maioria dos exemplos iremos utilizar a

Single View Application. A Single View Application trará

uma única tela pré-criada, onde iniciaremos o

desenvolvimento da nossa aplicação (o que não significa

que o app terá apenas uma tela).

3 - Nesse ponto, iremos colocar o nome do

nosso projeto, assim como algumas informações

adicionais. Após preencher os dados, clique em Next.

Imagem 2: Tela inicial do XCode

3 Tópico UM

Imagem 4: Dados do projeto

Product Name: É, literalmente, o nome do

produto; o nome que você pretende dar à sua aplicação.

Organization Name: Por padrão, o

Organization Name vem carregado com o nome do seu

usuário, no entanto esse valor pode ser alterado

conforme sua necessidade. Esse campo é usado para

designar o nome do desenvolvedor ou empresa

responsável pelo app.

Organization Identifier: O organization

identifier é um identificador único para a Empresa, usado

pelo XCode para que se possa formar o Bundle Identifier.

A Apple recomenda, em seu Guia de Distribuição de App

(App Distribution Guide) utilizar uma nomenclatura de

domínio reverso para criar o Organization Identifier. Por

exemplo: se a empresa GeekDotCom resolva

desenvolver um app para iOS usando o XCode. Seu

Organization Identifier poderia ser

“br.com.geekdotcom”.

Bundle Identifier: Por padrão, o Bundle

Identifier é composto pelo Organization Identifier +

Product Name, e não pode ser alterado no momento da

criação do projeto (é possível alterá-lo mais tarde). É

muito importante que o Bundle Id seja único para sua

aplicação, pois ele será utilizado para identificar

unicamente sua aplicação. Por exemplo: recursos como

o In-App Purchase (serviço que permite realizar

“compras” dentro do seu aplicativo, como filtros para

apps de edição de fotos) utilizará o Bundle Id para

identificar a sua aplicação.

Language: É possível escolher qual a linguagem

padrão que será utilizada no desenvolvimento da sua

aplicação. Nesse exemplo em específico, pouco importa

a linguagem, pois não entraremos em detalhes sobre

linguagem (e nenhum código será escrito). As duas

opções de linguagem, como citadas no tópico ZERO, são

Objective-C e Swift.

Devices: Os dispositivos para o qual você está

desenvolvendo (seu target). Você pode escolher como

target iPads ou iPhones. Ainda há opção Universal, que

compreende tanto iPad quanto iPhones.

Use Core Data: O Core Data é uma biblioteca

para persistência de dados no iOS, que facilita a

manipulação de entidades dentro da aplicação. Como

não iremos persistir dados nessa aplicação, não temos

necessidade de utilizar as bibliotecas do Core Data. Se

mantivéssemos marcada essa opção, o XCode importaria

o Core Data para nossa aplicação, e criaria os métodos

necessários para sua utilização na classe AppDelegate,

assim como criaria também um arquivo de Data Model,

onde poderíamos mapear nossas entidades e seus

relacionamentos (falarei mais especificamente do Core

Data em tópicos futuros).

4 – Selecione o local onde o diretório do seu

projeto será criado. Após, clique em Create para criar seu

projeto. (Imagem 5)

Imagem 5: Destino do projeto

Apesar de não ser o momento para se

aprofundar em detalhes como controle de versão, vale a

pena ressaltar aquele checkbox logo acima dos botões.

Por padrão, o checkbox de Source Control vem

selecionado para todo novo projeto. Quem já trabalha ou

trabalhou com Git e Controle de Versão já conhece as

funcionalidades desses recursos. Não vou entrar em

detalhes agora sobre o que é ou como funciona o Source

Control, ou mesmo um Git Repository. Por hora, basta

para nós sabermos que o XCode possui uma boa

integração com recursos de controle de versão, e que,

4 Meu primeiro app para iOS

mesmo se desmarcado, é possível adicionar o controle

de versão posteriormente ao seu projeto.

5 – Após criado, essa será a cara inicial do seu

projeto. (Imagem 6)

LEGENDA

1 Barra de Navigators

2 Barra de Utilities

A Alterna para Standard Editor

B Alterna para Assistant Editor

C Alterna para Version Editor (usado para

controle de versão)

D Exibe/Esconde os Navigators

E Exibe/Esconde o Debug Area

F Exibe/Esconde os Utilities

Utilizar as teclas de atalho fazem nosso

trabalho muito mais rápido. Abaixo, vou citar alguns dos

principais atalhos que você utilizará nesse tópico.

COMANDO TECLAS DESCRIÇÃO

Assitant

Editor ⌥⌘⏎

Alterna para o modo

Assistant Editor, com

função semelhante ao

botão B.

Exibir

Navigator ⌘0

Exibe/Esconde a barra de

Navigators (1), com

função semelhante ao

botão D.

Exibir

Utilities ⌥⌘0

Exibe/Esconde a barra de

Utilities (2), com função

semelhante ao botão F.

Standart

Editor ⌘⏎

Alterna para o modo

Standart Editor, com

função semelhante ao

botão A.

Exibir ou esconder algumas das barras laterais

vai do gosto do desenvolvedor. Se você tem um Mac com

tela pequena, ou está trabalhando com telas ou

storyboards grandes (vou falar especificamente sobre

storybards em um tópico futuro), eu sugiro que você as

oculte, para facilitar seu trabalho.

Imagem 6: Tela inicial do projeto

5 Tópico UM

6 – Vamos então iniciar! Abra o arquivo

Main.storyboard no Project Navigator (primeira página

na área de Navigator).

Imagem 7: Main.storyboard

Ao abrir o Main.storyboard, você encontrará

sua primeira “tela” já criada, em branco. Quando você

abrir um arquivo de storyboard ou xib (um outro modo

de criar interface gráficas, precursor dos storyboards),

quem entra em ação é o Interface Builder (Imagem 8). É

ele que permite que você edite visualmente suas UI

(interface de usuário).

No Interface Builder, você pode utilizar o zoom

para visualizar melhor sua tela (por enquanto falaremos

de telas, mas não estranhe ler em tutoriais pela internet

o termo scene, que explicarei em um tópico específico de

storyboards). No entanto, você não pode editá-la

enquanto estiver no modo em escala. Para que as opções

de edição drag-and-drop estejam habilitadas, por

exemplo, é necessário que o zoom esteja em 100%.

7 – Selecione o objeto Label na página de

Objetos (terceira página da Library bar, encontrada na

metade de baixo da Utilities Area) e arraste-o para o

meio da tela da sua aplicação (Imagem 9). Você pode

utilizar as guias azuis que irão aparecer na sua tela para

ajudá-lo a centralizar seu objeto.

Imagem 9: Arrastando objetos da Library Bar

Imagem 8: Interface Builder

6 Meu primeiro app para iOS

8 – Após posicionar a Label na tela, selecione

o objeto e abra o Attributes Inspector (quarta página na

metade de cima da Utilities Area). Altere o atributo Text

para “Hello World”, conforme a Imagem 10.

Imagem 10: Attributes Inspector

9 – Faça os ajustes necessários para que o

texto da sua Label apareça todo na tela, sem as

reticências no final. (Imagem 11)

Imagem 11: Ajustando Label

10 – Após ajustar a Label, vamos rodar nossa

aplicação! Na barra superior, selecione o destino da sua

aplicação, onde ela irá rodar. Na Imagem 12, o destino

selecionado é o iPhone 6, rodando pelo iOS Simulator.

Após selecionado o destino, pressione o botão Run

(botão parecido com um play).

Imagem 13: Rode sua aplicação

Sobre o iOS Simulator

O iOS Simulator é uma poderosa ferramenta

que permite ao desenvolvedor simular o dispositivo real

da Apple (iPhone ou iPad), emulando seu sistema

operacional, o iOS.

Nem todos os recursos do sistema operacional

estão disponíveis no Simulator (como Push

Notifications), mas ainda assim ele é uma mão na roda

para o desenvolvedor.

Uma dica que eu dou é que você altere a escala

(zoom) do seu Simulator caso você tenha um Mac com

tela pequena ou baixa resolução (acredite, algumas

pessoas penam bastante até descobrirem que existe essa

possibilidade).

Não vou entrar em maiores detalhes sobre o

Simulator nesse momento. Quando eu falar sobre algum

recurso específico do Simulator, explicarei

detalhadamente sua função (como geo localização, por

exemplo).

11 – Sua primeira aplicação está finalmente

rodando!! (Imagem 13)

Imagem 12: Aplicação rodando no iOS Simulator

7 Tópico UM

É, nosso Hello World ficou torto... mas por que isso?

Quando adicionamos nosso Label à tela, ele foi

posicionado de modo absoluto, ou seja, com uma

posição fixa horizontal e vertical. No entanto, como

estamos lidando com uma aplicação que pode rodar em

dispositivos de diversos tamanhos (o iPhone 5, 5c e 5s

têm telas de 4”, enquanto o 6 tem tela de 4,7” e o 6 Plus

de 5,5”), o que você posicionar na tela no storyboard

pode não corresponder à realidade do dispositivo

escolhido.

Como eu posso “prever” isso?

O XCode conta com um recurso muito

interessante para ajudar no desenvolvimento de UI: o

Preview. Com o Preview, é possível pré-visualizar sua tela

para diferentes dispositivos, versões do iOS e inclusive

“Localizações” (Locations, que permitem a

internacionalização do seu app).

O Preview é acessível pelo Assistant Editor,

conforme é possível ver na Imagem 14.

Imagem 14: Acessando o Preview

No Preview, é possível adicionar novos

dispositivos para pré-visualização, clicando sobre o sinal

de soma ( + ) no canto inferior esquerdo do Preview, e

selecionando à configuração desejada. (Imagem 15)

Imagem 15: Adicionando novas configurações ao Preview

Vou precisar puxar o Label na mão e centralizar na tela?

Preciso fazer isso via código???

Não, o iOS conta com um recurso que facilita (e

muito) a vida dos desenvolvedores, quando a questão é

posicionamento de objetos: as Constraints.

Por hora, não se preocupe com o conceito e

nem em como funciona as Constraints no iOS. Eu

explicarei isso detalhadamente quando falarmos de

Relative Layout e Size Classes, em futuros tópicos. Tudo

à seu tempo!

12 – Selecione sua Label, segure Control e

clique e arraste sua Label para o interior da sua tela. Ao

soltar, o popup semelhante à Imagem 16 aparecerá,

indicando a relação entre os dois objetos. Selecione as

opções conforme abaixo, para centralizar sua Label

horizontalmente e verticalmente.

Imagem 16: Centralizando a Label

13 – Rode novamente sua aplicação e veja o

resultado!

That is all, folks!

Esse foi o primeiro tópico “mão na massa”

dessa série de tópicos. Nosso primeiro aplicativo está

rodando e já estamos livres da maldição do Hello

World!!! Agora é com você! Melhore essa aplicação.

Explore os demais objetos. Investigar é sempre uma

forma de se aprender coisas novas.

Nos próximos tópicos, vamos continuar nossa

incursão no mundo do iOS. Quem sabe na próxima eu

não deixo vocês escreverem um pouco de código...

(hehehe)

Até a próxima!

“Epa, tá torto”