Como criar seu primeiro componente na Forge (Outsystems)
Antes de mais nada, você precisa colocar na sua cabeça que não precisa ser complexo ou perfeito. Seu componente apenas precisa resolver um problema e ser reusável.
O Problema
Usuário estava reclamando que nos formulários da aplicação não tinha nenhum tipo de ajuda e isso dificultava a vida dele, pois ele não tinha bola de cristal 🔮. Eis que foi criado um widget com um Label e um ToolTip de ajuda, e tudo se resolveu como mágica.
Criando seu componente para Forge
A ideia original era pautada usando componentes do RichWidgets
Contudo uma coisa que aprendi na minha jornada Jedi como dev Outsystems que quanto menos depêndencias melhor.
Então para isso teria que substituir as duas referências do RichWidgets, o que é relativamente uma tarefa fácil se souber onde procurar.
Abri um clone do RichWidgets e visualizei como os componentes acima se comportavam, o Icon são ícones do Fontawesome, então bastava pegar a imagem do ícone a qual queria, e o Tooltip é baseada em um plugin do JQuery chamado Tooltipster.
Passo 1 criando sua aplicação
Essa é uma tarefa fácil, porém muito gente esquece duas coisas principais que são: o ícone da sua aplicação e a descrição. Então fique atento a isso, pois o básico também precisa ser feito!
- No seu service studio clique em New Aplication.
2. Escolha qual aplicação deseja criar, no nosso caso Traditional Web.
3. Após escolher o tipo de aplicação, informe qual o nome da sua, juntamente com a imagem que servirá como ícone e uma breve descrição. Não esqueça disso, pois é muito importante, afinal o marketing é a alma do negócio.
4. Com a aplicação criada, hora de criar o Module, e até nisso o Outsystems nos ajuda, então deixe o mesmo nome e escolha a opção Blank em Module Type e clique em Create Module.
Passo 2 eliminando as depêndencias
Não sei se você já escutou isso, mas um professor meu sempre dizia: Difícil é ler o resto está escrito. E de fato está, então vamos lá.
Primeiro precisamos de ícone de informação e como já havia dito antes o Icon usa Fontawesome.
- Acesse o site e procure o ícone info.
2.Baixe o ícone e adicione ao Outsystems e seja feliz.
3. Adicione o ícone aos Resources.
Pronto, primeira dependência resolvida! Agora vamos para a segunda parte, e a mais difícil (Só que não!). Então vamos acessar o link da documentação do Tooltipster e fazer a mágica acontecer.
- Na maioria das documentações sempre existe o Getting Started e como eu disse, difícil é ler o resto está escrito. Então baixe o código do Tooltipster, e como podem ver precisamos do arquivo JS e CSS basicamente, porque o Outsystems já nos provê o bom e velho desatualizado JQUERY.
2. Verifique como é estruturado o html do Tooltipster. Aqui basicamente precisamos apenas da tag SPAN do atributo TITLE e CLASS, fácil, não ?
3. Por último e mais importante, precisamos inicializar o Tooltipster nos elementos os quais queremos, por isso no passo anterior precisamos do atributo CLASS.
Tip: Sempre utilize apenas um JS para inicializar todos os elementos e não um por elemento.
Passo 3 montando meu componente
Com todo o entendimento do passo anterior colocar no Outsystems se torna uma tarefa bem simples e fácil, shall we start ?
- Primeiro, crie três widgets que conterão toda a regra do componente. Por que três ? simples assim como no passo anterior, primeiro precisamos importar o plugin, depois devemos montar o html e por último inicializa-lo. WTF man !!! you are a genius.
2. Segundo, precisamos pegar o conteúdo do plugin JS e CSS e adicionar no nosso primeiro widget.
Sempre pegar o bundle.min que é minificado deixando o seu componente mais leve 😁
3. Terceiro, precisamos pegar nosso segundo widget e montar o html contendo o primeiro widget que é o plugin, e montar um html com um label, um span e um icon.
O container principal agrupará o label e o icon um ao lado do outro, pois é do tipo display Flex.
O segundo container é nosso label e para transformar um container em um label utilizamos a propriedade chamada ostagname, passando como valor “label” e o Outsystem irá transformar esse container em uma tag label. E, passamos também o atributo id de entrada para a propriedade for do span para referenciar que aquele label está ligado a um determinado input, e por último adicionamos uma expression passando o valor da tag label.
O terceiro container é nosso span com a imagem do icon, para isso usaremos o ostagname novamente para transformar em um span e adicionaremos os atributos class e title (passando o atributo de entrada).
4. Quarto e último passo, pegamos o terceiro componente e adicionamos uma expression com um script de ativação de todos os tooltips da tela que terá que ser usado junto com o widget acima.
Passo 4 montando um Demo e testando seu componente
Você precisa criar uma aplicação como DEMO para testar o seu componente, não deixe na mesma aplicação, não vou explicar o porque agora, mas tudo fará sentido ao final, agora você só precisa ter fé e continuar sua jornada fazendo um DEMO.
- Crie sua aplicação DEMO e adicione o componente como dependência.
2. Crie um form e adicione o componente juntamente com seu ativador.
3. Teste o DEMO e veja se o componente está funcionando.
Passo 5 colocando seu componente na Forge
Se você chegou até aqui, então pode ter certeza que esse é o passo menos complicado. Aqui só teremos que seguir um guideline bem simples da Outsystem e como mágica seu componente estará na forge.
- Primeiro, precisamos baixar as aplicações, tanto o DEMO, quanto o próprio componente.
2. Segundo, acesse o site da Forge e clique no botão new component.
3. Na página seguinte faça o upload das aplicações conforme descrito.
4. Na próxima tela após upload será necessário preencher alguns dados do seu componente como ícone, descrições, categoria e documentação. Se você preencheu os campos descrições e colocou os ícones a forge irá trazer esses campos já preenchidos. Como eu disse, o marketing é a alma do negócio, então make it beautiful.
No Detailed Description adicione primeiro as imagens para poder manipular os textos como Html, conforme imagens abaixo.
Preencha a versão e categorização conforme a classificação do seu componente.
Por último não esqueça de acrescentar tags de busca para o seu componente.
5. Estamos quase no fim de um jornada, prometo. Nessa próxima tela, basta clicar em publish e confirma e é isso. Agora seu componente está na Forge pronto para ser baixado e usado.
6. Caso tenha esquecido alguma informação relevante, basta editar o componente novamente.
7. Verifique seu componente na lista e mande para o seus amigos 👊🏻😎.
É isso, espero que tenha gostado do conteúdo e vou tentar postar mais coisas do meu dia dia como dev Outsystems e também outros assuntos aos quais estou estudando. Mas para isso preciso de um FeedBack de vocês caros leitores, então não sei se aqui tem like, mas deixa ele custa nada em ;)
