Escrito por: Jackson Bates

O problema

Tudo o que você quer fazer é buscar algum JSON de um endpoint de API para o clima, algumas resenhas de livros ou algo similarmente simples.

A consulta fetch no seu front-end é suficientemente fácil, mas você tem que colar sua chave de API secreta bem ali no código do front-end para qualquer um encontrar com um mínimo de esforço!

Além disso, enviar suas chaves de API para o seu repositório do GitHub é um grande problema: um desenvolvedor colocou suas chaves da AWS no Github e COISAS RUINS aconteceram (texto em inglês).

"Por que isso é tão difícil?!" – Você, provavelmente há 15 minutos

A solução

Você deve usar um servidor de back-end para buscar os resultados da API para você e depois passá-los para o seu front-end.

O novo problema

Você está apenas tentando fazer uma demonstração de front-end para seu portfólio! Você ainda não aprendeu nada sobre tecnologias de back-end! Por que isso é tão difícil?

Demonstração

Encontrei esse problema com frequência suficiente para decidir parar de inventar truques bobos e implementar uma solução que funciona com código back-end mínimo.

Nessa demonstração, eu configuro um back-end que escuta por requisições POST e as envia para a API do GoodReads. Para usar isso, você precisa implementar seu próprio front-end que possa enviar a requisição POST apropriada para esse back-end. Seu front-end não se comunicará diretamente com o GoodReads. Portanto, nenhuma chave de API é exposta.

Você precisará

• Node (o teste foi feito com a versão v10.16.0 – versões posteriores não terão problemas, versões anteriores podem encontrar alguns)
• git
• Este repositório: https://github.com/JacksonBates/example-goodreads-api-relay

Comece

git clone https://github.com/JacksonBates/example-goodreads-api-relay.git

O README.md (em inglês) contém tudo o que você precisa saber, incluindo instalação e configuração.

Incluí os pontos principais aqui (traduzidos) para sua conveniência:

README.md

Instale as dependências:

npm i

Você precisa criar seu próprio arquivo .env para sua chave:

cp .env.example .env

Então, abra o novo arquivo .env e cole suas chaves no local correto.

Exemplo:

GOODREADS_API_KEY=AABBCCDDEEFF00112233445566778899

Agora execute o servidor:

node app.js

No navegador, navegue até localhost:3000 para confirmar que o servidor está funcionando. Você deve ver um simples Hello World!

O que vem a seguir?

Agora, leia o arquivo app.js cuidadosamente.

Comentei o código extensivamente para ajudá-lo a entender o que está acontecendo se você não viu muito sobre o node e o express antes.

// app.js

// Aqui, importamos os módulos necessários e definimos algumas variáveis iniciais
require("dotenv").config();
const express = require("express");
const fetch = require("node-fetch");
const convert = require("xml-js");
const rateLimit = require("express-rate-limit");
const app = express();
const port = 3000;

// Limitação de taxa – o Goodreads limita para 1/seg, então devemos fazer 
// isso também
// Ative se você estiver atrás de um proxy reverso (Heroku, Bluemix, AWS ELB, // Nginx etc)
// veja https://expressjs.com/en/guide/behind-proxies.html
// app.set('trust proxy', 1);

const limiter = rateLimit({
    windowMs: 1000, // 1 segundo
    max: 1, // limita cada IP a 1 requisição por windowMs
})

// Aplicar a todas as requisições
app.use(limiter)

// Rotas

// Rota de teste, visite localhost:3000 para confirmar se está funcionando
// deve mostrar 'Hello World!' no navegador
app.get("/", (req, res) => res.send("Hello World!"));

// Nossa rota do Goodreads!
app.get("/api/search", async (req, res) => {
    try {
        // Isso usa interpolação de strings para fazer nossa string de
        // consulta de busca
        // tira o parâmetro de consulta postado e o reformata para o
        // goodreads
        const searchString = `q=${req.query.q}`;

        // Usa o node-fetch para chamar a API do goodreads e lê a chave do
        // .env
        const response = await fetch(`https://www.goodreads.com/search/index.xml?key=${process.env.GOODREADS_API_KEY}&${searchString}`);
        //mais informações aqui https://www.goodreads.com/api/index#search.books
        const xml = await response.text();

        // A API do Goodreads retorna XML, então para usá-la facilmente no front-end, podemos
        // converter isso para JSON:
        const json = convert.xml2json(xml, { compact: true, spaces: 2 });

        // A API retorna coisas que não nos interessam, então podemos muito bem eliminar
        // tudo exceto os resultados:
        const results = JSON.parse(json).GoodreadsResponse.search.results;

        return res.json({
            success: true,
            results
        })
    } catch (err) {
        return res.status(500).json({
            success: false,
            message: err.message,
        })
    }
})

// Isso ativa nosso servidor e gera logs para usarmos.
// As declarações console.log que você usar no node para depuração 
// aparecerão no seu terminal, não no console do navegador!
app.listen(port, () => console.log(`Exemplo de aplicação escutando na porta ${port}!`));

Atualização: um grande agradecimento a Gouri Shankar Kumawat por contribuir com um PR que melhorou este código! Você pode segui-lo no Twitter ou no GitHub.

Use o Postman para testar a API.

Configure o Postman para GET e cole isso no URL: localhost:3000/api/search?q=hobbit

O Postman mostrará a resposta JSON abaixo.

Como usar isso no seu front-end?

Esta aplicação simples está escutando requisições POST em /api/search, então interaja com ela em sua aplicação de front-end da mesma forma que você fazia anteriormente com a API original.

Ela está configurada apenas para lidar com consultas de pesquisa – se você quiser usar outros endpoints/métodos da API do Goodreads, precisará pensar em como implementá-los por conta própria!

Hospedagem

Você não pode implantar seu front-end e ainda ter isso no localhost – obviamente você precisa implantar isso também.

Recomendo o Heroku (site em inglês).

Nota da tradução: no momento da tradução deste artigo, o Heroku não está mais disponibilizando um tier gratuito para uso. Aos que procuram uma alternativa gratuita, recomendamos a busca por outras fontes.

Bônus

Se você quiser expandir essa solução, pode considerar como torná-la acessível apenas a partir de um intervalo restrito de endereços IP para aumentar a segurança – o que estava fora do escopo deste tutorial/demonstração.

A solução foi montada rapidamente em resposta a uma discussão no fórum. Se você encontrar algum problema neste artigo ou no código de exemplo, não hesite em responder ao tópico do fórum (em inglês) que deu início a tudo. Manterei o artigo e o repositório atualizados com melhorias.

Sinta-se à vontade para enviar PRs se tiver contribuições valiosas a fazer. 😀

Você também pode entrar em contato com o autor via Twitter.

Meu artigo anterior descreveu como você pode entrar no desenvolvimento em front-end (texto em inglês). Ele também discutiu como o front-end pode ser um lugar cheio de perigos – pisar no lugar errado e você ficará sobrecarregado com os muitos frameworks do ecossistema do JavaScript.

Neste artigo, vamos ver como você pode entrar no desenvolvimento em back-end. Ao longo do caminho, vou responder a algumas das perguntas mais comuns que as pessoas me fazem sobre o assunto.

O que é o desenvolvimento em back-end?

O desenvolvimento em front-end envolve o que um usuário vê na tela quando abre um URL específico de sua propriedade. Mesmo em um ambiente completamente estático (apenas com HTML/CSS), quando alguém abre um site da web, algum servidor no planeta precisa responder a você com esses arquivos HTML e CSS.

Esse servidor é apenas um computador, como aquele que você mesmo usa para navegar na internet. Ele, no entanto, foi ajustado para o desempenho, não tendo componentes desnecessários como um mouse ou teclado anexado. Ele também fica com milhares de outros computadores, provavelmente em um depósito de dados.

A programação desses computadores de algum modo especial é chamada de desenvolvimento em back-end.

Você pode pensar que o desenvolvimento em back-end é chamado assim porque ele funciona por trás daquilo que o usuário enxerga. Um visitante do seu site nunca realmente "acessa" completamente o back-end. Ele apenas se comunica com o seu servidor, seja diretamente através de portas para acesso muito limitado (como a transferência de arquivos HTML/CSS) ou nem mesmo isso - enterrado profundamente sob CDNs ou firewalls (como no caso do Cloudflare).

Agora que temos uma compreensão básica do que significa desenvolvimento em back-end, vamos entrar em algumas questões reais.

É necessário o conhecimento de programação em front-end para o back-end?

Resposta curta: Não.

O desenvolvimento em back-end, como mencionado acima, envolve a programação de um computador que provavelmente está do outro lado do planeta, responsável por responder ao que seus usuários dizem a partir dos seus próprios computadores.

Se você é um desenvolvedor em back-end em tempo integral, você realmente não precisa se importar com o que acontece dentro daqueles arquivos HTML, CSS e JavaScript que você envia para o navegador do usuário. Ao invés disso, você tem que se concentrar mais no desempenho do servidor, no código do servidor e na produção.

O que acontece no desenvolvimento em back-end?

Bem, seguindo os livros, você pode dizer que uma pessoa que programa uma aplicação que pode responder a solicitações HTTP é um desenvolvedor em back-end.

