Framework para aplicações web e PWA

Crie aplicações web sem começar do zero.

O WebAppForge fornece uma estrutura pronta e organizada para desenvolver aplicações modernas utilizando HTML, CSS, JavaScript e JSON, com componentes reutilizáveis, navegação, modais, ações e suporte a PWA.

✓ HTML + CSS + JS ✓ Componentes ✓ JSON ✓ PWA ✓ Offline
WebAppForge
APP .navigate( "home" );
APP .loadScreen( "login" );
APP .loadModal( "install" );
APP .actions.login();
APP .run();

// Sua aplicação começa aqui.
Aplicação pronta

Uma estrutura pronta para desenvolver.

Em vez de montar a estrutura básica de cada projeto novamente, você começa com uma base organizada para telas, componentes, navegação, modais, ações e PWA.

01

Componentes reutilizáveis

Utilize componentes personalizados como app-column, app-row, app-spacer e app-modal.

02

Telas em JSON

Defina a estrutura das suas telas através de arquivos JSON organizados e fáceis de modificar.

03

Navegação entre telas

Controle a navegação através de APP.navigate(), mantendo a estrutura da aplicação organizada.

04

Modais personalizados

Crie modais utilizando a mesma estrutura baseada em componentes e configurações utilizadas pela aplicação.

05

Actions

Separe a lógica específica da aplicação utilizando APP.actions e mantenha o código mais organizado.

06

Manual técnico completo

Documentação atualizada com arquitetura, JSON, componentes, telas, navegação, actions, PWA, cache, instalação, personalização e referência rápida.

06

PWA e funcionamento offline

Utilize Manifest, Service Worker e cache para criar aplicações instaláveis e disponibilizar recursos offline.

Simples de entender. Fácil de adaptar.

O WebAppForge separa as principais responsabilidades da aplicação para facilitar o desenvolvimento, manutenção e expansão do projeto.

01

HTML

Fornece a estrutura inicial da aplicação e o container onde as telas são renderizadas.

02

JSON

Define a estrutura das telas e dos componentes que serão renderizados.

03

JavaScript

A classe App controla renderização, navegação, modais, ações e integração com o PWA.

04

CSS

Controle o tema, layout, responsividade e estilos específicos da aplicação.

05

Service Worker

Gerencie cache, atualização de recursos e disponibilidade offline.

Comece com uma estrutura pronta.

Defina suas telas, monte a interface, adicione suas funcionalidades e transforme a estrutura na aplicação que você deseja construir.

01 — Crie suas telas

Crie arquivos como home.json, login.json, register.json e outras telas da aplicação.

02 — Monte a interface

Combine elementos HTML, estilos e componentes reutilizáveis através dos arquivos JSON.

03 — Adicione sua lógica

Desenvolva suas funcionalidades em actions.js e acesse-as através de APP.actions.

04 — Publique como PWA

Configure Manifest e Service Worker para disponibilizar uma aplicação instalável e preparada para funcionar offline.

Defina a interface. O framework cuida da estrutura.

O JSON descreve a interface enquanto o JavaScript controla o comportamento da aplicação.

login.json
{
"element" : "app-column" ,
"children" : [
{
"element" : "h1" ,
"text" : "Entrar"
}
]
}

Para quem quer construir aplicações.

Uma estrutura para estudar, experimentar, criar protótipos e desenvolver projetos próprios.

Estudantes

Uma base prática para estudar HTML, CSS, JavaScript, componentes, JSON, PWA e organização de projetos.

Desenvolvedores

Uma estrutura inicial para protótipos, projetos pessoais e aplicações web personalizadas.

Criadores de projetos

Uma forma de começar rapidamente sem precisar montar toda a estrutura básica de uma aplicação do zero.

J C

Criado por Jin H. D. Cavalari .

Estudante de Tecnologia em Sistemas para Internet na Universidade Tecnológica Federal do Paraná (UTFPR) .

O WebAppForge nasceu da necessidade de ter uma estrutura própria, simples e organizada para desenvolver aplicações web sem precisar reconstruir a mesma base em cada novo projeto.

A ferramenta reúne componentes reutilizáveis, definição de interfaces em JSON, navegação, ações, modais, PWA e Service Worker em uma estrutura que pode ser estudada, modificada e expandida.

TSI UTFPR
WEB HTML + CSS + JS
PWA foco do projeto

A proposta é oferecer uma ferramenta direta, compreensível e personalizável para quem deseja aprender e construir suas próprias aplicações.

Framework, exemplos e documentação para desenvolver.

Você recebe uma base organizada para começar seus projetos, acompanhada de um manual técnico que explica como entender, personalizar e expandir o WebAppForge.

01

Framework completo

HTML, CSS, JavaScript e JSON organizados para servir como base de novos projetos.

02

Telas e componentes

Telas em JSON e Web Components reutilizáveis, incluindo colunas, linhas, espaçador e modal.

03

Documentação atualizada

Manual técnico cobrindo arquitetura, navegação, actions, CSS, PWA, cache, instalação e personalização.

Pare de começar cada projeto do zero.

Adquira o WebAppForge e tenha uma base organizada para desenvolver aplicações web e PWA utilizando HTML, CSS, JavaScript e JSON.

Adquira o WebAppForge

Perguntas frequentes.

O WebAppForge é um aplicativo ou um framework?

O WebAppForge é um framework/estrutura para criação de aplicações web e PWA. Ele fornece uma arquitetura organizada para telas, componentes, modais, ações, estilos, navegação e recursos offline.

Quais tecnologias são utilizadas?

O WebAppForge utiliza tecnologias web padrão: HTML, CSS e JavaScript, além de arquivos JSON para definição da interface.

As telas são criadas em HTML?

A estrutura visual das telas pode ser definida através de arquivos JSON. O WebAppForge interpreta esses arquivos e cria os elementos HTML correspondentes.

Preciso saber programação?

Conhecimentos de HTML, CSS e JavaScript são recomendados para aproveitar todo o potencial do WebAppForge. A documentação explica a estrutura e o funcionamento do projeto.

Posso modificar o projeto?

Sim. A estrutura foi criada para ser personalizada e expandida de acordo com as necessidades da aplicação.

O WebAppForge funciona offline?

Sim. O Service Worker utiliza cache para armazenar os recursos da aplicação. Quando não há conexão, os arquivos disponíveis no cache podem ser utilizados.

Como funciona o sistema de cache?

O Service Worker utiliza atualmente uma estratégia Cache First: primeiro procura o recurso no cache. Caso ele não esteja armazenado, busca o recurso pela rede.

O manual técnico acompanha o produto?

Sim. O pacote inclui uma documentação atualizada que explica a estrutura do projeto, sistema JSON, componentes, telas, navegação, actions, CSS, PWA, Service Worker, cache, instalação, criação de telas e criação de componentes.

Posso criar meu próprio aplicativo com ele?

Sim. O WebAppForge foi desenvolvido como uma base para criação de aplicações web e PWA que podem ser adaptadas ao objetivo de cada projeto.

Posso adicionar minhas próprias funcionalidades?

Sim. A lógica específica da aplicação pode ser organizada no arquivo actions.js e acessada através de APP.actions.

Comece seu próximo projeto com uma base pronta.

HTML, CSS, JavaScript e JSON. Uma estrutura organizada para você construir.

Adquira o WebAppForge Agora