Primeiras aulas do curso Objective-C: programando para iPhone e iPad

Objective-C: programando para iPhone e iPad

Storyboard - Introdução

Olá, bem-vindo ao curso de Objective-C! Vamos fazer aqui uma agenda de contatos com várias funcionalidades para conseguirmos ver várias coisas da linguagem: como que Objective-C funciona e como fazemos aplicativo para iOS com ele. A primeira coisa que precisamos ter é o Xcode instalado.

Tendo o Xcode instalado, vamos criar o nosso novo projeto. Então vou em “Create New Project” e ele vai me perguntar se quero criar para iOS ou para o relógio WatchOS ou pro Mac e tudo mais. Vamos começar para iOS.

Eu clico em “Application” e “Single View Application” porque ele vem com a menor quantidade de coisas que nós precisamos para podermos criar. Depois vamos dar o nome do nosso projeto. Como é uma agenda de contatos, eu vou chamar de “AgendaDeContatos”. Embaixo é a organização e o identificador, que é mais ou menos como se fosse o seu domínio ao contrário, depois tem o nome da sua empresa, que é a linguagem que queremos Objective-C.

Por enquanto vamos deixar tudo marcado mesmo e falando que queremos iPhone. Vou clicar em “Next” e ele vai pedir para selecionar qual a área que eu quero que ele salve o diretório da aplicação. Eu vou deixar no desktop mesmo e clicar em “Create”.

Ele vai criar um monte de arquivos perguntando se pode acessar. Deixo ele acessar também, não tem problema. Ao lado ele mostra ações do projeto do Xcode. Qual a iOS se você quer que ele faça o deploy, podemos mudar, por exemplo para o 9.

Se eu quero fazer iPhone, iPad ou os dois, eu posso escolher universal, posso mudar isso também. Quais orientações que eu quero para minha aplicação, se quero deixar virar de lado e tudo mais. Então tem várias opções que nós podemos setar.

Para começarmos a fazer nossa primeira tela, precisamos mexer nesse arquivo “Main.storyboard”. É ele quem representa a tela da sua aplicação, é onde desenhamos a informação que queremos.

Então no “Main.storyboard” tem a tela do “View Controler”, tem esse painel do lado. Só para não ficar aparecendo eu vou apertar esse botão no canto inferior esquerdo, que oculta ou aparece o painel.

Então tem a minha tela quadrada. Só para não ficar quadrada, vou clicar aqui nesse ícone amarelo que representa a tela e vou falar que o tamanho que eu quero para ele é um tamanho de um iPhone 6, por exemplo, que é o 4.7 polegadas. Agora ficou uma tela um pouco mais parecida com iPhone.

A primeira coisa que vamos fazer para termos a tela de um formulário. Por exemplo: um formulário. Depois vamos querer ter todos os campos, nome e um botão de adicionar, mas por padrão vamos começar a criar o campinho do nome. Todos os campos que quisermos criar no canto inferior direito tem até os componentes que queremos.

Então, por exemplo: para fazer esse campo escrito o nome, eu preciso arrastar um componente, que é uma label. Então tem um campo para filtrar se eu já souber o nome do campo. Eu vou clicar e arrastar na label para dentro da minha aplicação, para dentro da minha tela.

Então tem label, dois pontos. Vou deixar que o nome que eu quero que apareça seja um “Nome”. O legal desse arquivo storyboard, que representa a tela, é que temos várias informações úteis que ele nos dá. Por exemplo: os limites da tela aparecem nessa régua azul, então não quero que estoure, vou deixar no máximo nessa tela azul. Então tenho o campo de nome.

Quero agora que tenha a caixa de texto para pessoa digitar. Tem um outro campo chamado de text field. Quero arrastar um text field e é a mesma coisa: se eu quiser deixar alinhado tem um guia e as linhas. Eu arrasto para direita ou para a esquerda, deixo de um jeito melhor.

E eu tenho meu primeiro campo de texto. Se eu não soubesse o nome do componente que eu quero, eu poderia ir scrollando no canto inferior direito, que ele iria ter todos os campos que nós precisamos. Outra coisa que eu quero é o botão para conseguir adicionar.

Vou arrastar esse botão, deixar aqui só alinhado no meio e vou colocar que o botão é um botão de adicionar. Só alinhar aquele de novo, porque digitei o texto e ele desalinhou. Então eu tenho minha primeira tela. Os primeiros componentes que eu coloquei.

