ASP .NET Core MVC - Criando um Portfólio digital - I

Hoje vamos iniciar a criação de um portfólio digital usando a ASP .NET Core MVC no ambiente do NET 6.

Um portfólio digital ou online é essencial para qualquer profissional deseja exibir sua experiência e suas habilidades, suas conquistas e seus projetos.


Ele pode ser usado para mostrar as suas habilidades e conhecimentos em uma mais áreas , e, é uma forma simples e direta de mostrar do que você é capaz. Se for bem feito e organizado, o portfólio consegue abrir portas, pois é a maneira mais fácil das pessoas conhecerem o seu trabalho.


Nosso objetivo será criar um portfólio digital usando a ASP .NET Core MVC,  assim além de criar o seu próprio portfólio você vai estar mostrando suas habilidades em utilizar os recursos da plataforma .NET.


Nosso projeto será simples mas funcional vai conter as opções :

  1. Portfólio - para exibir o Portfólio contendo a apresentação, experiência e um resumo dos trabalhos;

  2. Projetos - Para exibir os projetos, programas e trabalhos onde você atuou.

  3. Contato - O formulário de contato que permite que os interessados no seu trabalho entre em contato com você;

Abaixo temos a exibição do menu e da página inicial do Portfólio:
 

 

Os recursos que iremos usar para criar este projeto são:

Criando o projeto Portfolio

Abra o Visual Studio 2022 e acione a opção Create new project selecionando o template : ASP.NET Core Web App (Model-View-Controller)

Informe o nome PortfolioMvc e a seguir selecione a configuração conforme mostra a figura:

Clique em Create para criar a solução.

Na pasta Models crie a classe Projeto que representa os projetos que iremos apresentar no portfólio:

public class Projeto
{
    public int ProjetoId { get; set; }
    public string? Titulo { get; set; }
    public string? Descricao { get; set; }
    public string? ImagemURL { get; set; }
    public string? Link { get; set; }
}

Crie a pasta ViewModels no projeto e a seguir crie a classe ContatoViewModel que será usada para enviar o email :

namespace PortfolioMvc.ViewModels;

public class ContatoViewModel
{
   public string? Nome { get; set; }
   public string? Email { get; set; }
   public string? Mensagem { get; set; }
}

Nesta pasta vamos criar também a view model PortfolioViewModel que será usada para definir a lógica das views para exibir os projetos:

using PortfolioMvc.Models;
namespace PortfolioMvc.ViewModels;
public class PortfolioViewModel
{
    public IEnumerable<Projeto>? Projetos { get; set; }
}

Criando os serviços

Vamos criar os serviços para obter os projetos e também para enviar o email usando os recursos da biblioteca SendGrid.

Assim a primeira coisa a fazer é instalar o pacote Nuget SendGrid no projeto abrindo a janela do Package Manager Console no Visual Studio e a seguir digitar o comando : Install-Package SendGrid

Crie uma pasta Services no projeto e nesta pasta crie a interface IProjetosService :

public interface IProjetosService
{
     List<Projeto> GetProjetos();
}

Crie a classe ProjetosService que vai implementar esta interface com o código abaixo:

using PortfolioMvc.Models;

namespace PortfolioMvc.Services;

