.NET MAUI: do zero ao seu primeiro app multiplataforma com C#

Fala, Dev! 👋

Vamos juntos, passo a passo, explorar esse universo e colocar seu primeiro app no mundo. Bora codar? ⚡

Por que .NET MAUI? O poder do C# no seu bolso

Vantagem 1: projeto único para dominar todos

Vantagem 2: performance nativa de verdade

Vantagem 3: produtividade com .NET hot reload

Xamarin.Forms vs. .NET MAUI: a evolução em resumo tabelado

Configurando seu ambiente

Pré-requisitos

Passo a passo no Visual Studio (Windows)

1. Abra o Visual Studio Installer (você pode procurá-lo no menu iniciar).

2. Encontre sua instalação do Visual Studio 2022 e clique em modificar.

3. Na tela que abrir, vá para a aba cargas de trabalho.

4. Marque a caixa "Desenvolvimento de interface do usuário de aplicativo multiplataforma .NET". As dependências importantes, como os SDKs do Android, serão selecionadas automaticamente.

5. Clique em modificar no canto inferior direito e aguarde a instalação terminar.

Alternativa: instalação via linha de comando

1. Abra seu terminal de preferência (prompt de comando, PowerShell, Windows Terminal).

2. Digite o seguinte comando e pressione Enter:

dotnet workload install maui

Atenção: se você está no Windows e usa o Visual Studio, o método recomendado é usar o Visual Studio Installer. Misturar instalações via installer e via linha de comando pode, em alguns casos, criar conflitos e fazer com que o Visual Studio não encontre os pacotes corretamente. Use um método ou outro para garantir a consistência.

Criando nosso primeiro projeto

• No Visual Studio: vá em arquivo > novo > projeto. Na janela de criação, filtre os modelos por "MAUI" e selecione a opção Aplicativo .NET MAUI. Dê um nome para o seu projeto, como MinhaListaDeTarefas, e clique em criar.

• Via linha de comando: navegue pelo terminal até a pasta onde você quer criar o projeto e rode o comando:

dotnet new maui -n MinhaListaDeTarefas

Anatomia de um app .NET MAUI: o que acontece por baixo do capô?

• MauiProgram.cs: este é o centro e o ponto de partida do seu aplicativo. É onde o aplicativo é configurado; a execução inicia em pontos específicos por plataforma que chamam essa configuração. É aqui, usando um padrão de builder muito familiar para quem vem do ASP.NET Core, que o app é configurado. Registramos fontes, configuramos serviços para injeção de dependência e dizemos ao MAUI qual é a página inicial da nossa aplicação. Essa familiaridade é proposital, unificando a experiência de desenvolvimento em todo o ecossistema .NET.

• Pasta Platforms: Imagine esta pasta como sua "saída de emergência". 95% do tempo, você não vai precisar mexer aqui. Mas se um dia você precisar escrever um código que só funciona em Android ou que acessa uma API específica do iOS, é aqui que esse código vai morar.

• Pasta Resources: este é o nosso baú de tesouros compartilhados. Tudo que é visual e comum a todas as plataformas fica aqui.
• Images: coloque suas imagens aqui, de preferência em formato SVG. O .NET MAUI faz algo fantástico: ele pega esse único arquivo SVG e, durante a compilação, gera automaticamente todas as versões e tamanhos adequados para cada densidade de tela do Android e do iOS. Adeus, trabalho manual e repetitivo!
• Fonts: para adicionar fontes customizadas ao seu app.
• Styles: um local para centralizar estilos, como cores e tamanhos de fonte, garantindo uma identidade visual consistente.

A dupla dinâmica: MainPage.xaml e MainPage.xaml.cs

• MainPage.xaml: este é o arquivo que descreve a aparência da sua tela. Ele usa uma linguagem de marcação chamada XAML, que é muito parecida com HTML. É aqui que vamos "desenhar" nossa interface, adicionando botões, campos de texto e a lista.

• MainPage.xaml.cs: este é o "cérebro" por trás da interface, também conhecido como code-behind. É um arquivo C# onde escrevemos a lógica. O que acontece quando um botão é clicado? A resposta para essa pergunta estará no código deste arquivo.

Mão na massa: construindo nossa to-do list

