Editorial

Caro leitor,

Já estamos no mês de Novembro, e posso dizer que este ano de 2018 está passando muito rápido! Nossa

equipe fica muito lisonjeada com a sua parceria e por esta razão procuramos desenvolver uma revista com um

conteúdo de qualidade e respeito.

Depois de um tempo, o colaborador Luciano Pimenta retorna aos atigos nos trazendo um assunto muito importante

denominado “Xamarin Forms”. Neste artigo ele abrange esta tecnologia adquirida pela Microsoft, onde são criadas aplicações

Mobile para as maiores plataformas (Android, iOS e Windows Phone), usando código C# e criando aplicativos nativos (não é

hibrido ou Web), um único código e regras de negócio. Já nosso outro colaborador Ricardo Barbosa Crivelli escreveu a

segunda parte do artigo “Desenvolvendo uma aplicação com Laravel”, o qual desenvolve as “Views” da biblioteca, aplicando

também alguns conceitos de “Resource” e finalizando com um exemplo de um CRUD para gerenciar informações. Para

finalizar, nosso consultor Técnico Thiago Cavalheiro Montebugnoli redigiu o artigo “Android – Conhecendo a biblioteca

Retrofit 2”, uma biblioteca desenvolvida pela “SQUARE” podendo ser utilizada gratuitamente. Neste artigo foi implementado

