Quatro habilidades para se tornar um desenvolvedor web back-end – Atualmente muito se escuta que um desenvolvedor precisa ser full-stack, conhecer um pouco de tudo. Mas não é de agora que esse conhecimento é requerido do desenvolvedor web, vem de muito tempo já. Mesmo que seja “apenas” back-end, o desenvolvedor web precisa:
- Escrever o HTML que apresentará os dados do usuário;
- Criar uma aplicação web que responda as solicitações do usuário;
- Persistir os dados do usuário em uma base de dados;
- Fornecer dados por APIs de acesso;
- Manter a aplicação sempre atualizada;
Neste artigo falei das quatro habilidades principais que um desenvolvedor necessita possuir caso queria ser um desenvolvedor back-end completo.
Primeira habilidade: conhecer uma linguagem de programação.
Vamos começar com um exemplo de uma aplicação web “simples”:
using System;
using System.Linq;
using System.Net;
using System.Threading.Tasks;
using Microsoft.AspNetCore;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.Logging;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Http;
namespace WebApp
{
public class Program
{
public static void Main(string[] args)
{
WebHost.CreateDefaultBuilder(args)
.Configure(app =>
{
app.Run(async (context) =>
{
await context.Response.WriteAsync("Bem-vindo ao site!");
});
})
.Build().Run();
}
}
}
Ao ser executada, a aplicação acima irá responder a qualquer requisição com a mensagem “Bem-vindo ao site!”:
Primeiramente escolhi desenvolver esta aplicação em uma linguagem de programação chamada C#, em conjunto como o framework .NET Core. Mas uma aplicação web simples, pode ser criada com uma grande gama de linguagens de programação: Java, JavaScript, Python, PHP, Ruby, entre muitas outras.
Quando o navegador acessa a aplicação, certamente é gerado uma requisição no servidor e este se encarrega de chamar o código correspondente, que irá processar a requisição e retornar uma resposta. Esta resposta é enviada pelo servidor para o navegador do usuário.
Para aprender como lidar com este processo é importante é conheça uma linguagem de programação que permita isso.
Segunda habilidade: Banco de dados e SQL
Caso a nossa aplicação seja um blog, isso poderia ser traduzido como a necessidade de armazenar artigos e exibi-los quando o usuário acessar a página.
Para isso, vamos definir um banco de dados. Pense no banco de dados como uma coleção de planilhas, onde cada tabela do banco é uma planilha, com dados salvos em linhas e colunas.
Tabela abaixo:
Para exibir o conteúdo desta tabela, é necessário modificar a aplicação:
using System;
using System.Linq;
using System.Net;
using System.Collections.Generic;
using System.Threading.Tasks;
using Microsoft.AspNetCore;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.Logging;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Http;
using Microsoft.Data.Sqlite;
using System.Text;
namespace WebApp
{
public class Program
{
public struct Article
{
public string Title;
public string Content;
}
public static void Main(string[] args)
{
WebHost.CreateDefaultBuilder(args)
.Configure(app =>
{
app.Run(async (context) =>
{
context.Response.ContentType = "text/html; charset=utf-8";
var content = new StringBuilder("<dl>");
foreach(var article in Articles())
content.Append($"<dt>{article.Title}</dt><dd>{article.Content}</dd>");
content.Append("</dt>");
await context.Response.WriteAsync(content.ToString());
});
})
.Build().Run();
}
public static List<Article> Articles() {
var articles = new List<Article>();
using (var connection = new SqliteConnection(new SqliteConnectionStringBuilder
{
DataSource = "data.db"
}.ToString()))
{
connection.Open();
var command = connection.CreateCommand();
command.CommandText = "SELECT * FROM Article";
using (var reader = command.ExecuteReader())
{
Console.WriteLine(reader.RecordsAffected);
while (reader.Read())
{
Console.WriteLine(reader.ToString());
articles.Add(new Article { Title = reader["title"].ToString(), Content = reader["content"].ToString()});
}
}
}
return articles;
}
}
}
Para obter as informações do banco de dados utilizamos uma linguagem chamada de SQL (Structured Query Language):
SELECT * FROM Article
Ela basicamente informa ao banco que queremos obter todo conteúdo da tabela Article: os dados das colunas title e content. Ao executar a aplicação, este conteúdo é exibido no navegador:
Existem vários sistemas de gerenciamento de banco de dados: MySQL, PostgreSQL, SQL Server, Oracle, entre outros. Mas todos funcionam de uma forma muito parecida, ou seja, salvam dados em linhas e colunas de tabelas.
As aplicações não possuem conteúdo estático. Elas não serão como o exemplo acima, que sempre retorna a mesma mensagem. É importante que a aplicação possa armazenar informações, geralmente informadas pelos usuários e exibi-las no navegador.
Como as aplicações não possuem apenas conteúdo estático, é importante que elas armazenem informações, geralmente informadas pelos usuários, e que as exibi-las no navegador. Assim como a nossa aplicação.
Como deve ter notado, aprender SQL é outra habilidade importante do desenvolvedor back-end.
Terceira habilidade: HTML
A aplicação está exibindo o conteúdo no navegador, mas ele não está muito bonito. Para melhorar isso, definirei um template, que utilizará HTML (HyperText Markup Language).
O HTML é uma linguagem de marcação, utilizada assim para formatar os dados que são exibidos no navegador. Na aplicação, ele será utilizado para formatar a exibição dos artigos do blog:
@model IEnumerable<WebApp.Program.Article>
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<title>Aplicação web simples! - Blog</title>
</head>
<body>
<div>
@foreach (var article in Model){
<h2>@article.Title</h2>
<p>@article.Content</p>
}
</div>
</body>
</html>
Para mesclar isso com os dados vindos do banco, é necessário modificar o código:
using System;
using System.Linq;
using System.Net;
using System.Collections.Generic;
using System.Threading.Tasks;
using Microsoft.AspNetCore;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.Logging;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Http;
using Microsoft.Data.Sqlite;
using System.Text;
using RazorLight;
namespace WebApp
{
public class Program
{
public struct Article
{
public string Title;
public string Content;
}
public static void Main(string[] args)
{
var engine = new RazorLightEngineBuilder()
.UseEmbeddedResourcesProject(typeof(Program))
.UseMemoryCachingProvider()
.Build();
WebHost.CreateDefaultBuilder(args)
.Configure(app =>
{
app.Run(async (context) =>
{
context.Response.ContentType = "text/html; charset=utf-8";
string result = await engine.CompileRenderAsync("Home.cshtml", Articles());
await context.Response.WriteAsync(result);
});
})
.Build().Run();
}
public static List<Article> Articles() {
var articles = new List<Article>();
using (var connection = new SqliteConnection(new SqliteConnectionStringBuilder
{
DataSource = "data.db"
}.ToString()))
{
connection.Open();
var command = connection.CreateCommand();
command.CommandText = "SELECT * FROM Article";
using (var reader = command.ExecuteReader())
{
Console.WriteLine(reader.RecordsAffected);
while (reader.Read())
{
Console.WriteLine(reader.ToString());
articles.Add(new Article { Title = reader["title"].ToString(), Content = reader["content"].ToString()});
}
}
}
return articles;
}
}
}
Agora ao executar a aplicação, ela exibirá os artigos em um melhor formato:
Todo site possui HMTL, porque é isso que o navegador espera. Os desenvolvedores front-end são os responsáveis por definí-lo, mas mesmo que o desenvolvedor back-end não mexa muito nele, é importante que tenha conhecimento de HTML.
Quarta habilidade: JSON ou XML
Os navegadores não são os únicos programas que podem se comunicar com uma aplicação web. Cada vez mais, empresas disponibilizam aplicativos móveis que se comunicam com a aplicação. Ou definem aplicações baseadas no JavaScript (através de frameworks como React, Vue, Angular), que só possuem o front-end e obtém os dados de uma interface, comumente chamada de API.
O HTML é bom para formatar os dados que serão apresentados em um navegador, mas quando esses dados precisam ser enviados para outra aplicação, é necessário utilizar outro formato. Os dois formatos mais populares são XML (eXtensible Markup Language) e JSON (JavaScript Object Notation). Esses formatos foram criados para facilitar o envio de dados entre aplicações.
Nesses dois formados, os artigos do blog são representados da seguinte forma:
XML:
<Articles>
<Article>
<Title>Primeiro post</Title>
<Content>Este é o primeiro post do nosso blog.</Content>
</Article>
<Article>
<Title>O poder do C#</Title>
<Content>Um site criado utilizando apenas um arquivo de código.</Content>
</Article>
</Articles>
JSON:Copiar
[{"Title":"Primeiro post","Content":"Este é o primeiro post do nosso blog."},{"Title":"O poder do C#","Content":"Um site criado utilizando apenas um arquivo de código."}]
Para que a aplicação retorne os dados em um desses formatos, ela será modificada para:
using System;
using System.Linq;
using System.Net;
using System.Collections.Generic;
using System.Threading.Tasks;
using Microsoft.AspNetCore;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.Logging;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Http;
using Microsoft.Data.Sqlite;
using System.Text;
using RazorLight;
using Newtonsoft.Json;
namespace WebApp
{
public class Program
{
public struct Article
{
public string Title;
public string Content;
}
public static void Main(string[] args)
{
var engine = new RazorLightEngineBuilder()
.UseEmbeddedResourcesProject(typeof(Program))
.UseMemoryCachingProvider()
.Build();
WebHost.CreateDefaultBuilder(args)
.Configure(app =>
{
app.Map("/articles.json", conf => {
app.Run(async (context) => {
context.Response.ContentType = "text/json; charset=utf-8";
var result = JsonConvert.SerializeObject(Articles());
await context.Response.WriteAsync(result);
});
});
app.Run(async (context) =>
{
context.Response.ContentType = "text/html; charset=utf-8";
string result = await engine.CompileRenderAsync("Home.cshtml", Articles());
await context.Response.WriteAsync(result);
});
})
.Build().Run();
}
public static List<Article> Articles() {
var articles = new List<Article>();
using (var connection = new SqliteConnection(new SqliteConnectionStringBuilder { DataSource = "data.db" }.ToString()))
{
connection.Open();
var command = connection.CreateCommand();
command.CommandText = "SELECT * FROM Article";
using (var reader = command.ExecuteReader())
{
Console.WriteLine(reader.RecordsAffected);
while (reader.Read())
{
Console.WriteLine(reader.ToString());
articles.Add(new Article { Title = reader["title"].ToString(), Content = reader["content"].ToString()});
}
}
}
return articles;
}
}
}
Agora, ao executá-la e ao acessar o caminho /articles.json, os dados são exibidos em JSON:
Mesmo que as APIs possam ser acessadas no navegador, o seu principal beneficio, e objetivo, é quando são acessadas por outras aplicações. Assim, atualmente cada vez mais saber definir e utilizar APIs é uma importante habilidade.
Quatro habilidades para se tornar um desenvolvedor web back-end
Leia também: “Importância de pensar em design inclusivo”