Já escrevi dois artigos demonstrando alguns dos principais recursos do Mavo, uma nova solução que expande o poder do HTML e ajuda no desenvolvimento de aplicações web.
Neste novo artigo, vou mostrar como criar uma página dinâmica simples, apenas utilizando os recursos básicos do Mavo, sem a necessidade de plugins e extensões extras.
No exemplo a seguir, a intenção é demonstrar como é fácil criar um aplicação utilizando os recursos do Mavo, que na verdade, é uma extensão para o HTML e não propriamente uma linguagem de programação nova.
Antes de começar
Recomendo que leia os textos anteriores para conhecer melhor o que é o Mavo e como ele pode ajudá-lo na criação de WebApps ricos.
Em meus dois primeiros textos apresento os principais recursos da linguagem e também dou algumas dicas importantes de plugins que podem ser utilizados.
Pretendo produzir mais alguns conteúdos inéditos de Mavo, inclusive em vídeo. Por isso deixe nos comentários suas dúvidas para me ajudar a criar os próximos conteúdos.
Criando um CRUD apenas com HTML, e Mavo, é claro!
Neste exemplo, vamos criar uma aplicação simples. Uma página que pode ter o seu conteúdo criado, editado e excluído.
A primeira coisa a ser feita, é chamar o Mavo no Head da sua página:
<head> <link rel=”stylesheet” href=”https://get.mavo.io/mavo.css” /> <script src=”https://get.mavo.io/mavo.js”></script> </head>
Como já falei nos artigos anteriores, apenas essas duas chamadas já são suficientes para trabalhar com Mavo.
Caso queira, é possível criar um novo CSS para personalizar os elementos, mas a ideia deste artigo não é essa, por isso, vamos deixar para a próxima.
Agora vamos à mágica. No código abaixo vamos montar nossa WebApp:
<main mv-app="contas" mv-storage="local" mv-mode="edit"> <header> <p>[count(MinhasContas)] contas:</p> </header> <ul> <li property="MinhasContas" mv-multiple>Luz</li> </ul> </main>
Neste exemplo montamos uma lista com nossas contas mensais com um contador simples. Podemos implementar novos campos e recursos, como valores, data de pagamento, etc. O que acha de fazer isso como um desafio?
Para ver rodando, basta acessar este link.
Este código não tem nada de mais, mas demonstra que é possível desenvolver qualquer tipo de aplicação com Mavo.
É um CRUD bem básico, verdade, mas veja bem, são poucas linhas de código. As possibilidades são enormes.
Vamos avançar mais? O que acha de criar uma aplicação com Firebase no próximo artigo? Deixem suas ideias nos comentários.
De 0 a 10, o quanto você recomendaria este artigo para um amigo?