public class ProjetosService : IProjetosService
{
    public List<Projeto> GetProjetos()
    {
        return new List<Projeto>() {
                new Projeto
                {
                    Titulo = "Macoratti.net",
                    Descricao = "Blog de artigos criado em ASP.NET Core desde 2002 com mais de 5000 artigos",
                    Link = "https://macoratti.net.br",
                    ImagemURL = "/imagens/macorattinet1.jpg"
                },
                    new Projeto
                {
                    Titulo = "Curso ASP .NET Core MVC - Vendas",
                    Descricao = "Curso para criação de um site de vendas de lanches do zero",
                    Link = "https://www.udemy.com/course/curso-de-asp-net-core-mvc-criando-um-site-do-zero/",
                    ImagemURL = "/imagens/cursomvc1.jpg"
                },
                    new Projeto
                {
                    Titulo = "Curso Web API ASP .NET Core Essencial ",
                    Descricao = "Curso para criar APIs restfull com ASP .NET Core",
                    Link = "https://www.udemy.com/course/curso-web-api-asp-net-core-essencial/",
                    ImagemURL = "/imagens/cursowebapi.jpg"
                },
                    new Projeto
                {
                    Titulo = "Curso Clean Architecture - ASP .NET Core com C#",
                    Descricao = "Criando projetos .NET Core segundo a Clean Architecture ",
                    Link = "https://www.udemy.com/course/clean-architecture-essencial-asp-net-core-com-c/",
                    ImagemURL = "/imagens/cursocleanarch1.jpg"
                },
                    new Projeto
                {
                    Titulo = "Curso Blazor Essencial (Atualização .NET 6)",
                    Descricao = "Os principais recursos do Blazor para criar aplicações web usando a linguagem C#",
                    Link = "https://www.udemy.com/course/curso-blazor-essencial/",
                    ImagemURL = "/imagens/cursoblazor1.jpg"
                },
                    new Projeto
                {
                    Titulo = "Docker essencial para a plataforma .NET",
                    Descricao = "Usando o Docker em aplicações ASP .NET Core MVC",
                    Link = "https://www.udemy.com/course/docker-essencial-para-a-plataforma-net/",
                    ImagemURL = "/imagens/cursodocker1.jpg"
                },
            };
    }
}

Neste código estamos definindo a lista de projetos que iremos exibir no Portfólio. Não usei um banco de dados para simplificar o exemplo mas basta implementar um repositório de projetos e criar um CRUD para gerenciar essas informações a partir de um Database.

Vamos criar agora a interface IEmailService :

using PortfolioMvc.ViewModels;
namespace PortfolioMvc.Services
{
    public interface IEmailService
    {
        Task Enviar(ContatoViewModel contato);
    }
}

A seguir crie a classe EmailService que implementa esta interface :

using PortfolioMvc.ViewModels;
using SendGrid;
using SendGrid.Helpers.Mail;

namespace PortfolioMvc.Services
{
    public class EmailService : IEmailService
    {
        private readonly IConfiguration _configuration;

        public EmailService(IConfiguration configuration)
        {
            _configuration = configuration;
        }

        public async Task Enviar(ContatoViewModel contato)
        {
            var apiKey = _configuration.GetValue<string>("SENDGRID_API_KEY");
            var email = _configuration.GetValue<string>("SENDGRID_FROM");
            var nome = _configuration.GetValue<string>("SENDGRID_NOME");

            var cliente = new SendGridClient(apiKey);
            var from = new EmailAddress(email, nome);
            var subject = $"O cliente {contato.Email} quer entrar em contato";

            var to = new EmailAddress(email, nome);
            var mensagemTexto = contato.Mensagem;
            var conteudoHtml = @$"De: {contato.Nome} - Email: {contato.Email} Mensagem : {contato.Mensagem}";
            var singleEmail = MailHelper.CreateSingleEmail(from, to, subject, mensagemTexto, conteudoHtml);

            await cliente.SendEmailAsync(singleEmail);
        }
    }
}

As informações para a chave da api, o email de origem e o nome estão sendo obtidas a partir do arquivo appsettings.json conforme explicado a seguir.

As informações usadas neste código foram obtidas a partir o site do SendGrid, neste link: https://app.sendgrid.com/guide/integrate/langs/csharp

Nota: Para poder usar o SendGrid você terá que abrir uma conta e obter uma api_Key no site.

Acesse o site https://sendgrid.com e clique em Start for free e crie a sua conta escolhendo o plano grátis e a seguir crie a sua api_key.

Em nosso projeto vamos definir as informações necessárias para enviar o email, incluindo a api_key, no arquivo appsettings.json :

