JSON

Oi, Clara, tudo bem?

Uma solução que você pode considerar é hospedar seu arquivo JSON em algum lugar onde ele possa ser acessado sem a necessidade de um servidor local. Existem várias opções para isso, como o GitHub, por exemplo. Você pode criar um repositório e enviar seu arquivo ".json" para lá. Depois disso, você pode acessar seu arquivo ".json" através da URL do GitHub.

Outra opção seria usar algum serviço de hospedagem de API, como o My JSON Server, que permite que você crie uma API falsa com base em um arquivo JSON hospedado no GitHub. Você só precisaria criar um repositório no GitHub, enviar seu arquivo ".json" para lá e então usar a URL fornecida pelo My JSON Server para acessar seu arquivo ".json".

Por exemplo, se você hospedou seu arquivo ".json" em um repositório chamado 'meu-repositorio', você poderia acessá-lo através da URL https://my-json-server.typicode.com/seu-nome-de-usuario/meu-repositorio.

Todavia, vale ressaltar que como não tenho acesso ao cenário completo do projeto outros testes terão de ser feitos a fim de obter o resultado esperado, mas espero que esta resposta seja um bom ponto de partida para a resolução do seu problema.

Espero que dê tudo certo. Caso tenha dúvidas, conte com o fórum. Abraços!

Af, não estou conseguindo nesse my json server, da uma olhada https://github.com/claramamute/Form-valida-o

Oi, Clara, tudo bem?

Uma opção para você usar uma API permanentemente, seria colocar outro projeto no Vercel que contenha uma configuração de servidor rodando o json-server.

Para isso siga os seguintes passos:

• Crie uma nova pasta, dentro dela, crie um arquivo com o nome db.json e certifique-se que ele tenha as mesmas informações do arquivo json presente no seu projeto.

• Com o VS Code aberto dentro dessa pasta, abra o terminal e execute o comando npm install --save json-server@0.17.0 para instalar o json-server;

• Crie um arquivo com o nome "server.js" e cole os seguintes códigos nele:

  const jsonServer = require('json-server');
  const server = jsonServer.create();
  const router = jsonServer.router('db.json');
  const middlewares = jsonServer.defaults();
  
  server.use(middlewares);
  server.use(router);
  server.listen(3000, () => {
    console.log('JSON Server is running')
  });
  

  Esses comandos serão responsável por subir uma fake API, mas desta vez dentro do Vercel, porém, ainda é necessário a criação de mais alguns arquivos para que isso seja possível.

• Crie outro arquivo, agora chamado "vercerl.json" e cole as seguintes configurações:

  {
    "version": 2,
    "builds": [
      {
        "src": "server.js",
        "use": "@vercel/node",
        "config": {
          "includeFiles": ["db.json"]
        }
      }
    ],
    "routes": [
      {
        "src": "/(.*)",
        "dest": "server.js"
      }
    ]
  }
  

• Agora, dentro do arquivo "package.json" adicione a linha de comando "start": "node server.js", dentro da seção de scripts, segue um exemplo:

    "scripts": {
      "start": "node server.js",
      "test": "echo \"Error: no test specified\" && exit 1"
    },
  

• Para finalizar essa parte, crie um arquivo chamado ".gitignore" e cole o nome da pasta das dependências "/node_modules", para que ela não seja enviado para o GitHub, após isso, envie todo esse projeto para um novo repositório do GitHub.

  Antes de enviar para o GitHub a sua estrutura de arquivos deve estar assim:

  

• Após enviar esses arquivos para um repositório do GitHub, abra o Vercel, clique nas sequências de opções "Add new > Project". Assim você será redirecionado para aba de “import”, onde você deve importar o repositório que você havia criado, e por fim realizando o deploy.

• Ao finalizar o deploy, visite a página do projeto, e caso tenha feito tudo corretamente, deve aparecer uma tela semelhante à essa que deixo abaixo, clique no link em destaque e copie a url da página que aparecer.

• Por fim, acesse o seu projeto, nele busque os arquivos que fazem requisições API, neste caso o "armazena.js" que está na pasta "js". Nesse arquivo altere todos os links presentes nele para o link que você havia copiado anteriormente.
• Após fazer essa alteração e enviar ela para o repositório do GitHub, espere uns momento e tente acessar o link da página que você tinha upado no Vercel, ela deve estar com as informações presentes na Fake API.

Espero que dê tudo certo. Abraços!

Deu certo! Vou analisar esse passo a passo melhor para compreender o funcionamento. Agora tem só mais um probleminha, não estou conseguindo redirecionar para a outra página do formulário, de reconhecimento facial kkkk Help. Do projeto: https://github.com/claramamute/Form-valida-o , da fake API: https://github.com/claramamute/Form-valida-o

Oi, Clara, tudo bem?

Desculpe a demora em te responder!

Enquanto você não tiver subido a API para o Vercel de forma correta, você terá esse erro. Tente executar os passos acima sobre como deixar uma API funcionando permanentemente sem o uso do json-server. Contudo, enquanto você não tiver conseguido, você deve rodar no terminal o comando:

json-server --watch cadastros.json

Em seguida, você deve alterar o fetch do arquivo "armazena.js" para o localhost que aparecer no terminal. Ele deve ser semelhante à esse: http://localhost:3000/cadastros. Portanto, o código ficaria assim:

const conexao = await fetch('http://localhost:3000/cadastros',
...RESTANTE DO CÓDIGO

Espero que dê tudo certo. Abraços!