DEV Community: Marcos Costa

Convenções de Nomes em C#: Como Nomear Variáveis, Métodos e Classes

Marcos Costa — Wed, 03 Apr 2024 15:22:40 +0000

Olá devs, vamos falar de um assunto um pouco polêmico, porque sempre aparece alguém para ~~cagar regra~~ dizer que devemos escrever o código de maneira X ou Y, e nem sempre isso estar de acordo com a conversão de nomes da linguagem que trabalhamos, então resolvi criar esse mini artigo para ~~cagar regra~~ ajudar vocês a nomear suas coisas em C# usando o guia oficial da comunidade escrito pela Microsoft.

Quando escrevemos código é importante seguir algumas convenções de nomenclatura para tornar nosso código mais legível e consistente. então, entenda que essas convenções ajudam a entender o propósito das variáveis, classes e outros elementos do código. Vamos dar uma olhada nelas e entender de uma vez por todas.

A PascalCase

Dentro do C#, usamos a PascalCase para quase tudo, seja nomes de tipos, métodos públicos e propriedades, nomes de arquivos. Isso significa que a primeira letra de cada palavra é maiúscula, e as demais são minúsculas.
Por exemplo:

MinhaClasse
CalcularSalario
NomeCompleto

Os nomes de namespaces devem seguir a mesma convenção PascalCase. Por exemplo:

MeuProjeto.Utilitarios
MeuProjeto.Modelos

A camelCase

Também usamos a camelCase Para variáveis locais, parâmetros de método e campos privados. A primeira letra é minúscula, e as demais palavras começam com letra maiúscula.
Exemplos:

idade
nomeCompleto
quantidadeItens

Agora o mais Difícil (não deveria ser)

Sempre crie nomes autoexplicativos, escolha nomes que sejam descritivos e faça sentido para o que você está fazendo. Por exemplo, em vez de usar a ou x como nome de variável, prefira algo como idadeDoUsuario ou totalDeItens, dessa forma você ajuda seu amiguinho que trabalha com você e ~~não querer te matar~~ ajudar a equipe a crescer.

Evite usar caracteres especiais como $, @, # nos nomes de identificadores. Como também abreviações que possam confundir outros desenvolvedores. Por exemplo, em vez de btn, use botao para um botão na interface.

De onde você tirou isso? do C#?

Todas essas conversões foram tiradas da documentação oficial da Microsoft sobre convenções de codificação em C#.
Porém, é importante salientar que essas convenções não são impostas pelo compilador, mas são amplamente adotadas pela comunidade. Então, segui-las tornará seu código mais fácil de ler e entender, especialmente quando você compartilha seu código com outros desenvolvedores.

Espero que vocês tenham gostado, se quiser deixar alguma dica e sugestão, correção, deixa aí em baixo nos comentários, Até a próxima!

MAUI - Por onde começar? Parte 2: O arsenal de ferramentas para desenvolver apps MAUI

Marcos Costa — Sun, 31 Mar 2024 19:44:19 +0000

Olá meus amigos, dando continuídade ao nosso artigo anterior MAUI - Por onde começar? Parte 1: Entendendo o MAUI aqui trarei um punhado de ferramentas e biblioteca úteis que em geral eu uso no meu dia-a-dia quando estou desenvolvendo com MAUI. Vamos usar elas no decorrer dessa série de artigos. Estarei indicando ao final das explicações quais ferramentas você deve instalar para dar continuidade. Porém quero explicar mais sobre outras ferramentas existentes para você entender onde e como usar.

XAML STYLER

A extensão XAML Styler para o Visual Studio é uma ferramenta valiosa para desenvolvedores que trabalham com XAML. Pois ela torna simples a identação de código XML nos seus arquivos XAML. Ao salvar, ela consegue identificar coisas mal formatadas, tags que estão faltando fechar, analisa sua arvore XML, consequentemente, melhorando a leitura desses arquivos.

Ele ajuda a manter um estilo de codificação XAML consistente e melhora significativamente a legibilidade do código.

Se quiser instalar ela, já pode.

ResX Manager

A extensão ResX Manager é uma extensão do Visual Studio de longe a ferramenta que eu mais uso, pois ela facilita a criação de aplicativos multiculturais. O ResX Manager mostra todos os arquivos de recursos .resx da solução em uma visualização centralizada. Você pode editar rapidamente as strings diretamente na grade de dados.
O ResX Manager oferece exportação e importação para facilitar a troca de traduções fora do Visual Studio. Você pode usar API de tradução do google translate, bing e entre outras para ajudar na automatização de suas traduções.

Caso deseje proceder com a instalação, já está autorizado.

CommunityToolkit.Mvvm

A extensão CommunityToolkit.Mvvm é uma biblioteca que usaremos através de todo nosso projeto, assim conseguiremos usufruir ao máximo da arquitetura MVVM. Você vai instalar ela usando o Nuget Package Manager no seu projeto, ou usando o comando abaixo na pasta do seu projeto via terminal

