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!”:
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, é 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.
Curso C# (C Sharp) Básico
Conhecer o cursoPara 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.
Para a aplicação, foi definida a 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.
Curso Flutter - Rotas e Pilhas
Conhecer o cursoComo 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 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.
Curso Visão Computacional - Detecção Facial
Conhecer o cursoQuarta 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:
[{"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.
Curso XML Completo
Conhecer o cursoOnde aprender essas habilidades
Agora que você sabe quais são as habilidades mais importantes, pode estar pensando, “Onde vou aprender isso?”. Aqui na TreinaWeb temos cursos focados nos quatro pontos acima:
