Vamos conhecer o SmartUX™ , novo recurso para sistemas Web Client lançado no Magic xpa 4.10 
Lançado como GA (General Availability) em 29-Dezembro-23, para a versão 4.10 do Magic xpa, o SmartUX™ é um Web Editor (Designer) para as interfaces (telas) dos programas Web Client, que vem integrado ao Magic xpa Studio e já está disponível para os usuários desta versão.
Nesta que é a primeira publicação a seu respeito, vamos focar no ambiente e no contexto em que o SmartUX™ existe e pode ser utilizado.
Mas antes, vamos começar pelo início.
Preparando o Ambiente de Instalação
O SmartUX™ é um editor externo e parte integrante do Magic xpa Studio. Ou seja, ele é uma ferramenta exclusiva para o desenvolvedor Magic xpa.
O SmartUX™ em si, é um editor desenvolvido (roda) em Angular 15 (roda dentro de um WebBrowser) e por isso, ele tem alguns pré-requisitos próprios que o desenvolvedor Magic xpa precisa providenciar antes de pode utilizá-lo.
Abaixo está uma lista do que a máquina do desenvolvedor precisa ter, antes de instalar o Magic xpa 4.10 (com SmartUX):
*Nota: Atenção para as versões específicas que forem aqui mencionadas. Outras versões (maiores ou menores) podem não funcionar
- Python 2.7
Baixe e instale o Python 2.7.x: https://www.python.org/downloads/release/python-2718/
Instale-o e coloque-o no PATH do Windows, de forma que seja facilmente acessado via linha de comando, ex:
- PowerShell 7
Baixe e instale o Powershell 7.x: https://github.com/PowerShell/PowerShell/releases/download/v7.3.8/PowerShell-7.3.8-win-x64.msi
Instale-o que coloque-o no PATH do Windows, de forma que seja facilmente acessado via linha de comando, ex:
- NodeJS 16.15.1
Baixe e instale o NodeJS v16.15.1: https://nodejs.org/en/blog/release/v16.15.1
Nota*: Use esta versão específica
Instale-o e coloque-o no PATH do Windows, de forma que seja facilmente acessado via linha de comando, ex:
- NPM 8.17.0
Instale o NPM 8.17.0 (use esta versão específica) após instalar o NodeJS 16.15.1. Isso é feito através do comando:
npm install -g npm@8.17.0
- Angular 15.2.4
Instale o Angular 15.2.4 (use esta versão específica) após instalar o NodeJS 16.15.1. Isso é feito através do comando:
npm install -g @angular/cli@15.2.4
- .npmrc
Na pasta do seu perfil de usuário Windows (%USERPROFILE%) crie um arquivo chamado “.npmrc“, com o conteúdo: legacy-peer-deps=true.
Isso pode tanto ser feito de forma manual, quanto com o comando:
echo legacy-peer-deps=true > %USERPROFILE%\.npmrc
Tendo efetuado esta preparação, você pode conferir seu ambiente Angular/NodeJS/NPM com o seguinte comando:
ng version
e terá (precisa ter) um resultado (output) assim:
Efetuando a Instalação
Não existe um procedimento especial ou exclusivo para instalação do SmartUX™.
Como mencionado acima, ele é parte integrante do Magic xpa Studio.
Dessa forma, basta executar a instalação normal da versão (4.10):
e haverá uma nova pasta chamada “SmartUX” no caminho da instalação do produto:
Haverá um novo botão na barra de ferramentas do Magic xpa Studio:
e também um processo chamado “MgSmartUX.exe“ (o executável físico do SmartUX™) que roda automaticamente e em paralelo ao Magic xpa Studio:
Nota*: O MgSmartUX.exe poderá ou não estar visível na barra de tarefas do Windows, depende da configuração [MAGIC_ENV]StartSmartUXServiceInBackground
Mas calma, ainda não é hora clicar neste novo botão 😎
Contextualizando a Existência do SmartUX™
Antes de vermos a “cara” do SmartUX™, vamos recapitular como chegamos até ele.
Existe um tipo de programa que pode ser criado com o Magic xpa, chamado Web Client:
Este tipo de programa indica que haverá em nosso projeto/aplicação, uma interface (tela) em Angular (TypeScript + HTML5 + CSS3), para o usuário.
Por isso, em algum momento da etapa de desenvolvimento, este programa (e outros do mesmo tipo dele) precisará ser compilado e convertido em JavaScript, para então poder rodar (ser acessado) via um WebBrowser (pelo usuário final).
Assim sendo, e como mencionado em alguns vídeos e publicações:
- http://blog.magicsoftware.com.br/novo-smartux-do-magic-xpa-parte-1
- https://www.youtube.com/playlist?list=PL09PQ5y9FQ-j1-kzIR5Jy_uGPAD1ezQeG
existem algumas sequências (etapas) a serem seguidas durante um desenvolvimento na modalidade Web Client:
1. Criar um programa WC e desenvolver a sua lógica (ver imagem acima)
2. Desenhar no Magic xpa Studio um rascunho (template) da tela que este programa deverá ter:
3. Gerar o projeto Angular associado a este projeto Magic xpa, que inclui todos os programas do tipo Web Client:
4. E ao final, teremos uma nova estrutura de pastas (adicional) em nosso projeto Magic xpa, com o código Angular associado às interfaces dos programas do tipo Web Client, que deverá (necessita) ser compilado e convertido em JavaScript (ng serve –ou– ng build) no final do desenvolvimento:
Essa é a sequência que todo desenvolvedor Magic xpa precisa seguir na criação de sistemas (aplicações) do tipo Web Client.
Nota*: Aproveitando o momento, cabe um esclarecimento: Web Client é um recurso *adicional* do produto Magic xpa, nas versões 4x em diante. Os demais recursos de interface com usuários (RIA e On-line) continuam disponíveis nestas versões (e melhorados inclusive). Por isso, todo desenvolvedor e/ou usuário das versões 2x e 3x do Magic xpa, podem migrar tranquilamente para as versões mais novas da família 4x (como esta 4.10), pois não é obrigatório usar a interface Web Client (ela é apenas opcional).
A Revolução do SmartUX™
Pois bem: concluídas estas 4 etapas, até a versão 4.9 do Magic xpa, sempre que fosse necessário alterar a interface (UI – tela) de um programa do tipo Web Client, era necessário usarmos um editor do tipo VSCode, Sublime e afins … e fazer este ajuste com código (TypeScrypt, HTML5 e CSS3).
Era preciso escrever a tela do programa.
Agora com o SmartUX™ nós temos um editor “visual” para estas telas, para podermos desenhá-las ao invés de escrevê-las.
A partir então da versão 4.10 do Magic xpa, após concluir as 4 etapas mencionadas acima (elas continuam sendo necessárias), podemos clicar no botão que dá acesso ao SmartUX™ (que por ser Angular, roda num WebBrowser):
e saímos de uma interface assim:
para uma interface assim (diretemente no WebBrowser):
Onde temos:
Uma área inferior chamada “Template“, onde segue sendo possível “escrever” a tela HTML5/Angular do programa (como com o VSCode, Sublime…)
Uma área inferior chamada “Component“, onde segue sendo possível “escrever” a parte TypeScript da tela do programa (como com o VSCode, Sublime…)
Uma área inferior chamada “Styles“, onde segue sendo possível “escrever” a parte CSS3 da tela do programa (como com o VSCode, Sublime…)
Mas também, uma área superior chamada “Canvas“, onde é possível desenhar a tela no conhecido processo de “arrastar e soltar” controles gráficos:
através da paleta de controles chamada UX Widgets:
e de uma paleta de propriedades individuais de cada controle visual:
De maneira que: se quisermos adicionar um novo botão a esta tela (por exemplo):
1. Selecionamos o controle na paleta UX Widgets:
2. Arrastamos até a área desejada da tela:
3. E soltamos:
Tanto o “Canvas” quanto o “Template” são atualizados (e sincronizados) automaticamente, para refletir a mudança.
A partir daí é só trabalhar a parte “visual” e “funcional” do controle.
E tem também o “Live Preview“:
“Live Preview” é uma comodidade. Ele combina duas ações que eram feitas em separado, para testar a aplicação:
- Compilação do código Angular com “ng serve“
- Execução da aplicação, pelo seu “programa inicial”, através do endereço: http://localhost:4200/
Agora isso tudo pode ser feito diretamente dentro da tela do SmartUX™, apenas clicando em Live Preview.
Nota*: A aplicação sempre inicia pelo programa definido como "Startup Program", no momento da geração do projeto Angular
Resumindo em poucas palavras: o SmartUX™ é um editor visual e drag & drop (WYSIWYG) para as telas dos programas Web Client do Magic xpa, a partir da versão 4.10.
É a ferramenta LOW CODE para interfaces Angular dos programas Web Client no Magic xpa 😎 (agora já pode clicar)
Nota*: Pode parecer obvio, mas cabe dizer: O SmartUX™ é um editor adicional e opcional que vem a partir da versão 4.10. Segue sendo possível produzir sistemas WebClient no Magic xpa apenas com editores de código, como VSCode, Sublime, ...
Uma última informação importante: Quando o SmartUX™ é aberto (no WebBrowser), o Magic xpa Studio entra automaticamente no modo de “Execução Debug (CTRL+F7)“:
pois o SmartUX™ precisa conversar a todo momento com ele, trocando dados e informações.
Esta versão do SmartUX™ vem como OEM e depende do Magic xpa Studio.
Mais detalhes e recursos podem ser encontrados neste site:
incluindo novas versões para atualização (quando lançadas/disponíveis).
E esta foi a apresentação inicial do SmartUX™, o novo editor Web Client do Magic xpa 4.10.
Em próxima oportunidade faremos uma nova (segunda) publicação, para abordar um pouco mais de detalhes do funcionamento (features) deste novo Web Screen Designer.
Fique ligado no Blog MagicBR, para mais dicas.
Para receber os artigos do Blog Magic Brasil em primeira mão no seu email, registre-se aqui