DEV Community: José Ulisses

Criando um app de terminal (CLI) para criar arquivos react #3

José Ulisses — Wed, 14 Feb 2024 00:23:41 +0000

Tabela de Conteúdo

Parte 1: O que vamos fazer?
Parte 2: Publicar no Windows
Parte 3: Variáveis de Ambiente no Windows
Parte 4: Testando o programa
Final

Parte 1: O que vamos fazer?

Agora que já temos um aplicativo funcional podemos publicar esse app como um executável no windows e adicionarmos o seu caminho as variáveis de ambiente, de modo que possamos invocar esse aplicativo de qualquer lugar.

Parte 2: Publicar no Windows

Para isso vamos primeiro publicar o nosso aplicativo, a maneira mais simples é fazermos isso pelo console com o comando:

dotnet publish -o <CAMINHO>

Se formos na pasta indicada como saída do comando devemos ver diversos arquivos que são necessários para o nosso projeto funcionar.

Parte 3: Variáveis de Ambiente no Windows

Pronto, agora precisamos adicionar o caminho dessa pasta nas variáveis de ambiente do nosso sistema operacional para usarmos pelo terminal de maneira mais prática apenas passando o nome do programa.

No menu inicial do windows, pesquise por "Variáveis de Ambiente" e abra o programa.

Com o programa aberto as variáveis de usuário procure o Path e clique em editar.

Com a nova janela aberta, clique no botão de novo e digite o caminho que o seu programa foi publicado.

Agora já podemos chamar o nosso app em qualquer pasta do nosso pc!

Parte 4: Testando o programa

Para testar a execução vou criar um pequeno projeto React com o Vite.

Vamos acessar a pasta deste projeto react criado e vamos tentar executar o nosso programa, podemos fazer isso digitando o nome do programa:

reactcomponent

Como resultado devemos ver uma demonstração de uso, opções disponíveis e comandos, tudo isso já vem da biblioteca que estamos usando e pode ser personalizado.

Vamos criar um componente? Digite:

reactcomponent create Menu

Ao exibirmos o tudo dentro pasta Menu, podemos ver que o arquivo de index.jsx e o styles.css foi criado.

Final

Pronto, a partir desse ponto você já tem uma ideia e pode expandi-la, fazendo o programa criar arquivos de test para o componente ou algo da sua escolha. A biblioteca Spectre.Console oferece muito mais do que foi mostrado aqui, se quiserem posso mostrar como seria para fazer o programa perguntar quais arquivos o usuário desejaria criar e outras coisas como algumas animações. Agradeço a todos que leram e vamos conversar nos comentários?

Criando um app de terminal (CLI) para criar arquivos react #2

José Ulisses — Fri, 09 Feb 2024 11:15:10 +0000

Tabela de Conteúdos

Parte 1: Estrutura
Parte 2: Criando arquivo
Parte 3: Criando pasta para o componente
Parte 4: Criando estilo
Final

Parte 1: Estrutura

Essa é a parte 2 do projeto para criar um aplicativo de linha de comando que cria arquivos para projetos react.

Vamos ao código, anteriormente criamos as classes CreateComponentCommand e a CreateComponentSettings no mesmo arquivo, vamos remover a CreateComponentSettings para o seu proprio arquivo.

.
├── ...
├── Program.cs
├── CreateComponentCommand.cs
└── CreateComponentSettings.cs

A estrutura de arquivos do projeto deve ficar assim. E os arquivos assim:

CreateComponentSettings.cs

using Spectre.Console.Cli;

namespace reactcomponent;

internal class CreateComponentSettings : CommandSettings
{
    [CommandArgument(0, "<componentName>")]
    public string ComponentName { get; set; }
}

CreateComponentCommand.cs

using Spectre.Console.Cli;

namespace reactcomponent;
internal class CreateComponentCommand : Command<CreateComponentSettings>
{
    public override int Execute(CommandContext context, CreateComponentSettings settings)
    {
        Console.WriteLine($"nome do component {settings.ComponentName}");
        return 0;
    }
}

Program.cs

using reactcomponent;

using Spectre.Console;
using Spectre.Console.Cli;

var app = new CommandApp();

app.Configure(app =>
{
    app.AddCommand<CreateComponentCommand>("create");
});

app.Run(args);

Parte 2: Criando arquivo

Em para criarmos o arquivo precisamos pegar a localização que o programa foi chamado no terminal, em C# podemos utilizar uma propriedade da classe Environment. Podemos alterar o que vai ser exibido para exibir a pasta, o programa vai ficar assim:

\*CreateComponentCommand.cs*\
...
public override int Execute(CommandContext context, CreateComponentSettings settings)
{
    Console.WriteLine($"nome do component {settings.ComponentName} {Environment.CurrentDirectory}");
    return 0;
}
...

