Jump to content
Ivan.Teles

Criar uma página para funcionar Offline usando javascript puro ou algu

Recommended Posts

Salve galera, estou com uma demanda e gostaria da ajuda de vocês para solucionar meu problema, deixa eu tentar explicar a situação.

 

Preciso criar uma página que funciona totalmente offline, ou seja, após o usuário abril-la ele não poderá recarrega-la se não ele perderá tudo que tenha feito na mesma.

 

Ao carregar o sistema deve trazer alguns tópicos. ex:

1 - Tópico 1

2 - Tópico 2

3 - Tópico 3

Cada tópico desse é um acordion, e dentro de cada acordoin terá um campo de texto onde o usuário escreve uma situação e clica no botão adicionar e deve ser adicionado em um array. Até esse ponto eu consegui fazer funcionar usando knockoutjs. usando seguinte estrutura.

[ {Item: "Topico 1", Situacoes: [{item: "sit1"}, {item: "sit2"}] }]

Tenho que possibilitar a remoção apenas de situações.

E para cada situação ainda tenho que permitir a edição e ainda permitir atrelar caminho de várias imagens por situação. creio que meu JS deverá ter a seguinte estrutura:

 [ {Item: "Topico 1", Situacoes: [{item: "sit1", fotos: [{url: "caminhodaimagem"},{url: "caminhodaimagem"}]}, {item: "sit2", fotos: [{url: "caminhodaimagem"},{url: "caminhodaimagem"}]}] }]

Mais um detalhe, tem um botão que ao clicar, o usuário vai verificar se está conectado a internet e deve ler todo os JS e gravar na base de dados.

 

Alguém pode me sugerir algo? Que seja um framework que facilite este trabalho, ou mesmo com javascript puro.

Share this post


Link to post
Share on other sites

Porque não faz uma requisição de ajax para o seu servidor para verificar conexão e com o retorno faz a ação que precisar.

 

Caso conectado envia para o banco;

Caso não guarda a estrutura do storage do browser para enviar quando estiver conectado;

Share this post


Link to post
Share on other sites

Humm, vou dar uma pesquisada quanto ao uso do storage do browser e ver se atende.

