Tópicos

 1. Front-End e Back-End: Entendendo as Diferenças
       1.1. Front-End
             a. Principais Responsabilidades do Front-End
       1.2. Back-End
             a. Principais Responsabilidades do Back-End
       1.3. Integração Front-End e Back-End
 2. CRUD - Create, Read, Update e Delete
       2.1. CRUD no Back-End e Interação com Fontes de Dados
       2.2. CRUD do Ponto de Vista do Usuário
 3. API
 4. REST
 5. Tokens, JWT e seu Uso com APIs REST
 6. Outros Modelos de API
 7. Conclusão

Front-End e Back-End: Entendendo as Diferenças

No desenvolvimento de aplicações web, é comum encontrar dois termos fundamentais: Front-End e Back-End. Esses termos se referem a diferentes camadas de uma aplicação e descrevem as responsabilidades e funções específicas de cada uma. Compreender as diferenças entre Front-End e Back-End é essencial para entender a estrutura geral de uma aplicação web e como suas diferentes partes interagem.

Front-End

O Front-End é a parte da aplicação web com a qual os usuários interagem diretamente. Ele é responsável por apresentar o conteúdo e a interface visual da aplicação, tornando-a acessível e amigável aos usuários. Os desenvolvedores de Front-End utilizam tecnologias como HTML, CSS e JavaScript para construir a interface gráfica e a experiência do usuário.

Principais Responsabilidades do Front-End

1. Estrutura e Conteúdo: O HTML (HyperText Markup Language) é usado para criar a estrutura básica da página e definir o conteúdo, como texto, imagens e vídeos.

2. Estilo e Layout: O CSS (Cascading Style Sheets) é responsável pela aparência visual da página, incluindo cores, fontes, tamanhos, posicionamento de elementos e layouts responsivos.

3. Interatividade: O JavaScript é utilizado para tornar a página interativa, permitindo que os elementos respondam a ações do usuário, como cliques, arrastar e soltar, animações e muito mais, além de ser utilizado para manipulação de dados antes do envio ao back-end.

4. Compatibilidade com Dispositivos: O Front-End deve garantir que a aplicação funcione de forma adequada em diferentes dispositivos, como computadores, tablets e smartphones. Isso é geralmente resultante de interações do CSS com o JavaScript.

Back-End

O Back-End é a parte "invisível" da aplicação web, que fica nos bastidores (em aplicações web, esta é a parte que fica hospedada em um servidor) e é responsável por gerenciar a lógica de negócios, o processamento de dados e a interação com fontes externas (apesar desta interação também poder ser feita, em alguns casos, diretamente do front-end com a ajuda de JavaScript e das APIs do navegador), como bancos de dados e serviços de terceiros. Os desenvolvedores de Back-End trabalham principalmente com linguagens de programação como PHP, Python, Ruby, Java, Node.js, entre outras.

Principais Responsabilidades do Back-End

1. Lógica de Negócios: O Back-End é responsável por implementar as regras de negócio da aplicação, como cálculos, validações e processamento de dados.

2. Armazenamento e Recuperação de Dados: O Back-End gerencia a interação com o banco de dados ou outra fonte de dados (como por exemplo arquivos CSV), permitindo a criação, leitura, atualização e exclusão de dados (operações CRUD).

3. Autenticação e Segurança: É no Back-End que são implementados os sistemas de autenticação e autorização para garantir que apenas usuários autorizados tenham acesso a determinados recursos e informações sensíveis.

4. Integração de APIs: O Back-End pode interagir com serviços de terceiros ou outras APIs, permitindo que a aplicação acesse recursos externos, como envio de e-mails, integração com redes sociais, entre outros.

Integração Front-End e Back-End

Uma aplicação web bem-sucedida requer uma estreita integração entre o Front-End e o Back-End. O Front-End precisa se comunicar com o Back-End para enviar e receber dados, realizar ações e atualizar a interface em tempo real. Isso é frequentemente feito por meio de chamadas de API, onde o Front-End envia solicitações ao Back-End para obter ou enviar informações.

A separação entre Front-End e Back-End permite que diferentes equipes de desenvolvimento trabalhem em paralelo, tornando o processo de desenvolvimento mais eficiente e organizado. Além disso, essa divisão de responsabilidades facilita a manutenção, atualização e escalabilidade da aplicação à medida que ela cresce e evolui.

É importante frisar que, a depender das escolhas de projeto durante o desenvolvimento, nem sempre é possível garantir esta separação. Por exemplo, em aplicações mais simples utilizando PHP (como a que vamos construir em breve), quando o usuário fizer uma requisição para o servidor, este retornará uma resposta com seus conteúdos HTML, CSS e JavaScript, resposta esta que irá gerar o front-end ao chegar no cliente.