Com isso podemos criar o arquivo, por enquanto ele vai ser criado na pasta que o programa foi chamado.

CreateComponentCommand.cs

...
public override int Execute(CommandContext context, CreateComponentSettings settings)
{
    File.Create(Environment.CurrentDirectory + $@"\{settings.ComponentName}.jsx");
    return 0;
}
...

Ao rodarmos o comando no terminal, passando o "Nav" deverá ser criado o arquivo Nav.jsx na pasta do programa.

dotnet run -- create Nav

Agora temos um programa que criar um arquivo jsx com o nome passado por parâmetro.

Parte 3: Criando pasta para o componente

Normalmente ao criarmos componente react, vamos colocar esse componente em sua própria pasta. Podemos fazer isso em C# de maneira fácil, primeiro vamos pegar o caminho atual e adicionar ao fim o nome da pasta, neste caso vai ser o mesmo nome do component, depois vamos verificar se esse diretório existe, pois se não existir devemos criar o mesmo. Com o diretorio criado podemos então criar o arquivo nesse novo diretório.

CreateComponentCommand.cs

...
public override int Execute(CommandContext context, CreateComponentSettings settings)
{
    var directory = new DirectoryInfo(Environment.CurrentDirectory + $@"\{settings.ComponentName}");

    if (!directory.Exists)
    directory = Directory.CreateDirectory($@"{Environment.CurrentDirectory}\{settings.ComponentName}");

    File.Create(directory.FullName + $@"\{settings.ComponentName}.jsx");
    return 0;
}
...

Executando o comando para rodar o aplicativo novamente pelo terminal, podemos ver que ele está criando o arquivo e pasta correspondente ao nome que passarmos como argumento.

Parte 4: Criando estilo

Não só de arquivo jsx vive o ser humano. Precisamos de alguns estilos também, com tudo que temos até agora fica fácil saber o que precisamos adicionar para que o programa consiga criar um arquivo css também. Porém um padrão que gosto de seguir é ao criar um novo componente é utilizar o arquivo que contém o mesmo com o nome de index.jsx ao invés do nome do component, por isso vamos fazer uma pequena alteração além de apenas criar o arquivo css.

CreateComponentCommand.cs

...
public override int Execute(CommandContext context, CreateComponentSettings settings)
{
    ...

    File.Create(directory.FullName + @"\index.jsx");
    File.Create(directory.FullName + @"\styles.css");
    return 0;
}
...

Precisamos apenas substituir a linha que criar o arquivo jsx com o argumento, para o padrão "index" e adicionarmos uma linha abaixo para criarmos o arquivo de estilos. Ao rodarmos o aplicativo, teremos os seguintes novos arquivos:

dotnet run -- create Menu

Final

Com isso deixamos o nosso aplicativo muito mais funcional e útil que quando finalizarmos a parte 1. Porém ainda é necessário publicar esse programa para que possamos utilizar o mesmo em qualquer diretório do nosso sistema, veremos isso na parte 3.

Github

Criando um app de terminal (CLI) para criar arquivos react #1

José Ulisses — Thu, 01 Feb 2024 01:07:41 +0000

Tabela de Conteúdos

Parte 1: Ideia
Parte 2: Tecnologias
Parte 3: Criando Projeto
Parte 4: Configurando o app
Parte 5: Primeiro comando
Parte 6: Passando argumento
Final

Parte 1: Ideia

A ideia desse artigo é apresentar a biblioteca Spectre.Console e criar um aplicativo de linha de comando ou command line interface (CLI) em .Net que crie arquivos vazios para uso em desenvolvimento de projetos react.

Parte 2: Tecnologias

O projeto vai utilizar como base (além do óbvio C# e .Net) a biblioteca Spectre.Console.

Pré-requisitos

.Net 7.0 ou o 8.0
IDE ou um editor de texto

Parte 3: Criando Projeto

Abra o seu terminal e rode o comando a seguir na pasta que desejada, vai criar um novo projeto C# para o terminal.

dotnet new console -o reactcomponent

Acesse a pasta do projeto e abra o terminal novamente, rode os seguintes comandos para adicionar a biblioteca como referência ao projeto.

dotnet add package Spectre.Console
dotnet add package Spectre.Console.Cli

Acesse o projeto com sua IDE ou editor de texto preferido e abra o arquivo Program.cs, o arquivo deve se parecer com isso:

// See https://aka.ms/new-console-template for more information
Console.WriteLine("Hello, World!");

Com isso podemos iniciar a usar a biblioteca, para rodarmos o spectre.console precisamos de um aplicativo do tipo CommandApp e que esse app receba os args que serão passados ao rodar o programa no terminal. Vamos substituir o código antigo por esse:

using Spectre.Console;
using Spectre.Console.Cli;

var app = new CommandApp();

app.Run(args);

Pronto, agora já temos a estrutura na qual o nosso programa vai funcionar.

Passo 4: Configurando o app

Com essa estrutura podemos configurar o aplicativo, é nessa configuração que podemos definir quais comando vão existir no aplicativo, entre outras configurações. Para isso precisamos apenas usar o método Configure do App.

using Spectre.Console;
using Spectre.Console.Cli;

var app = new CommandApp();

app.Configure(app =>
{
//configuração
});

app.Run(args);

Passo 5: Primeiro comando

Primeiramente, o que é um "comando"? Um comando é uma palavra chave que ao ser passada para o aplicativo (CLI) vai executar algo. Nesse post, queremos criar um comando que exibe o nome do componente passado como argumento ao comando.

No spectre.console cada comando que desejarmos criar deve herdar da classe Command. Com isso já podemos começar, vamos criar um arquivo CreateComponentCommand.cs. Neste arquivos vamos criar a classe CreateComponentCommand que vai herdar de Command.

using Spectre.Console.Cli;

namespace reactcomponent;
internal class CreateComponentCommand: Command
{
}

Usando uma IDE ela vai avisar que a nossa classe não implementa o método Execute herdado da classe Command. Podemos implementar o método e ele vai ficar nessa estrutura:

using Spectre.Console.Cli;

namespace reactcomponent;
internal class CreateComponentCommand: Command
{
    public override int Execute(CommandContext context)
    {
        throw new NotImplementedException();
    }
}

Nós não queremos que esse método lance uma exceção, por isso vamos substituir o conteúdo do método para exibir uma mensagem no console e retornar um valor inteiro, neste caso, o Zero, valor que indica que o código foi executado com sucesso.

...
public override int Execute(CommandContext context)
{
    Console.WriteLine("comando executado");
    return 0;
}

Com isso já podemos fazer o nosso app usar esse comando. Para isso vamos no Program.cs e vamos adicionar essa classe ao nosso app e definir qual palavra será o comando para executar esse código.

...
app.Configure(app =>
{
    app.AddCommand<CreateComponentCommand>("create");
});
...

Pronto, assim definimos que o nosso app terá o comando "create" que vai usar a nossa classe CreateComponentCommand.

Agora já podemos testar, vá no seu terminal e na pasta do projeto e digite:

dotnet run -- create

A saída no seu terminal deve ser igual a essa:

Parte 6: Passando argumento

Agora já temos um programa operacional, mas inútil já ele que ele sempre exibe a mesma mensagem. E se a gente quisesse passar um valor a ser exibido, ou melhor, o nome do componente que desejamos criar?

Para isso o specret.console fornece a classe CommandSettings que vai ser a classe que vai conter as propriedades que passaremos como argumento. Vamos criar uma classe dentro do arquivo CreateComponentCommand.cs apenas pela facilidade.

using Spectre.Console.Cli;

namespace reactcomponent;
internal class CreateComponentCommand : Command
{
  ...
}

internal class CreateComponentSettings : CommandSettings
{
    public string ComponentName { get; set; }
}

Agora temos uma classe CreateComponentSettings que vai conter os parâmetros que desejamos passar para executar um comando nesse caso o CreateComponentCommand. Mas neste momento a propriedade não vai ser reconhecida pela biblioteca e nem está configurada para ser usada no comando. Para isso vamos precisar adicionar um atributo, o CommandArgument, a essa propriedade que defina ela como um argumento.

...

internal class CreateComponentSettings : CommandSettings
{
    [CommandArgument(0, "<componentName>")]
    public string ComponentName { get; set; }
}

OBS: O uso do < e > neste caso denota que esse valor é obrigatório e o 0 representa para a biblioteca que o primeiro valor após o nome do comando deve ser passado para essa propriedade.

Com isso precisamos agora informar que o nosso comando vai utilizar essa configuração. Para isso vamos adicionar um tipo a Command e precisamos adicionar um novo parâmetro ao método Execute.

...
internal class CreateComponentCommand : Command<CreateComponentSettings>
{
    public override int Execute(CommandContext context, CreateComponentSettings settings)
    {
        Console.WriteLine("comando executado");
        return 0;
    }
}
...

Agora podemos utilizar o nome do componente que passarmos durante a execução do programa no terminal. Para isso vamos substituir o que está sendo impresso no terminal.

...
public override int Execute(CommandContext context, CreateComponentSettings settings)
{
    Console.WriteLine($"nome do component {settings.ComponentName}");
    return 0;
}
...

Ao executarmos novamente o projeto no terminal, agora passando um valor como nome do componente:

dotnet run -- create Menu

Veremos algo assim:

Final

Pronto com isso temos um pequeno aplicativo funcional, que por enquanto apenas recebe um valor e exibe ele na tela, mas na próxima parte faremos esse comando criar um arquivo com o nome passado.

Github