Plataforma UNO - Criando um App ToDo - parte 1

Imagem de capa Plataforma UNO - Criando um App ToDo - parte 1

Plataforma UNO - Plataforma UNO - Part 1

Vamos dar uma olhada mais de perto na Plataforma UNO. E o que é melhor do que experiência prática? Portanto, criaremos um aplicativo Todo no estilo Kanban.

O que é a Plataforma UNO

Vou citar diretamente o repositório do github:

"A plataforma Uno é uma plataforma de interface do usuário para criar aplicativos de base de código única para Windows, Web/WebAssembly, iOS, macOS, Android e Linux. Ele permite que o código XAML C# e WinUI seja executado em todas as plataformas de destino, enquanto permite o controle de cada pixel. Ele vem com suporte para sistemas de design Fluent, Material e Cupertino prontos para uso. A plataforma Uno implementa um número crescente de APIs WinRT e WinUI, como Windows.UI.Xaml, para permitir que aplicativos WinUI sejam executados em todas as plataformas com desempenho nativo".

Pense nisso como "Flutter for C#", em vez de Dart, estamos usando C# e XAML como linguagem de descrição da interface do usuário. E uma coisa adiantada UNO é open source sob a licença apache. Tem mais de 6000 estrelas com mais de 210 colaboradores. Essas são condições muito boas para serem aceitas por uma ampla gama de desenvolvedores.

E vamos criar um pequeno aplicativo que roda em seu navegador, desktop ou celular que lida com suas tarefas Todo. Para organizar fazemos no estilo Kanban com várias raias onde você pode arrastar seus itens de uma raia para outra.

Como ele difere do .NET MAUI?

O .NET MAUI e a plataforma UNO compartilhavam muitas semelhanças:

  • ambos são de código aberto
  • ambos destinados a escrever código multiplataforma em C# com XAML como linguagem de descrição de interface
  • compilar uma vez, executar em todos os lugares
  • suporta múltiplas plataformas (Windows, Android, MacOs, iOs… basicamente mobile e desktop)
  • Se você precisar de código específico da plataforma, poderá fazer isso com os dois frameworks (também da mesma maneira via #ifdef).

Mas também existem diferenças entre eles:

  • O mais importante, o MAUI ainda está em pré-visualização, pois a plataforma UNO está pronta desde 2018. Se você precisar criar um aplicativo multiplataforma hoje, a UNO Platform seria a estrutura de sua escolha
  • A UNO Platform suporta mais algumas plataformas como Linux e Web (especialmente esta última pode ser uma boa razão para usar a UNO Platform agora em vez de MAUI).
  • Pegue o próximo com um grão de sal: UNO está migrando para o WinUI 3 (atualmente usando UWP que termina a vida útil). Não sei o estado atual do MAUI. Como desenvolvedor ou usuário da biblioteca, isso não é necessariamente importante, pois isso apenas descreve o modelo de API subjacente que a plataforma UNO usa. Há uma postagem no blog da própria equipe que explica a situação.
  • A UNO Platform oferece controles nativos em todas as plataformas ou uma aparência unificada (um botão parece o mesmo em todas as plataformas). Veja aqui.

Configuração

Antes de começarmos com o código, precisamos configurar nosso IDE e ambiente. Se você quiser ler toda a documentação, confira a página de introdução da plataforma UNO. Vou destacar duas formas: Microsoft Visual Studio 2022 e JetBrains Rider. Infelizmente, o JetBrains Rider se recusou a me dar suporte a XAML, portanto, vou ficar com o Visual Studio 2022 por enquanto.

Visual Studio 2022

Para fazer tudo funcionar, você precisa de 3 cargas de trabalho que podem ser instaladas por meio do Visual Studio Installer:

  1. Carga de trabalho UWP
  2. Desenvolvimento móvel com .NET (Xamarin)
  3. ASP.NET e web

Agora, apenas uma coisa está faltando: precisamos dos modelos de solução do Visual Studio, que organizam todo o código para nós. Para fazer isso vá em seu Visual Studio para Extensões no menu e clique em Gerenciar Extensões. Em online, você pode procurar por modelos de solução da plataforma UNO. Estás pronto.

JetBrains Rider / Linha de Comando

No momento, não há modelo para o Rider, infelizmente. A única maneira de fazê-lo funcionar é através das ferramentas de linha de comando.

  1. Primeiro instale o modelo via linha de comando: dotnet new -i Uno.ProjectTemplates.Dotnet
  2. Crie um novo projeto: dotnet new unoapp -o MyFancyApp

O que notei é que os modelos são diferentes. O primeiro (extensões do Visual Studio) parece ser um subconjunto do último (fornecido pela linha de comando). Aqui uma comparação direta:

Há uma visão abrangente sobre todos os diferentes modelos que a Plataforma UNO oferece: aqui. Você também pode criar projetos sem suporte para iOS ou Android, se desejar.

uno-check

Há também uma ferramenta útil chamada: uno-check, que é basicamente uma ferramenta global dotnet. Ele pode verificar se tudo está pronto.

Primeiro você tem que instalar a ferramenta via: dotnet tool install --global Uno.Check. Então você provavelmente terá que abrir uma linha de comando com direitos administrativos, pois a ferramenta também pode instalar cargas de trabalho e outras coisas. Uma vez que você tenha um shell com direitos administrativos, você pode chamar a ferramenta via: uno-check e ela lhe dirá o que está faltando e está até tentando consertá-lo, se você quiser.

Você pode ver que eu não baixei todo o material para desenvolvimento Android. Principalmente porque eu não tenho um telefone Android

Para mim, isso é uma grande vantagem: gosto dessa automação!

Crie o Todo App

Agora vamos criar nosso App e também dar uma olhada em toda a estrutura de pastas.

dotnet new unoapp -o TodoApp

Isso irá organizar todos os arquivos necessários. Podemos ver que temos muitas novas pastas. Deixe-me explicar o que eles fazem. Você também pode acessar a ]documentação da Plataforma UNO para obter mais informações.