{
  "Nome": "Macoratti",
  "SENDGRID_API_KEY": "sua_api_key",
  "SENDGRID_FROM": "seu_email",
  "SENDGRID_NOME": "seu_nome",
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*"
}

Após criar os serviços devemos incluí-los no contêiner DI da ASP .NET Core incluindo na classe Program o código abaixo:

using PortfolioMvc.Services;

var builder = WebApplication.CreateBuilder(args);

// Adiciona serviços no container DI
builder.Services.AddControllersWithViews();

builder.Services.AddTransient<IProjetosService, ProjetosService>();
builder.Services.AddTransient<IEmailService, EmailService>();

var app = builder.Build();

// Configura o pipeline do request HTTP
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

Definindo os controladores

O controlador HomeController vai apenas exibir a página inicial onde vamos mostrar uma imagem na view Index.cshtml :

<body class="principal"></body>
@{
    ViewData["Title"] = "Home Page";
}

Aqui estamos definindo um estilo que vai exibir a imagem em background:

.principal {
  background-image: url("/imagens/laptop6.jpg");
  background-color: #cccccc;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

O arquivo de estilo portfolio.css foi criado na pasta wwwroot/css com o seguinte código:

.principal {
    background-image: url("/imagens/laptop6.jpg");
    background-color: #cccccc;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#bottom {
    position: absolute;
    bottom: 0;
    left: 0;
}

#foto {
    width: 200px;
    margin: 1rem 0;
    border-radius: 50%;
}

.secao-bemvindo {
    margin: 5rem 0 10rem 0;
    color: black;
}

.secao-bemvindo h1 {
    margin-bottom: 0.5rem;
}

.secao-bemvindo p {
    font-family: sans-serif;
    line-height: 1.5;
    font-size: 1.20rem;
}

#imagem-dotnet {
    width: 400px;
}

.cabecalho {
    font-weight: bold;
}

.experiencia ul {
    list-style: none;
    padding-left: 0;
}

.experiencia i {
    color: #0d6efd;
    font-size: 50px;
}

#footer {
    background: #f7f7f7;
    padding-top: 30px;
    padding-bottom: 20px;
}

#footer .socials-media ul {
      display: inline-block;
      float: none;
      margin: 0 0 25px 0;
}

#footer .socials-media ul li {
      float: left;
      margin-left: 20px;
      margin-right: 20px;
}

.credits {
    font-size: 15px;
}

Na pasta imagens em wwwroot também incluímos todas as imagens que iremos usar no projeto.

Vamos criar o controlador PortfolioController com o código abaixo:

using Microsoft.AspNetCore.Mvc;
using PortfolioMvc.Services;
using PortfolioMvc.ViewModels;

namespace PortfolioMvc.Controllers
{
    public class PortfolioController : Controller
    {
        private readonly IProjetosService _projetoService;
        private readonly IEmailService _emailService;

        public PortfolioController(IProjetosService projetoService,
            IEmailService emailService)
        {
            _projetoService = projetoService;
            _emailService = emailService;
        }

        public IActionResult Index()
        {
            var projetos = _projetoService.GetProjetos().Take(3).ToList();

            var modelo = new PortfolioViewModel()
            {
                Projetos = projetos
            };
            return View(modelo);
        }
        public IActionResult Projetos()
        {
            var projetos = _projetoService.GetProjetos();
            return View(projetos);
        }

        [HttpGet]
        public IActionResult Contato()
        {
            return View();
        }

        [HttpPost]
        public async Task<IActionResult> Contato(ContatoViewModel contatoViewModel)
        {
            await _emailService.Enviar(contatoViewModel);
            return RedirectToAction("Obrigado");
        }

        public IActionResult Obrigado()
        {
            return View();
        }
    }
}

Na próxima parte do artigo vamos explicar o código deste controlador e continuar a criação do portfólio.

"O homem bom, do bom tesouro do seu coração tira o bem, e o homem mau, do mau tesouro do seu coração tira o mal, porque da abundância do seu coração fala a boca."
Lucas 6:45

Referências:

José Carlos Macoratti