# Como Integrar o Sitejet Builder com o Scriptcase Usando Dados JSON

Este tutorial vai te mostrar como conectar dados da sua aplicação Scriptcase a componentes do Sitejet Builder,   
para que você possa criar sites dinâmicos com informações atualizadas em tempo real.

## Passo 1: Publique sua Aplicação Scriptcase

1. No Scriptcase, gere sua aplicação normalmente.

2. Publique a aplicação em um servidor que tenha acesso ao banco de dados.

3. Certifique-se de que a aplicação está acessível via URL, por exemplo:

`https://seudominio.com/minhaapi/`

## `Passo 2: Exporte os Dados em Formato JSON`

`Para que o Sitejet possa consumir os dados, sua aplicação precisa disponibilizá-los em   
JSON. Você pode fazer isso de duas formas:`

### `Opção 1: Criar uma aplicação Consulta no Scriptcase`

`- Crie uma aplicação do tipo Consulta ou Controle no Scriptcase.`

`- Use a macro sc_ajax_javascript() para retornar dados em JSON, ou`

### `Opção 2: Criar um arquivo PHP que retorne JSON:`

Aqui está um exemplo básico de código PHP que conecta ao banco, busca dados e retorna JSON:

php</div

header('Content-Type: application/json');

$conn = mysqli\_connect("localhost", "usuario", "senha", "banco");

$query = mysqli\_query($conn, "SELECT nome, email FROM clientes");

$data = mysqli\_fetch\_all($query, MYSQLI\_ASSOC);

echo json\_encode($data);

?>

Salve esse arquivo no servidor, por exemplo como `clientes.php`, e garanta que ele esteja acessível via URL:  
`https://seudominio.com/api/clientes.php`

## `Passo 3: No Sitejet Builder, Adicione e Configure o Componente`

`1. Abra o Sitejet Builder e acesse o projeto onde quer integrar os dados.`

`2. Adicione um componente que aceite dados dinâmicos, como tabela, lista ou gráfico.`

`3. Configure o componente para consumir dados via URL, apontando para o endpoint JSON que você criou, ex:`

`https://seudominio.com/api/clientes.php`

## `Passo 4 (Opcional): Use JavaScript para Manipular Dados`

Se o Sitejet não tiver suporte nativo para consumir APIs, você pode usar um bloco de código customizado com   
JavaScript para buscar e preencher os componentes.

Exemplo básico usando `fetch`:|

`` fetch('https://seudominio.com/api/clientes.php')

.then(response => response.json())

.then(data => {

console.log(data);

const lista = document.getElementById('lista-clientes');

data.forEach(cliente => {

const item = document.createElement('li');

item.textContent = `${cliente.nome} - ${cliente.email}`;

lista.appendChild(item);

});

})

.catch(error => console.error('Erro ao carregar dados:', error));

Crie no Sitejet um elemento HTML (como uma 

) para receber os dados.

- Teste seu endpoint JSON diretamente no navegador para garantir que está funcionando corretamente.

- Use ferramentas como Postman para validar a resposta da sua API.

- Caso seu servidor tenha CORS (Cross-Origin Resource Sharing) habilitado, certifique-se de que a configuração permita acessos externos para seu endpoint JSON.

- Mantenha seu banco de dados seguro, evitando expor dados sensíveis. ``