Blog

Criando um Front-End para Consumir uma API: Guia para Iniciantes

Compartilhe:

Introdução

Olá, futuros desenvolvedores! Já aprenderam a criar uma API? Agora, vamos dar o próximo passo: construir um front-end para interagir com ela. Vamos criar uma interface simples para a nossa lista de tarefas que fizemos na última vez. Preparados? Vamos nessa!

Seção 1: Entendendo o Front-End

Antes de começar, vamos entender o que é um front-end. É a parte do nosso projeto que os usuários veem e com a qual interagem, como um site ou um aplicativo. Vamos usar HTML, CSS e JavaScript para criar o nosso.

Seção 2: Ferramentas Necessárias

Precisaremos de:

Um editor de texto, como o Visual Studio Code.
Um navegador para ver nosso trabalho.
Conhecimentos básicos de HTML, CSS e JavaScript.

Seção 3: Estruturando a Página com HTML

Vamos começar criando a estrutura da nossa página:

HTML Básico: Criaremos uma estrutura básica com <html>, <head> e <body>.
Elementos da Interface: Adicionaremos elementos como uma caixa para exibir as tarefas, um campo para adicionar novas tarefas e botões para ações.

Seção 4: Estilizando com CSS

Agora, vamos deixar nossa página bonita!

Estilos Básicos: Usaremos CSS para adicionar cores, fontes e layouts.
Responsividade: Faremos nossa página funcionar bem em diferentes dispositivos.

Seção 5: Tornando Interativo com JavaScript

Aqui é onde a mágica acontece!

Conectando com a API: Usaremos JavaScript para enviar e receber dados da nossa API.
Funcionalidades: Programaremos a adição, exibição e remoção de tarefas.

Seção 6: Testando Tudo

Vamos testar nossa página para garantir que tudo esteja funcionando. Verificaremos se as tarefas são adicionadas, listadas e removidas corretamente.

Seção 7: Conclusão e Próximos Passos

Parabéns! Agora você tem um front-end funcional para sua API. Continue explorando e aprendendo. Talvez tente adicionar novas funcionalidades ou melhorar o design.

Encerramento

Espero que tenham se divertido e aprendido muito. Lembrem-se, a prática leva à perfeição, então continuem praticando e explorando o maravilhoso mundo do desenvolvimento web!

Vamos criar um front-end simples para consumir uma API, usando HTML, CSS (com o framework Bootstrap) e JavaScript. Vamos assumir que você já tem uma API para uma lista de tarefas, que permite adicionar, listar e excluir tarefas.

Estrutura HTML Básica

Primeiro, vamos criar a estrutura básica do HTML com Bootstrap para estilizar a página:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lista de Tarefas</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h1 class="text-center mt-5">Minha Lista de Tarefas</h1>
        <div class="row">
            <div class="col-12">
                <input type="text" id="newTask" class="form-control" placeholder="Adicione uma nova tarefa">
                <button onclick="addTask()" class="btn btn-primary mt-2">Adicionar Tarefa</button>
                <ul id="taskList" class="list-group mt-3"></ul>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

Estilizando com CSS

Bootstrap já cuida da maior parte do estilo para nós, mas você pode adicionar seu próprio CSS se desejar personalizar mais.

JavaScript para Conectar com a API

Agora, o JavaScript para lidar com a adição, exibição e remoção de tarefas:

// script.js

document.addEventListener('DOMContentLoaded', function() {
    fetchTasks();
});

function fetchTasks() {
    fetch('https://sua-api.com/tarefas')
        .then(response => response.json())
        .then(data => displayTasks(data));
}

function displayTasks(tasks) {
    const taskList = document.getElementById('taskList');
    taskList.innerHTML = '';
    tasks.forEach(task => {
        const li = document.createElement('li');
        li.className = 'list-group-item';
        li.innerText = task.nome;
        li.onclick = function() { deleteTask(task.id); };
        taskList.appendChild(li);
    });
}

function addTask() {
    const newTask = document.getElementById('newTask').value;
    fetch('https://sua-api.com/tarefas', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ nome: newTask }),
    })
    .then(() => {
        fetchTasks();
        document.getElementById('newTask').value = '';
    });
}

function deleteTask(id) {
    fetch(`https://sua-api.com/tarefas/${id}`, {
        method: 'DELETE',
    })
    .then(() => fetchTasks());
}

Este código JavaScript realiza as seguintes operações:

Carregar Tarefas: Quando a página é carregada, fetchTasks() é chamada para carregar e exibir as tarefas.
Exibir Tarefas: displayTasks() exibe cada tarefa na lista.
Adicionar Tarefa: addTask() envia uma nova tarefa para a API e atualiza a lista.
Deletar Tarefa: Clicar em uma tarefa a remove, chamando deleteTask().

Conclusão

Com este código, você terá uma interface básica de lista de tarefas que consome uma API para adicionar, listar e excluir tarefas. Lembre-se de substituir 'https://sua-api.com/tarefas' pelo URL da sua API real.

Alguns projetos de

Edson Ferreira

Me chame agora