Introdução

No cenário atual do desenvolvimento de software, criar aplicações modernas com interface intuitiva e responsiva é essencial. Este tutorial se propõe a guiar você na construção de uma aplicação utilizando Visual Basic, integrando o .NET MAUI (Multi-platform App UI), que permite o desenvolvimento de aplicações para diversas plataformas com uma única base de código. Vamos explorar como utilizar ferramentas de UI modernas, realizar a configuração necessária e implementar funcionalidades que otimizam a experiência do usuário. Ao longo do caminho, discutiremos boas práticas e abordagens que facilitam a criação de interfaces atraentes e funcionais, além de proporcionar uma base sólida para o desenvolvimento de aplicações robustas e escaláveis.

Etapas

  1. Configuração do Ambiente de Desenvolvimento

    Antes de começarmos, é crucial garantir que temos o ambiente de desenvolvimento adequado. Você precisará do Visual Studio 2022 ou superior com suporte ao .NET MAUI. Se ainda não o instalou, acesse o site da Microsoft e siga as instruções para instalação.

    commands
    # Verificar se o Visual Studio está instalado
    vswhere -latest -products * -requires Microsoft.Component.MSBuild -property installationPath

  2. Criação de um Novo Projeto .NET MAUI

    No Visual Studio, selecione ‘Criar novo projeto’. Pesquise por ‘MAUI’ e escolha ‘Aplicativo .NET MAUI’. Nomeie o projeto como ‘MinhaAplicacaoMAUI’. Clique em ‘Criar’ e siga as instruções padrão para configuração do projeto.

    commands
    # Criação do projeto
    dotnet new maui -n MinhaAplicacaoMAUI

  3. Estrutura do Projeto e Adição da Interface de Usuário

    Uma vez criado o projeto, abra o arquivo App.xaml e defina a tela inicial da sua aplicação. Vamos adicionar um `ContentPage` simples que será nosso ponto de partida.

    App.xaml
    <?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MinhaAplicacaoMAUI.App">
    <Application.MainPage>
        <NavigationPage>
            <x:Arguments>
                <MainPage />
            </x:Arguments>
        </NavigationPage>
    </Application.MainPage>
</Application>

  4. Implementação do Layout na MainPage

    Em `MainPage.xaml`, adicione um layout simples, como um StackLayout, que conterá um Label e um Button. O botão irá executar uma ação ao ser clicado.

    MainPage.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="MinhaAplicacaoMAUI.MainPage">
    <StackLayout>
        <Label Text="Bem-vindo à Minha Aplicação MAUI!"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />
        <Button Text="Clique Aqui!"
                Clicked="OnButtonClicked" />
    </StackLayout>
</ContentPage>

  5. Definindo o Comportamento do Botão

    Agora, no arquivo `MainPage.xaml.vb`, adicione a lógica para o evento Click do botão que exibe uma mensagem ao usuário quando ele clica.

    MainPage.xaml.vb
    Imports System

Namespace MinhaAplicacaoMAUI
    Public Partial Class MainPage
        Inherits ContentPage

        Public Sub New()
            InitializeComponent()
        End Sub

        Private Sub OnButtonClicked(sender As Object, e As EventArgs)
            DisplayAlert("Informação", "Você clicou no botão!", "OK")
        End Sub
    End Class
End Namespace

  6. Testando a Aplicação

    Agora que temos a estrutura inicial da aplicação, é hora de testá-la. Você pode executar o aplicativo diretamente do Visual Studio usando os emuladores ou dispositivos conectados para suas respectivas plataformas.

    commands
    # Executar a aplicação no Android Emulator
    dotnet build

    dotnet maui run -t:android

  7. Adicionando um Banco de Dados com SQLite

    Para adicionar persistência à sua aplicação, você pode utilizar SQLite. Instale o pacote SQLite-net-pcl via NuGet e configure a conexão com o banco de dados.

    commands
    # Instalar SQLite
    dotnet add package sqlite-net-pcl

  8. Implementação do Modelo de Dados

    Crie uma classe modelo que represente os dados que você deseja armazenar no banco de dados. Por exemplo, vamos criar uma classe Produto.

    Produto.vb
    Imports SQLite

Public Class Produto
    <PrimaryKey, AutoIncrement>
    Public Property Id As Integer
    Public Property Nome As String
    Public Property Preco As Decimal
End Class

  9. Criação da Classe de Acesso a Dados

    Implemente uma classe que gerencie as operações de acesso aos dados, como adicionar, buscar e deletar produtos.

    DataAccess.vb
    Imports SQLite
Imports System.IO

Public Class DataAccess
    Private ReadOnly dbPath As String = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData), "produtos.db")

    Public Sub New()
        Dim db = New SQLiteConnection(dbPath)
        db.CreateTable(Of Produto)()
    End Sub

    Public Function GetProdutos() As List(Of Produto)
        Dim db = New SQLiteConnection(dbPath)
        Return db.Table(Of Produto)().ToList()
    End Function

    Public Sub AddProduto(produto As Produto)
        Dim db = New SQLiteConnection(dbPath)
        db.Insert(produto)
    End Sub
End Class

  10. Finalização e Testes do Ciclo Completo de Desenvolvimento

    Realize testes de integração para garantir que tudo funcione corretamente, incluindo a adição e recuperação de dados do banco. Teste cada funcionalidade utilizando o emulador ou um dispositivo físico.

    commands
    # Testar Adição e Recuperação de Produtos
    dotnet maui run -t:android

Conclusão

Neste tutorial, você aprendeu a desenvolver uma aplicação moderna utilizando Visual Basic e .NET MAUI, desde a configuração inicial até a integração de um banco de dados SQLite. Discutimos como criar interfaces intuitivas e implementar funcionalidades básicas. Esta abordagem não apenas facilita o desenvolvimento de aplicativos que rodam em múltiplas plataformas, mas também o prepara para expandir sua aplicação no futuro. Esperamos que você se sinta mais confortável com ferramentas modernas e pronto para explorar soluções ainda mais avançadas em suas futuras aplicações.

Hashtags

#VisualBasic #DotNetMAUI #DesenvolvimentoDeSoftware #SQLite #UI #Programacao