dotnet add package CommunityToolkit.Mvvm --version 8.2.2

A grande vantagem dela é porque ela é agnóstica em relação aos frameworks de interface do usuário (UI), o que significa que pode ser usado em várias plataformas, como UWP, WPF, Xamarin, Uno e entre outras que você desejar implementar a MVVM. Além de ser uma das bibliotecas mais usadas quando se fala de implementação de mvvm.

Se assim o desejar, pode prosseguir com a instalação imediatamente.

CommunityToolkit.Maui

A CommunityToolkit.Maui é uma biblioteca essencial para o desenvolvimento de aplicativos .NET MAUI. Ela trás varios controles de interface pre-prontos, animações, conversores, efeitos, popups, expander. Você pode adiciona-la ao projeto pois facilitará bastante nossa vida.

dotnet add package CommunityToolkit.Maui --version 8.0.0

Caso julgue conveniente, está à disposição para realizar a instalação.

Menções honrosas

SyncFusion
Se você deseja ter coisas ainda mais prontas, você pode optar por usar a SyncFusion, ela trás diversos controles prontos que você pode estilizar e usar de graça para projetos onde você tem uma equipe pequena de desenvolvedores ou por uma lincença.
Telerik UI
Da mesma forma que a SyncFusion, temos a Telerik UI for MAUI vários controles pre-prontos que podem ser usados e com suporte do Time Telerik
Blazor-MAUI
Opa, o que blazor está fazendo aqui? Você pode está me perguntando. Então, acontece que o blazor é uma biblioteca front-end para desenvolvimento de applicações web usando C# e web assembly. Com o blazor-MAUI conseguimos trazer toda a experiencia de desenvolver para web para o mundo mobile. Todo blazor é carregador dentro de uma web view e o MAUI como backend, o que permite acessar todos os recursos nativo do dispositivo através do MAUI, enquanto UI para o usuário poderá ser exibida em uma WebView. Isso nós chamamos de desenvolvimento hibrido, assim como fazemos com Ionic Framework + capacitor, mas com uma grande vantagem que você não precisa mudar a linguagem para acessar os recursos nativo.
MudBlazor
Já que eu estou falando de blazor, porque não falar do MudBlazor, semelhante ao Angular Material, o MudBlazor traz vário componentes que você pode usar em uma aplicação Blazor (blazor-maui), diversos controles de interfaces estão disponiveis para o seu uso.
Plugins, bibliotecas em gerais
O MAUI tem uma comunidade muito forte, assim como a do C#, e você pode contar com diversos plugins que lhe ajudarão a criar apps em diferentes plataformas. Temos plugins/bibliotecas para AdMob exibir anúncios, InApp billing permite compras de produtos digitais nas lojas, Local Notifications para exibir notificações geradas pelo seu app. Entre vário outros, sem falar da gama de bibliotecas que já existem hoje no dotnet que você pode usar, como por exemplo, a Serilog, o Svg.Skia entre milhões de outras bibliotecas compatíveis.

Tá, e agora?

Agora, você descansa que em breve estaremos começando o nosso projeto, já no próximo artigo. Aguarde!

Espero que vocês tenham gostado, qualquer dica, sugestão, correção, deixa aí em baixo. Muito obrigado por ter chegado até aqui.

Repositório do GitHub

Até a proxima pessoal!

MAUI - Por onde começar? Parte 1: Entendendo o MAUI

Marcos Costa — Sun, 31 Mar 2024 17:01:33 +0000

Olá amigos, hoje é um dia especial para alguém que do nada resolveu aprender MAUI (.NET Multi-platform App UI), se esse é você, então, vem comigo porque eu bolei essa série de artigos que tentarão sanar as dúvidas que mais recebo da comunidade em grupos do telegram que participo, e também, não menos importante, fiz um tutorial com as principais bibliotecas que você deve ter no seu projeto, estrategias de organização de projeto, uso da arquitetura MVVM, Injeção de dependência e muito mais. Prometo ser o mais objetivo possivel nesse post em sanar tais duvidas. Então vamos lá:

O que é MAUI e qual a sua diferença para o WPF, UWP e Windows Forms?

Para início de conversa, entenderemos que MAUI (.NET Multi-platform App UI) é uma estrutura multiplataforma open source para criar aplicativos moveis usando uma mesma base de código compartilhada, essa estrutura vai te permitir publicar aplicativos para Android, IOS, Windows **e **MacOS. O MAUI é uma evolução do Xamarin que também tem esse mesmo proposito, porem com uma outra arquitetura menos extensiva, dado que nos obriga quase sempre a mudar de projetos para efetuar mudanças de acordo com a plataforma, por exemplo.

O Principio de criação de interface no MAUI usa principalmente O XAML e C#, o que se assemelha com outras tecnologias para desenvolvimento para Windows desktop como o WPF (Windows Presentation Foundation) e UWP (Universal Windows Platform). A maior diferença entre essas tecnologias são os propositos delas. Enquanto no WPF a gente somente cria aplicativos para Windows Desktop, ele não é multiplataforma, porém te permite acessar as interface do sistema operacional ao contrario do UWP.