Na realidade, porém, às vezes, os desenvolvedores em back-end são capazes de fazer muito mais do que apenas escrever scripts de servidor. Eles têm o conhecimento para configurar servidores proxies reversíveis (NGiNX/HAProxy), permitir a compressão e outras formas de acelerar o site, além de configurar um ambiente do Docker de produção.

Para se qualificar como desenvolvedor em back-end, eu diria que as habilidades mínimas que você precisa são:

1. Bom conhecimento sobre uma linguagem de programação na qual você pode escrever servidores HTTP. Exemplos: C#, Java, Node, PHP, Python etc. (há muitas!)
2. Gerenciar para hospedagem usando cPanel (tradicional) ou usando o terminal do bash (cloud hosting/tradicional)
3. Trabalhar com sistemas de controle de versão (VCS) como o Git para gerenciar e fazer a implantação das builds

Assim como todo jogo vem com especificações mínimas e recomendadas, para os desenvolvedores em back-end, as minhas especificações recomendadas seriam (incluindo as habilidades mínimas):

1. NGiNX, para itens de arquivos estáticos e gerenciamento de servidores
2. Habilidades de gerenciamento de banco de dados (SQL/NoSQL)
3. Segurança do back-end (escrever código seguro e robusto, executar aplicações em contêineres do Docker com privilégios limitados, proteção contra ataques DdoS)
4. Balanceamento automático/balanceamento de carga

Muito bem, já falei muito sobre o necessário para o desenvolvimento em back-end. Como, no entanto, você pode se torna um desenvolvedor em back-end?

Comece com os requisitos mínimos

Como eu disse, para o back-end, assim como nos jogos, temos um conjunto de requisitos mínimos e requisitos recomendados. Os requisitos mínimos consistem em 3 coisas:

Aprenda uma linguagem de programação de back-end

Quando as pessoas aprendem sozinhas, elas geralmente não têm uma equipe ou alguém que possa fazer o desenvolvimento do front-end. Elas estão todas por conta própria. Portanto, muitas vezes, você terá que criar páginas da web e servidores por conta própria, ao menos no início.

Existem muitas opções de linguagens de programação de back-end. Não consigo pensar em nenhuma linguagem de sistema popular que não suporte servidores HTTP desde o início. A vantagem de se escolher o Node é que suas habilidades de JavaScript do front-end são transferíveis para o back-end.

No entanto, você pode escolher entre uma variedade de linguagens, como Java, C++, C#, Python, PHP, entre outras.

Como escolher uma, você pode se perguntar. A resposta é a mesma que foi dada no artigo de desenvolvimento em front-end: você tem que tentar tudo inicialmente e ver qual é aquela que é melhor com você.

O Node é fácil, já que você deve ter feito a programação em JavaScript para o front-end. Se, no entanto, você é um desenvolvedor Python ou Java, pode achar essas fáceis de entender. Isso depende completamente da sua profissão e do seu gosto.

Aprenda mais sobre como administrar a hospedagem

Já se foram os dias em que você precisava comprar servidores manualmente e configurá-los em sua casa, conectar-se ao provedor e fazer tudo isso você mesmo. Essa é a era da computação em nuvem. Agora, ao hospedar seu site da web, você tem 2 opções, em especial:

1. Ir para servidores de hospedagem gerenciada, como a HostGator ou o GoDaddy.
2. Ir para provedores de hospedagem em nuvem, como a GCP, a AWS ou a DigitalOcean.

Qual é a diferença entre os dois? Em ambos os casos, os servidores são de propriedade e operados pelas respectivas empresas. A grande diferença, porém, é que a hospedagem gerenciada é mais amigável para as interfaces gráficas, tem um rico conjunto de ferramentas para ver o sistema de arquivos, monitorar o uso, gerenciar seus e-mails oficiais de domínio, fazer upload/download de arquivos de seu servidor e assim por diante. É, basicamente, uma configuração para pessoas com menos habilidades técnicas.

Por esse motivo, não recomendo sites gerenciados, como a HostGator ou o GoDaddy, para desenvolvedores experientes. Mesmo assim, pode ser uma boa plataforma para cometer erros e aprender com eles, principalmente porque você normalmente tem planos pré-pagos para eles. Você também terá uma boa interface para gerenciar as coisas, o que não permite que você faça com que suas contas aumentem exponencialmente por acidente.

Quando, no entanto, você começar a se acostumar, recomendo que você mude para um provedor na nuvem. Isso tira todas as ferramentas legais do cPanel que você usava para gerenciar arquivos e pastas em servidores. Ao mesmo tempo, o desafiará muito a elevar o nível de suas habilidades.

