Desenvolvimento de Aplicativo iOS ( iPhone e iPad) utilizando Objective-C

A pedidos de muitos visitantes do meu site, irei começar uma série de tutoriais e vídeo-aulas sobre Mobile, incluindo iOS (iPhone e iPad) e Android, onde em alguns irei ensinar a criar aplicativos mobile e em outros apenas algumas funcionalidades, que serão mais como dica para seus apps.

Hoje irei começar mostrando por onde começar com o desenvolvimento de aplicativos para iOS(iPhone e iPad). Iremos criar um aplicativo simples, porém a partir dele você irá começar a entender melhor o mundo do desenvolvimento de app.

Para começarmos você irá precisar ter um computador rodando o sistema operacional MAC OSX, pois teremos que utilizar o Xcode, programa que só funciona em sistemas OSX.

Xcode

Quando criei este tutorial a versão atual do Xcode era a 6.3, provavelmente agora você deve estar em uma versão bastante superior a esta, pois ele é atualizado com uma frequência muito alta, porém provavelmente você mesmo assim poderá acompanhar o tutorial sem maiores problemas.

 

Vamos começar :)

Ao iniciar o Xcode pela primeira vez você provavelmente verá uma tela como a que estou mostrando abaixo. Para criar um novo projeto teremos que clicar em Create a new Xcode Project.

welcome

Nesta próxima tela iremos escolher a opção Single View Application.

Single app

Iremos agora preencher as informações básicas do app. Iremos utilizar a linguagem Objective-C neste tutorial, que é a linguagem original do desenvolvimento de app para iOS, mas em outros tutoriais iremos utilizar a nova linguagem de programação Swift para desenvolvimento de apps.

Eu gosto de utilizar o Objective-C, pois as vezes quando precisamos buscar algo na internet sobre algum plugin, ou até mesmo sobre algum código, a maioria do conteúdo é em Objective-C.

Meu primeiro app

Clique em Next, selecione a pasta onde você quer guardar o seu app e clique em Create.

Tela Principal

Perfeito, agora que nosso aplicativo está configurado e criado, vamos começar a criar a nossa interface.

Clique em Main,Storyboard para visualizar o Storyboard, que é onde iremos criar as nossas telas e dar vida ao nosso app.

No meio da tela você verá um quadrado azul com o título de ViewController, clique nele para que possa ver no lado direito informações sobre ele.

Storyborard

Caso você não esteja vendo a barra lateral direita, mais em cima  um pouco você verá 3 icones que controlam os painéis, clique no ícone da direita para habilitar o painel.icones

Logo no início do painel, clique no 4 icones, chamado Attributes Inspector, nele você poderá definir algumas configurações do seu ViewController, como Título, Orientação, Como será o Status Bar, Top Bar, tamanho e etc. Vamos alterar o Size para iPhone 5.5-inch, para que o esqueleto do nosso ViewController fique mais parecido com o de um iPhone, pois isso irá facilitar a nossa vida no layout.

lateral

Para criarmos layouts “flexíveis” ou seja que fique bom no iphone 4,5,6,6+ teremos que utilizar uma coisa chamada AutoLayout e Constraints, mas isso é algo que veremos mais para frente em um outro tutorial, não se preocupe com isso agora.

Vamos criar agora a interface de nosso app. Logo abaixo das configurações do ViewController você poderá ver o Object Library, que é onde os controles e componentes disponíveis ficam localizados. Procure por Text Field  e o arraste para dentro do nosso ViewController . Caso você não consiga arrastar ele para dentro do ViewController, pode ser porque o zoom está muito longe, tente antes dar dois clique no viewController para que ele fique mais próximo e tente novamente. Adicione também um Label e um Button, ficando assim no final:

Após adicionar o itens, ao clicar em cada um deles você poderá alterar as configurações básicas dele no painel ao direita, deixando da forma que o agradar.

layout

Agora vamos criar uma pequena funcionalidade em nosso app, iremos fazer todo o texto digitado no TextField ser enviado para o Label quando clicarmos no botão que adicionamos. Para isso iremos ter que declarar as variáveis, criar um link da interface para o nosso código e criarmos a funcionalidade, vamos lá!

No painel da esquerda você consegue ver os arquivos do seu projeto ( caso não esteja aparecendo, habilite-o clicando no ícone da esquerda que fica localizado no canto superior direito do xcode).

No Object C, para cada ViewController temos dois arquivos responsáveis, o H e o M. O H utilizamos para declarar as variáveis e chamadas dos nosso métodos, já o M utilizamos para colocar de fato a programação que iremos utilizar em nosso app. Então inicialmente temos que linkar os componentes ao nosso H, mas para isso precisamos estar vendo os dois ao mesmo tempo na tela, mas como faremos isso ?

Se você estiver com a tela do Storyboard aberta, o que teremos que fazer para que o código do ViewController também fique aberto é: Pressionar a tecla ALT do seu telcado e clicar no ViewController.h, quando você fizer isso verá que o arquivo será aberto bem ao lado do Styoryboard, ficando algo mais ou menos assim:

telas

Agora precisamos linkar de fato os campos ao nosso arquivo, fazendo isso estaremos criando as variáveis  e declarando que elas estão linkadas ao componente.

Você terá que selecionar o componente, pressionar a tecla Ctrol, com o mouse likar com o botão esquerdo e arrastar a linha azul para o nosso código fonte, entre o @interface e o @end. Iremos começar com o TextField.

linkando

De o nome de txtFieldNome e clique em connect.

txtfield

Repita o mesmo procedimento para o Label, porém de o nome de labelResultado.

Agora vamos ao Botão, ele nós não iremos declarar no h, iremos fazer diretamente no M, pois desta forma quando arrastarmos ele para o M ele já irá criar a nossa função que irá responder ao clique do botão, para isso iremos inicialmente pressionar  ALT e clicar em ViewController.m ( poderá ver que o arquivo da direita terá mudado para o M) e então iremos selecionar o botão na tela da esquerda ( storyboard) pressionar Ctrol, clicar com o botão esquerdo do mouse e arrastar a linha azul para a direita no nosso código fonte e soltando ele bem acima do @end.

 

btnEnviar

Preencha o Name como btnEnviar, type id e Event Touch Up Inside e clique em connect. Você verá que a função foi criada com sucesso e é nela que iremos trabalhar agora.

Dentro desta função digite a seguinte linha

_labelResultado.text= _txtFieldNome.text;

Antes de todas as variaveis que criamos terems que adicionar um _ para que ela seja reconhecida dentro do nosso arquivo .M

Este comando simplesmente faz com que o conteúdo digitado no TextField vá para o nosso Label.

Vamos testar?

Na parte superior esquerda, selecione o seu IOS Simulator de preferência, clique no play e teste o seu aplicativo.

play

Vamos testar

Espero ter ajudado você neste começo de sua vida como um iOS Developer, caso tenha alguma dúvida é só me enviar por email ou Whatsapp se preferir que ficarei feliz em ajudar.

Perdeu alguma parte ? não tem problema, baixe aqui o código fonte para poder estudar melhor.

DOWNLOAD

Abraço!

0
Your rating: Nenhum

Comentários

Comentar

O conteúdo deste campo é privado não será exibido ao público.