Introdução a Programação iOS

Olá Pessoal!

Esse é meu primeiro post sobre programação iOS. Vamos ver uma breve introdução do Xcode(IDE da apple para criar aplicações para iOS e Mac OS) e como funcionam alguns componentes padrão do iOS SDK. Faremos uma pequena aplicação, demonstrando o funcionamento do Label, TextField e Button. O intuito não é ensinar programação ou Objective-C(Linguagem utlizada pela apple). Se você já tiver uma base de programação orientada a objetos com qualquer outra linguagem como Java, Python, Ruby ou qualquer outra você entenderá muito rápido.

  • Abrindo Xcode
Splash Screen do Xcode
Splash Screen do Xcode

Essa é a tela inicial do Xcode. click no botão “Create a new Xcode project” para iniciar um novo projeto.

Seleção do tipo de aplicação
Seleção do tipo de aplicação

Selecione “Single View Application” e click em “next”.

Tela de configuração da aplicação
Tela de configuração da aplicação

Essa é  tela de opções de configuração da nossa aplicação. é aqui com configuramos o nome da aplicação, a organização(empresa) e o “company identifier” que é o identificador da sua organização e o “ClassPrefix” que será um prefixo que o Xcode injetará nos nomes das classes.

Configure como está na figura acima, lembrando de deixar selecionado em “Devices” como “iPhone”. Isso porque nossa aplicação será layout apenas para iPhone. Agora click em Next.

Visão geral do Xcode
Visão geral do Xcode

Essa é a tela que você vai trabalhar a partir de agora. Agora vamos para uma breve descrição:

  • Navigator: é aqui que você gerenciará os arquivos, frameworks, bibliotecas e classes referente a sua aplicação.
  • Debug Area: é aqui que você realizará o debug da sua aplicação usando o console do xcode.
  • Utilities: é que você fará muitas configurações dos componentes de sua aplicação, como os componentes de interface do iOS SDK.

Agora vamos, de fato, colocar a mão na massa.

Primeiramente, iremos montar a nossa interface, utilizado Interface Builder do Xcode. Vá ao “navigator” e click sobre o arquivo “Main.storyboard”. Esse arquivo é o coração da interface de sua aplicação. É nele que iremos montar todas as telas de nossa aplicação, como também as ligações entre as telas.

Interface Builder do Xcode
Interface Builder do Xcode

Nessa tela do Xcode é onde construiremos nossas telas da nossa aplicação iOS.

No centro da tela, podemos ver nossa primeira “View Controller”. o iOS SDK utiliza o padrão MVC(Model-View-Controller) onde dividimos as responsabilidades e consequentemente reduzimos as dependências. nesse caso, temos a nossa View e por trás dela tem uma “View Controller” que faz a ligação da View com os Models(o M, do MVC)

Pode parecer que o “Navigator” sumiu, porém ele foi ocultado de propósito. Más como isso é possível? no canto superior direito temos 3 botões que servem para ocultar determinadas áreas do Xcode. Vejam a imagem abaixo:

ocultarAgora, vamos na parte inferior do “Utilities” procure o componente “label”. ao encontra-lo, click e araste para cima do nosso “View Controller” como na figura abaixo. Ao adiciona-lo, expanda-o para que ele ocupe toda a tela da nossa View.

Arrastando a label para a View Controller
Arrastando a label para a View Controller

Agora que já temos uma label em nossa tela, vamos adicionar um TextField e um Button. Siga as mesmas instruções da label para o TextField e o Button. Deixe sua View como na figura abaixo:

Tela com Label, TextField e Button
Tela com Label, TextField e Button

Agora vamos fazer como que nosso código que iremos escrever se comunique com nossa interface. Para isso, precisamos ter referências dos componentes da View para podermos manipulá-los. Para isso, click no botão do “Assistant editor”. É o botão que uma gravatinha como na figura abaixo.

Assitant Editor
Assitant Editor

Isso fará com que o Xcode divida a tela e exiba ao mesmo tempo o Interface Builder e o codigo da classe que controla a View. Nesse caso, assim que criamos o nosso projeto, o Xcode automaticamente criou a classe ViewController representados pelos arquivos “ViewController.h” e “ViewController.m” no Navigator. No caso, o código que devemos visualizar é do arquivo “ViewController.h”, caso abra o arquivo “ViewController.m”, na parte superior do código tem uma aba chamada “automatic”, click nela e selecione “ViewController.h”

Tela dividida entre Interface Builder e o Código
Tela dividida entre Interface Builder e o Código

Agora com o botão “control” apertado, click na label da view e arraste para o código acima no “@end”. irá surgir um balão para configurarmos as propriedades da label. em “name” coloque: minhaLabel e deixe o restante das opções como estão.

Conectando a Label com a classe ViewController
Conectando a Label com a classe ViewController
Configurando a label
Configurando a label

 

Agora repita o mesmo processo para o TextField e coloque o name como: “meuTextField”. Para adicionar o Button, precisamos modificar a opcão “Connection” para “action” e na opção “type” escolha “UIButton” e em name coloque: “meuBotao” e click em connect.

Configurando o Button
Configurando o Button

 

Agora que temos todos os nossos componentes conectados na nossa ViewController, vamos programar um pouco. No navigator, abra o arquivo ViewController.m(arquivo de implementação). você verá o código abaixo:

 

//
//  ViewController.m
//  IntroducaoiOS
//
//  Created by Bruno Paulino on 6/16/14.
//  Copyright (c) 2014 Bruno Paulino. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (IBAction)meuBotao:(UIButton *)sender {
}
@end

Vejam que o metodo “meuBotao” foi criado automaticamente em nosso código. essa é uma das diferenças do tipo “connection” quando conectamos o botão, a label e o textField a nosso arquivo ViewController.h. precisamos selecionar “outlet” quando precisamos acessar o componente via código, já o modo “action” serve para “escutar” os possíveis comandos que faremos na view, nesse caso o Button. Logo, é através desse método que podemos “escutar” quando o botão for pressionado. Agora vamos fazer esse app responder alguns comandos. Faremos uma ação bem simples no emulador iOS, seguindo os passos abaixo:

  • Escrever algum texto no nosso TextField
  • Clicar no botão
  • pegar o texto do TextField e inseri-lo na nossa label
  • apagar o texto do TextField

Para isso, implemente o seguinte código dentro do método “meuBotao”

 

- (IBAction)meuBotao:(UIButton *)sender {
//Passando o texto do TextField para nossa Label
_minhaLabel.text = _meuTextField.text;
//agora limparemos o textField
_meuTextField.text = @"";
//tiramos o foco do textField para o teclado sumir
[_meuTextField resignFirstResponder];
}

Agora Click no botão Build(Tipo um botão Play de MP3). Ele realizará o build da aplicação e abrirá o emulador do iOS.

Agora click sobre sobre o textField e digite algum texto. após isso, click no Button e veja que o texto será copiado para nossa Label e será apagado do TextField.

Emulador iOS rodando nossa aplicação.
Emulador iOS rodando nossa aplicação.

Bom pessoal, esse foi nosso primeiro contato com o Xcode e com o SDK iOS. é uma coisa muito simples, más já é o primeiro passo para quem nunca programou para iOS. Aguardem novos tutoriais e dicas sobre programação!

Obrigado!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s