um pequeno exemplo a importando para realizar o acesso à API “Postmon” (http://postmon.com.br/), a qual nos devolve um

arquivo “JSON” com as informações referentes ao CEP informado.

Desejo uma ótima leitura, um abraço e até o mês que vem!

Marcos César Silva

Diretor Técnico

Android - conhecendo a biblioteca Retrofit 2

Introdução

Caro amigo leitor, É sempre muito gratificante escrever artigos para esta poderosa revista de programação. Para este mês

preparei um assunto relacionado a plataforma Android, apresentarei a famosa e importante biblioteca “Retrofit”,

estando em sua segunda versão. Implementarei um exemplo importando a mesma para acessar a API “Postmon”

(http://postmon.com.br/), a qual nos devolve um arquivo “JSON” com as informações referentes ao CEP informado.

Um dos recursos que são mais utilizados em praticamente qualquer projeto são as denominadas requisições

utilizando o protocolo “HTTP” (traduzindo para o português “Protocolo de Transferência de Hipertexto”, o mesmo

sendo um protocolo de comunicação na camada de “aplicação”, segundo o Modelo OSI). É neste exato momento

que entra em ação a Retrofit, responsável por realizar estas requisições.

Um pouco de informação para quem não sabe, esta biblioteca foi desenvolvida pela “SQUARE” e pode ser

utilizada gratuitamente. A facilidade de acesso se deve ao fato de a mesma ser denominada como um cliente “REST”

(traduzindo para o português seria “Transferência de Estado Representacional”, ou seja, um estilo de arquitetura que

define um conjunto de restrições e propriedades baseados em HTTP). Permite também carregar diversos dados

estruturados inclusive o famigerado “JSON”. Quando trabalhamos com a Retrofit podemos configurar qual conversor é

usado para a serialização de dados.

Segue abaixo alguns conversores compatíveis:

Gson: com.squareup.retrofit2:converter-gson

Jackson: com.squareup.retrofit2:converter-jackson

Moshi: com.squareup.retrofit2:converter-moshi Protobuf: com.squareup.retrofit2:converter-protobuf

Wire: com.squareup.retrofit2:converter-wire Simple XML: com.squareup.retrofit2:converter-simplexml

Criando o Exemplo

O nosso projeto irá retornar os dados referentes ao CEP informado, ou seja, a API “Postmon” fará este

trabalho. Os dados serão retornados no formato JSON, idêntico ao do exemplo abaixo: (Figura 01)

Imagem 01: Exemplo de retorno de dados.

Iniciaremos um novo projeto no Android Studio clicando em “File/New Project…”. Em “Application Name” defina um

nome, em “Company domain” um domínio e por final sua localização em “Project Location”. Clique em “Next” para

escolhermos a versão do SDK a ser utilizado (No meu caso escolhi a 8.0). Por final escolha “Empty Activity” e defina um nome

para a “Activity”. Ver Imagem 02.

Imagem 02: Customizando o projeto.

Importando a Biblioteca Retrofit 2

Para importar a Retrofit para nosso projeto é muito fácil, acesse o arquivo “build.gradle” e insira os dados na

TAG “dependencies”:

compile 'com.squareup.retrofit2:retrofit:2.0.0'

compile 'com.squareup.retrofit2:converter-gson:2.0.0'

Estas duas linhas irão implementar todas as classes necessárias para realizarmos as requisições de dados.

A Segunda linha é específica do conversor de dados do tipo “JSON”, o qual iremos abordar neste artigo.

Atenção: Clique no link “Sync Now” para realizar o sincronismo do projeto.

Permissão de acesso

Por padrão, quando criamos qualquer projeto na arquitetura android, o acesso à internet não é liberado.

Para concedermos esta permissão deveremos editar o arquivo “AndroidManifest.xml” inserindo o código abaixo:

<uses-permission android:name="android.permission.INTERNET" />

Agora podemos consultar a API para termos um retorno de dados através de requisições HTTP.

Criando o Layout

O layout de nosso exemplo será bem simples, contendo 2 TextViews, 1 EditText e um Button. Ver Imagem 03. Imagem 03: Layout proposto

O XML referente a este layout será o seguinte: (Listagem 01)

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"

tools:context="br.com.theclub.retrofit.MainActivity">

<TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Informe o CEP:" tools:layout_editor_absoluteX="64dp"

tools:layout_editor_absoluteY="37dp" />

<EditText android:id="@+id/edtCep" android:layout_width="wrap_content" android:layout_height="wrap_content" android:ems="10" android:text="" tools:layout_editor_absoluteX="64dp" tools:layout_editor_absoluteY="54dp" />

<Button android:id="@+id/btnCep" android:layout_width="match_parent" android:layout_height="wrap_content"

android:text="Retornar Dados" android:onClick="Retornar" />

<TextView android:id="@+id/txtDados" android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="" tools:layout_editor_absoluteX="64dp"

tools:layout_editor_absoluteY="37dp" />

</LinearLayout>

Listagem 01.

Criando a Classe “Cep”

Deveremos criar uma classe para retornar os dados da API “Postmon”. Nesta classe “Cep” teremos atributos

do tipo texto como por exemplo: “Logradouro, Cidade, Estado e Bairro” e os ”Getters” dos mesmos. Ver Listagem 02.

public class Cep {

private String bairro; private String cidade; private String logradouro;

private String estado;

public Cep(String bairro, String cidade, String logradouro, String estado) { this.bairro = bairro;

this.cidade = cidade;

this.logradouro = logradouro;

this.estado = estado;

}

public String getBairro() {

return bairro;

}

public String getCidade() {

return cidade;

} public String getLogradouro() {

return logradouro; } public String getEstado() {

return estado;

}

}

Listagem 02.

Criando a Interface

Criaremos uma interface que servirá para transformar a API “Postmon” em uma interface Java. Listagem 03.

public interface ServicoPostmon {

@GET("{cep}")

Call getEndereco(@Path("cep") String cep);

}

Listagem 03.

Foi criado um método abstrato o qual recebe um CEP como parâmetro. Através desse objeto faremos a requisição HTTP.

Com a anotação @GET(“{cep}”) a biblioteca irá concatenar a URL com o @Path(“cep”), gerando assim a nossa URL.

Codificando o Exemplo

Nossa atividade principal (MainActivity) deverá importar algumas bibliotecas essenciais, tais como:

import retrofit2.Call; import retrofit2.Callback; import retrofit2.Response; import retrofit2.Retrofit; import retrofit2.converter.gson.GsonConverterFactory;

import retrofit2.http.GET;

import retrofit2.http.Path;

Também criar algumas variáveis para inicialização dos “Listeners”, sendo:

private EditText edtCep; private TextView txtDados;

private Retrofit retrofit;

No evento “OnCreate” inicializaremos as variáveis supracitadas e instanciaremos o objeto “Retrofit”, o

qual irá inicializar o serviço. Listagem 04.

@Override protected void onCreate(Bundle savedInstanceState)

{

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

edtCep = (EditText) findViewById(R.id.edtCep);

txtDados = (TextView) findViewById(R.id.txtDados);

retrofit = new Retrofit.Builder()

.baseUrl("http://api.postmon.com.br/v1/cep/")

.addConverterFactory(GsonConverterFactory.create())

.build();

}

Listagem 04.

O método “baseUrl” é o endereço de nosso “endpoint”, o “addConverterFactory” é o conversor que realizará o

parsing do JSON retornado e o método “build()” completará o processo.

Através do evento “onClick” do Botão “Retornar Dados” implementaremos o código abaixo (Listagem 05)

public void Retornar(View v) {

String cep = edtCep.getText().toString();

ServicoPostmon service = retrofit.create(ServicoPostmon.class);

Call<Cep> call = service.getEndereco(cep);

call.enqueue(new Callback<Cep>()

{

@Override

public void onResponse(Call<Cep> call, Response<Cep> response) {

if (response.isSuccessful()) { Cep cep = response.body();

String strCep = "Cidade: " + cep.getCidade() + " " +

"Estado: " + cep.getEstado() + " " +

"Bairro: " + cep.getBairro() + " " +

"Logradouro: " + cep.getLogradouro(); txtDados.setText(strCep);

} } @Override

public void onFailure(Call<Cep> call, Throwable t)

{ Toast.makeText(MainActivity.this, "Ocorreu um erro

na requisição", Toast.LENGTH_SHORT).show(); }

});

} Listagem 05.

Na listagem 05 podemos conferir o bloco de código principal do projeto. No primeiro momento criamos uma classe que implementa a interface “ServicoPostmon”, ou seja, faremos a chamada dos métodos contidos nesta interface. Através do

objeto criado iremos requisitar o HTTP realizando uma chamada assíncrona utilizando o método “enqueue” da classe “Call”. Esse “Callback”possui dois métodos, sendo: “onResponse” o qual indicará que os dados

retornados foram obtidos com sucesso e o “onFailure”, o qual nos informará que o mesmo foi falho. Podemos conferir o resultado na imagem 04.

Imagem 04: Exemplo em funcionamento.

Conclusões

Procurei apresentar neste artigo esta fantástica biblioteca desenvolvida pela “SQUARE”, a qual

já se encontra em sua segunda versão. A mesma pode ser denominada como um cliente “REST”, um

estilo de arquitetura baseado em propriedades HTTP. Utilizamos para fins de aprendizado a API

“Postmon”, a qual nos devolve um arquivo do tipo JSON, sendo completamente compatível com a

Retrofit. Através de um exemplo prático importamos a biblioteca, criamos uma classe específica junto

com uma interface agradável para o usuário informar o CEP devolvendo alguns dados como

logradouro, cidade, estado e bairro.

Desejo a todos uma boa leitura, um abraço e até o mês que vem!

Referências

https://square.github.io/retrofit/ http://postmon.com.br/

Sobre o Autor Thiago Cavalheiro Montebugnoli adora aprender novas tecnologias. Formado pela Faculdade de Tecnologia de Botucatu – SP (FATEC), já desenvolveu softwares utilizando a plataforma .NET, Delphi

junto com Banco de Dados SQL Server e Firebird. Como experiências profissionais mais recentes, possui em seu

currículo sua atuação no Centro de Processamento de Dados da Prefeitura Municipal de Itaí-SP e atualmente compõe

a equipe da Coordenadoria Tecnologia da Informação no IFSP – Instituto Federal do Estado de São Paulo em Avaré.

Além disso, é colunista mensal da Revista The Club Megazine e é consultor Técnico do The Club. Possui as seguintes

certificações: MCP - Microsoft Certified Professional, MCTS - Microsoft Certified Technology Specialist, MCAD -

Microsoft Certified Application Developer e MCSD - Microsoft Certified Solution Developer. E-mail para contato: rico@capim.art.br

E-mail: suporte@theclub.com.br

Desenvolvendo uma aplicação com Laravel parte 2

Introdução

Continuando o artigo anterior, hoje nós iremos desenvolver as views da nossa biblioteca. Veremos o conceito

de Resource e aprenderemos a criar a primeira parte de um CRUD (create, retrieve, update e delete) para gerenciar as

informações.

A estrada até agora

Se você não acompanhou, sugiro dar uma olhada no artigo anterior, pois utilizaremos o código como base.

Nós estamos criando uma biblioteca virtual para armazenar as edições da The Club.

Gerenciando as rotas

Uma rota é nada mais que uma URL que estará acessível em sua aplicação que pode ser gerenciada pelo arquivo

routes/web.php. Uma rota pode ser definida de várias formas, a mais simples é passando uma pseudo função,

como podemos ver no exemplo abaixo retirado do arquivo web.php:

Route::get('/', function () {

return view('welcome');

});

Veja que nós chamamos o método get da classe Route e passamos uma URL como primeiro parâmetro. Isso

significa que ao acessarmos a URL definida na função (http://localhost:8000/, por exemplo) por GET a

função será executada. O GET é um dos cabeçalhos da requisição HTTP, mas fique tranquilo que caso você ainda não

os conheça nós iremos falar deles mais a adiante.

Você pode indicar também um controller e um método a ser chamado:

Route::post('/authors', 'AuthorController@store);

Neste caso ao receber uma requisição do tipo POST para a URL informada o Laravel irá automaticamente

executar o método store da classe AuthorController.

Resources Controllers

Um dos recursos que mais desenvolvemos em nossos aplicativos são os CRUDs (create, retrieve, update e

delete), ou também conhecidos como BREAD (bring, read, edit, add e delete), ou seja as operações básicas de

adicionar, listar, visualizar, remover e editar os registros de nosso banco de dados.

Através do uso dos Resources no Laravel essa tarefa fica muito simples, e com apenas uma linha de código é

possível configurar todas as rotas necessárias.

Para definir qual a ação que está sendo executada o Laravel utiliza os cabeçalhos do HTTP. Confira na Tabela 1

abaixo como eles são distribuídos.

Verbo URL Ação Nome da Rota

GET /authors Index authors.index

GET /authors/create Criar authors.create

POST /authors Armazenar authors.store

GET /authors/author Exibir authors.show

GET /authors/{author}/edit Editar authors.edit

PUT/PATCH /authors/{author} Atualizar authors.update

GET /authors/{author} Deletar authors.destroy

Tabela 1. URLs de um Resource Controller.

Assim se você fizer uma requisição POST para o controller ele automaticamente vai saber que você

está tentando armazenar um novo registro ao banco de dados.

Para registrar um resource controller é muito simples:

Route::resource('/authors', 'AuthorsController');

É possível adicionar vários resources ao mesmo tempo, basta declará-los em um array no

método resources:

Route::resources([

'/authors' => 'AuthorsController',

'/articles' => 'ArticlesController',

'/editions' => 'EditionsController',

);

Criando a nosso controller

Para criarmos um Resource Controller para gerenciar os autores vamos executar o seguinte comando:

php artisan make:controller -r AuthorController

Veja que passamos o parâmetro -r no comando, isso quer dizer que nós queremos um Resource Controller.

Se você abrir o arquivo app/Http/Controllers/AuthorController.php ele já contém todos os

métodos listados na Tabela 1.

Listando os autores

Antes de criarmos qualquer HTML, vamos editar o método index do AuthorController:

public function index() {

$authors = Author::all();

return view('author.index', compact('authors'));

}

Note que nós chamamos o método all() de nosso modelo. Ele é responsável por retornar todos os

valores contidos na tabela.

Veja que a função retorna uma view chamada author.index, isso faz com que o Laravel busque pelo

arquivo

chamado index.blade.php no diretório resources/views/author.

Uma função que utilizaremos muito é a compact() ela é responsável por buscar a variável informada e criar um array com a chave sendo o mesmo nome da variável, ou seja, nesse caso ela irá retornar:

array(

'authors' => $authors

)

Da mesma forma que compact('authors', 'articles', 'editions') irá retornar:

array(

'authors' => $authors,

'articles' => $articles,

'editions' => $editions

)

Para exibirmos uma página nós iremos retornar sempre a função view('diretorio.arquivo',

array $data) sendo que o primeiro parâmetro é uma string que contém o diretório e o arquivo separados por

um ponto e o segundo parâmetro que é opcional do tipo array que contém as informações que serão acessíveis pela

view.

Agora vamos criar a view que irá conter o HTML para exibir os autores. Crie um arquivo chamado index.blade.php no diretório resources/views/author e insira o código abaixo:

@extends('layouts.app')

@section('content')

<div class="container">

<div class="row justify-content-center">

<div class="col-md-11">

<div class="card">

<div class="card-header">Autores </div>

<div class="card-body">

<table class="table table-striped">

<thead>

<tr>

<td>Código</td>

<td>Nome</td>

<td>E-mail</td>

<td>Biografia</td>

<td colspan="2">Ações</td>

</tr>

</thead>

<tbody>

@foreach($authors as $author)

<tr>

<td>{{$author->id}}</td>

<td>{{$author->name}}</td>

<td>{{$author->email}}</td>

<td>{{$author->biography}}</td>

<td> <a href="{{ route('author.edit',$author-

>id)}}" class="btn btn-primary">Editar </a> </td>

<td>

<form action="{{ route('author.destroy', $author-

>id)}}" method="post">

@csrf

@method('DELETE')

<button class="btn btn-danger"

type="submit">Deletar </button>

</form>

</td>

</tr>

@endforeach

<tbody>

<table>

</div>

</div>

</div>

</div>

</div>

@endsection

O código é muito simples, mas alguns pontos devem ser olhados com mais atenção. O primeiro é o @extends,

que como o nome sugere é o responsável por “herdar" uma outra view, que no caso é o arquivo app.blade.php

que está dentro do diretório layout (lembre-se do padrão “diretório.arquivo"). Este arquivo contém uma estrutura básica

que utilizaremos para exibir as nossas views.

A função @section é a responsável por inserir o conteúdo dentro da @yield de mesmo nome declarada

no arquivo app.blade.php.

A função @foreach faz a iteração por todos os elementos da variável $authors que foi enviada

pelo Controller através do método compact().

Para se exibir uma variável no Blade utilizamos a notação double mustache, ou seja {{ }}.

O botão para deletar é na verdade um formulário, pois se você voltar à Tabela 1 a requisição esperada para esta

ação é do tipo DELETE, mas como os navegadores ainda não suportam esta ação é necessário simular através de uma

requisição do tipo POST e informar através da função @method que se trata de uma requisição DELETE.

O último destaque é a função @csrf que é uma segurança para evitar que alguém aponte um formulário

para o endereço de destino e simule que comandos não autorizados sejam enviados através de um outro site. CSRF é

um acrônimo para Cross-site request forgery, ou em tradução livre, falsificação de solicitação entre sites.

Criando a rota

Se você tentar acessar o endereço http://127.0.0.1:8000/author,você veja uma página de

erro dizendo que a página não existe, pois nós ainda não criamos as rotas para nosso controller.

Abra o arquivo /routes/web.php e adicione a linha abaixo:

Route::resource('author', 'AuthorController');

Note que agora a URL já funciona, mas para confirmar se tudo está funcionando corretamente execute

o comando abaixo no seu terminal:

php artisan route:list

O resultado deve ser semelhante à Figura 1.

Figura 01. Rotas disponíveis na aplicação

A página deverá ser uma página semelhante à Figura 2, mas lembre-se que os dados são aleatórios,

então somente a estrutura será a mesma!

Figura 02. Página com a listagem de autores.

Paginação

Como nós geramos somente dez registros para teste é esperado que a listagem não seja tão longa,

mas quando em produção essa listagem será bem grande e uma forma de solucionar esse problema é através

da paginação.

Normalmente é necessário um trabalho considerável para se criar uma paginação, pois é necessário

gerenciar o número total de páginas e quais elementos serão exibidos em cada página, mas com o Laravel esta é

uma tarefa muito simples!

Altere o método index() do AuthorController para que ele fique semelhante ao código

abaixo (alteração em destaque).

public function index() {

$authors = Author: :paginate(4);

return view('author.index', compact('authors'));

}

A função paginate() é já faz todo o trabalho sujo, basta passar como parâmetro o número de

elementos que serão exibidos por página.

Agora na view adicione a linha:

...

@endforeach

<tbody>

<table>

{{ $authors->links() }}

</div>

</div>

<...>

O resultado deverá ser igual à Figura 3.

Figura 03. Listagem com paginação.

Conclusão

Com o artigo de hoje nós demos nosso primeiro passo para criar um CRUD com o Laravel. Vimos como é

simples criar rotas e como criar os chamados Resources Controllers, responsáveis por fazer todas as operações com

os modelos.

Aprendemos também sobre o funcionamento das views e como fazer uma página com apenas duas linhas

de código.

No próximo artigo nós aprenderemos como desenvolver as outras ações do CRUD e também como realizar a

validação das entradas.

Espero que tenha gostado! Até o próximo artigo!

Sobre o Autor Ricardo Barbosa Crivelli, mais conhecido como Rico Crivelli, é formado como Bacharel em Sistemas de Informação e Licenciado em Computação pela Universidade Estadual do Norte do Paraná e pós-graduando

em Informática na Educação. Atualmente é Técnico em TI no Instituto Federal de São Paulo – Câmpus Avaré. Tem

como especialidade a linguagem PHP e o framework Symfony, apesar de adorar trabalhar com front-

end e desenvolvimento mobile. Possuir as certificações COBiT 4.1 Foundation e Delphi 2006 Developer. E-mail

para contato: rico@capim.art.br

E-mail: suporte@theclub.com.br

Xamarin Forms

Atualmente os sistemas operacionais mais usados em dispositivos móveis são: Android da Google, iOS da

Apple e Windows Phone da Microsoft. Cada um tem suas características especificas seja em relação a Sistema

Operacional (SO) ou designer. Cada um possui sua linguagem de programação oficial para desenvolver aplicativos.

O que é Xamarin?

Xamarin é nome de uma empresa (www.xamarin.com), que tem nos seus produtos o mesmo nome (ou

tecnologias), que roda sobre o Mono (implementação open-source do .NET para outros SOs). Pouco se conhecia sobre

a mesma até a Microsoft comprá-la.

Xamarin possui uma tecnologia onde criamos aplicações mobile nativas, usando a linguagem C#. Quando falo

em usar C# é ter as facilidades do .NET para desenvolver aplicações mobile.

Xamarin NÃO é uma ferramenta híbrida. As aplicações desenvolvidas são NATIVAS. Diferente de outras

tecnologias onde você cria uma aplicação Web e empacota em uma aplicação nativa.

O Xamarin gera os componentes nativos das plataformas usadas (Android, iOS e Windows Phone). Temos a

vantagem que a equipe de desenvolvimento não terá muitas dificuldades para se adaptar a criação de aplicações

mobiles. Não precisará ter uma equipe que tenha conhecimento em Java/Klotin (para Android), Swift/Object-C (para

iOS) e C# (para Windows Phone).

Veremos primeiramente que tipo de aplicativos poderemos criar com o Xamarin.

Xamarin.Android

Tecnologia para criar aplicações Android. Você pode criar projetos individuais no Visual Studio, e empacotar

suas regras de negócio, acesso a dados, dados remotos e no final gerar uma aplicação Android nativa.

Xamarin.iOS

Tecnologia para criar aplicações iOS. Você pode criar projetos individuais no Visual Studio, e empacotar suas

regras de negócio, acesso a dados, dados remotos e no final gerar uma aplicação iOS nativa.

Uma característica (para alguns, dificuldade) para criar aplicações iOS com Xamarin, é a necessidade de um

Mac para compilar o código no XCode, ferramenta de desenvolvimento para iOS. Não é possível, por exemplo, ter

apenas um iPhone ou iPad e testar uma aplicação usando esses dispositivos. Já com Android esse cenário é totalmente

possível e comum.

Para gerar a aplicação, é necessário compilar a mesma usando o XCode. Muitos desenvolvedores têm

dificuldades nessa parte, pois o investimento em um Mac é alto. Existem sites onde você pode "alugar" um servidor

para poder compilar sua aplicação.

Xamarin.Forms

O grande diferencial do Xamarin é o Xamarin.Forms, tecnologia que permite criar aplicações multi -

plataformas com o mesmo código (regras de negócio) e layout. Em um único projeto, criamos o layout da aplicação e

o Xamarin gera nas plataformas desejadas (Android, iOS e Windows Phone).

Isso quer dizer que com Xamarin.Forms, criamos aplicações cross-platform usando as features do .NET e C#.

Tipos de projetos

Há três tipos de projetos para compartilhar código no Xamarin:

1. Projetos compartilhados: usado para organizar seu código-fonte e usar diretivas de compilador #if conforme

necessário para gerenciar os requisitos de cada plataforma.

2. Bibliotecas de classes portáteis: biblioteca de classe portátil (PCL) que suporta o uso de interfaces

para fornecer a funcionalidade específica de cada plataforma.

3. Bibliotecas Standard do .NET: funcionam da mesma forma que as PCLs, exige o uso de interfaces para

inserir a funcionalidade específica de cada plataforma.

Projeto compartilhado (ou Shared Project)

Você cria código que será referenciado por todos os projetos da plataforma que deseja (Android, iOS e Windows

Phone). O diferencial é que devemos usar as diretivas do compilador para executar o código correto de cada plataforma.

Uma vantagem é ter o código na “mão”, mas também temos que escrever mais código quando a característica

de cada plataforma for diferente. Não temos nenhum tipo de saída desse projeto (DLL, por exemplo), o código será

compilado em cada projeto que faz referência a ele.

Na Figura 1 temos uma imagem de como funciona o Shared Project.

Figura 01: Formulário de exemplo. Fonte: www.microsoft.com

Nota: Esse tipo de projeto, pela sua dificuldade, caiu em desuso.

Biblioteca de classes portáteis (PCL)

Centraliza o código e gera um arquivo especifico para cada plataforma. Se tivermos as três plataformas mais

conhecidas, o projeto terá código para as três, se for duas, será código especifico para duas e assim em diante.

Como existem limitações e características especificas de cada plataforma, o projeto PCL reduz as informações

das classes disponíveis para as plataformas, ou seja, só será disponível aquilo que for inerente as plataformas

selecionadas

Na Figura 2 temos uma imagem de como funciona o projeto PCL.

Figura 02. Classes portáteis (PCL) Fonte: www.microsoft.com

Nesse tipo de projeto não podemos usar as diretivas do compilador.

Biblioteca Standard do .NET

Sua finalidade é semelhante a biblioteca de classes portáteis, mas com evoluções, pois possui uma quantidade

maior de classes suportadas entre as plataformas. Também nesse projeto não podemos usar diretivas de compilação.

Instalação

Vamos usar o Visual Studio Community 2017, versão gratuita do Visual Studio que contempla o Xamarin. Em

versões anteriores, o Xamarin era suportado somente nas versões pagas. Para baixar, acesse:

https://www.visualstudio.com/pt-br/downloads. Na instalação, devemos marcar a opção Desenvolvimento mobile

com .NET (Figura 3).

Figura 03. Instalação do Visual Studio com opções do Xamarin

Emuladores/Simuladores

Para criar aplicações mobile, podemos utilizar dispositivos físicos, mas durante o período de desenvolvimento,

os mais usados são emuladores ou simuladores. Cada plataforma tem características de emuladores/simuladores,

contemplado cada tipo de SO.

Quando fizemos a instalação do Xamarin, por default, é instalado o SDK do Android. Para acessar o emulador,

digite no Executar: “AVD Manager”.

Temos plataformas do Android para o emulador, assim você pode testar o seu aplicativo em diferentes tipos

de versões do Android. No caso, você precisa instalar “essa versão” do Android na sua máquina e criar o emulador.

Digite no Executar: “SDK Manager”.

No caso de testar um projeto na versão 5.1 do Android, devemos selecionar o SDK Plataform e às respectivas

imagens (System Image). Após, basta voltar ao AVD Manager e criar um emulador com a plataforma do Android. Na

Figura 4 temos emulador em funcionamento.

Figura 04. Emulador rodando projeto Xamarin Android

Nota: Em alguns casos, é necessário abrir o SDK como Administrador da máquina para poder baixar

corretamente a versão desejada.

No Machintosh temos um “simulador”. Ele já vem com algumas versões do iPhone, onde podemos escolher

pelo próprio Visual Studio na hora de rodar o aplicativo. Antes é necessário “conectar” ao Mac.

Temos um botão na barra de ferramentas chamado Pair to Mac. Ao clicar, é mostrada uma tela onde podemos

conectar em um Mac na rede ou na nuvem. Uma autenticação é necessária, e devemos ter um usuário válido no Mac

para isso. Após conectar, o ícone muda.

Quando executamos o projeto, o simulador é iniciado no Mac e temos o projeto rodando (Figura 5). Um botão

ao lado do Pair to Mac, pode agilizar e abrir o simulador no Mac.

Figura 05. Simulador rodando projeto Xamarin iOS no Mac

Remote Simulator to Windows

Podemos ter um simulador, rodando no Windows, o que facilita em muito o trabalho. Isso NÃO exclui a

necessidade de termos um Mac, pois o projeto precisa ser compilado no XCode do Mac. Baixe o simulador para

Windows em https://docs.microsoft.com/pt-br/xamarin/tools/ios-simulator.

No link tem dicas de configuração do mesmo. Agora, podemos rodar um simulador do iOS no Windows. No

Windows Phone também tem um emulador, que já é instalado por padrão. Não precisamos fazer nenhuma

configuração, mas ele não é agradável em termos de design.

Visual Studio for Mac

A Microsoft descontinuou o Xamarin Studio e da ênfase em seu produto, o Visual Studio for Mac, uma versão

gratuita da IDE para Mac.

Caso você queira instalar apenas o Visual Studio for Mac no lugar do Xamarin Studio, a vantagem é que o

mesmo instala tudo que precisamos: Mono Framework, SDKs do Android e Xamarin, sem a necessidade de fazermos a

instalação individualmente.

Na Figura 6, temos o Visual Studio for Mac rodando no Machintosh.

Figura 06. Visual Studio for Mac

Dica: É importante instalar as atualizações do Visual Studio, XCode e Xamarin. Assim, estará sempre

configurado corretamente.

Criando um projeto

É hora de abrir o Visual Studio e conhecer o Xamarin. Acesse File>New>Project. Escolha Cross-Plataform e

Mobile App (Xamarin.Forms).

Dê um nome para o projeto (no caso "HelloWorld") e escolha um caminho onde deseja salvar e clique em OK.

Note, que temos a opção de criar apenas projetos individuais, como Android>Android App (Xamarin) e iPhone

& iPad>iOS App (Xamarin). Na próxima tela de criação de projeto, vamos escolher o template, as plataformas que

vamos usar e qual o tipo de projeto.

Vamos escolher todas as plataformas e .NET Standard. No Solution Explorer, vemos os projetos e arquivos

(Figura 7).

Figura 07. Arquivos e projetos criados

Temos um projeto para cada plataforma e um "principal". A identificação fica com o padrão Nome do

projeto.Plataforma. Cada projeto tem suas características especificas para cada plataforma.

Como, por exemplo, o diretório de imagens. No Android, elas ficam armazenadas em Resources>drawable ou

Resources>mipmap. Já no iOS, as imagens ficam apenas em Resources. No Android, temos uma pasta para cada

"tamanho" de tela do dispositivo. Isso facilita para não termos imagens distorcidas em tablets, por exemplo, ou

dispositivos de tela maior.

No iOS, também temos padronização para as imagens mas elas ficam todas na mesma pasta com a

nomenclatura do arquivo correspondente ao tamanho que deseja. No WP a pasta de imagens é a Assets.

A classe principal no Android é a MainActivity.cs, enquanto no iOS é o AppDelegate.cs, precisaremos trabalhar

com as mesmas apenas em casos que necessitam de configurações individuais em cada plataforma (como por

exemplo no uso de plug-ins).

Voltando ao primeiro projeto, note que temos dois arquivos: App.xaml e MainPage.xaml. O primeiro se refere

às configurações de todo o aplicativo. O segundo é a tela inicial do nosso aplicativo.

Abra o arquivo e veja o código na Listagem 1.

Listagem 1. Código da MainPage.xaml

System.Object

System.MarshalByRefObject

System.ComponentModel.Component System.Drawing.Printing.PrintDocument

Codificando o exemplo

Precisaremos importar alguns namespaces essenciais, segue abaixo a lista.

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:HelloWorld" x:Class="HelloWorld.MainPage">

<StackLayout>

<!-- Place new controls here -->

<Label Text="Welcome to Xamarin.Forms!"

HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />

</StackLayout>

</ContentPage>

O XAML é semelhante a um arquivo XML. Ele precisa de informações para poder processar o layout em sua

respectiva plataforma. ContentPage é o tipo mais comum e simples de tela no Xamarin, existem outros que veremos

adiante.

StackLayout é um contêiner, onde podemos colocar os controles do Xamarin, que no código anterior, tem um

Label. Veremos com mais detalhes os principais controles do Xamarin adiante. Altere o texto do Label para: "Hello

World Xamarin Forms".

Rode a aplicação na plataforma que desejar para ver o resultado (Figura 8).

Figura 08. Projetos rodando no iOS e Android

Dica: Para mudar o projeto que deseja rodar, clique com o botão direito sobre o mesmo e escolha a opção Set

as StarUp Project.

Todo arquivo XAML tem um arquivo CS vinculado. É nele que vamos adicionar a maioria dos códigos que

usaremos para aplicativos, como podemos ver sua estrutura na Listagem 2.

Listagem 2. Código da MainPage.xaml.cs

using System;

using System.Collections.Generic; using System.Linq;

using System.Text;

using System.Threading.Tasks; using Xamarin.Forms;

namespace HelloWorld

{ public partial class MainPage : ContentPage

{

public MainPage() {

InitializeComponent(); }

} }

Conclusão

A principal intenção deste artigo foi o de proporcionar ao leitor uma ideia geral desta importante classe denominada “PrintDocument” presente na plataforma .NET. Procurei também discorrer das classes, métodos e

propriedades mais usuais para este tipo de trabalho. Para finalizar, montamos um pequeno exemplo envolvendo todo

o conceito supracitado.

Desejo uma ótima leitura, um abraço e até o mês que vem!

Referências

https://msdn.microsoft.com/pt-br/library/system.drawing.printing.printdocument(v=vs.110).aspx

Sobre o Autor Thiago Cavalheiro Montebugnoli adora aprender novas tecnologias. Formado pela Faculdade de Tecnologia de Botucatu – SP (FATEC), já desenvolveu softwares utilizando a plataforma .NET, Delphi junto com Banco de

Dados SQL Server e Firebird. Como experiências profissionais mais recentes, possui em seu currículo sua atuação no Centro de

Processamento de Dados da Prefeitura Municipal de Itaí-SP e atualmente compõe a equipe da Coordenadoria Tecnologia da

Informação no IFSP – Instituto Federal do Estado de São Paulo em Avaré. Além disso, é colunista mensal da Revista The Club

Megazine e é consultor Técnico do The Club. Possui as seguintes certificações: MCP - Microsoft Certified Professional, MCTS -

Microsoft Certified Technology Specialist, MCAD - Microsoft Certified Application Developer

e MCSD - Microsoft Certified Solution Developer. E-mail para contato: rico@capim.art.br

E-mail: suporte@theclub.com.br