Acidente Marte Web App

Passo a passo para a contrução do projeto contido neste repositório. Foco em razor pages sem repositories e database(dados fixos)

Sumário 📌

• Pré-Requisitos;
• Criando a Aplicação;
• Manipulando Estrutura;
• Criando Models;
• Controllers;
• Views Razor;
  • Home;
  • Shared;
• Configurando o Startup;
• Desafio;

Pré-Requisitos

• Ter Instalado .NET SDK (Software Development Kit) atualizado (3.1.201);
• Ter Instalado Visual Studio Code atualizado;
• Ter em mãos o código Html/Css concluído;

Criando a Aplicação 📋

Iremos criar uma aplicação pré-pronta para facilitar o aprendizado, portanto abra o terminal no diretório aonde deseja salvar seu projeto e rode os seguintes comantos:

dotnet new webApp -o acidenteMarte 
cd acidenteMarte

• dotnet new irá cria um novo projeto;
• webApp define o tipo da aplicação;
• -o cria uma pasta chamada "acidenteMarte" para armazenar o projeto;
• cd ou Change directory levará para um caminho destino;
• acidenteMarte será o nome do nosso projeto.

Para rodar sua aplicação digite dotnet run e aguarde um pouco, o terminal mostrará duas diferentes urls escolha e uma acesse.

Manipulando Estrutura 📂

Abra seu projeto no Visual Studio Code, veja que foram criadas alguns arquivos e pastas esse é o minimo para o projeto funcionar, e para saber mais sobre cada um dos items visite esta página.

1. Na pasta mãe crie uma pasta chamada 'Refs' e cole os arquivos Html/Css, servirá de referencia para manipular e organizar os arquivos.
2. Na pasta 'wwwroot > css' substitua o arquivo existente por seu *arquivo css também da pasta Refs';
3. Adequando ao padrão ou arquitetura de projeto MVC substitua o nome da pasta 'Pages' para 'Views';
4. Na pasta Views exclua as demais páginas pré-criadas, deixe somente a pasta 'Shared' e crie outra pasta chamada 'Home';
5. Na pasta mãe crie duas outras pastas, 'Controllers' e 'Models' usaremo-as depois. Sua hierarquia deve estar assim:

Criando Models 📕

Nossa aplicação listará casos de acidentes, devemos criar nossos models/modelos pois todos casos cadastrados possuem as mesmas características, por exemplo:

Características de um Relato de Acidente:

• Nome relator;
• Email contato;
• Data ocorrido;
• Relato em si (texto);

Para criar o model na prática, primeiro na pasta 'Models' crie o arquivo 'RelatoModel.cs'. Dentro dele adicione o seguinte código para criar uma classe pública (pode ser acessada de outro arquivo) com os atributos de um caso de acidente.

using System;

namespace acidenteMarte.Models {
    public class RelatoModel{
        
        public int Id {get; set;}
        public string NomeRelator {get; set;}
        public string Email {get; set;}
        public DateTime Data {get; set;}
        public string Mensagem {get;set;}

        //CONSTRUTOR - Método que facilitará a criação de objetos;
        public RelatoModel(string nome, string email, DateTime data, string msg)
        {
            this.NomeRelator = nome;
            this.Email = email;
            this.Data = data;
            this.Mensagem = msg;
        }

    }
}

• Saiba mais sobre construtores aqui

Controllers ⚙️

Os controlers como irão fazer o trabalho duro de manipular dados assim como redirecionar páginas. Cada página terá o seu próprio controlador.

Dentro da pasta 'Controllers' adicione o arquivo HomeController.cs;

1. Vamos começar criando a estrutura base de um controlador:

using Microsoft.AspNetCore.Mvc;

namespace acidenteMarte.Controllers{
    public class HomeController : Controller{
        
    }
}

2. Agora vamos criar nossas listas de acidentes. Nossa aplicação não terá um Banco de Dados para receber e cadastrar informações, os dados serão fixos.

        //Cria a Lista
        List<RelatoModel> listaRelatos = new List<RelatoModel> ();
        
        //Cria cada Relato
        RelatoModel relato1 = new RelatoModel("Jurandir da Silva", "[email protected]", DateTime.Now, "Uma casa desabou no Leste");
        RelatoModel relato2 = new RelatoModel("Fulano da Costa Mendes", "[email protected]", DateTime.Now, "A barreria que continha terra desabou");
        RelatoModel relato3 = new RelatoModel("Isaac Newton Tavares", "[email protected]", DateTime.Now, "Houve um acidente de trânsito na Avenida Principal");