O UWP (Universal Windows Platform) é um tipo de arquitetura para desenvolvimento desktop com o diferencial que lhe permite usar a mesma base de código para publicação em outras versões do windows para PC, Tablets, XBOX e Hololens, antigamente era também usado para criação de apps para o finado Windows Phone. Nele também usamos XAML e C# para criação de interfaces, mas ao contrario do WPF, os apps que rodam nessa tecnologia estarão sendo executados dentro de uma sandbox, e para ter acesso a recursos do sistema operacional, é preciso pedir permissão ao Usuário, semelhante ao que acontece com Android e IOS.

Vamos falar um pouco do Windows Forms, uma tecnologia antiga, porém viva, e com muitos devs desempenhados em manter assim, é uma tecnologia que foi predecessora do WPF, seu diferencial é que te permite ~~sofrer enquanto estar à~~ criar aplicativos para windows usando o que chamados de WYSIWYG (what you see is what you get) e também adicionando controles em tempo de execução, e seus componentes são compativeis com o WPF e vice-versa, ele executa da mesma forma do WPF, e também te permite acessar interfaces do sistema operacional sem pedir permissão como o UWP, porém não é multiplataforma, como também você não tem um XML charmoso onde você pode controlar os controles na interface, restringindo sua interação a clicar e arrastar controles e adicionar eventos para executar comandos.

Então, resumindo:

WPF (Windows Presentation Foundation):
- É uma tecnologia para criar aplicativos de desktop no Windows.
- Usa XAML para definir a interface do usuário.
- Foi projetado principalmente para Windows.
- Não é multiplataforma.
UWP (Universal Windows Platform):
- Também é para aplicativos de desktop no Windows.
- Usa XAML e C#.
- Foi projetado para ser executado em várias versões do Windows.
- Suporta dispositivos como PCs, tablets, Xbox e HoloLens.
Windows Forms:
- É uma tecnologia mais antiga para criar aplicativos de desktop no Windows.
- Usa C# e uma abordagem baseada em eventos.
- Não é multiplataforma.
.NET MAUI:
- Unifica as APIs do Android, iOS, macOS e Windows em uma única API.
- Permite compartilhar código, testes e lógica de negócios entre plataformas.
- Oferece controles de interface do usuário recriados do zero para melhor desempenho.
- É a escolha ideal para desenvolvedores que desejam criar aplicativos multiplataforma com uma única base de código.

Vamos ao que interessa, seu primeiro App MAUI!

Ufa, depois dessa longa explicação, agora vamos entender por onde começar. Estarei usando o sistema operacional Windows com o Visual Studio Community 2022 para fazer nosso app, nada impede você se usar o VSCode.

Então vamos explorar o template inicial que a Microsoft nos fornece ao criar nosso primeiro app.

Vamos começar criando um novo projeto no visual studio e selecionando o tipo de projeto MAUI como na imagem abaixo:

Agora vamos dar um nome para ele, vou chamar de "MeuPrimeiroAppMAUI"

e voilá, agora temos o nosso projeto aqui, mas o que nós estamos vendo?

Entendendo a estrutura padrão de pastas no MAUI

Em geral, como estamos usando .NET, você verá os mesmos elementos de outros tipos de apps do framework, como a sessão de "dependencies" e "properties", mas no MAUI tem umas coisinhas interessantes, deixa eu explicar:

Dependencias(Dependencies)

Essa sessão é onde você pode configurar que dependencias seu projeto tem, seja NuGet Packages, outros Projetos e até mesmo Dlls; bom, nada novo até aqui. Porém, no MAUI você vai ver outros tipos de dependencias como net8.0-android, net8.0-ios e etc. Mas o que são isso? Em resposta curta, isso determina que exitem dependencias exclusivas para serem publicadas por plataforma, em outra palavras, quando você estiver desenvolvendo para Android, o MAUi vai olhar para as dependencias listadas em net8.0-android, enquanto para iOS, ele olhará para .net8.0-ios, e assim por diante.
Pô legal, né?! Mas onde isso é configurado?

Se você usar o botão direito do mouse em cima do projeto e clicar em "Editar arquivo de projeto" (edit project file), voce verá que os tipos de projetos estarão listados bem no inicio em TargetFrameworks

    <PropertyGroup>
        <TargetFrameworks>net8.0-android;net8.0-ios;net8.0-maccatalyst</TargetFrameworks>
        <TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">$(TargetFrameworks);net8.0-windows10.0.19041.0</TargetFrameworks>

Você deve ter notado que a estrutura desses target frameworks é sempre (versão do framework)-(plataforma), podendo ser net9.0-android, net6.0-ios, então com isso em mente vamos seguindo.

Pasta "Platforms"