Parte 1: desenhando a interface em XAML

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MinhaListaDeTarefas.MainPage"
             Title="Minha Lista de Tarefas">

    <VerticalStackLayout Spacing="10" Padding="20">

        <Label 
            Text="Minhas Tarefas 📝"
            FontSize="24"
            FontAttributes="Bold"
            HorizontalOptions="Center" />

        <HorizontalStackLayout Spacing="10">
            <Entry
                x:Name="NovaTarefaEntry"
                Placeholder="Digite uma nova tarefa"
                HorizontalOptions="FillAndExpand" />
            <Button
                Text="Adicionar"
                Clicked="OnAddTaskClicked" 
                WidthRequest="100"/>
        </HorizontalStackLayout>

        <CollectionView x:Name="TarefasCollectionView">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid Padding="5" ColumnDefinitions="*,Auto">
                        <Label Text="{Binding Texto}" VerticalOptions="Center"/>
                        
                        <Button Grid.Column="1" 
                                Text="Remover" 
                                Clicked="OnRemoveTaskClicked"
                                CommandParameter="{Binding .}"/>
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

    </VerticalStackLayout>
</ContentPage>

• Usamos um VerticalStackLayout para empilhar os elementos verticalmente.

• Adicionamos um Entry (campo de entrada) chamado NovaTarefaEntry para a pessoa usuária digitar a tarefa.

• Um Button (botão) que, ao ser clicado (Clicked), vai chamar um método OnAddTaskClicked no nosso código C#.

• Um CollectionView, que é o componente perfeito para mostrar listas de dados.

• Dentro dele, definimos um ItemTemplate para dizer como cada item da lista deve ser exibido: um Label (rótulo) com o texto da tarefa e um botão "Remover".

Parte 2: dando vida com C# 😂

// Tarefa.cs
public class Tarefa
{
    public int Id { get; set; }
    public string Texto { get; set; }
}

// MainPage.xaml.cs
using System.Collections.ObjectModel;

namespace MinhaListaDeTarefas;

public partial class MainPage : ContentPage
{
    // Usamos ObservableCollection para que a UI atualize automaticamente
    public ObservableCollection<Tarefa> Tarefas { get; set; }
    private int proximoId = 1;

    public MainPage()
    {
        InitializeComponent();

        // Inicializamos a coleção
        Tarefas = new ObservableCollection<Tarefa>();

        // Conectamos a coleção à nossa CollectionView no XAML
        TarefasCollectionView.ItemsSource = Tarefas;
    }

    private void OnAddTaskClicked(object sender, EventArgs e)
    {
        // A Laís pediu para adicionar essa validação :)
        if (!string.IsNullOrWhiteSpace(NovaTarefaEntry.Text))
        {
            // Adicionamos a nova tarefa à coleção
            Tarefas.Add(new Tarefa { Id = proximoId++, Texto = NovaTarefaEntry.Text });

            // Limpamos o campo de entrada
            NovaTarefaEntry.Text = string.Empty;
        }
    }

    private void OnRemoveTaskClicked(object sender, EventArgs e)
    {
        // Pegamos o botão que foi clicado
        var botao = sender as Button;
        
        // O CommandParameter que definimos no XAML nos dá o objeto Tarefa
        var tarefaParaRemover = botao?.CommandParameter as Tarefa;

        if (tarefaParaRemover != null)
        {
            Tarefas.Remove(tarefaParaRemover);
        }
    }
}

Por que ObservableCollection?

Testando em duas telas: a mágica do multiplataforma

Rodando no Android

1. Na barra de ferramentas do Visual Studio, encontre o menu suspenso de depuração (geralmente mostra "windows machine").

2. Clique nele e vá em emuladores Android > emulador Android. Se for a primeira vez, o Visual Studio pode pedir para criar um emulador padrão para você. Aceite e aguarde o processo, que pode demorar um pouco.

3. Com o emulador selecionado, clique no botão verde de "play" (iniciar).

Rodando no iOS (a partir do Windows)

1. No Visual Studio, vá em ferramentas > iOS > emparelhar com Mac. Siga as instruções para conectar o VS ao seu Mac.

2. Uma vez conectado, volte para o menu suspenso de depuração. Agora você verá a opção simuladores de iOS.

3. Escolha um simulador da lista, como um iPhone 14.

4. Clique no botão de "play".

Dica rápida de debug

Conclusão: você deu o primeiro passo!

Parabéns, Dev! 👏 Você conseguiu!

Próximo nível: sua carreira com C# 🚀