Agora eu quero rodar para ver se vai aparecer tudo certo. Como eu tenho um iPhone 6, eu posso escolher as opções de iPhone que eu quero - ou ainda, se eu tiver um iPhone, posso testar direto no aparelho. Então vou colocar iPhone 6 mesmo e vou dar um play, que ele vai abrir o simulador do iOS para nós conseguirmos ver se está tudo certo e se era isso mesmo que queríamos.

Ele vai compilar tudo. Está dando build no projeto de agenda de contatos, assim que ele terminar abrirá o simulador do iOS com a telinha que precisamos. Ele está abrindo o simulador. Já até abriu, demora um pouco para abrir na primeira vez.

Então está abrindo o simulador, vai aparecer a tela que nós criamos. Ele está abrindo pela primeira vez o simulador do iOS, ele vai carregar... Carregou! É terminou de carregar a primeira vez que abrimos o simulador, então demora um pouco para carregar.

Carregou! Agora ele vai abrir para nós a aplicação de contatos. Então essa primeira vez é realmente um pouco demorada, mas agora está abrindo a aplicação.

Apareceu o texto que digitamos e tem um campo de texto se quisermos colocar alguma informação, digitar alguma coisa. Ele aparece um teclado e quando eu começar a digitar com o meu teclado ‘Joviane’, ele vai aparecendo embaixo, ele também aperta. Esse teclado eu posso digitar tanto por ele quanto pelo meu mesmo do computador.

Se eu não quiser habilitar isso, posso ir em “Hardware > Keyboard” e falar para ele habilitar ou desabilitar, como indicar. Se eu apertar uma vez, desabilita e se eu apertar aqui outra vez, habilita. Então fica a critério.

Já conseguimos então pelo menos mostrar alguma coisa na tela. Agora vamos começar a colocar as outras coisas, outros componentes!

Storyboard - Pegando o nome

Agora já temos no nosso campo de texto, o input para conseguirmos digitar e o botão aqui para adicionarmos.

Mas falta darmos algum comportamento para isso, para ele poder pegar esse nome que eu digitei. Então, para podermos fazer isso, vamos voltar para o Xcode. Nele, em cada tela que colocamos dentro do storyboard, tem um componente responsável por controlar essa tela, essa view que temos no nosso projeto.

E o responsável por criar a view é chamado de view controller *, ele aparece igual quando colocamos o *mouse em cima desse botão amarelo, que representa o view controller. Tem dois arquivos: um “ViewController.h”, que tem a declaração da quase tudo aquilo que queremos colocar; e o “ViweController.m”, que tem as implementações, a parte de código mesmo.

E já vem com um monte de coisas escritas. Por enquanto não precisamos de nada disso, eu vou tirar e deixar o mínimo necessário e depois nós passaremos por esses outros métodos. Então o mínimo que precisamos é ter esse @implementation ViewController, que é o que representa a nossa classe do Objective-C.

Vou começar a colocar, então! Eu quero que ele faça uma ação na hora que ele clica no botão, quero que ele imprima o meu nome no *log *, por exemplo. Para criarmos uma ação, para criarmos um método, começamos com a tecla -, que é o método do nosso objeto ViewController.

Eu coloco qual o tipo de retorno que eu quero no nosso método, por exemplo: (void). Não quero que ele retorne nada, eu só quero que ele apareça o nome e ação, o nome do método que eu quero. Eu quero que ele adicione.