Essa pasta é onde estarão nossos arquivos especificos por plataforma, você deve ver uma pasta "Android", "iOS", "MacCatalyst" , "Tizen" e "Windows". Qualquer classe colocada nesses diretorios, só estarão disponiveis na plataforma correspondente. Então todas as outras pastas que você criar, ou arquivo que estiver fora, será automaticamente interpretado como multiplataforma.

Pasta "Resources"

Essa pasta em geral deixa as pessoas com muitas dúvidas de onde pode colocar imagens, arquivos extras, e alguns devs colocam arquivos em locais que não são apropriados por desconhecer a funcão dessa pasta, então deixa eu desmistificar de acordo com sua intenção:

Para imagens deve ser colocadas dentro da pasta "Images", preferencialmente use arquivos svg, mas pode ser qualquer tipo.
Para icone do app, aqueles que o usuário verá na área de trabalho, use a pasta "AppIcon", de preferencia arquivos svg também.
Para novas fontes, use a pasta "Fonts", nela você pode baixar fontes da internet e colocar nessa pasta e já sair usando ao redor do seu app.
A pasta "raw" é de longe a que mais sofre de mal uso, então vou desmistificar agora, qualquer arquivo extra, sendo um json, xml, ou até mesmo qualquer tipo de arquivo, você pode colocar nessa pasta, cada plataforma exige uma API especifica para acessa-la, mas é muito fácil configurar isso.
A pasta "Splash" é onde colocamos nossas splash screen. SplashScreen é a primeira pagina que o sistema operacional invoca quando chama o seu app para a execução em primeiro plano.
a pasta "Styles" é onde podemos colocar nossas folhas de estilo compartilhadas, semelhante ao CSS, mas tudo aqui é XAML, vou me aprofundar nisso nos próximos artigos. Você deve perceber que temos um arquivo de cores (Colors.xaml) e um arquivo de estilos.

Todos as pastas acima serão compiladas de diferentes maneiras, mas a RAW ela não é compilada, ela será colocada de forma "bruta" nas pastas equivalentes por plataforma.

App.xaml e App.xaml.cs (desmistificando de uma vez por todas)

Apartir de agoras, você verá um comportamento comum quando você criar novos arquivos xaml no seu projeto, eles sempre virão com um arquivo xaml.cs. Só pra desmistificar a grosso modo essa parte para que você entenda, os arquivos XAML são representacões em XML de código C#, então quando criamos um arquivo XAML devemos entender que basicamente estamos escrevendo código C# de outra maneira, com XML. Dúvida de mim? Então vamos a arquivo do 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"
             xmlns:local="clr-namespace:MeuPrimeiroAppMAUI"
             x:Class="MeuPrimeiroAppMAUI.App">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

observe essas linhas

             xmlns:local="clr-namespace:MeuPrimeiroAppMAUI"
             x:Class="MeuPrimeiroAppMAUI.App"

e observe o código C# na App.xaml.cs

  public partial class App : Application
  {
      public App()
      {
          InitializeComponent();

          MainPage = new AppShell();
      }
  }

você deve reparar a palavra-chave "partial" nessa declaração da classe public partial class App : Application, como também a classe sendo associada ao documento XAML em x:Class="MeuPrimeiroAppMAUI.App. Usamos Partial _em _C# quando queremos separar uma classe em duas ou mais documentos sem que isso afete o comportamento dela para compilador. Então, se nosso XAML é uma partial de nossa classe App (que também é uma partial) os dois documentos são representação da mesma classe.

Para que serve a classe App?

A classe App no .NET MAUI desempenha um papel fundamental na criação de aplicativos multiplataforma. Vamos explorar o que ela faz:

Definição do Aplicativo: A classe App é o ponto de entrada para o seu aplicativo .NET MAUI. Ela é responsável por inicializar e configurar o aplicativo.
- Quando você inicia o aplicativo, o método OnStartup da classe App é chamado. É aqui que você pode configurar serviços, definir a página inicial e realizar outras tarefas de inicialização.
Gerenciamento do Ciclo de Vida:
- A classe App também gerencia o ciclo de vida do aplicativo. Ela responde a eventos como OnStart, OnSleep **e **OnResume.
- OnStart: Chamado quando o aplicativo é iniciado. Aqui, você pode configurar recursos iniciais e preparar o aplicativo para uso.
- OnSleep: Chamado quando o aplicativo entra em segundo plano (por exemplo, quando o usuário muda para outro aplicativo). Você pode salvar o estado do aplicativo aqui.
- OnResume: Chamado quando o aplicativo volta ao primeiro plano. Use isso para restaurar o estado do aplicativo.
Configuração de Páginas e Navegação:
- A classe App define a página inicial do aplicativo usando o método MainPage. Você pode atribuir uma instância de uma página (como ContentPage ou NavigationPage) a essa propriedade.
- Além disso, você pode configurar a navegação entre páginas no método OnStart. Por exemplo, você pode definir uma página de login como a primeira página e, após o login, navegar para a página principal.
Recursos Globais:
- A classe App é um ótimo lugar para definir recursos globais, como estilos, temas ou serviços compartilhados. Você pode usar o método OnAppThemeChanged para lidar com alterações de tema (claro/escuro) em todo o aplicativo.