TodoApp/
?? TodoApp.Droid/ -- Head for Android
?? TodoApp.iOS/   -- Head for iOS
?? TodoApp.macOS/ -- Head for macOS
?? TodoApp.Shared/ -- Here goes the main chunk of your code
?? TodoApp.Skia.Gtk/ -- Used for Gtk stuff
?? TodoApp.Skia.Linux.Framebuffer/ -- Used for linux machines without window managers (has limitations)
?? TodoApp.Tizen/ -- Head for Tizen
?? TodoApp.WPF/ -- Head for WPF
?? TodoApp.WPF.Host/ -- This is used for making WASM debugging easier (WPF  )
?? TodoApp.UWP/ -- Head for UWP
?? TodoApp.WASM/ -- Head for WASM

Agora vamos resolver a terminologia:

  • Head significa que ele cria e empacota o projeto para essa plataforma específica. Se você precisar de informações especiais ou código específico da plataforma. Isso vai aqui.
  • Skia é uma biblioteca de renderização de código aberto no linux.
  • Shared aqui estabelece sua interface do usuário e lógica de negócios.
  • Mais informações podem ser encontradas aqui

É fundamental entender que o projeto Shared é mais ou menos apenas um container para arquivos que depois são "interpretados" pelo Head para criar o código específico da plataforma. Isso traz, infelizmente, uma limitação: você não pode adicionar referências como pacotes nuget diretamente ao seu projeto Shared, que então precisa ir automaticamente para todos os projetos Head. Você precisa adicionar essas dependências a todos os projetos do Head para que isso funcione. Então você pode colocar todas as referências "compartilhadas" em seus arquivos.