Então vou chamar de adicionar, então: -(void) adiciona (. Abro e fecho chaves para poder definir o que vai ter dentro desse método adiciona. Se eu quero imprimir uma mensagem no log, eu coloco um componente chamado de NSLog.

Para ter um texto dentro, a string no Objective-C colocamos @””, que é criando uma nova string, então: NSLog(@””) e um texto que queremos. Eu quero saber se o usuário primeiro clicou no botão. Primeira coisa: quero saber se ele clicou no botão, depois eu quero conseguir capturar esse nome.

Coloquei o meu log. Só que eu quero que na hora que ele clique aqui no botão, ele execute esse método Adiciona. Para isso, eu preciso dizer que quando você clicar nesse botão “Adicionar”, é esse método que eu quero que você chame.

Para poder vincular essa ação com esse botão, eu posso ir no botão amarelo, que representa o ViewController e quero falar que o botão tem que avisar o código, tem que avisar o ViewController, que ele foi clicado. Então vou apertar “Ctrl + click”, seguro “Ctrl + click” e arrasto para o ViewController, ele vai aparecer quais as ações e métodos que eu posso executar.

Mas ele não está aparecendo o método de adicionar. Ele não parece porque o método de adicionar é um método como qualquer outro. Eu não estou dizendo para o interface builder, nessa interface que faz a tela aqui no iOS, que eu quero executar aquela ação.

Essa ação -(void) adiciona ( não está visível para o interface builder. Então para dizermos que ele fica visível para o interface builder, ao invés de usarmos void, usaremos outro componente que eu quero que execute uma ação: IBAction.

Aparece até uma bolinha do lado que representa a ligação, para saber se ele está ligado com alguém, com algum botão ou não. Como não está ligado, a bolinha fica branca vazia. Para ligar eu volto no storyboard e faço o mesmo processo com “Ctrl + click”. Seguro, arrasto até o símbolo do ViewController, que representa o código e solto na tela. Ele aparece agora. Agora tem um método “Adicionar”, agora esse método está visível.

Então vou vincular o “Adicionar” dentro, vinculei. Se eu quiser ver se ele realmente está vinculado, posso clicar no botão e aqui no último ícone, que é o de connection, para ver todas as conexões com esse botão, eu consigo ver. Na hora em que você tocar nele, vai chamar o método “Adicionar”.

Para ver se está funcionando, vou apertar o botão de play de novo. Ele vai recompilar todas as alterações que eu fiz no nosso projeto e vai abrir o simulador de novo assim que ele terminar de compilar.

Vou já deixar aberto o simulador, porque nós terminamos o build e vai aparecer o campo de texto, o input e o botão do mesmo jeito. Eu não mudei nada e vou digitar Joviane no campo de nome e vou apertar o botão de “Adicionar”.

Ele até apareceu já embaixo no Xcode, voltando para ele. Ele aparece até aqui no log, que é o que representa o console. Todos os outputs que colocarmos de NSLog, todas as saídas que colocarmos, vai aparecer na tela. Apareceu? Clicou no botão. Bacana, era o que nós queríamos!

Falta agora então capturarmos o nome. Vamos fazer isso já!

Storyboard - Propriedades

Agora que conseguimos clicar no botão e executar a ação, falta capturarmos o texto que eu digitar no meu simulador. Para poder fazer isso, agora eu preciso que além do interface builder, vou aqui enxergar o botão. Ele precisa também ter algum lugar para conseguir armazenar a propriedade do nome que eu colocar lá.

Para poder fazer isso, eu vou vir aqui no nosso arquivo “ViewController.h”, que é o que separa a parte pública da parte privada do nosso código, e vou colocar para ele declarar que eu quero uma propriedade, uma @property, que vai conseguir armazenar as informações do texto que digitarmos. Então ele representa uma informação de um campo de texto, então tem um UITextField.

O UITextField eu quero guardar o nome. Então declaro o tipo da minha propriedade que é UITextField e o nome da variável que vai armazenar essa propriedade, *nome - que é um ponteiro que ele guarda, ele guarda uma referência para o nome. Tenho a nossa propriedade e eu preciso ligar também. Do mesmo jeito que eu fiz com IBAction, vou ligar o valor desse campo de nome com a propriedade que eu tenho.

Para poder fazer isso é o mesmo processo, aperto “Ctrl + Click” e arrasto ou com botão direito. Clico, seguro e arrasto para a tela. Funciona qualquer um dos dois. Ele tem que aparecer o que eu quero que ele faça.

Só que agora, quem tem que saber qual é o texto, é o código que quer perguntar qual é o seu texto. Eu não preciso ser avisado, eu posso ir lá e pegar a hora que eu precisar. Então o sentido da ligação, ao contrário do botão, agora vem do ViewController para o campo de texto.

E ele vai aparecer quem liga, mas não está enxergando o campo de nome. Para ele enxergar, para poder vincular o texto que está lá com o campo “Nome”, eu preciso fazer um encaixe, uma tomada para esses dois.

Então quando quero fazer esse encaixe eu marco para o interface builder, que ele funciona como se fosse uma tomada para o campo de texto. Então ele é um IBOutlet.

De novo, aparece a bolinha. Quer dizer, ele está pronto para fazer uma ligação. Se eu voltar agora no storyboard, tentar de novo botão direito, clicar e soltar, agora ele terá o IBOutlet, a tomada que vai receber a informação do nome. Clico e vinculo, consegui pegar. Se olharmos agora, percebemos que está ligado o nome do mesmo jeito.

Então agora já vinculei, se aparecer o nome, estará vinculado e eu terei minha bolinha. Agora está preenchida porque já foi feito o vínculo. Agora eu quero imprimir essa informação. Para imprimir a informação, eu vou colocar dentro direto do nosso log falando para imprimir o conteúdo do campo de texto.

Para imprimirmos o Objective-C, ele trabalha com interpolação. Então vou colocar que quero interpolar uma string %@, porque o tipo da string é @, vírgula o texto que eu quero interpolar. Então quero pegar o nome desse meu próprio view controller que eu estou acessando.

Então para acessar propriedade do meu próprio view controller eu faço: self.nome, então pego a informação do meu próprio nome. Se rodarmos agora, vou apertarmos o play de novo, ele vai buildar, vai compilar.

Eu vou no simulador, ele vai abrir para nós o simulador, depois que ele vai compilar e vai aparecer a build. Vai abrir a aplicação. Abrindo a aplicação, de novo, vou fazer o mesmo processo de digitar o nome e clicar no botão. Quando digitarmos... Está demorando um pouco!

Então digitei Joviane e vou apertar “Adicionar”. Ele imprimiu um monte de coisas!

Se formos olhar, ele imprimiu, clicou no botão, que era o que tínhamos colocado no botão. Só que ele imprimiu um monte de coisas: UITextField, Frame, Text... Porque quando declaramos ele, avisamos que ele está ligando com UITextField, mas ele não tem só o texto lá dentro, ele tem as dimensões desse campo, por exemplo, que colocamos dentro do nosso storyboard. O tamanho dele.

Uma das coisas que ele tem é realmente o texto lá de dentro, mas as outras informações eu não estou interessado, só quero imprimir isso. Então nós vamos mudar o código para dizer que eu não quero imprimir o nome sozinho, só o campo de texto nome; eu quero imprimir o texto que está dentro desse nome.

Então se eu quero acessar a propriedade de texto que tem lá dentro, eu vou mandar uma mensagem para ele dizendo que eu quero pegar o texto dele. Sempre que eu quiser definir uma mensagem, coloco entre colchetes. Eu quero invocar um método que tem o texto. Então digito: {selfie.nome text} e a mensagem que eu quero passar para ele.

Para definir onde começa e onde termina, tem esses dois colchetes. Vou mandar rodar de novo. Agora ele vai ter que aparecer só realmente o texto Joviane que eu coloquei ali. Vamos lá, de novo!

Ele deu o build e nós vamos abrir o simulador. Terminando de rodar, assim que ele aparecer a informação nós testaremos.

Joviane e clico em “Adicionar”.

Agora ele falou que clicou no botão e apareceu o texto Joviane. Conseguimos pegar essa informação do campo de texto. Então só para relembrarmos, a primeira coisa que fizemos foi criar nossos campos, arrastar uma label text field e arrastar o botão.

Na hora que arrastamos o botão, se eu quero ligá-lo com código, quero que quando ele clique, execute alguma coisa, nós declaramos uma ação, uma IBAction e o nome do método que queremos. Para podermos fazer a ligação, ligamos no nosso evento.

Quero que o botão avise o código, então o sentido da ligação é do botão para o view controller, para esse ícone amarelo que está ligado com ele. No caso, eu quero pegar o texto do campo de texto. Eu vou criar uma propriedade aqui no meu “ViewController.h”, do tipo UITextField, para ele enxergar IBOutlet.

Para ligar ele, agora é o código que quer saber o valor. Eu venho do view controller para o campo de texto, ligado com o Outlet do nome.

Para rodar apertamos o botão de play e ele rodou o simulador digitando. Se eu digitar um outro nome agora, como Batman, a mesma coisa estará pegando valores para nós.

Agora falta colocarmos os outros campos do nosso cadastro. Vamos fazer isso já!

Sobre o curso Objective-C: programando para iPhone e iPad

O curso Objective-C: programando para iPhone e iPad possui 225 minutos de vídeos, em um total de 42 atividades. Gostou? Conheça nossos outros cursos de iOS em Mobile, ou leia nossos artigos de Mobile.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda iOS acessando integralmente esse e outros cursos, comece hoje!

Plus

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$85
à vista R$1.020
Matricule-se

Pro

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas