Comecemos nossa jornada juntos para construir belos aplicativos multi-plataforma nativos com .NET, Xamarin e Visual Studio! Neste blog vou guiá-lo por todo o processo e descrever tudo o que está em Arquivo -> Novo para Xamarin. Se você é um aprendiz mais visual, tenho um vídeo completo que você pode assistir:
Deixaremos algumas bases primeiro respondendo algumas perguntas freqüentes.
O que é .NET?
.NET é um runtime multi-plataforma, de alto desempenho e código aberto que é usado com vários idiomas, editores e bibliotecas que permite que aplicativos sejam construídos para web, celular, desktop, jogos, e muito mais. É a base que permite que o código seja executado em diferentes plataformas, tais como iOS, Android e Windows. Se você é um desenvolvedor web isto é como o V8 runtime que executa JavaScript ou se você é um desenvolvedor Java, a JVM que executa Java.
O que é Xamarin?
.NET tem uma série de frameworks que são construídos para ele que permitem cenários únicos para desenvolvedores para plataformas específicas. Por exemplo, ASP.NET Core e Blazor são frameworks construídos para .NET para desenvolvimento web. WPF e UWP são frameworks construídos para .NET para desenvolvimento desktop. Xamarin é um framework e ferramentas que permite que aplicativos sejam construídos para iOS, Android e macOS. Ele também contém várias bibliotecas que permitem o desenvolvimento multiplataforma através do iOS, Android, macOS e Windows, incluindo Xamarin.Forms para interface de usuário multiplataforma e Xamarin.Essentials para acessar recursos de plataforma nativa cross-platform.
Que linguagens de programação posso usar?
.NET suporta várias linguagens, incluindo C#, F# e Visual Basic. Você pode usar qualquer uma destas linguagens de programação para construir aplicações com Xamarin, no entanto eu sou um desenvolvedor C#, e é a linguagem principal para o desenvolvimento de aplicações. No entanto, existem alguns frameworks fantásticos para F# como o Fabulous para desenvolvimento funcional.
XAML é outra “linguagem” que será usada para construir interface de usuário com o Xamarin. XAML tem sido usado por muito tempo para construir aplicações Windows com WPF e UWP e tem algumas características excelentes incluindo marcação fácil de ler, tecnologia Hot Reload, e encadernação de dados avançada para tornar o desenvolvimento de UI uma brisa.
Que ferramentas posso usar?
.NET permite aos desenvolvedores usar uma ampla gama de ferramentas incluindo linha de comando, editores de código como Visual Studio Code, e IDEs completos (Integrated Development Environment) com Visual Studio 2019 e Visual Studio 2019 para Mac. Para desenvolver aplicativos móveis com Xamarin, precisaremos usar o Visual Studio 2019 ou o Visual Studio 2019 para Mac, pois eles têm todos os recursos para criar aplicativos.
Então, vamos começar a criar nossos primeiros aplicativos móveis com Xamarin!
Instalando o Visual Studio for Mobile Development
O primeiro passo na sua jornada entre plataformas é instalar o Visual Studio 2019 para Windows ou o Visual Studio 2019 para Mac.
Quando instalar o Visual Studio 2019 no Windows tudo o que você precisa fazer é selecionar o desenvolvimento Mobile com .NET:
No Visual Studio 2019 para Mac você pode selecionar para instalar Android e iOS.
Se você estiver fazendo o desenvolvimento iOS você também precisará instalar o Xcode na sua máquina MacOS.
Depois disso você está pronto para o desenvolvimento móvel!
Quando você cria e executa um projeto Android você pode ser solicitado a instalar mais SDKs Android e criar emuladores Android.
Criando seu projeto
Agora temos o Visual Studio 2019 e o Xamarin instalados, vamos ao trabalho! Quando você lançar o Visual Studio 2019 você terá uma opção para criar um novo projeto. No Windows você pode procurar por Xamarin.Forms ou usar o filtro de tipos de projeto e selecionar Mobile. Vamos querer selecionar Mobile App (Xamarin.Forms).
Quando você selecionar este novo projeto, você verá um novo diálogo perguntando que tipo de template para o aplicativo que você gostaria de usar:
Temos algumas opções para selecionar com base no tipo de aplicativo que queremos construir.
Flyout, Tabbed, & Blank
Flyout & Tabbed app templates são baseados na mais recente tecnologia Xamarin.Forms chamada Shell. Ele permite um andaime mais rápido de aplicações e oferece características únicas, tais como navegação baseada em URL. Estes templates são similares com uma diferença principal se você quiser um menu flyout ou abas inferiores para a base do seu aplicativo.
Aplicativo em branco é apenas isso e oferece um template bastante simples com uma única página e nada mais.
Vamos com Flyout! Quero que comecemos aqui, pois a maioria dos tutoriais não passam pela Shell e para mim é o futuro do desenvolvimento do aplicativo Xamarin. Este template tem muito em é assim em posts futuros nós vamos passar por cada seção, mas por hoje nós vamos apenas criar o projeto e passar pelo que é um Shell.
Se você está no Visual Studio 2019 para Mac você vai querer selecionar Multiplataforma > App > Flyout Forms App
O que há no projeto?
Agora que o projeto da aplicação foi criado você verá vários projetos dentro de uma única solução.
Passemos pelo que está aqui na nossa nova solução:
O primeiro projeto contém várias pastas, arquivos de código e arquivos de interface de usuário. Este projeto é um projeto .NET Standard que nos permite ter um único projeto que pode ser compartilhado entre diferentes sistemas operacionais. Este projecto é onde iremos escrever a maioria do nosso código.
iOS & Os projectos Android são o projecto “head” ou “pai” que é usado para alojar código, configurações, activos específicos da plataforma, e muito mais. Aqui é onde você vai querer configurar diferentes configurações, tais como nome de exibição, ícone do aplicativo, números de versão e qualquer código que é necessário para coisas específicas do iOS ou Android que não estão disponíveis em todas as plataformas. Em algum momento você precisará entrar nesse projeto e ajustar as coisas ao redor, mas por enquanto ficaremos no projeto multi-plataforma.
Xamarin.Forms Cross-Platform UI
Dentro do nosso projeto multi-plataforma .NET Standard encontraremos um pouco de código para o nosso aplicativo. Este template mostra um exemplo de aplicativo que tem uma lista de itens e uma página sobre. Os itens estão organizados em pastas:
- Modelos: Estas são classes que representam dados em seus aplicativos como Pessoa, Carro, Cão, Gato, etc. Neste aplicativo temos um único modelo chamado Item.
- Serviços: Dentro desta pasta é onde você colocaria o código que acessa coisas não relacionadas com o UI, tais como chamadas de serviços web, bancos de dados, etc. No projeto em uma MockDataStore simples que é usada para armazenar itens na memória.
- Views: Aqui é onde nossos arquivos de interface de usuário XAML vão viver!
- ViewModels: Nesta pasta você vai encontrar arquivos que mapeiam quase 1:1 para a pasta Views. Isto é porque cada View tem um ViewModel que é ligado que Xamarin.Forms pode unir os dois para que a View possa exibir informações ou métodos de chamada em cada ViewModel.
Vejamos a AboutPage.xaml que é a primeira página que veremos quando iniciarmos o aplicativo. Aqui vemos algumas coisas, primeiro é o elemento de nível superior ContentPage:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MyAwesomeApp.Views.AboutPage" xmlns:vm="clr-namespace:MyAwesomeApp.ViewModels" Title="{Binding Title}">Aqui estão algumas tags xmlns que representam onde o código específico vive. O padrão e x estão incluídos em cada arquivo e são para a funcionalidade base. A tag xmlns:vm nos permite acessar nosso próprio código a partir do XAML, que veremos em um pouco. O x:Class é uma referência ao namespace e ao nome da página, isto corresponde ao código por trás. Finalmente, há uma propriedade Title que é um dado vinculado a uma propriedade chamada Title em nosso ViewModel.
Podemos definir propriedades adicionais como o BindingContext e Resources com conteúdo XAML. Aqui vamos usar essa tag xmlns:vm para definir o BindingContext para uma nova instância do AboutViewModel:
<ContentPage.BindingContext> <vm:AboutViewModel /></ContentPage.BindingContext>Next up é um recurso de Cor que pode ser usado na página. Os recursos nos permitem remover código duplicado e criar pares chave/valor reutilizáveis. Isto é semelhante ao CSS no desenvolvimento web.
<ContentPage.Resources> <ResourceDictionary> <Color x:Key="Accent">#96d1ff</Color> </ResourceDictionary></ContentPage.Resources>Podemos adicionar mais coisas aos Recursos incluindo strings, estilos e mais.
Finalmente, cada Página pode ter um controle de elemento raiz. Este é normalmente um Layout como o StackLayout, ScrollView, ou uma Grade como a que temos aqui. A Grade é um controle fantástico que tem linhas e colunas. Não vamos entrar muito em detalhes dos layouts, mas este exibe uma imagem, algum texto e um botão que pode ser clicado para abrir um navegador web.
<Button Margin="0,10,0,0" Text="Learn more" Command="{Binding OpenWebCommand}" BackgroundColor="{StaticResource Primary}" TextColor="White" />Note the
{StaticResource Primary}, que é uma referência a um recurso que definimosAccentantes, masPrimaryestá localizado em nossa App.xaml, que são recursos disponíveis em toda a aplicação.
Para encontrar mais layouts e controles você pode abrir a Caixa de Ferramentas para ver o que está disponível:
Finalmente, se você selecionar um controle ou layout o painel de propriedades mostrará todas as diferentes propriedades que estão disponíveis nesse controle.
Uma coisa muito importante é que cada uma destas páginas XAML tem código por trás que é importante para a visualização XAML e tem métodos específicos para o construtor e evento, como quando as páginas são mostradas ou desaparecem. Você pode usar a pequena seta para baixo para ver o código .xaml.cs atrás do arquivo.
Se você abri-lo, você verá que é muito simples, pois para esta view não há nenhum evento especial que seja necessário agora.
public partial class AboutPage : ContentPage{ public AboutPage() { InitializeComponent(); }}Interação do usuário e ViewModels
Agora, vamos falar sobre o ViewModel para esta página que foi criada no XAML. Abra o arquivo ViewModels -> AboutViewModel.cs clicando duas vezes nele.
public class AboutViewModel : BaseViewModel{ public AboutViewModel() { Title = "About"; OpenWebCommand = new Command(async () => await Browser.OpenAsync("https://aka.ms/xamarin-quickstart")); } public ICommand OpenWebCommand { get; }} Este é um ViewModel surpreendentemente simples, mas é um exemplo notável de como a ligação de dados funciona. Aqui o ViewModel define o título como About e então cria um novo comando que está chamando Browser.OpenAsync para abrir um navegador web na página.
Isso Command é algo especial. Ao contrário de Title que é um simples string que será exibido, o Command é uma classe especial que podemos usar para dizer à nossa interface de usuário para fazer algo quando o usuário interage com ele. Por exemplo no nosso Button vimos o seguinte código:
Command="{Binding OpenWebCommand}" Este código está dizendo ao Xamarin.Forms que há um comando public no nosso ViewModel que tem código para executar quando o usuário clica no botão. Neste caso, nós queremos abrir a brower, que é uma das muitas funcionalidades nativas disponíveis no Xamarin.Essentials. Chamando Browser.OpenAsync irá lançar o navegador específico para iOS e Android com uma única linha de código.
Quick Changes with XAML Hot Reload
Agora, é hora de lançar o nosso aplicativo. Eu gosto de começar no Android porque os emuladores estão disponíveis localmente tanto no Windows como no MacOS. No menu do Visual Studio você verá que o Android é o projeto padrão e o botão de depuração está disponível e mostrará seus emuladores Android disponíveis. Ao clicar no botão de debug se não tiver nenhum emulador será pedido para criar um.
Quando o aplicativo for iniciado entrará no modo de Debug que nos permite definir pontos de quebra no nosso código para ver os valores, mas também habilita o XAML Hot Reload onde podemos fazer alterações na UI sem ter que parar de depurar.
Vamos abrir a AboutPage.xaml e mudar a Accent cor para uma cor diferente. Aqui vou atualizá-lo para Orange e clicarei save para ver as alterações.
Neste ponto podemos adicionar novos controles, atualizar a interface do usuário, e continuar a trabalhar no nosso aplicativo no Android.
Desdobrar para iOS com Hot Restart
Vamos colocar o iOS em funcionamento! Clique com o botão direito no projeto iOS e selecione Set as Startup Project:
No iOS as coisas são um pouco diferentes para os desenvolvedores. Se você estiver em macOS e instalar o Xcode você terá os Simuladores iOS disponíveis. Se este for você, você pode selecionar um simulador e depois depurar a sua aplicação. No Windows, não existem simuladores iOS 🙁 por isso existem duas maneiras de obter o seu
- iOS Remoted Simulator: Se tiver uma máquina MacOS pode instalar o Visual Studio 2019 para Mac e Xcode e ligar-se a ele a partir da sua máquina Windows para o utilizar como uma máquina de construção remota. O simulador iOS pode então ser lançado a partir do mostrado na sua máquina Windows, o que é muito legal!
- iOS Hot Restart: Esta é uma nova tecnologia de pré-visualização que lhe permite implementar uma compilação de depuração da sua aplicação directamente no seu dispositivo iOS que está ligado à sua máquina Windows. Isso é ótimo se você não tiver um mac e quiser depurar sua aplicação e usar recursos incríveis como XAML Hot Reload.
Baseado em sua configuração e equipamentos disponíveis, há uma ótima opção para você começar a depurar sua aplicação iOS a partir do Windows. Leia a documentação que eu liguei para um guia de configuração completo.
Aplicativo e Shell
A última coisa que eu quero falar é sobre o que está no nosso *Aplicativo e o que está no nosso Shell:
Inside of our App.xaml você encontrará recursos globais como Primary que usamos anteriormente no botão, mas também estilos como um global Button estilo que estamos usando com estados quando ativado e desativado. Se você abrir o código do App.xaml.cs atrás de você vai criar o App que está definindo o MainPage para o nosso AppShell e também tem eventos adicionais similares à nossa página, mas para o app como quando ele começou, foi dormir (também conhecido como background), e retomou.
O AppShell.xaml abriga a Shell da nossa estrutura de aplicação. Ele inclui estilos e cores para nossa estrutura de aplicação, e então tem itens adicionais para abas, flyouts, e páginas que são exibidas. Aqui vamos encontrar dois elementos FlyoutItem que representam os AboutPage e os BrowsePage. Adicionalmente, ele tem um MenuItem para exibir um botão de login/logout. O ShellContent tem uma ligação à nossa página que criámos e automaticamente as páginas aparecerão e navegarão para cada uma delas quando seleccionadas.
Há muito mais para o Xamarin.Forms Shell e para criar aplicações com o Xamarin, mas esperamos que isto o coloque no caminho inicial para começar a utilizar a sua aplicação. Certifique-se de seguir o .NET dev.para contabilizar mais entradas nesta série.