Em resumo, pode-se dizer que front-end é aquilo com o que o usuário interage, o HTML e CSS utilizado para renderizar a interface gráfica no navegador e o JavaScript que lida com as ações do usuário no lado do cliente. Já o back-end é o código que fica hospedado no servidor e que é executado quando o mesmo recebe uma requisição.

CRUD - Create, Read, Update e Delete

O CRUD é uma sigla que representa as quatro principais operações básicas em sistemas de gerenciamento de informações:

• Create (criar)
• Read (ler)
• Update (atualizar)
• Delete (excluir).

Essas operações são amplamente utilizadas em aplicações web para manipular dados em um sistema.

CRUD no Back-End e Interação com Fontes de Dados

No contexto do desenvolvimento web, o CRUD é frequentemente implementado no back-end, que é a parte da aplicação que lida com o processamento dos dados e a interação com fontes de dados, como bancos de dados, arquivos CSV e outros serviços externos.

• Create: Ao criar dados, o back-end recebe as informações enviadas pelo usuário (por meio de formulários ou chamadas de API) e as insere em um banco de dados ou outro repositório de armazenamento adequado.

• Read: A operação de leitura envolve recuperar dados existentes do banco de dados ou fonte de dados correspondente e enviá-los de volta ao cliente (front-end) para exibição ou processamento adicional.

• Update: Quando o usuário deseja modificar dados existentes, o back-end recebe a solicitação, verifica a validade das informações enviadas e, em seguida, atualiza os dados correspondentes no banco de dados.

• Delete: A exclusão envolve remover dados específicos do banco de dados ou repositório de armazenamento, conforme solicitado pelo usuário.

CRUD do Ponto de Vista do Usuário

As operações de CRUD são geralmente realizadas em resposta às ações do usuário. Algumas vezes podemos ter sistemas onde estas operações são bem claras, com formulários específicos para tal. Entretanto, algumas ações do usuário podem levar a operações de CRUD de forma não explícita, como nos seguintes exemplos:

• Sistema de Busca: Quando o usuário realiza uma busca, o back-end recebe a consulta, processa-a e retorna os resultados relevantes, seguindo a operação de leitura (Read).

• Atualização de Status: Em algumas plataformas, o usuário pode alterar seu status para "Disponível", "Ocupado", entre outros. Esta simples alteração envia ao servidor o novo status que o usuário deseja e o back-end realiza uma operação de atualização (Update).

• Adição ou Remoção de Comentários: Em plataformas de mídia social ou blogs, os usuários podem adicionar ou remover comentários em publicações existentes. Quando isso acontece, o back-end realiza a operação de criação (Create) ou exclusão (Delete) de comentários correspondentes.

• Like e avaliações: Em algumas redes sociais é possível dar uma nota (rate) para um determinado recurso (por exemplo, escolher entre 1 a 5 estrelas para um produto) ou "dar um like" em alguma postagem. Estas operações geralmente envolvem a criação (Create) ou exclusão (Delete) de registros no banco de dados ou repositório, relacionando o usuário à postagem ou produto.

API

API é a sigla para "Interface de Programação de Aplicações" (Application Programming Interface, em inglês). É um conjunto de regras e protocolos que permite que diferentes aplicações se comuniquem entre si. As APIs definem os métodos e formatos de dados que podem ser utilizados para interagir com um sistema específico.

Uma API pode ser usada para permitir que aplicações externas acessem os recursos e funcionalidades de um sistema sem precisar conhecer a implementação interna desse sistema. Isso promove a modularidade, reutilização de código e integração de sistemas diferentes.

Portanto, o termo API é genérico o suficiente para incluir os diversos mecanismo de comunicação entre sistemas. Por exemplo, um Sistema Operacional fornece uma API para as linguagens de programação de baixo nível acessarem as interfaces de rede, ou acessarem o sistema de arquivos (como acontece quando usando a função fopen() do PHP, que solicita à API do Sistema Operacional um manipulador de arquivo).

Entretanto, no mundo do Desenvolvimento Web, o termo API é bastante utilizado para APIs REST, que veremos a seguir.

REST

REST é um estilo de arquitetura de software para sistemas distribuídos, geralmente utilizado na construção de APIs para aplicações web. REST é a sigla para "Representational State Transfer" (Transferência de Estado Representacional, em português).

Os princípios fundamentais do REST incluem:

