Curso Online de Desenvolvimento de Aplicações web em ReactJs (Front-end), Api em .Net 6 (Back-end) com DB SqlServer.

30/07/2023, 15:22
Crud, react Js (Front-end), .Net 6 (Back-end) Banco SqLServer | LinkedIn
Editar artigo Visualizar estatísticas Visualizar publicação

Crud, react Js (Front- end), .Net 6 (Back-end) Banco SqLServer
Miguel Franco
21 artigos
5 de fevereiro de 2023

Criar em qualquer versão mais ressente do microsoft Sql Server um banco de dados conforme a figura acima.
Vamos utilizar o visual studio para construção da Api Back- end e visual code para o front-end.
Não irei entrar em detalhes sobre o que cada comando faz, mais podem conferir aqui nesse link para o back-end https://learn.microsoft.com/en-us/dotnet/ , https://learn.microsoft.com/pt-br/training/dotnet/ e para o front-end https://pt-br.reactjs.org/ esses link´s é possível entender e aprender o que cada comando faz.
Crie uma tabela no banco de dados conforme a figura abaixo.
Freelancer e Programador Full stack

Início
Minha rede
Vagas
Mensagens
Notificações
Eu

Para negócios

Expe Prem
https://www.linkedin.com/pulse/crud-react-js-front-end-net-6-back-end-miguel-franco%3FtrackingId=SpuSM19JSYKDbqtfC8Ay8A%253D%253D 1/64

30/07/2023, 15:22
Crud, react Js (Front-end), .Net 6 (Back-end) Banco SqLServer | LinkedIn
Não esqueça de colocar o campo (ID) como auto incremento, vou deixar o codigo da criação da tabela aqui, caso precisem.
USE [ColaboradorDB] GO
https://www.linkedin.com/pulse/crud-react-js-front-end-net-6-back-end-miguel-franco%3FtrackingId=SpuSM19JSYKDbqtfC8Ay8A%253D%253D 2/64
/****** Object: Table [dbo].[tb_tutorials] Script Date: 05/02/2023 07:01:57 ******/
SET ANSI_NULLS ON GO
SET QUOTED_IDENTIFIER ON

GO
CREATE TABLE [dbo].[tb_tutorials](

[id] [int] IDENTITY(1,1) NOT NULL,

30/07/2023, 15:22
Crud, react Js (Front-end), .Net 6 (Back-end) Banco SqLServer | LinkedIn

[title] [nvarchar](100) NULL,
[description] [nvarchar](100) NULL,
[published] [nvarchar](100) NULL, [status] [nvarchar](100) NULL

) ON [PRIMARY]
GO
Também é possível utilizar o modo Design para deixar o campo ID como auto incremento
Selecione o campo ID e nas opções na grid abaixo do Sql Server selecione SIM e automaticamente é para aparecer nas duas opções abaixo do campo identidade os valores 1,1. conforme a figura abaixo.
Feito isso, vamos criar a API em .net, vamos ao visual studio e crie uma aplicação vazia, conforme a figura abaixo.
https://www.linkedin.com/pulse/crud-react-js-front-end-net-6-back-end-miguel-franco%3FtrackingId=SpuSM19JSYKDbqtfC8Ay8A%253D%253D 3/64

30/07/2023, 15:22
Crud, react Js (Front-end), .Net 6 (Back-end) Banco SqLServer | LinkedIn
No próximo passo diga o nome do seu projeto.
No próximo passo algumas configurações, desmarque ou não a opção HTTPS, nesse exemplo não foi marcada.
No visual studio vamos montar a seguinte estrutura.
https://www.linkedin.com/pulse/crud-react-js-front-end-net-6-back-end-miguel-franco%3FtrackingId=SpuSM19JSYKDbqtfC8Ay8A%253D%253D 4/64

30/07/2023, 15:22
Crud, react Js (Front-end), .Net 6 (Back-end) Banco SqLServer | LinkedIn
Antes de iniciar a criação das classes, instale os pacotes nuget utilizado no projeto, essas diretivas são importantes para o projeto funcionar corretamente.
https://www.linkedin.com/pulse/crud-react-js-front-end-net-6-back-end-miguel-franco%3FtrackingId=SpuSM19JSYKDbqtfC8Ay8A%253D%253D 5/64

30/07/2023, 15:22
Crud, react Js (Front-end), .Net 6 (Back-end) Banco SqLServer | LinkedIn
Agora vamos criar as classes e pastas no gerenciador de soluções do visual studio.
Vamos criar: 3 Pastas (Data, EndPoints, Extensions) E 4 Classes: (Tutorials.cs, TutorialsContext.cs,
TutorialsEndPoints.cs, ServiceColletionsExtensions.cs)

Conforme a figura abaixo.
Antes de iniciar com a criação das classes, vou deixar aqui o
.json que é responsável pela a conexão. appsettings.json
https://www.linkedin.com/pulse/crud-react-js-front-end-net-6-back-end-miguel-franco%3FtrackingId=SpuSM19JSYKDbqtfC8Ay8A%253D%253D 6/64