Para que serve a AppShell.xaml?
- Nesse arquivos estaremos lidando com navegação através de diferentes tipos de layout. Em geral, é onde voce define seus menus, se serão Flyout ou TabBar, ou até mesmo os dois. Usamos esse arquivos se desejamos usar a navegação via Shell, porém podemos descartá-lo e usar a navegação vanilla via NavigationPage.

Para que serve o arquivo MauiProgram.cs?
- Assim como o arquivo Program.cs em AspNet Core, esse arquivo é o ponto de entrada para o seu app, é a primeira coisa a ser executada quando o usuário abre seu app.
- Aqui podemos configurar fontes, container de injeção de dependências, serviços e biblioteca de terceiros.
- Em resumo, é onde começa tudo.

Vamos Respirar um pouco antes de prosseguir

E assim finalizo essa primeira parte com muita explicação sobre o que vamos ver nos próximos artigos. Muito obrigado por ter chegado até aqui, dúvidas, sugestões e correções fique a vontade em deixar nos comentários, nos vemos no próximo artigo!

Repositório no Github

Deixo esse vídeo para motivar vocês a ler esse artigo:

youtube.com

Até a próxima! 👋

Como conectar o Aplicativo MAUI no Emulador Android e WEB Api na mesma máquina

Marcos Costa — Sat, 14 Oct 2023 19:59:11 +0000

Olá devs, vocês que já estiveram na situação de precisar atualizar o backend direto no servidor para fazer com uma atualização especifica de comportamento de endpoint? E se eu te mostrar que você não precisa fazer isso no seu dia a dia caso você tenha na mesma solução (ou até em diferentes) o aplicativo MAUI e a WEB API? Então, aqui vamos nós. Detalhe: essa dica funciona até para Blazor-MAUI.

Maquina Virtual e Hospedeira (Host)

Primeiro, vamos entender como funciona de forma simplificadíssima uma maquina virtual e o sistema hospedeiro (Host). Nós temos aqui duas entidades, a maquina HOST que é basicamente o seu computador, e a maquina virtual, que nesse caso é a maquina que se comunicará com os recursos de hardware do Host via software. O Emulador Android é simplesmente uma maquina virtual que está consumindo recursos de hardware do HOST via software.

Recursos de redes Emulador Android

Agora, precisamos entender como funciona os recursos de rede do emulador android que está rodando na sua maquina. Como Apresentado na documentação oficial do Google:

Network Address	Description
10.0.2.1	Router or gateway address
10.0.2.2	Special alias to your host loopback interface (127.0.0.1 on your development machine)
10.0.2.3	First DNS server
10.0.2.4 / 10.0.2.5 / 10.0.2.6	Optional second, third, and fourth DNS servers
10.0.2.15	The emulated device network or ethernet interface
127.0.0.1	The emulated device loopback interface

O que nos interessa aqui endereço especial 10.0.2.2, eles nos permite se comunicar diretamente com o endereço 127.0.0.1 da maquina HOST (O famoso e famigerado localhost).

Desenvolvendo para ASPNET e acessando no emulador

Como bem sabemos, quando iniciamos um aplicativo web para AspNet Core, ele sempre rodará na nossa localhost (127.0.0.1). Agora tá fácil né, quando você quiser acessar localhost da sua maquina direto do emulador é só usar o 10.0.2.2.

Criei um simples projeto padrão de web api

