Passo a Passo – Maratona Xamarin PDF 04 1

Passo a Passo
Maratona Xamarin – Iniciante
Autor: Renato Siqueira
Utilizado: Visual Studio 2015
Data: 30/03/2017

1. Abra um novo Projeto (dei o nome de Cats, conforme tutorial)

2. Selecione as Opções Blank App, Xamarin.Forms e Portable Class Library (PCL)

3. Para não termos problemas (já que não vamos usar), apague o UWP da solução (Neste
caso, Cats.UWP) – Botão direito em cima dele > remover.
4. Como em todo novo projeto, verifique se tem atualizações disponíveis.
(Botão direito na Solução, Manage Nuget Packages for Solution)
 Passo a Passo – Maratona Xamarin PDF 04 2

5. Se aparecer estes itens, não faça nada. Atualize apenas se o Xamarin.Forms constar na
lista e apenas ele.

6. Ok. Pré Requisitos feitos. Vamos iniciar.

Com o botão direito em cima do Projeto CATS, selecione Manage Nuget Packages
 Passo a Passo – Maratona Xamarin PDF 04 3

7. Na Aba Browser, pesquise por Microsoft.Net.Http e Instale (Aceite a janela de Licença

também)

8. Faça o mesmo com o Newtonsoft.Json (Atenção: Apesar de ter aparecido um update

(Microsoft.Bcl.Build), eu não mandei atualizar nada.)

9. Crie as 3 Pastas (Models, ViewModels e Views) – Botão direito em CATS (Portable) >
ADD > New Folder
 Passo a Passo – Maratona Xamarin PDF 04 4

10. Em Models, crie uma Classe com o nome Cat.cs (Não mude nada, apenas dê o nome
de Cat.cs)

11. Dentro de Cat.cs, faça ficar conforme a imagem (é o texto que está no pdf da
maratona).
Aqui tem uma observação: Como o PDF da maratona é anterior à algumas
mudanças, a palavra Public (deixei destacado) não consta no PDF, mas será
necessária futuramente, portanto, coloque ela e Salve.
 Passo a Passo – Maratona Xamarin PDF 04 5

12. Ainda em Models, crie uma outra Classe com o nome Repository.cs (Não mude nada,
apenas dê o nome de Repository.cs)

13. Dentro de Repository.cs, faça ficar conforme a imagem (é o texto que está no pdf da
maratona). Salve.

14. Acabamos a pasta Models.

15. Crie uma nova classe dentro da Pasta ViewModels com o nome de CatsViewModel.cs
16. Dentro de CatsViewModel.cs, adicione o using System.ComponentModel; conforme
imagem
 Passo a Passo – Maratona Xamarin PDF 04 6

17. Substitua o class CatsViewModels para

public class CatsViewModel:INotifyPropertyChanged

18. E, segundo o pdf (Apenas passe o mouse em cima da linha vermelha, na janela que
mostrará, clique em Show Potential Fixes)

19. Agora seu CatsViewModels.cs deverá estar assim:

 Passo a Passo – Maratona Xamarin PDF 04 7

20. Adicione os códigos conforme PDF e agora seu arquivo deverá estar assim:

21. Continuando o PDF da Maratona:

 Passo a Passo – Maratona Xamarin PDF 04 8

22. Seu Arquivo agora deve estar assim:

23. Continuando, ao adicionar o

public ObservableCollection<Cat> Cats { get; set; }
você deve novamente deixar o mouse em cima dos erros e selecionar Show Potential
Fixes
 Passo a Passo – Maratona Xamarin PDF 04 9

24. O primeiro erro irá sugerir que se adicione

using System.Collections.ObjectModel; - Selecione esse.
O segundo erro irá sugerir que se adicione
using Cats.Models; - Selecione esse.
25. Estamos na Tarefa 04, item 10. Siga até o 21 (que finaliza a tarefa 04) e você terá um
CatsViewModels.cs como este:
Parte 1:
 Passo a Passo – Maratona Xamarin PDF 04 10

Parte 2:
 Passo a Passo – Maratona Xamarin PDF 04 11

26. Ok. Tarefa 05: O pdf está bem explicado. Ao final você terá:

27. Tarefa 06: Na época da criação da maratona o App.cs ficava bem à mostra. Atualmente
é diferente. Seu App.cs você encontrará aqui
(1. Clique na Setinha Preta / 2. Abra o App.xaml.cs):
 Passo a Passo – Maratona Xamarin PDF 04 12

28. E ele deve ficar assim:

29. O Código é um pouco diferente do PDF mas faz a mesma coisa. Só é simplificado.
30. Neste momento, você já poderá rodar no emulador e ter os resultados na tela.
 Passo a Passo – Maratona Xamarin PDF 04 13

Outras Questões:

- Apesar de ter aparecido um update (Microsoft.Bcl.Build), eu não mandei atualizar nada.

- Às vezes não aparece a imagem dos gatos na tela, é normal.

- Não fiz nenhuma outra alteração que não estivesse listado neste guia (como permissões no
android e/ou programação fora do projeto de nome Cats (PCL)).

- Este guia é apenas para resolução de problemas/dúvidas quanto ao posicionamento dos

códigos, todas as explicações do porquê ou pra quê se usa cada comando estão no PDF da
maratona lab 04.

Até a Próxima.
Renato Siqueira