• Recursos Identificáveis: Cada recurso (como uma entidade em um banco de dados) deve ter um identificador único (URI) para acessá-lo de forma exclusiva.

• Operações Baseadas em Métodos HTTP: As operações CRUD são mapeadas para os métodos HTTP: Create (POST), Read (GET), Update (PUT/PATCH) e Delete (DELETE).

• Uso de HATEOAS: Hypermedia as the Engine of Application State (HATEOAS) é um princípio que sugere que as respostas das APIs devem conter links que permitem aos clientes descobrir e navegar para recursos relacionados.

• Stateless (Sem Estado): Cada solicitação para o servidor deve conter todas as informações necessárias para compreender e processar a requisição. O servidor não deve armazenar o estado da sessão do cliente entre as requisições.

O REST facilita a criação de APIs escaláveis, flexíveis e de fácil manutenção, permitindo que diferentes aplicações se comuniquem de forma padronizada e eficiente.

Tokens, JWT e seu Uso com APIs REST

Tokens são uma forma de autenticação amplamente utilizada em aplicações web e APIs REST. Um token é uma sequência de caracteres que representa a autorização para acessar recursos ou executar operações específicas.

• Token de Acesso: Um token de acesso é gerado após o usuário efetuar login e é enviado em cada requisição para a API. Ele permite que o cliente acesse recursos protegidos e realiza a autenticação do usuário em cada solicitação.

• JSON Web Token (JWT): O JWT é um formato padrão para representar informações do usuário de forma segura entre duas partes. Ele é assinado digitalmente, o que garante que os dados no token não foram alterados após a sua criação.

O uso de tokens, como o JWT, é uma alternativa eficiente e segura para a autenticação de usuários em APIs REST. Em vez de depender de sessões no servidor, o token é armazenado no cliente (por exemplo, no armazenamento local ou em um cookie) e enviado em cada requisição. Isso torna a API mais escalável e não dependente de estado, permitindo fácil implementação de autenticação para aplicativos e serviços distribuídos.

Além do JWT (JSON Web Token), existem outros tipos de tokens utilizados em diferentes contextos no desenvolvimento web. Alguns exemplos incluem:

• Tokens de Autenticação: São tokens usados para autenticar usuários e conceder acesso a recursos protegidos em uma aplicação. Além do JWT, outros formatos de token, como OAuth tokens e SAML tokens, são amplamente utilizados para autenticação e autorização em aplicações.

• Tokens de Acesso: São tokens temporários que fornecem acesso a recursos ou serviços específicos em uma API. Eles são comumente usados em integrações de terceiros, onde os tokens são emitidos para clientes autorizados e revogados após um período de tempo ou quando o acesso é encerrado.

• *Tokens de Atualização: São tokens utilizados em processos de autenticação em dois passos (2FA - 2 Factor Authentication). Após o usuário fornecer suas credenciais iniciais, um token de atualização é solicitado para confirmar a autenticação antes de conceder o acesso total à conta.

• Tokens de Recuperação de Senha: São tokens gerados e enviados ao usuário para permitir a redefinição de senhas em caso de esquecimento. Esses tokens têm validade limitada e fornecem uma camada adicional de segurança ao processo de recuperação de conta.

Outros Modelos de API

Além do REST, existem outros modelos de API que podem ser utilizados em desenvolvimento web, como por exemplo:

• GraphQL: É uma linguagem de consulta e manipulação de dados desenvolvida pelo Facebook. Com o GraphQL, o cliente pode especificar exatamente quais dados ele precisa, evitando sobrecarga de dados e tornando as requisições mais eficientes.

• SOAP: É um protocolo mais antigo baseado em XML, amplamente utilizado em integrações corporativas. SOAP define uma estrutura rígida para as mensagens e é considerado mais pesado e complexo em comparação com as abordagens mais modernas, como REST e GraphQL.

Cada modelo de API tem suas próprias vantagens e pode ser mais adequado para diferentes cenários e requisitos específicos de uma aplicação. A escolha do modelo de API dependerá da complexidade do projeto, do tamanho da equipe de desenvolvimento, dos requisitos de performance e dos objetivos globais da aplicação.

Conclusão

Estes são alguns do conceitos mais fundamentais no mundo do Desenvolvimento Web, que todo desenvolvedor deve ter ciência. Obviamente este artigo fornece uma visão geral, e há muito mais detalhes a serem explorados sobre cada um destes tópicos, como por exemplo o funcionamento dos navegadores ao renderizar o front-end e como ele lida com as ações do usuário. Alguns destes tópicos serão abordados futuramente nesta série.