Obrigado pela resposta Rafael!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By agodiniz
      Fala galera, estou com um problema e não sei como resolver. Até encontrei umas respostas, mas utilizando Php e Mysql. Preciso que a resposta seja utilizando as tecnologias javascript (node) e Mysql.
      Gostaria de capturar dados de um formulário utilizando array e salvando o mesmo num banco de dados.
       
      Ex:
      Imagine um 3 inputs do tipo text que recebem um valor que é inserido pelo cliente e que cada input, possa receber valores diferentes (como se cada um fosse uma variável 'titulo', 'conteudo' e 'autor')
      quero que depois que o cliente enviar os dados que por ele foram inputados, esses dados sejam enviados para as variáveis 'titulo', 'conteudo' e 'autor'.
      Logo depois quero declarar um array que receba essas variáveis [titulo, conteudo, autor] e desejo armazenar o array no banco de dados utilizando Mysql
       
      Desde já, agradeço!
    • By victor.dsz
      Boa tarde!
      Preciso de ideia ou até exemplo de algum código que simule o funcionamento das camadas de rede segundo o modelo OSI. Tenho um projeto e a ideia é apresentar as informações deste modelo sem que pareça um slide. Exemplo: Desenvolvemos um PHP um código que simula o envio da mensagem e a detecção de erros pelo método CRC. Estava pensando em algum código que pudesse animar algum objeto do meu site, tipo, fazer ele passar de camada em camada com uma explicação. 
       
      Desde já, 
      grato!
       
      Aqui algumas imagens de como estamos fazendo: (ainda se parece com um slide)
       

       

       

    • By victor.dsz
      Boa tarde!
      Preciso de ideia ou até exemplo de algum código que simule o funcionamento das camadas de rede segundo o modelo OSI. Tenho um projeto e a ideia é apresentar as informações deste modelo sem que pareça um slide. Exemplo: Desenvolvemos um PHP um código que simula o envio da mensagem e a detecção de erros pelo método CRC. Estava pensando em algum código que pudesse animar algum objeto do meu site, tipo, fazer ele passar de camada em camada com uma explicação. 
       
      Desde já, 
      grato!
       
      Aqui algumas imagens de como estamos fazendo: (ainda se parece com um slide)
       

       

       

    • By granderodeo
      <!-------------------------------- PEDIDOS -------------------------> <div class="table-responsive mt-2"> <table class="table table-bordered table-striped text-center"> <thead> <tr> <td colspan="8"> <h4 class="text-center text-info m-0">Pedidos realizados</h4> </td> </tr> <tr> <th>ID pedido</th> <th>Nome cliente</th> <th>E-mail</th> <th>Endereço</th> <th>Número da casa</th> <th>Referência</th> <th>ID cliente</th> </tr> </thead> <tbody> <?php require 'conexao_pedidos.php'; $stmt = $conn->prepare("SELECT * FROM orders"); $stmt->execute(); $result = $stmt->get_result(); $grand_total = 0; while($row = $result->fetch_assoc()): ?> <tr> <td> <?= $row['order_id'] ?></td> <td> <?= $row['order_name'] ?></td> </td> <td><?= $row['order_email'] ?> </td> <td> <?= $row['order_endereco'] ?> </td> <td> <?= $row['order_numero'] ?> </td> <td><?= $row['order_referencia'] ?></td> <td><?= $row['id_usuario'] ?> </td> <td> <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal<?= $row['order_id'] ?>"> <i class="fa fa-info-circle"></i> Produtos </button> </td> </tr> <?php endwhile; ?> </tbody> </table> </div> <?php require 'conexao_pedidos.php'; $stmt = $conn->prepare("SELECT * FROM orders"); $stmt->execute(); $result = $stmt->get_result(); $grand_total = 0; while($row = $result->fetch_assoc()): ?> <div class="modal fade" id="exampleModal<?= $row['order_id'] ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <?= $row['order_id'] ?> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <?php endwhile; ?>  
    • By granderodeo
      Tenho as tabelas 'orders' e 'orders_items'. Quando o cliente faz o pedido no site, com nome, endereço, telefone etc, os dados vão para a tabela orders, já os produtos que o cliente pediu vão para a tabela 'orders_items'. A forma que achei de saber qual pedido é de qual cliente, foi dando um id para cada pedido, e inserindo esse mesmo id em ambas tabelas. Agora estou há fazer um painel administrativo para ter uma melhor visibilidade dos pedidos. O que eu fiz no painel, foi exibir todos os pedidos com as informações, e ao lado de cada pedido um botão que exibirá os produtos pedidos por aquele usuário, inclusive vou deixar imagem de como está. Só que quando eu clicar em produtos, mostre somente os produtos comprados por aquele usuário, que como eu disse anteriormente está 'controlado por ID pedido'. Então quero pegar os dados da tabela 'orders_items' relacionados ao tal cliente, me perdoem se não expliquei direito, mas acredito que dê para entender. 
       
      <body> <!-------------------------------- PEDIDOS -------------------------> <div class="table-responsive mt-2"> <table class="table table-bordered table-striped text-center"> <thead> <tr> <td colspan="8"> <h4 class="text-center text-info m-0">Pedidos realizados</h4> </td> </tr> <tr> <th>ID pedido</th> <th>Nome cliente</th> <th>E-mail</th> <th>Endereço</th> <th>Número da casa</th> <th>Referência</th> <th>ID cliente</th> <!------ REMOVER TODOS ITENS DO CARRINHO -----> <!------ FIM REMOVER TODOS ITENS DO CARRINHO -----> </tr> </thead> <tbody> <?php require 'conexao_pedidos.php'; $stmt = $conn->prepare("SELECT * FROM orders"); $stmt->execute(); $result = $stmt->get_result(); $grand_total = 0; while($row = $result->fetch_assoc()): ?> <tr> <td> <?= $row['order_id'] ?></td> <!-- ID do produto do BD para o carrinho --> <td> <?= $row['order_name'] ?></td> </td> <td><?= $row['order_email'] ?> </td> <td> <?= $row['order_endereco'] ?> </td> <td> <?= $row['order_numero'] ?> </td> <!---- Aumentar ou Diminuir a quantidade do produto -----> <td><?= $row['order_referencia'] ?></td> <!---- Aumentar ou Diminuir a quantidade do produto -----> <!---- Fim Aumentar ou Diminuir a quantidade do produto -----> <td><?= $row['id_usuario'] ?> </td> <!-- preço total do carrinho --> <!------- REMOVER ITEM DO CARRINHO ------> <td> <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal"> <i class="fa fa-info-circle"></i> Produtos </button> </td> <!------- FIM ITEM REMOVER DO CARRINHO -------> </tr> <?php endwhile; ?> </tbody> </table> </div>  

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.