![Exemplo de um aplicativo aspnet core rodando na maquina host com o endereço https://localhost:7270. Aqui temos apenas uma mensagem de boas vindas que diz 'Bem vindo'](

Agora vamos acessar o mesmo endereço do meu host no navegador chrome do Emulador Android, observe que eu usei o endereço https://10.0.2.2:7270 que corresponde ao meu https://localhost:7270 da minha maquina host.

Note que ao acessar esse endereço, você verá um erro de 'Your Connection is not private', isso acontece porque eu estou rodando na minha maquina host uma aplicação que usa https e o seu ceritificado não é compartilhado com o emulador. Então, para não adentrar muito nesse mundo do SSL e HTTPS, vamos somente ignorar essa parte clicando em Advanced e depois em Proceed to 10.0.2.2 (unsafe).

Após clicar em Proceed to 10.0.2.2 (unsafe), nossa imagem é finalmente exibida. Então voilá, você tem o seu emulador acessando o seu endereço de api direto da web api rodando no host.

Agora vamos para a próxima etapa

Executando os dois projetos simuntaneamente pelo visual studio

Essa etapa é bem simples, precisamos apenas configurar a solução para executar os dois projetos simuntaneamente. Tenha em mente que você precisa está rodando o seu aplicativo android no emulador. Primeiro vamos definir que quando rodar a solução, o projeto que será iniciado é o projeto MAUI

Vamos fazer essa pequena configuração.

Selecione o projeto do MAUI
Botão direito do Mouse em cima desse projeto
Então selecione a opção "Set as Startup Project"

Agora selecione o emulador que você irá executar o MAUI

Clique na setinha ao lado do botão de executar
Selecione Android Emulators
Selecione o seu emulador

Agora vamos ajustar a solução para executar o Projeto de API e Projeto do MAUI para executarem simuntaneamente

Botão direito na solução
Selecione Properties
Selecione a opção Multiple startup projects
Marque os dois projetos com a action Start como na imagem abaixo
Clique no botão OK

Ao fazer isso, já temos nossa configuração ideal para o nosso proximo passo. Observe que o botão de executar do visual studio mudou para somente Start

Adicionando a chamada do servidor no Android

aqui vamos adicionar alguns trexos de códigos bem simples no nosso aquivo MainPage.xaml e MainPage.xaml.cs

MainPage.xaml

<ContentPage ...>
    <ScrollView>
        <VerticalStackLayout ...>
...
<!-- Adicione esse botão ao final do layout, mas antes do </VerticalStackLayout></ScrollView></ContentPage>  -->
            <Button
                x:Name="ShowWelcomeButton"
                Text="Show welcome message"
                SemanticProperties.Hint="show exacly the message welcome from the ApI"
                Clicked="ShowWelcomeButton_Clicked"
                HorizontalOptions="Center" />

<!-- somente o botão acima -->
...
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

MainPage.xaml.cs

/* Agora vamos adicionar essa implementação */
        private async void ShowWelcomeButton_Clicked(object sender, EventArgs e)
        {
            try
            {
// cria um httpclient que ja conecta com a nossa api 
// usando o endereço https://10.0.2.2:7270
                using var httpClient = new HttpClient()
                {
                    BaseAddress = new Uri("https://10.0.2.2:7270")
                };
// chama o endpoint inicial "/"
                var message = await httpClient.GetStringAsync("/");

                ShowWelcomeButton.Text = $"Message From Server: {message}.";
            }
            catch(Exception ex)
            {
               await DisplayAlert("error", ex.Message, "Ok");
            }
        }

Seu App deve rodar no emulador como na imagem abaixo.

Agora é só clicar no botão "Show welcome message" e... ERROR?!

Esse erro ocorreu devido a um erro de certificado, lembra daquele erro do chrome que ele estava dando em relação ao certificado inválido, a página não era segura e precisaríamos "forçar" o acesso a ela. Então, aqui no app android acontece a mesma coisa. Então vamos mexer em algumas configurações do nosso aplicativo Android e API.

Resolvendo o java.security.cert.CertPathValidatorException

Como dito antes, esse erro de certificado ocorre devido ao acesso a um endereço https onde o certificado não é encontrado ou não é válido. Então nesse momento precisaremos configurar a API para não exigir o certificado quando estivemos trabalhando em desenvolvimento. Para isso precisaremos ajustar o arquivo program.cs da nossa API. Para isso basta verificar se o ambiente que estamos desenvolvendo é o desenvolvimento e então desativar o redirecionamento para o https.

program.cs (WebApiExample)


// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseHttpsRedirection();
}

Precisamos também mudar a maneira que nossa Api irá rodar, então selecione nossa API como projeto a ser incializado

botão direito na API (WebApiExample)
Selecione Set as Startup Project
Mude na seleção de start para o 'http'.
Pronto, agora nossa API estará rodando na http://localhost:5017/

Então na sua mente deve está passando "Ah, agora é so mudar o endereço para http e rodar o projeto!" (lembresse de reconfigurar para rodar os dois Apps juntos)

                using var httpClient = new HttpClient()
                {
                    BaseAddress = new Uri("http://10.0.2.2:5017")
                };

e então... ERROR?! Cleartext HTTP traffic to 10.0.2.2 not permitted. Simplesmente o Android não permite acessar endereços HTTP por padrão.

Não se desespere, temos a solução para isso logo a seguir

Resolvendo o Cleartext HTTP traffic to 10.0.2.2 not permitted

A gente precisa contornar esse erro atraves da classe MainApplication.cs, precisaremos adicionar a propriedadeDebuggableeUsesCleartextTraffic`. dessa maneira conseguiremos contornar a verificação https. Então acesse o arquivo "Platforms/Android/MainApplication.cs"

Adicione as propriedades Debuggable e UsesCleartextTraffic no atributo [Application] ele deverá ficar assim:

[Application(Debuggable = true, UsesCleartextTraffic = true)]

e assim ficará o código da MainApplication.cs.

`
[Application(Debuggable = true, UsesCleartextTraffic = true)]
public class MainApplication : MauiApplication
{
public MainApplication(IntPtr handle, JniHandleOwnership ownership)
: base(handle, ownership)
{
}

    protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
   }

Ao executar novamente... SEM ERROS!

Considerações finais e sugestões

Publicação em produção

