Category Archives: Xamarin Forms

#01 – Xamarin.Forms – Apresenta – Dev Cycle

Chapter : 1

Saga MM {Modo Mobile}

Aprenda um pouco sobre uma das partes mais importantes de um app Xamarin.Forms, o seu modo de desenvolvimento.

Conheça alguns dos principais produtos/serviços que nos ajudam a criar apps nativos cross platform de forma rápida e produtiva. Vamos lá:

Passo a Passo

O seu ciclo de desenvolvimento:

xam_basico_cycledev

Esta imagem representa cada etapa do ciclo, suas características e o que foi contemplado na versão 4:

University

Considerado o primeiro passo para quem quer seguir no caminho mobile Xamarin. O University é um portal atualizado por experts na tecnologia.

Este é um serviço pago, porém há um trial disponível.

Plataforma

Na etapa de Design, Desenvolvimento e Integração utilize a produtividade do Visual Studio. Aproveitando todos os seus recursos, como Debug, Design, etc…

Outros recursos:

  • Design Code – Xamarin Inspector plugin;
  • Material Design – Apps com um visual incrível

Na versão 4, ganhamos:

  • Integração aprimorada com o VS
  • Forms 2.0
  • iOS9 & AndroidM (Designer melhorados)
  • Mais ferramentas Preview (Profiler, Objective Sharpie CocoaPod Integration e Inspector)

TestCloud

Testes e TDD já são onipresentes no desenvolvimento de soluções, inclusive mobile. Teste APPs em vários dispositivos, na nuvem (tudo automático).

Durante esta etapa, precisamos atingir o maior número de dispositivos possíveis. Mas, no Mobile, isto não é tarefa fácil. Pois temos uma variedade enorme de Apps.

Para resolver isso, o Xamarin dispõe um framework de teste automatizado. Uma ferramenta que retorna todo tipo de problema ocorrido durante a execução do mesmo, e é capaz de ser executado em um serviço (cloud) controlado pela Xamarin (exibindo gráficos e gerenciando todo a evolução do app).

O Test Cloud pode nos ajudar a garantir que o app funcione em dispositivos móveis, rodando testes de interface em até 2 mil dispositivos físicos, reais (Android e iOS) hospedados na nuvem.

Ele provê informações dos dispositivos como:

  • Testes passados em cada dispositivos
  • Picos de consumo de memória
  • Utilização de CPU e Logs
  • Tempo dos testes
  • Screenshots (em qualquer momento do testes e em resoluções diferentes).

Hoje temos um (Trial) de 60 horas para utilização.

Na versão 4 ganhamos:

  • Integração com a plataforma
  • UITeste 1.0
  • Test Recorder

Utilizando o Test Cloud, todos os “dev mobile” C#, Objective-C, Java e de apps híbridos – também podem testar e elevar a qualidade dos apps.

Insights

No último ciclo temos o Insights, monitore APP em tempo real detectando problemas de desempenho ou falhas. Rastreie eventos e performance e o tempo de cada operação. Crie combinação de eventos de rastreamento com identificação do usuário para resolver problemas.

Na versão 4, ganhamos:

  • Integração simples com serviços populares para notificações críticas, como: Slack, Git e o VS
  • Mapa de calor
  • Report de falhas
  • Cálculo de consumo de dados
  • Fluxo de iteração usuário/app
  • Capacidade de telemetria

Este serviço foi integrado no Hockey App, não é gratuito, e tem um limite de 2 apps.

Next stop Hello World Forms. Disambarke on the left.

Ok! Um pouco sobre API do Xamarin.Forms.

Missão cumprida!

#01 – Xamarin.Forms – Apresenta – XAML & CS

Chapter : 1

Saga MM {Modo Mobile}

Aprenda um pouco sobre uma das partes mais importantes de um app Xamarin.Forms, o seu modo de desenvolvimento. Vamos lá:

O que é?

No Forms, a UI das APPs podem ser definidas utilizando dois modos:

XAML – Linguagem de marcação declarativa. Projetada pela Microsoft, é uma linguagem de uso geral para instanciar e inicializar objetos.

Não limitada à definição de layouts de UI, mas é assim que tem sido mais aplicada, como no Forms, permitindo definir UI em APPs utilizando marcações em vez de código.

C# – código fonte usando a API Forms.

Aplicabilidade

A utilização da XAML é indicada para:

  • Pages
  • Views
  • Layouts
  • Classes personalizadas

A XAML é adequada para uso com a arquitetura MVVM. O XAML define a View que fica ligada ao código ViewModel através de ligações de dados baseados em XAML.

Esta imagem representa bem as diferenças entre os modos de desenvolvimento Forms:

Modo XAML

Uma outra forma de desenvolver a ContentPage é criando um arquivo XAML. Esta abordagem traz benefícios, entre eles a separação do Design e da Lógica de Negócio ou Código. Na imagem temos uma nova ContentPage criada com o XAML.

Nesta abordagem, temos 2 arquivos para a ContentPage PaginaInicial – xaml e xaml.cs:

  • xaml – xml de definição do layout. Por isso temos a mesma configuração do layout anterior, porém com alguns acréscimos, como definição da cor de background do botão e evento click. Na linha 2, veja a propriedade x:Class que define a classe C# que está vinculada ao nosso xaml.
  • cs – contém lógica de negócio, por exemplo, o método de definição do click do botão.

Neste modo, a UI é definida em um arquivo XAML com sintaxe XAML, enquanto que o comportamento em tempo de execução é definido em um code-behind separado.

O arquivo XAML é analisado em tempo de compilação para localizar objetos nomeados, e novamente em tempo de execução, criar uma instância e inicializar objetos, e estabelecer ligações entre esses objetos e código de programação.

O resultado é essa UI:

Não somos obrigado a utilizar XAML em um APP Forms, temos a opção de codificar em C# no code-behind, mas muitas vezes o XAML é mais sucinto e mais visualmente coerente.

“Para APPs simples, criar UIs com C# é um modo razoável. No entanto, à medida que ele crescer, é possível deparar-se com a escrita de muito código repetitivo. É possível evitar esse problema usando XAML ao invés de código C#”

O XAML pode soar familiar para quem já desenvolveu (WPF). No entanto, as marcas se diferem, pois referem-se a tipos Forms. Além disso, o elemento raiz se refere a uma subclasse da classe Xamarin.Forms.Element. Todos os arquivos XAML em um APP Xamarin.Forms devem fazer isso.

Modo C#

Esta abordagem, note que os componentes são organizados de acordo com as definições do StackLayout, neste caso será exibida uma tela com um botão.

Note também que toda a tela é definida em código, e portanto, caso existam maiores interações, estas deverão ser definidas em código, resultando em uma extensa da classe de definição de uma View, já que todas as propriedades dos objetos serão feitas “na unha” Manualmente.

Em termos técnico, o Content de uma ContentPage, suporta o Tipo View (aqui um StackLayout) pois ele herda de View.

“Eu crio as telas via código fonte sem o XAML, ao meu ver facilita o aprendizado, já que estamos montando a tela na mão e conhecendo melhor os componentes”

Colaterais

No Forms/XAML, um dos maiores problemas hoje se dá por conta de não existir um designer de telas em XAML, neste caso, somos obrigados a ter que codificar as tags todas na unha.

Mas, temos uma alternativa existente, o Gorilla Player, assunto abordado em outro post.

Next stop bla bla bla. Disambarke on the left.

Ok! Um pouco sobre API do Xamarin.Forms.

Missão cumprida!