1Tópico UM
Meu primeiro app para iOS – Tópico UM
Por André Luiz Salla
Quando estamos começando a aprender algo
novo, a pri...
2 Meu primeiro app para iOS
Imagem 1: Criando um novo projeto
Como é possível ver, vamos nos deparar com
muitos atalhos en...
3Tópico UM
Imagem 4: Dados do projeto
Product Name: É, literalmente, o nome do
produto; o nome que você pretende dar à sua...
4 Meu primeiro app para iOS
mesmo se desmarcado, é possível adicionar o controle
de versão posteriormente ao seu projeto.
...
5Tópico UM
6 – Vamos então iniciar! Abra o arquivo
Main.storyboard no Project Navigator (primeira página
na área de Naviga...
6 Meu primeiro app para iOS
8 – Após posicionar a Label na tela, selecione
o objeto e abra o Attributes Inspector (quarta ...
7Tópico UM
É, nosso Hello World ficou torto... mas por que isso?
Quando adicionamos nosso Label à tela, ele foi
posicionad...
Próximos SlideShares
Carregando em…5
×

Meu primeiro app para iOS - Tópico UM

397 visualizações

Publicada em

O segundo de uma série de tópicos que visa, com uma linguagem fácil e bem objetiva, servir de guia para quem está começando ou tem interesse no desenvolvimento de apps nativos para iOS. Nesse tópico, o foco é a criação do seu primeiro app: o Hello World.

Publicada em: Celular
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
397
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
5
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Meu primeiro app para iOS - Tópico UM

  1. 1. 1Tó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. 2. 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. 3. 3Tó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. 4. 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. 5. 5Tó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. 6. 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. 7. 7Tó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”

×