Quando estiver executando o aplicativo em desenvolvimento, faz sentido você definir esse atributo [Application(Debuggable = true, UsesCleartextTraffic = true)] na classe MainApplication.cs. Porém, o ideal é seu app não ser publicado na loja com isso, e for, provavelmente vai ser rejeitado por essa falha de segurança que você deixou. Para evitar isso, a gente pode usar as variaveis de Build DEBUG onde você consegue definir o codigo que irá somente executado quando você estiver rodando pelo visual studio ou somente rodando na maquina de desenvolvimento.

#if DEBUG
  [Application(Debuggable = true, UsesCleartextTraffic = true)]
#else
  [Application]
#endif
  public class MainApplication : MauiApplication
{
    public MainApplication(IntPtr handle, JniHandleOwnership ownership)
        : base(handle, ownership)
    {
    }

    protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
   }
}

E rodando para o windows?

O endereço de api que voce colocou na sua HttpClient so faz sentido para rodar no android. Porém, MAUI é multiplataforma. Felizmente MAUI também trás outras variaveis de build que identificam a plataforma que o App esta executando. Então usaremos a ANDROID para esse caso. Ou seja, sempre que estivemos executando no Android um trexo de código espefico irá executar

csharp using var httpClient = new HttpClient() { #if ANDROID BaseAddress = new Uri("http://10.0.2.2:5017") #else BaseAddress = new Uri("http://localhost:5017") #endif };

Obrigado!

Obrigado por ter chegado até aqui. Aqui está o código fonte dessas aplicação no Github. Commente aqui se você tiver dúvidas ou quiser compartilhar informações sobre o desenvolvimento no MAUI!

Criando uma console application com esteróides com o pacote System.CommandLine

Marcos Costa — Mon, 18 Sep 2023 03:31:39 +0000

Olá devs! Já se pergutaram como os devs criam consoles application bem pomposas como essas do dotnet, cheias de comandos e listagem do que elas fazem?

Então vamos lá começar com o feijão com arroz e criar uma console application no visual studio, ou se você prefirir, dá para usar o command line do dotnet para isso. Meus exemplos serão no Visual studio 2022 Community, mas você pode usar até um bloco de notas com a dotnet tool que funcionará.

Criando a console aplication

crie um novo projeto do tipo console application.
Após sua criação, importe o pacote nuget System.CommandLine

Na barra de procura, procure por System.CommandLine, mas não se esqueça de marcar a opção include prerelease. E então click em install para instalar a dependência no seu projeto.

Agora substitua o código inicial da sua Program.cs pelo codigo abaixo:

using System.CommandLine;

// Crie uma descrição que será exibida caso o usuario não passe nenhum argumento.
// Isso também serve para você escrever uma descrição da sua ferramenta console.
var description = @"
Bem vindo ao meu console charmosão com vários 
comandos listados e documentados";

var rootCommand = new RootCommand(description);

// Criando um argumento a ser aceito por nosso app
var mensagemArg = new Argument<string>("Uma Mensagem", "Apenas essa mensagem será exibida");

// adicionando esse argumento no nosso comando principal
rootCommand.AddArgument(mensagemArg);

// Definindo uma ação para quando esse comando for adicionado.
rootCommand.SetHandler((mensagemArgValue) =>
{
   Console.WriteLine(mensagemArgValue); //Apenas exibe a mensagem recebida

}, mensagemArg);

// Passe os argumentos recebidos pela a console aplication para o objeto rootCommand 
// através do seu metódo invoke.
rootCommand.Invoke(args);

Agora execute a sua aplicação console

e voilá, temos nossa aplicação rodando com a descrição que colocamos

A keyword `args`

Uma pequena explicação sobre a keyword args que passada como parametro na rootCommand.Invoke(args);: Todo console application pode aceitar argumentos como parametro inicial, dentro do C# ela é recebida através de uma array de strings, esse array de string é identificado quando você executa um comando separando as palavras por espaço.

Adicionando nossos primeiros argumentos

Essa lib é bem poderosa e conseguimos até mesmo definir quais argumentos são esperados e a ordem que eles devem acontecer, como você pode ver no código abaixo, onde definimos que o primeiro argumento recebido será uma string

// Criando um argumento a ser aceito por nosso app
var mensagemArg = new Argument<string>("Uma Mensagem", "Apenas essa mensagem será exibida");

// adicionando esse argumento no nosso comando principal
rootCommand.AddArgument(mensagemArg);

// Definindo uma ação para quando esse comando for adicionado.
rootCommand.SetHandler((mensagemArgValue) =>
{
   Console.WriteLine(mensagemArgValue); //Apenas exibe a mensagem recebida

}, mensagemArg);

Mas também podemos mudar para dizer que receberemos um inteiro (int), um double (double), um arquivo (FileInfo), um diretório (DirectoryInfo) e varios outros tipos.

Opções para comandos

Também é possível fazer ações como o comando

dotnet restore [project.csproj/solution.sln] --build release

Vamos criar algo semelhante a isso nesse nosso ConsoleCharmosao, onde teremos um novo comando chamado length que receberá uma string e retornará a quantidade de caracteres contida nela.
Teremos que mudar nosso Código para chear proximo disso.

using System.CommandLine;

// Crie uma descrição que será exibida caso o usuario não passe nenhum argumento.
// Isso também serve para você escrever uma descrição da sua ferramenta console.
var description = @"
Bem vindo ao meu console charmosão com vários 
comandos listados e documentados";

var rootCommand = new RootCommand(description);

// Crie um novo comando
var lengthCommand = new Command("length", "Quantidade de caracteres em uma string");

// define nomes alternativos para chamar esse comando
lengthCommand.AddAlias("len");
lengthCommand.AddAlias("l");

// crie novo argumento a 
var lengthArgument = new Argument<string>("string", "string para ser processada");
lengthArgument.SetDefaultValue(string.Empty);

// adicione o novo argumento ao comando
lengthCommand.AddArgument(lengthArgument);

// crie uma nova opção
var lengthOptionRepeat = new Option<int>("--repeat", "Imprime quantas vezes?");
lengthOptionRepeat.AddAlias("-r");
lengthOptionRepeat.SetDefaultValue(1);

// adicione essa opção ao lengthComand
lengthCommand.AddOption(lengthOptionRepeat);

lengthCommand.SetHandler((lengthArgumentValue, lengthOptionRepeatValue) =>
{
    // recendo os valores e processando-os
    for (int i = 0; i < lengthOptionRepeatValue; i++) 
    {
        Console.WriteLine($"{i + 1}. {lengthArgumentValue.Length}");
    }

}, lengthArgument, lengthOptionRepeat); // lembre-se de passar os parametros aqui


// adicionando o length command ao nosso comando principal
rootCommand.AddCommand(lengthCommand);

// Passe os argumentos recebidos pela a console aplication para o objeto rootCommand 
// através do seu metódo invoke.
rootCommand.Invoke(args);

Olha só como ficou nosso console após adição desse comando e option na sessão Commands

Como testar?

Para testar dentro do visual studio 2022 é possivel definir lauchSettings.json onde eu defini abaixo

{
  "profiles": {
    "ConsoleCharmosao": {
      "commandName": "Project"
    },
    "StringLength": {
      "commandName": "Project",
      "commandLineArgs": "length \"minha string\" --repeat 3"
    }
  }
}

Caso, o lauchSettings.json não esteja aprecendo para você, execute as ações abaixo

Clique nas opções de execução (setinha para baixo), depois click em debug properties

Na janela que abriu, selecione o botão de adicionar configuração, e selecione projeto. Após isso, você pode adicionar o comando que deseja executar na hora de rodar o aplicativo.

Agora você capaz de rodar e debugar seu comando direto do visual studio.

Deploy e execução

Quando você definir suas configurações de publicação, lembresse de definir o deployment mode como Self-contained.

Com o .exe publicado, você poderá rodar comandos como ConsoleCharmosao.exe length "minha string" --repeat 3

Obrigado!

De agora em diante você sabe fazer um console cheio de firulas e comandos utéis e assim ajudar no DX e UX de suas futuras ferramentas. Qualquer duvida deixa nos comentarios, você pode acessar o código fonte aqui, Me siga no Github e no Twitter/X.

DEV Community: Marcos Costa

Convenções de Nomes em C#: Como Nomear Variáveis, Métodos e Classes

A PascalCase

A camelCase

Agora o mais Difícil (não deveria ser)

De onde você tirou isso? do C#?

MAUI - Por onde começar? Parte 2: O arsenal de ferramentas para desenvolver apps MAUI

XAML STYLER

ResX Manager

CommunityToolkit.Mvvm

CommunityToolkit.Maui

Menções honrosas

Tá, e agora?

MAUI - Por onde começar? Parte 1: Entendendo o MAUI

O que é MAUI e qual a sua diferença para o WPF, UWP e Windows Forms?

Vamos ao que interessa, seu primeiro App MAUI!

Entendendo a estrutura padrão de pastas no MAUI

Vamos Respirar um pouco antes de prosseguir

Como conectar o Aplicativo MAUI no Emulador Android e WEB Api na mesma máquina

Maquina Virtual e Hospedeira (Host)

Recursos de redes Emulador Android

Desenvolvendo para ASPNET e acessando no emulador

Executando os dois projetos simuntaneamente pelo visual studio

Adicionando a chamada do servidor no Android

Resolvendo o java.security.cert.CertPathValidatorException

Resolvendo o Cleartext HTTP traffic to 10.0.2.2 not permitted

Considerações finais e sugestões

Publicação em produção

E rodando para o windows?

Obrigado!

Criando uma console application com esteróides com o pacote System.CommandLine

Criando a console aplication

A keyword args

Adicionando nossos primeiros argumentos

Opções para comandos

Como testar?

Deploy e execução

Obrigado!

A keyword `args`