Vamos abrir a solução recém-criada e apenas construí-la. Eu realmente proponho não apenas pressionar F5, realmente construir toda a solução. Encontrei alguns problemas ao pressionar F5 depois de abrir a solução pela primeira vez e tentar abrir o WASM Head.

Aproveitei para trocar o "Olá Mundo" pelo "Olá querido Leitor". Então você vê algo parecido com isso:

Agora, uma coisa para fazer o Intellisense do Visual Studio funcionar, quando você abre um arquivo xaml, você precisa alternar no canto superior esquerdo para UWP assim:

Isso parece muito bom até agora. Eu só quero adicionar uma pequena coisa: testes. Neste caso específico, quero adicionar os testes de interface do usuário da plataforma UNO. Podemos fazer isso também por meio das ferramentas de linha de comando (como alternativa no Visual Studio, você encontrará o modelo de projeto de teste de interface do usuário da plataforma UNO): dotnet new unoapp-uitest -o tests/UI.Tests.

Agora você pode ver que eu adicionei os testes de interface do usuário em uma subpasta de testes. Eu gosto de separar o código de teste do meu código de produção. Isto é puramente até você como lidar com isso. Também darei um passo adiante e moverei todos os arquivos de produção para uma pasta src, para que meu diretório de trabalho final fique assim. Esteja ciente de que se você mover arquivos, precisará adotar seus arquivos de solução. Para usuários de Mac: Existe um TodoApp-vsmac.slnf que é um arquivo de solução com filtros. Você também tem que alterar este arquivo.

Nova estrutura de pastas:

TodoApp/
?? src/
?  ?? TodoApp.Droid/
?  ?? TodoApp.iOS/
?  ?? TodoApp.macOS/
?  ?? TodoApp.Shared/
?  ?? TodoApp.Skia.Gtk/
?  ?? TodoApp.Skia.Linux.Framebuffer/
?  ?? TodoApp.Tizen/
?  ?? TodoApp.UWP/
?  ?? TodoApp.WASM/
?  ?? TodoApp.WPF/
?  ?? TodoApp.WPF.Host/
?? tests/
?  ?? UI.Tests/

Claro, em testes, pode haver muito mais testes, como sua lógica de negócios, etc.

Conclusão

Esse foi um bom começo. Temos nossos blocos de construção para construir nosso aplicativo. Minha sacada disso:

O que foi bem

  • A documentação é muito boa. Verifiquei o site e a página do github quando encontrei problemas. E eu sempre encontrei minha resposta
  • Se você está acostumado com XAML / Xamarin.Forms, não terá problemas para entrar
  • As ferramentas automatizadas e o modelo são muito bons!
  • Colaboração fácil com o seu designer (suporte FIGMA - mais do que isso em um segundo)
  • Integração do espaço de código do Github: aqui mais informações, incluindo sua própria extensão

O que poderia ser melhor

  • Às vezes, as exceções só desaparecem com o Clean & Build. F5 inicialmente não funcionou para mim.
  • Devido à arquitetura Shared não pode conter referências a dependências/projetos externos. Vamos ver como isso se desenrola.

UNO - Figma

A Plataforma UNO oferece uma boa integração com o Figma. A ideia básica é que você possa exportar seus ativos no Figma para o código XAML, que pode ser usado diretamente em seu aplicativo. Isso é uma grande vitória. Quando você fala com seu designer e quer ver essas mudanças ao vivo, é apenas uma questão de cliques. Isso é incrível.

Para mais informações confira o site oficial.

Qual é o próximo

Agora nós apenas configuramos tudo sem escrever uma linha de código. Mas foi muito importante para mim que você entendesse como tudo funciona para obter essa imagem completa. A próxima parte da série será sobre a construção do aplicativo em si, porque não fizemos isso até agora.

Recursos:

  • O repositório do github para este Todo-App: aqui
  • Site oficial da Plataforma UNO: aqui
  • Comparação entre UNO Platform e Xamarin: aqui