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
- No Scriptcase, gere sua aplicação normalmente.
2. Publique a aplicação em um servidor que tenha acesso ao banco de dados.
- 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. ``