Hoje, muitos provedores na nuvem também oferecem um teste gratuito decente, para que você possa realmente experimentar a plataforma deles antes de entrar em pleno funcionamento. Eu hospedo meu site para desenvolvedores – o codedamn – na DigitalOcean e acho que ele tem um bom equilíbrio entre complexidade e recursos do site.

Você pode usar este link para se inscrever na DigitalOcean e obter US$ 100 de créditos gratuitos. As instâncias da DigitalOcean custam cerca de US$ 5 por mês. Então, você tem cerca de 20 meses nessa instância. Ótimo negócio, não é?

De qualquer forma, você pode escolher qualquer provedor na nuvem. Então, é importante aprender a gerenciar o servidor usando apenas a linha de comando usando o ssh nela.

Saiba mais sobre sistemas de controle de versão

Existem outras soluções além do Git para SCVs. O Git, porém é a solução mais usada e a mais simples de entender.

Pessoalmente, pode ser que você não goste do Git de imediato, mas você entenderá porque ele é tão importante no momento em que você começar a trabalhar em equipe, em vários recursos simultaneamente em seu projeto.

O Git permite que você gerencie o seu fluxo de trabalho utilizando commits e branches. Os commits são como pontos de verificação em sua base de código – aqueles para os quais você pode sempre retornar se estragar tudo.

As branches são como realidades alternativas do seu projeto, onde algo completamente diferente poderia acontecer. Essas realidades alternativas podem ser criadas a partir de qualquer ponto no tempo e podem ser mescladas novamente a qualquer momento.

Se essas realidades puderem ser mescladas com compatibilidade, tudo bem. Se houver algum conflito (como se você estivesse vivo em uma realidade e morto em outra), você terá que fazer uma escolha manualmente. Outras mudanças podem ser mescladas automaticamente.

O Git é superinteressante. Quando você o dominar, vai querer usá-lo em cada projeto. Você conseguirá manter um histórico do seu trabalho de modo eficiente (ele comprime e armazena apenas a diferença entre os commits).

Também é possível criar repositórios do Git on-line, em sites como o GitHub, que atua como uma fonte central de verdade para o seu site. Sites como o GitHub podem ser configurados com hooks especiais da web, que podem realmente atualizar o seu site sempre que você adicionar um novo ponto de verificação (um novo commit) sem que você precise ir manualmente ao servidor e atualizá-lo você mesmo.

Tenha as habilidades recomendadas

Eu acredito firmemente em aprender fazendo. A melhor maneira de se fazer algo vem da necessidade ou do interesse. Quando você se considerar suficientemente bom com os requisitos mínimos, é hora de adquirir as habilidades recomendadas. Essas incluem todas as ferramentas, como o Docker e o NGiNX, mencionadas acima.

O DevOps também é algo que se encaixa muito bem com os desenvolvedores em back-end. Você pode tentar explorar o TravisCI ou o CircleCI para builds automatizadas. Integração e Implantação Contínuas (CI/CD) é um tópico que poderia levar a outro artigo inteiro. Por isso, não vou entrar no assunto. Na verdade, uma vez configurado corretamente, isso lhe poupará uma quantidade ridícula de tempo de desenvolvimento!

Depois, temos os bancos de dados, que eu coloquei nas habilidades recomendadas. Você vai, contudo, precisar de bancos de dados para praticamente qualquer aplicação que envolva algum tipo de persistência de dados gerada pelo usuário.

Os bancos de dados são geralmente fáceis de começar a trabalhar, mas mais difíceis de manter e de ajustar corretamente. A melhor maneira de se começar a trabalhar em uma pilha de tecnologia em back-end é ter tudo junto em um único servidor – o código de sua aplicação, os servidores proxy reversos, o banco de dados e assim por diante. Então, conforme você se torna mais proficiente em cada parte, você pode desacoplá-la da lógica de negócios existente.

Ao fazer isso, você está possibilitando uma arquitetura que pode ser altamente escalonável. Uma aplicação intensiva do banco de dados poderia ter uma solução otimizada para eles. Um site com tráfego intenso deve ter um bom mecanismo de CDN para descarregar ativos estáticos e assim por diante.

Conclusão

Há muito o que aprender, mas tudo isso é possível se você não desistir. Conte ao autor o que você pensou sobre este artigo através do Twitter e do Instagram do autor. Ele gostará muito de se conectar com os leitores por lá!

Além disso, se estiver interessado, confira o codedamn – uma plataforma voltada para o desenvolvedor para o aprendizado de tecnologias como o desenvolvimento em back-end! O autor, inclusive, já publicou um vídeo no YouTube sobre como rodar seu próprio servidor de sites da web simples em apenas 2 minutos! Confira o e diga ao autor o que você acha pelas redes sociais mencionadas acima!