Parte 3: Layout da arquitetura do aplicativo

Esta é a terceira parte do Do início à App Store série que ensina como levar um aplicativo da fase de ideia até o lançamento final na App Store. No meu postagem anterior , discuti como testar sua ideia de aplicativo para ver se é viável, usando o aplicativo Robot Tic-Tac-Toe que criei para esta série como exemplo. Você pode baixar o aplicativo gratuitamente em esse link .

Três partes de um aplicativo

Ao definir a arquitetura do seu aplicativo, é importante entender que um aplicativo tem três partes principais. Vamos usar a tela principal do aplicativo Robot Tic-Tac-Toe ( figura 1 ) para entender o que são essas três partes.



  Tela principal do jogo da velha

Figura 1 - A tela principal do Robot Tic-Tac-Toe

  • Interface de usuário - A parte do aplicativo que o usuário vê e com a qual interage. Dentro figura 1 , inclui o tabuleiro do jogo, fundo do campo de estrelas, X e O, bem como os nomes dos jogadores, fotos e pontuações na parte inferior da tela.
  • Lógica principal - O código que executa ações quando um objeto da interface do usuário é tocado ou qualquer outro processo que ocorre automaticamente. Por exemplo, quando um usuário toca em um quadrado no tabuleiro do jogo, a lógica central é executada para determinar se o quadrado já está ocupado e, se não estiver, determina a marca correta (X ou O) a ser exibida no quadrado. Depois, a lógica central calcula o próximo movimento para o Robô.
  • Dados - As informações e preferências que são mantidas pelo aplicativo. Os dados do aplicativo Robot Tic-Tac-Toe incluem os temas atuais de cor e som, as pontuações atuais, nomes dos jogadores, nível de dificuldade (e outras configurações), bem como o quadro de líderes do Game Center e informações de conquista.

Como discuti em um artigo anterior na arquitetura do aplicativo, quando essas três partes estão muito unidas, você cria uma situação em que não pode alterar uma parte do aplicativo sem alterar a outra. Ele também impede que você execute seu aplicativo em várias plataformas em que a interface do usuário e o acesso a dados devem variar.

Onde você coloca seu código tem tudo a ver com a facilidade de escrever, estender, manter e portar seu aplicativo para outra plataforma.

Projetando com o fim em mente

Para ilustrar esse ponto, há vários anos eu estava em um voo para Miami, Flórida, onde falaria em uma conferência de desenvolvimento de software. Quando meu companheiro de assento descobriu o que eu fazia para viver, ele perguntou se eu poderia ajudá-lo. Ele era dono de uma empresa que desenvolvia software médico e estava em apuros.

Ele disse a seus desenvolvedores no início do projeto que precisava do software que eles iriam criar para rodar em estações de trabalho locais e também na web. Depois que a versão para desktop do aplicativo foi concluída, ele perguntou como eles fariam para executá-lo na web, e eles simplesmente deram de ombros. Eles não planejaram com antecedência e criaram um aplicativo monolítico onde a lógica central e o acesso aos dados eram incorporados à interface do usuário. Levou muitos meses para separar o código e criar uma arquitetura flexível que permitisse que o aplicativo fosse executado em várias plataformas.

Como mostrado em Figura 2 , queremos criar um app universal que seja executado nas seguintes plataformas:

  • iPhone/iPad
  • Apple Watch
  • Apple TV

  Plataformas da Apple

Figura 2 - Um aplicativo universal é executado em várias plataformas da Apple

Agora é hora de começar a trabalhar e começar a criar o aplicativo. Neste artigo, criaremos o esqueleto do aplicativo e, em artigos futuros, preencheremos as partes que faltam à medida que criamos um aplicativo que pode ser executado em todas as plataformas mostradas em Figura 2 . Começaremos criando os projetos que conterão as várias interfaces de usuário para o aplicativo.

Criando o projeto iOS

Vamos começar criando o projeto iPhone/iPad, que conterá os arquivos de interface do usuário para seu aplicativo iOS.

  1. Inicie o Xcode (estou usando o Xcode 7 nesta série).
  2. Selecionar Arquivo > Novo > Projeto... no menu Xcode.
  3. No lado esquerdo da caixa de diálogo em iOS , selecione Inscrição . No lado direito da caixa de diálogo, selecione Aplicativo de visualização única ( Figura 3 ).

  Novo projeto iPhone/iPad

Figura 3 - Criar um novo projeto iOS

4. Clique Próximo , e na próxima etapa da caixa de diálogo ( Figura 4 ), defina os seguintes valores:

  • Nome do Produto - Jogo da velha
  • Nome da organização - O nome da sua empresa
  • Identificador da organização - Um identificador exclusivo, geralmente o URL da sua empresa ao contrário
  • Linguagem - Rápido
  • Dispositivos - Universais
  • Desmarque todas as caixas de seleção na parte inferior da tela (chegaremos a Core Data e Unit Tests mais tarde)

  Novo projeto de iPhone/iPad passo 2

Figura 4 - Criar um novo projeto iOS, etapa 2

5. Clique Próximo , e na caixa de diálogo Salvar arquivo, escolha um local onde deseja armazenar seu projeto e clique em Crio . Você verá os arquivos, produtos e destinos mostrados em Figura 5 .

  O novo projeto iOS

Figura 5 - O novo projeto iOS

Criando o projeto Apple Watch

Siga estas etapas para criar o Apple Watch Project que conterá os arquivos de interface do usuário para seu aplicativo watchOS.

1. Selecione Arquivo > Novo > Destino... no menu Xcode. Esta opção adiciona um novo destino ao seu projeto existente.

2. No lado esquerdo da caixa de diálogo Novo destino, em watchOS , selecione Inscrição ( Figura 6 ). No lado direito da caixa de diálogo, selecione App WatchKit para watchOS 1 . Explicarei por que escolhemos essa opção mais adiante nesta série, mas, por enquanto, saiba que ela fornece mais funcionalidades para nosso aplicativo watchOS.

  Novo projeto do Apple Watch

Figura 6 - Selecione o modelo WatchKit App for watchOS 1

2. Clique Próximo , e na próxima etapa da caixa de diálogo, observe o Nome do Produto e outras configurações na parte superior da caixa de diálogo já foram definidas para você. Certifique-se de Linguagem está configurado para Rápido , e as Incluir cena de notificação e Incluir Cena de Olhar caixas de seleção estão ambas selecionadas. Observe o Incorporar no aplicativo de comparação na parte inferior da caixa de diálogo está definido para Jogo da velha , que é exatamente o que queremos. Isso associa o aplicativo watchOS ao aplicativo iOS.

  Novo projeto Apple Watch passo 2

Figura 7 -  Criando o aplicativo WatchKit, etapa 2

3. Clique Terminar , e você verá o Ativar diálogo mostrado em Figura 8 . Clique no Ativar botão para ativar o app watchOS para depuração e teste no Simulador.

  Ative o esquema

Figura 8 - Ative o esquema watchOS

Quando terminar, você verá as novas pastas e produtos do grupo à esquerda e os novos destinos à direita ( Figura 9 ).

  O novo projeto watchOS

Figura 9 - Os novos produtos e destinos do watchOS

Criando o projeto Apple TV

Siga estas etapas para criar o projeto Apple TV que conterá os arquivos de interface do usuário para seu aplicativo Apple TV.

1. Selecione Arquivo > Novo > Destino no menu Xcode.

2. No lado esquerdo da caixa de diálogo New Target, em tvOS selecionar Inscrição . No lado direito da caixa de diálogo, selecione Aplicativo de visualização única .

  Novo projeto da Apple TV

Figura 10 - Criar um novo projeto tvOS

2. Clique Próximo , e na próxima etapa da caixa de diálogo, defina o Nome do Produto para TicTacToeTV . Certificar-se de que Linguagem está configurado para Rápido , e todas as três caixas de seleção são desmarcadas.

Figura 11 - Criando o projeto Apple TV, passo 2

3. Clique Terminar , e você verá os novos grupos e produtos à esquerda e o novo destino à direita ( Figura 12 ).

  Novo projeto da Apple TV

Figura 12 - O novo projeto tvOS

Chutando os pneus

Embora não tenhamos personalizado nenhum arquivo de interface do usuário, você pode executar cada um dos três projetos no Simulador para ver a aparência deles. Aqui estão as três opções que você pode selecionar no controle Scheme no canto superior esquerdo da janela do Xcode:

  • TicTacToe > iPhone 6 Plus (ou um dos outros simuladores de iPhone ou iPad)
  • Aplicativo TicTacToe WatchKit 1 > iPhone 6s + Apple Watch 38mm (ou 42mm)
  • TicTacToeTV > Apple TV 1080p

Basta clicar no Xcode Corre botão para executar cada esquema em seu Simulador associado. Observe que ao alternar entre diferentes Simuladores, você pode receber um erro no Xcode. Para contornar o erro, basta fechar o Simulador e clicar novamente no botão Executar do Xcode. Além disso, ao executar o aplicativo Apple TV, você pode selecionar Hardware > Mostrar Apple TV Remote para brincar com o controle remoto.

Conclusão

Agora que você tem um esqueleto básico de interface do usuário para o aplicativo, no próximo artigo veremos as estruturas iOS, watchOS e tvOS para ver como podemos compartilhar o código lógico principal entre os aplicativos.