xCode: Crie a sua primeira aplicação para iPhone

xcode

Já aqui falámos antes de programação para iOS e hoje vamos aprender a criar um novo projecto no xCode (IDE para programação iOS). Neste tutorial vamos criar uma aplicação muito simples, que servirá como exemplo.

Primeiro iniciamos a aplicação xCode.

Screen Shot 2016-01-17 at 14.11.49.png

Através desta janela podemos criar uma nova aplicação, criar um playground. O playground é uma funcionalidade que nos permite de maneira rápida testar código. Ou abrir um projecto existente. Vamos criar um novo projecto.

Screen Shot 2016-01-17 at 14.12.11.png

Temos agora várias opções. Vou tentar sintetizar o máximo possível a informação. Podemos escolher quarto grandes grupos plataformas para as quais podemos programar.

  • iOS – Telemóveis e tablets;
  • WatchOS – Relógios da Apple;
  • tvOS – Sistema operativo da box de televisão da Apple;
  • OS X – Aplicações desktop;

Dentro de cada plataforma, e como qualquer bom IDE, temos um conjunto de templates disponíveis para nos ajudar a começar. Vamos escolher IOS -> Single View Application.

Depois de carregarmos OK, vamos indicar as características do projecto.

  • Nome do produto. Nome que vai ficar na AppStore;
  • Nome da organização;
  • Identificador da organização;
  • Linguagem de programação. Se é Objective-c ou Swift. Neste caso escolhemos Swift.
  • Dispositivos de destino. Aqui escolhemos se a aplicação tem os iPhones ou tablets como destino. Ou até mesmo ambos.

Screen Shot 2016-01-17 at 14.12.42.png

E pronto. Só falta salvar. Neste passo só de notar que quem tem por habito utilizar controlo de versões, este IDE permite criar um repositório no computador e ir fazendo commits entre outras opções.

Screen Shot 2016-01-17 at 14.12.57.png

Se tudo correu bem. Terá uma janela parecida com a da seguinte figura.

Screen Shot 2016-01-17 at 14.13.10.png

Sem entrar em muitos pormenores, é a partir daqui que gerimos todo o nosso projecto. Por exemplo, neste primeiro ecrã, vemos logo todas as componentes do projecto (classes) do lado esquerdo, vemos as propriedades do objecto do projecto que está seleccionado do lado direito e no meio podemos alterar o objecto seleccionado.

Neste caso, está por omissão seleccionado o projecto em si, pelo que no meio temos as características gerais que podemos alterar como a versão do projecto, qual a versão para que estamos a desenvolver, a orientação do dispositivo (Portait ou Landscape) entre outras que não vou falar agora por não ser o objectivo.

Vamos dos elementos do projecto muito rapidamente.

É importante saber que ao programar para iOS estamos a seguir a metodologia MVC ( Model View Controller). Sem entrar em grandes detalhes MVC quer dizer o seguinte:

  • Model – São as nossas classes;
  • View – São as vistas que o utilizador vai ver. Estas vistas estão sempre relacionadas com um modelo(classe);
  • Controller – O Controlador gere a comunicação entre o modelo e a vista
Screen Shot 2016-01-17 at 14.32.24.png
Fonte

Posto isto, vamos ver quais os principais elementos do projecto.

Screen Shot 2016-01-17 at 14.13.21.png

Seleccionado temos o projecto criado. Esta é a raiz do projecto. É aqui que podemos alterar as características do projecto (orientação do dispositivo, target iOS…).

De seguida temos duas pastas. A pasta do projecto, com o mesmo nome que este (primeiProjeto) e uma outra pasta relativa a testes unitários do projecto e outras cosias (Products).

Vamos falar da pasta do projecto e vamos tentar comparar com o modelo MVC.

AppDelegate.swift

É uma classe em swift que é responsável pelas principais acções core da nossa aplicação. Extende de UIApplicationDelegate. A classe da qual estende é responsável por fazer a aplicação falar de forma correcta com o iOS e com as outras aplicações

ViewController.swift

Por omissão, o template que escolhemos anteriormente vai criar uma vista. Em iOS essa vista chama-se ViewController. Como falado anteriormente, uma vista tem de ter uma classe associada (Pode não ter…). Esta é a classe!!! Este é o Model da vista par ao utilizador.

Screen Shot 2016-01-17 at 14.41.59.png

Como vemos na imagem em cima, o ficheiro ViewController.swift é uma classe normal que implementa a framework UIKit.

UIKit é uma framework responsável por tudo o que é de interacção com o utilizador. É responsável por exemplo pela classe UIViewController. Classe essa que a nossa classe ViewController.swift vai estender como vemos na figura anterior.

A classe tem dois métodos. Para nós apenas um é importante por agora. O método viewDidLoad(). Este método é chamado quando a nossa vista foi adicionado há hierarquia de vistas de uma aplicação. Mais tarde falaremos disto e muito mais.

Main.storyboard

Aqui é onde estão organizadas as vistas (View em MVC). Como já podemos deduzir, neste ficheiro estará apenas uma que é controlada pela classe ViewController.swift.

Screen Shot 2016-01-17 at 14.13.46.png

Ok. A vista tem o mesmo nome que a classe. Mas como se ligam?

Bom isso é um mecanismo do próprio IDE e que podemos gerir através do identity inspector do objeto selecionado (vista).

Screen Shot 2016-01-17 at 14.50.30

Podemos ver na imagem anterior que com a vista seleccionada, na coluna do lado direito ao seleccionar o identity inspector (quadrado vermelho) podemos definir a classe dessa vista (quadrado castanho).

Assets.xcassets

Qualquer aplicação tem recursos que vai utilizar como imagens. É aqui que guardamos as imagens da nossa aplicação para mais tarde serem referenciadas. O template que escolhemos cria logo um “espaço” para colocarmos a imagem para ser o icon da aplicação (App icon).

Screen Shot 2016-01-17 at 14.56.03.png

LauchScreen.storyboard

Como o nome diz, este é o ficheiro ou a storyboard onde guardamos a vista de inicio da aplicação.

Info.plist

Este é o ficheiro onde o programador configura a aplicação. Por exemplo, quero que a minha aplicação utilize iBeacons. Aqui, tenho de a configurar para tal, para depois o sistema operativo pedir utilização ao utilizador. Na prática este ficheiro é equivalente ao manifest em Android.

Screen Shot 2016-01-17 at 15.00.27.png

A partir daqui, já dá para explorarem e verem o que sem grande ajuda conseguem fazer. Num próximo tutorial irei explicar um pouco mais do IDE.

Tem alguma dúvida? Deixe-a nos comentários!

Fonte das imagens