30/07/2023, 15:22
Crud, react Js (Front-end), .Net 6 (Back-end) Banco SqLServer | LinkedIn
{
"ConnectionString": "Data Source=DESKTOP- XXXXXSQLXXXXXXXEXPRESS;Initial
Catalog=ColaboradorDB;Integrated Security=True",
"Logging": {

"LogLevel": {
"Default": "Information", "Microsoft.AspNetCore": "Warning"

}

},

"AllowedHosts": "*"

}
Essa string de conexão é retirada da tela inicial do SQL Server conforme a figura abaixo.
launchSettings.json
https://www.linkedin.com/pulse/crud-react-js-front-end-net-6-back-end-miguel-franco%3FtrackingId=SpuSM19JSYKDbqtfC8Ay8A%253D%253D 7/64

30/07/2023, 15:22
Crud, react Js (Front-end), .Net 6 (Back-end) Banco SqLServer | LinkedIn
{
"iisSettings": { "windowsAuthentication": false, "anonymousAuthentication": true, "iisExpress": {
"applicationUrl": "http://localhost:51569", "sslPort": 0

}

},
"profiles": { "WebApiTutorials": { "commandName": "Project", "dotnetRunMessages": true, "launchBrowser": true, "launchUrl": "swagger",
"applicationUrl": "http://localhost:5235", "environmentVariables": { "ASPNETCORE_ENVIRONMENT": "Development"

}

},
"IIS Express": { "commandName": "IISExpress", "launchBrowser": true, "launchUrl": "swagger", "environmentVariables": {

"ASPNETCORE_ENVIRONMENT": "Development"

}
https://www.linkedin.com/pulse/crud-react-js-front-end-net-6-back-end-miguel-franco%3FtrackingId=SpuSM19JSYKDbqtfC8Ay8A%253D%253D 8/64

https://www.linkedin.com/pulse/crud-react-js-front-end-net-6-back-end-miguel-franco%3FtrackingId=SpuSM19JSYKDbqtfC8Ay8A%253D%253D 9/64
30/07/2023, 15:22
Crud, react Js (Front-end), .Net 6 (Back-end) Banco SqLServer | LinkedIn
}

}

}
Agora vamos as classes
Tutorials.cs
using System.ComponentModel.DataAnnotations.Schema;
using System.Collections.Generic; using System.Threading.Tasks; [Table("Tb_tutorials")]
public record Tb_tutorials(int id, string title, string description, string published, string status);
//public List Tutorials { get; set; } public interface ITutolialsRepository

{
Task> GetTutorialsAsync(); Task GetTutorialsByIdAsync(int id); Task GetTutorialsEContadorAsync(); Task SaveAsync(Tb_tutorials novoTutorial);
Task UpdateTutolialisStatusAsync(Tb_tutorials atualizaTutorial);

Task DeleteAsync(int id);

}
TutorialsContext.cs
using System.Data;

https://www.linkedin.com/pulse/crud-react-js-front-end-net-6-back-end-miguel-franco%3FtrackingId=SpuSM19JSYKDbqtfC8Ay8A%253D%253 10/64
30/07/2023, 15:22
Crud, react Js (Front-end), .Net 6 (Back-end) Banco SqLServer | LinkedIn

public class TutorialsContext
{

public delegate Task GetConnection();

}
TutorialsEndPoints.cs
//using Microsoft.Extensions.Configuration;

using System;

using System.Threading.Tasks;
using Dapper; // Ativa o QueryFirstOrDefault using System.Data.SqlClient;
using Dapper.Contrib.Extensions; using static TutorialsContext;

//using System.Web.Http.Cors;

//using System.Text.Json;
//using Dapper; // Ativa o QueryFirstOrDefault public static class TutorialsEndpoints

{
public static void MapTutorialsEndpoints(this WebApplication app)

{

//app.EnableCors();

app.MapGet("/", () => "Mini Tutorials API");
app.MapGet("/tutorials", async (GetConnection connectionGetter) =>

{

using var con = await connectionGetter();

//return con.GetAll().ToList();

https://www.linkedin.com/pulse/crud-react-js-front-end-net-6-back-end-miguel-franco%3FtrackingId=SpuSM19JSYKDbqtfC8Ay8A%253D%253 11/64
30/07/2023, 15:22
Crud, react Js (Front-end), .Net 6 (Back-end) Banco SqLServer | LinkedIn

string query = "SELECT * FROM dbo.Tb_tutorials";
List tutorials = (await con.QueryAsync(sql:query)).ToList();

return tutorials;

});
app.MapGet("/tutorials/{id}", async (GetConnection connectionGetter, int id) =>

{

using var con = await connectionGetter();

//return con.Get(id);

return con.QueryFirstOrDefault("SELECT "
+ "id, " + "title, " + "description, " + "published, " + "status "
+ "FROM dbo.Tb_tutorials " + "WHERE id = @id ", new { id
= id });
});
app.MapGet("/pesq-tutorials/title", async (GetConnection connectionGetter, string title) =>

{

using var con = await connectionGetter();

return con.QueryFirstOrDefault("SELECT "
+"id, " +"title, " +"description, "+ "published, " + "status "
+"FROM dbo.Tb_tutorials " + "WHERE title = @title ", new { title = title });
});
app.MapDelete("/del-tutorials/{id}", async (GetConnection connectionGetter, int id) =>

{

using var con = await connectionGetter();

return con.QueryFirstOrDefault("DELETE "
+ "FROM dbo.Tb_tutorials " + "WHERE id = @id ", new { id