GettingStarted pt BR

Primeiros Passos

🌐 Esta página em: English · Português

Não quer instalar nada ainda? Experimente no playground o mesmo compilador, no seu browser.

Três comandos, sem Node, sem bundlers, sem JavaScript:

dotnet new install eQuantic.UI.Templates

dotnet new equantic-app -n MeuApp

cd MeuApp && dotnet run

Abra a URL impressa: uma página com tema, renderizada no servidor, cujo contador é um componente C#: um campo de estado, um handler e um método Build. O build compilou tudo para JavaScript por você (a toolchain embarcada faz o bundling; não há nada para instalar).

O que o template te dá

MeuApp/
├─ MeuApp.csproj       # <Project Sdk="eQuantic.UI.Sdk">, essa linha É o pipeline de build
├─ global.json         # pina a versão do SDK (carimbada pelo template)
├─ Program.cs          # AddUI → UseTheme → MapUI, UseRequestLocalization para as culturas
├─ Components/
│  └─ StatTile.cs      # seu primeiro componente; a factory dele é gerada a partir dele
├─ Pages/
│  └─ HomePage.cs      # [Page("/")], um StatefulComponent write-once
└─ Resources/
   ├─ Strings.resx     # suas strings: resx .NET comum, o único artefato de localização
   ├─ Strings.pt-BR.resx
   └─ Strings.Designer.cs

• Páginas são classes com [Page("/rota")]. SSR, hidratação, navegação client-side, um 404 de verdade para rotas desconhecidas (declare [Page("/404")] para personalizá-lo), tudo ligado.
• Dois idiomas de nascença. A home lê Strings.Tagline do resx e renderiza um CultureSwitcher: clique em Português e a página re-renderiza no lugar, com Contado {0} vezes. reformatando junto com o contador. Adicione um terceiro idioma criando Strings.fr.resx e listando fr no UseRequestLocalization. Veja Localização para entender como a mesma classe responde no servidor, no browser e numa janela nativa.
• Escrever uma árvore não precisa de new nem de import: Column(gap: Space.S4, children: [ Text("Oi"), Button("Vai") ]). Seus próprios componentes entram nessa superfície automaticamente, e o StatTile(…) do template é seu. Veja Declarative Surface.
• Tema é uma linha: troque PhotonTheme.Instance por MaterialTheme.FromSeed(cor) no Program.cs e todo componente se rebrandiza, servidor e cliente.
• Dados do servidor passam por métodos [ServerAction], chamados do browser como await C# comum.
• Hot reload: rode com dotnet watch, salve um arquivo, e o browser atualiza com o estado da sua página preservado.
• O mesmo componente realiza NATIVAMENTE no engine Photon (shells macOS/iOS/Android). Veja Photon.

Começar de uma forma, em vez de uma página em branco

Desde 0.2.0-preview.31

O layout acima é o --shell blank, o padrão. Os dois templates aceitam o parâmetro, e toda forma que ele oferece é ADAPTATIVA, que é justamente o ponto: fator de forma aqui não é um segundo projeto, então a primeira tela que alguém novo vê tem que dizer isso.

dotnet new equantic-app -n MyApp --shell dashboard

dotnet new equantic-native -n MyApp --shell tabs

equantic-app	O que você recebe
blank	Uma página e um contador.
topnav	Um cabeçalho com links, e uma segunda rota para provar o roteador.
dashboard	Uma barra lateral acima de 840dp, as mesmas seções embaixo do cabeçalho abaixo disso.

equantic-native	O que você recebe
blank	Uma tela e um contador.
tabs	Destinos numa barra inferior, que ficam de pé como rail acima de 600dp.
drawer	Um painel deslizante no telefone, encaixado ao lado do conteúdo acima de 840dp.
list-detail	Um painel de cada vez no telefone, dois lado a lado no tablet.

Um template por fator de forma negaria a tese write-once no primeiro arquivo que a pessoa abre, então isto é um CHOICE do dotnet new sobre os dois templates. A forma vive em UM arquivo, o AppShell, e nada mais o nomeia: no nativo o Program.cs diz UseRoot<AppShell>() seja qual for a escolha; no web um shell é um componente comum que toda página compõe, então ele ganha uma factory gerada como qualquer outro e a página escreve AppShell("/", …). Trocar de forma depois é um arquivo, nunca o ponto de entrada.

As metades adaptativas não carregam listener nem um segundo estado: o AdaptiveNode guarda as duas árvores, o web emite as duas atrás de media queries de tempo de build (a certa já está na tela no primeiro paint, antes de qualquer JavaScript rodar) e o Photon dispõe só a que cabe na janela. Veja Componentes write-once.

Feeds locais/preview

Enquanto os pacotes não estão no nuget.org, aponte um nuget.config para o feed que os carrega:

<configuration>
  <packageSources>
    <add key="equantic" value="CAMINHO-OU-URL-DO-FEED" />
  </packageSources>
</configuration>