Tutorial: Backend (API) e Frontend (Web com DevExtreme)
Este tutorial está dividido em duas partes principais:
• Criando a API (Backend): Lógica de dados e exposição de endpoint.
• Criando o Frontend (Web MVC/Razor Pages): Consumo da API e exibição em
DxPivotGrid do DevExpress.
🎯 Pré-requisitos
• Visual Studio 2022 (ou mais recente) com [Link] e workloads web instaladas.
• Componentes DevExpress (DevExtreme) instalados.
Parte 1: Criando a API (Backend)
1.1 Criar Novo Projeto API
1. Abra o Visual Studio.
2. Clique em Criar um projeto.
3. Escolha [Link] Core Web API.
4. Configure:
– Nome do projeto: SalesApi
– Nome da solução: SalesApp
– Framework: .NET 8.0
– HTTPS: ✔️
– Autenticação: Nenhuma
– Docker: ❌
– Controladores: ✔️
– Swagger/OpenAPI: ✔️
5. Clique em Criar.
1.2 Definir o Modelo de Dados
Crie Models/[Link]:
namespace [Link]
{
public class SaleData
{
public int Id { get; set; }
public string ProductName { get; set; }
public string Category { get; set; }
public string Region { get; set; }
public DateTime OrderDate { get; set; }
public decimal SaleAmount { get; set; }
public int UnitsSold { get; set; }
}
}
1.3 Criar o Controller da API
Crie Controllers/[Link]:
using [Link];
using [Link];
using [Link];
namespace [Link]
{
[ApiController]
[Route("api/[controller]")]
public class SalesController : ControllerBase
{
private static readonly List<SaleData> _salesData = GenerateSampleSalesData();
[HttpGet]
public ActionResult<IEnumerable<SaleData>> GetSales()
{
return Ok(_salesData);
}
private static List<SaleData> GenerateSampleSalesData() => new()
{
new SaleData { Id = 1, ProductName = "Laptop XPS", Category = "Electronics", Region =
"North", OrderDate = new DateTime(2023, 1, 15), SaleAmount = 1500.00m, UnitsSold = 1 },
new SaleData { Id = 2, ProductName = "Wireless Mouse", Category = "Accessories",
Region = "South", OrderDate = new DateTime(2023, 1, 20), SaleAmount = 25.00m, UnitsSold = 2 },
// [... dados de exemplo ...]
};
}
}
1.4 Habilitar CORS
No [Link]:
[Link]();
[Link]();
[Link](builder => builder
.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader());
[Link]();
1.5 Testar a API
1. Defina SalesApi como projeto de inicialização.
2. Execute com F5.
3. Acesse Swagger UI.
4. Teste o endpoint GET /api/Sales.
5. Anote a URL base (ex: [Link]
Parte 2: Criando o Frontend (Web MVC + DevExtreme)
2.1 Criar Novo Projeto Frontend
1. Adicione um novo projeto: [Link] Core Web App (MVC).
2. Nome: SalesWeb
3. Framework: .NET 8.0
4. Docker: ❌
5. HTTPS: ✔️
2.2 Instalar e Configurar DevExtreme
• Instale via NuGet:
– [Link]
– [Link]
No [Link]:
[Link]();
[Link]();
No _ViewImports.cshtml:
@using [Link]
@addTagHelper *, [Link]
2.3 Modelo de Dados no Frontend
Crie Models/[Link]:
namespace [Link]
{
public class SaleData
{
public int Id { get; set; }
public string ProductName { get; set; }
public string Category { get; set; }
public string Region { get; set; }
public DateTime OrderDate { get; set; }
public decimal SaleAmount { get; set; }
public int UnitsSold { get; set; }
}
}
2.4 Modificar o Controller
Em Controllers/[Link]:
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];
public class HomeController : Controller
{
private readonly IHttpClientFactory _httpClientFactory;
private readonly string _apiBaseUrl = "[Link]
public HomeController(IHttpClientFactory httpClientFactory)
{
_httpClientFactory = httpClientFactory;
}
public async Task<IActionResult> Index()
{
var salesData = new List<SaleData>();
try
{
var httpClient = _httpClientFactory.CreateClient();
var response = await [Link](_apiBaseUrl);
[Link]();
var jsonString = await [Link]();
salesData = [Link]<List<SaleData>>(jsonString, new
JsonSerializerOptions { PropertyNameCaseInsensitive = true });
}
catch (HttpRequestException e)
{
[Link] = $"Erro ao conectar à API: {[Link]}";
}
return View(salesData);
}
}
2.5 Exibir PivotGrid com DevExtreme
No Views/Home/[Link]:
@model IEnumerable<[Link]>
@using [Link]
<h1>Relatório de Vendas</h1>
@if ([Link] != null)
{
<div class="alert alert-danger">@[Link]</div>
}
else
{
@([Link]().PivotGrid()
.ID("salesPivotGrid")
.DataSource(ds => [Link](s => [Link]().Data(Model)))
.AllowSortingBySummary(true)
.AllowFiltering(true)
.AllowExpandAll(true)
.ShowBorders(true)
.FieldChooser(f => [Link](true))
.Fields(fields => {
[Link]().DataField("Region").Area([Link]).Caption("Região");
[Link]().DataField("Category").Area([Link]).Caption("Categoria");
[Link]().DataField("ProductName").Area([Link]).Caption("Produto");
[Link]().DataField("SaleAmount").Area([Link]).SummaryType([Link]).Captio
n("Total Vendas").Format("currency");
[Link]().DataField("UnitsSold").Area([Link]).SummaryType([Link]).Caption
("Qtd. Vendida");
[Link]().DataField("OrderDate").Area([Link]).Caption("Data do
Pedido").DataType([Link]).GroupInterval([Link]);
}))
}
Parte 3: Executar os Projetos Simultaneamente
1. Vá em Propriedades da Solução > Projeto de Inicialização.
2. Selecione Vários projetos de inicialização.
3. Configure SalesApi e SalesWeb como Iniciar.
4. Pressione F5.
✅ Testando a Aplicação
• SalesApi: Swagger UI em [Link]
• SalesWeb: PivotGrid em [Link]
Teste o grid: arraste campos, filtre, altere agrupamentos.
🧩 Dicas de Solução de Problemas
• ❌ Erro de conexão: Verifique URL em _apiBaseUrl.
• ❌ Erro CORS: Confirme as configurações na Parte 1.4.
Com isso, você criou uma solução com backend separado e frontend interativo usando
DevExtreme PivotGrid.