O App “Countries”

Criamos um App especialmente como acompanhamento desse material, o Countries. Trata-se de uma listagem de países onde é possível selecioná-los para obter maiores detalhes do país em questão, categorizando-o como uma aplicação Master/Detail clássica.

Com versões para iOS e Android, o projeto inicial apresenta o Aapp com as funções de listagem e acesso aos detalhes de um país funcionando de maneira desconectada, usando um banco de dados em memória para exibir dados de exemplo.

Countries para iOS

Ao longo das práticas, vamos aprimorar os apps para que se conectem ao serviço GeoNames, a fim de obter uma listagem completa de países do mundo, utilizando as melhores práticas de cada plataforma e apresentando a melhor experiência de uso. Os apps devem conversar com os serviços da GeoNames em segundo plano e dar indicações visuais de atividade para o usuário.

Countries para Android

Para as práticas desse material oferecemos os projetos iniciais (starter) com a estrutura básica do App já criada. O objetivo é fornecer a estrutura básica sobre a qual o usuário irá trabalhar para incluir as funcionalidades de conectividade propostas. A seguir, vamos verificar a estrutura desses projetos.

Projeto Countries para Android

O projeto inicial do app Countries para Android está disponível para download nesse endereço. O App é bastante simples, sendo composto por duas telas representadas pelas Activities:

• Listagem de países (MainActivity.java): é a tela principal do App, composta basicamente por um ListView que apresenta uma listagem dos países. Seu layout é representado pelo arquivo res/layout/activity_main.xml.
• Detalhes do País (CountryDetailsActivity.java): é a tela secundária para onde o usuário é direcionado ao selecionar um país na listagem principal. Seu objetivo é apresentar os detalhes do país selecionado. Seu layout está representado no arquivo res/layout/acvitiy_country_details.xml.

Além da parte da interface temos os seguintes itens adicionais:

• Layout da célula da listagem (res/layout/list_item_country.xml): representa o layout das células apresentadas no ListView da tela principal do App. Serão modificados para incluir as bandeiras de seus respectivos países.
• Ícone de bandeira indisponível (res/drawable/unknown_flag.png): ao incluirmos as representações das bandeiras dos países, pode tomar um tempo até que o arquivo esteja disponível para ser exibido na tela, e ainda, podem ocorrer problemas para baixar o arquivo. Essa imagem é usada como um placeholder para essas situações.

Note que a imagem está em uma resolução padrão e não tem versões para densidades específicas do Android. Por esse motivo, ela foi colocada na pasta drawable sem um sufixo específico. Isso foi feito para agilizar a produção do projeto básico, mas não é indicado para Apps lançados profissionalmente.

Os demais itens são padrões da criação de um projeto no Android Studio. Sua estrutura está representada na figura abaixo:

Modelo

O modelo do projeto tem seu código fonte incluso no package io.caeno.countries.model e é composto pelos arquivos:

• Country.java: representa um país com suas propriedades, sendo estas um subconjunto dos valores disponíveis no serviço GeoNames. Essa é uma classe POJO (Plain-Old Java Objects) padrão.
• CountryList.java: essa interface é utilizada pelas Activities para obter acesso à lista de países ou de um país específico. Será a principal classe que iremos modificar em nossas práticas.

Baixe o projeto e descompacte-o em uma pasta de trabalho. Com isso você estará pronto para o início das práticas.

Projeto Countries para iOS

O projeto inicial do app Countries para iOS está disponível para download nesse endereço. O App segue a mesma estrutura da versão Android com suas telas representadas por dois Views Controllers:

• Listagem de países (CountriesViewController.swift): a tela principal é um View Controller do tipo UITableViewController, configurando uma única célula protótipo, personalizada para exibição dos detalhes do país.
• Detalhes do País (CountryDetailsViewController.swift): a tela de detalhe também é um View Controller do tipo UITableViewController porém configurado para células estáticas em estilo agrupada, dando a aparência de formulário. As informações são carregadas diretamente através dos Outlets.

A organização do projeto segue os padrões recomendados pela Caeno, com grupos criados para os Assets, o modelo (Models), os View Controllers (ViewControllers) e as Views personalizadas (Views), conforme ilustrado abaixo:

Toda a interface está representada no arquivo Main.storyboard, onde você pode verificar a composição de cada tela. Também foi criada uma classe para representar a célula do Table View que apresenta as informações do país, no arquivo CountryViewCell.swift (dentro do grupo Views). Essa classe contém os Outlets para os elementos de tela da célula e declara a propriedade country, que, quando atribuída, atualiza a aparência da célula:

var country: Country? {
    didSet {
        if let country = country {
            nameLabel.text = country.name
            capitalLabel.text = "Capital: \(country.capital)"
        }
    }
}

Note que essa propriedade é um Optional, e sua principal finalidade é facilitar a configuração por parte do Table View na reutilização das células.

No catálogo de imagens do projeto existente no arquivo Assets.xcassets, encontramos a imagem UnknownFlag que representa a imagem da bandeira para ser utilizada como placeholder quando a bandeira própria do país não estiver disponível.

Por fim, no grupo Assets/Fonts incluímos uma fonte personalizada para as barras de título do App, a HoboStd.otf. Suas configurações são feitas no AppDelegate.swift, junto com algumas outras personalizações para esse App como uma cor diferenciada para as barras de navegação.

Modelo

O modelo do projeto iOS é também bastante semelhante ao do Android, composto pelos seguintes arquivos:

• Country.swift: representa um país com suas propriedades, sendo estas um subconjunto dos valores disponíveis no serviço GeoNames.
• CountryList.swift: essa á interface utilizada pelos Controllers para obter acesso à lista de países ou a um país específico. Será a principal classe que iremos modificar em nossas práticas.

Outros Componentes

Para esse projeto utilizamos mais 3 componentes open-source para facilitar algumas operações comuns. Eles foram instalados usando a ferramenta Carthage, um gerenciador de pacotes extremamente leve para projetos Cocoa e Cocoa Touch:

• SwiftyJSON: embora o iOS ofereça suporte nativo para interpretação de documentos JSON, essa biblioteca oferece uma interface extremamente simplificada para interpretar e extrair informações. Será usada no exercício no qual vamos baixar os dados do serviço GeoNames nesse formato.
• SDWebImage: essa biblioteca proporciona uma interface simplificada para baixar imagens a partir de um site de maneira assíncrona (semelhante ao NetworkImageView). Será usada para nos auxiliar na exibição das bandeiras dos países.
• MBProgressHUD: esse é um dos componentes mais clássicos e obrigatório em quase todos os projetos iOS modernos. Ele apresenta uma interface modal para sinalizar o progresso de uma operação indefinida, nos padrões visuais clássicos do iOS. Iremos usar para apresentar uma indicação de progresso quando o usuário for baixar os dados de países.

Cada um desses componentes é compilado em um Framework iOS pelo Carthage, nos arquivos SwiftyJSON.framework, WebImage.framework e MBProgressHUD.framework respectivamente, e foram colocados no grupo Frameworks do projeto.

Baixe o projeto e descompacte-o em uma pasta de trabalho. Com isso, você estará pronto para o início das práticas.