3. Dentro da classe criada insira o método Index():

 public IActionResult Index(){
    //Se houver, chame a lista do repositório
    //Adicionando relatos na lista
    listaRelatos.Add(relato1);
    listaRelatos.Add(relato2);
    listaRelatos.Add(relato3);

    //ViewData carregam dados para View
    ViewData["ListaAcidentes"] = listaRelatos;
    ViewData["Title"] = "Home - Página Inicial";
    return View();
} 

3. Agora vamos criar o método de Cadastro:

• [HttpPost] - Define o tipo de webRequest, isto é se recebe, envia, atualiza ou deleta dados.
• IFormCollection - Dados de um <form> em string transportados pela url.
• Parse() - Converte um tipo de váriável para outro. No caso convertemos string para DateTime
• ViewData[] - Forma de passar dados para View tirar proveito, váriável formemente tipada.
• ViewBag.nomeQualquer - Forma alternativa de passar dados para View tirar proveito, váriável fracamente tipada.
• View("nomePagina") - Retorna a página com nome especificado, caso esteja vazio será retornada a página com o nome do método pai.

[HttpPost]
public IActionResult Cadastrar(IFormCollection formulario){
    RelatoModel novoRelato = new RelatoModel(
        formulario["nome"], 
        formulario["email"],
        DateTime.Parse(formulario["data"]),
        formulario["msg"]
    );
            
    //Se houver, salve objeto pelo repositório
    listaRelatos.Add(novoRelato);

    ViewData["Title"] = "Scania - Sucesso no Cadastro";
    ViewBag.NomePessoa = novoRelato.NomeRelator;
    return View("_SucessPage");
}

Em nosso projeto não iremos de fato cadastrar itens pois a cada vez que clicamos no botão 'submit' de um formulário a página recarrega, isso faz com que a nossa lista reinicie com valor nulo. Para o cadastro de fato é necessário de um repositório e um banco de dados que pode ser um '.csv', entretanto não criaremos apenas simularemos o cadastro redirecionando para uma página de sucesso.

Views Razor 💻

As páginas razor misturam a sintaxe do C# com HTML por isso os arquivos razor possui a terminação '.cshtml'. 💡 Vamos criar nossa página inicial, para isso crie o arquivo Views > Home > Index.cshtml

Home

1. Acesse a página index.html, copie o conteúdo da tag <main> e cole no seu recém-criado Index.cshtml. As demais partes como <nav> ou <footer> serão colocadas em arquivos diferentes. Nas primeiras linhas do arquivo adicione os seguintes códigos:

@using acidenteMarte.Models;

@{  //Para escrever código C# no arquivo razor use essa estrutura com @{}
    
    //Define o modelo para página com nome '_Layout.cshtml' 
    Layout = "_Layout";
    
    //Armazena em uma variável a lista criada no Controller
    var listaAcidente = (List<RelatoModel>) ViewData["ListaAcidentes"];
}

2. Vamos fazer dois ajustes para tornar a página dinâmica. Primeiro encontre no arquivo o formulário com class="formCad" e insira dois atributos que farão que os dados sejam enviados ao controller quanto o botão for pressionado:

<form class="formCad" method="POST" action='@Url.Action("Cadastrar","Home")'>

3. Para finalizar a Home falta apenas a listagem, para isso encontre a <div> com class="boxLista" e modifique seu conteúdo de modo que fique desta forma:

<article class="boxLista">

    @foreach (var item in listaAcidente)
        {
            <div class="itemLista">
                <div>
                    <h4>@item.NomeRelator</h4>
                    <p>@item.Data.ToString("dd/MM/yyyy")</p>
                </div>

                <p>@item.Mensagem</p>
                <hr />
            </div>
        }
       
</article>

Veja que misturando o C# com html a página fica mais dinâmica pois não importam quantos items tenha a lista o foreach irá criar uma nova div com os dados correspondentes. Compare aqui, este deve ser o resultado final do arquivo Index.cshtml

Shared

Esta pasta armazena os componentes que se repetem ou são compartilhados entre as páginas, isto é a navbar o Layout e em algumas vezez até o footer.

Com a página inicial criada vamos criar o _HeaderNavBar e o _layout. Dentro de Shared possuem dois arquivos:

• '_ValidationScripts' (a ser excluído);
• '_Layout.cshtml' (esse é o modelos da página Home que fizemos a referência).

_HeaderNavBar.cshtml

1. Crie o arquivo '_HeaderNavBar.cshtml' dentro da pasta Shared, este será o componente navBar;
2. Dentro dele insira sua <nav> do index.html;
3. Teremos de alterar os caminhos href de ambas tags <a> de modo que este seja o resultado final:

<nav>
    <h1>Scania</h1>
    <div>
        <ul class="ulMenu">
            <li class="liMenu" style="cursor: pointer"><a asp-controller="Home" asp-action="Index">Home</a></li>
            <li class="liMenu"><a href='@Url.Action("Index", "Centros")'>Centros de Comunicação</a></li>
        </ul>
    </div>
</nav>

• asp-controller - Define o controler que a página será direcionada;
• asp-action - Define o método que a página será direcionada;
• @Url.Action - Define o controler e o método que a página será direcionada.

Obs.: Quando clicarmos em um botão do menu será mandada uma requisição para o controller definido que nos redicionará para a página desejada.

Layout.cshtml

O Layout é onde cada seção de uma página se encontra, é também a base da nossa página home. Se navegar pelo arquivo verá que é a estrutura html pendente na página que criamos com a adição de alguns novos conceitos:

• @RenderBody() - Renderiza/carrega o conteúdo das páginas que referenciam o _Layout.cshtml;
• @RenderSection() - Permite determinar se renderiza/carrega seções específicas dentro da página;

Essa estrutura está estilizada conforme o modelo da aplicação pré-criada portanto devemos adequar a nossas necessidades:

1. Exclua todo o conteúdo e substitua pelo que se encontra no index.html;
2. Exclua agora o que esta dento da tag <main> e inira a função @RenderBody();
3. Dentro do head <title> modifique o texto pela variável <title> @ViewData["Title"] </title;
4. Insira o novo caminho do css dentro <link> na propriedade href substituindo o './' por '~/' assim como <link href="~/css/globalStyle.css"> (O til encontra o caminho do arquivo independente do ponto de partida);
5. Substitua o que está dentro da tag <header> por:

@{
    //Irá carregar a navBar já criada
    Html.RenderPartial("_HeaderNavBar");
    
    //OU OPTE POR <partial name="_HeaderNavBar" />  
}

_SucessPage.cshtml

Esta será nossa página de redirecionamento do 'cadastro'

@{
    Layout = "_Layout";
    var nome = ViewBag.NomePessoa;
}

 <section class="sectionCadastro">
    <div class="divTitle maior">
        <strong class="destaque maiorD"> @nome </strong>
        <h2>Agradeçemos pela sua colaboração.</h2>
        <p>Quanto mais relatos houverem mais teremos controle na situação. Nós da Scannia estamos ao seu lado. </p>
    </div>

    <div class="divBtn">
        <a class="btnCad" style="text-align: center" href='@Url.Action("Index","Home")'>Voltar para o Inicio</a>
    </div>
</section>

Assim deve estar o layout.cshtml:

Configurando o Startup 📜

Para enfim rodarmos nosso projeto precisamos dizer qual arquivo deve ser lido primeiro. O Startup.cs possui as configrações para o projeto rodar, é lá que vamos inserir nossa configuração. Para isso vamos aos passos:

• No método Configure Services (linha 24) configuramos opções espeíficas de serviços, nele vamos retirar o services.AddRazorPages() e substituir pelo:

      //Seta a versão do MVC
      services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_3_0);
      //Desabilita opção de roteamento quc conflita com MVC
      services.AddMvc(option => option.EnableEndpointRouting = false);

• Agora no método Configure escolhemos quais configurações queremos fazer uso. Em nossa aplicação não precisaremos de algumas configurações:

app.UseRouting();

app.UseAuthorization();

app.UseEndpoints(endpoints =>
{
      endpoints.MapRazorPages();
});

• Devemos ao final do método 'Configure' inserir a configuração que define que quando a aplicação rodar, deverá ser redirecionada através de rotas para o HomeController no método Index(que retorna a página):

app.UseMvc(routes =>
{
      routes.MapRoute(
            name: "default",
            template: "{controller=Home}/{action=Index}/{id?}"); //DEFININDO A PAGINA PRINCIPAL COMO HOME
});

🎉 Parabéns você concluiu o projeto, e persistiu até o final 🎉, agora rode o projeto com dotnet run no terminal e aproveie!

DESAFIO 🏆

Agora que criou o projeto do total e absoluto zero você precisa praticar, o desafio é o seguinte:

• Você deve desenvolver a página 'CentrosComunicaçao.cshtml';
• Você deve desenvolver o CentrosController.cs;
• Ao cadastrar um centro destruido retorne a mesma página de sucesso com ViewData alterado;
• Você deve desenvolver uma simples página 'Erro.cshtml' com apenas uma mensagem para que quando ocorra um erro na url ela seja direcionada.

Até Mais e bom desenvolvimento ;) Enfim, até mais e boa sorte.