No liquidificador: Knockout + Bootstrap + Toastr.js + BootBox + Asp.NET MVC + BootsWatch + WebAPI + MongoDB

Fala pessoal, neste final de semana da páscoa aproveitei o feriado e coloquei no liquidificador várias tecnologias para “misturar” e ver o que “sai” no final.

Desta vez vou criar um sistema com Knockout, Bootstrap, BootsWatch, BootToastr.js, BootBox, Asp.net MVC, Web Api, Swagger e MongoDB.

Vamos explicar um pouco de cada tecnologia principalmente para quem não conhece:

Knockout é uma biblioteca javascript (open source) que simplifica a construção de interfaces gráficas dinâmicas, usando o padrão MVVM (Model-View-View-Model), para saber mais acesse o site oficial.

Bootstrap é um framework front-end que cria sites já com tecnologia mobile (responsivo) sem ter que digitar uma linha de CSS, muito utilizado no mercado, acesse o bootstrap para conhecer melhor.

Toastr.js é um framework javascript para exibir notificações não bloqueadoras na tela, exibe aquelas “janelinhas” verdes, vermelhas, amarelas dependendo da situação ou definição de mensagem ao usuário, mais informações podem ser obtidas no github do projeto.

BootBox é um framework para exibição de caixas de diálogo usando o bootstrap modal, bem simples de usar e bonito, entre no link do projeto para conhecer melhor, possui varios exemplos de uso.

ASP.NET MVC  bom esse é o framework MVC web da Microsoft, já deve ser conhecido de quase todos os desenvolvedores web, vou deixar o link para maiores informações.

BootsWatch trata-se de um site que disponibiliza temas free para o bootstrap, muito bacana, basta acessar o site deles e escolher o tema que você achar mais bonito e subscrever o arquivo bootstrap.min.css.

WebApi segundo a própria definição da Microsoft “é uma estrutura que facilita a criação de serviços HTTP que atingem uma ampla gama de clientes, incluindo navegadores e dispositivos móveis. ASP.NET Web API é uma plataforma ideal para a construção de aplicativos RESTful no .NET Framework.” segue o link para obter mais informações.

Swagger este é um dos meus favoritos, uso o swagger para documentar minhas api´s, ele é um projeto composto por algumas ferramentas que auxiliam o desenvolvimento de APIs Rest e gera uma ótima documentação bem como ambiente completo para os testes de sua API. Veja no link oficial da ferramenta maiores detalhes.

MongoDB bom este dispensa comentários, trata-se de um banco NOSQL que já venho falando sobre aqui no meu site, você pode acompanhar sobre ele nos dois artigos que fiz (parte 1 e parte 2), é importante que o MongoDB já esteja funcionando em sua máquina para o exemplo ok?

Bom agora é colocar tudo no “liquidificador” e ver o que sae!!

Fiz o projeto no Visual Studio 2013, mas nada impede que você utilize o VS2015  basicamente separado em duas “camadas”, a camada Web onde estou usando o ASP.NET MVC com o KnockoutJS e a camada de serviços com WEBAPI usando o MONGODB como repositório de dados.

Eu particularmente não gosto muito de “misturar” por exemplo ASP.NET MVC com o KnockoutJS ou outro framework javascript, eu entendo que o framework da microsoft já resolve tudo que precisamos sozinho sem a necessidade de incluir outro framework. Gostaria de opiniões a respeito deste ponto, por exemplo não vejo ganhos em usar ASPNET MVC com Angular por exemplo, ou usa um ou usa outro….

Não vou explicar aqui todo o código, até porque o artigo iria ficar enorme e massante para leitura, todo o projeto está no meu github para que todos possam baixar, estudar e mandar opiniões, se puderem por favor me ajude no sentido de identificar onde e o que pode ser melhorado no código.

O projeto consiste basicamente em um cadastro de contatos com as informações de nome, email e telefone, onde o usuário poderá cadastrar, alterar, deletar e listar contatos, bem simples pois a idéia é demonstrar as tecnologias e não fazer um sistema complexo.

Na imagem abaixo temos a “cara” da aplicação:

tutorialKnockout

Na camada Web, faça a instalação via NuGet dos pacotes:

  • Knockoutjs
  • Knockout.Validation

A aplicação web terá somente uma página, uma espécie de “single page application” com o knockout, as validações de campos faremos com o knockout.validation.

Baixe também os scripts do toastr.js  e do bootbox, os links estão no inicio do artigo, insira os mesmos na pasta Scripts e depois referencie na _Layout.cshtml, o toastr.js possui também um css que deve ser inserido na pasta Content.

No meu exemplo coloquei um css mais “bonito” que o default criado pelo Visual Studio, para isso eu uso o site do bootwatch , basta escolher um tema que goste e substituir o conteúdo no arquivo bootstrap.min.css.

Na camada de Serviços, faça a instalação via NuGet dos pacotes:

  • mongocsharpdriver version 2.4.3 – driver .NET para o MongoDB
  • Swashbuckle version 5.5.3 – este pacote é referente ao Swagger

Na camada de serviços vamos criar toda a implementação junto ao MongoDB, quero deixar claro que esta implementação apesar de estar na “camada” de serviço deve ficar fora em outra biblioteca se aplicado em cenários reais, como trata-se apenas de exemplo deixei tudo junto.

Imagem da camada de serviços exposta pelo Swagger:

tutorialKnockoutSwagger

As configurações do Swagger estão no arquivo SwaggerConfig.cs dentro da solução, note que eu customizei o cabeçalho da aplicação colocando a url do meu blog e um link para enviar email diretamente, também mudei as cores default do swagger para um css customizado.

Novamente, o projeto encontra-se no meu github onde você pode efetuar o download e estudar o fonte. Não expliquei aqui cada classe, mas fico a disposição para sanar todas as dúvidas ok?

Agradeço também se puderem opiniar e identificar pontos de melhoria, enfim toda e qualquer opinião é bem vinda no sentido de sempre melhorar.

Fico por aqui e espero ajudar!

Marcelo Dias.

 

 

2 comments

    1. Fábio, obrigado pelo comentário! muito legal seu site já está aqui nos meus favoritos.

      Meu código não deve estar tão bom quanto sua implementação, espero que consiga dar uma olhada e fazer
      suas criticas/opiniões que serão muito bem vindas.

      Mas minha intenção é essa mesma gerar discussões de como implementar melhor e tirar o melhor da tecnonologia. No
      facebook algumas pessoas tendem sempre a criticar uma ou outra tecnologia de desenvolvimento mas esquecem ou nunca
      trabalharam em sustentação de sistemas principalmente em grandes empresas. Algumas empresas (já trabalhei em várias como consultor)
      não se sentem confortáveis em adotar o framework da “moda” mesmo que comprovadamente seja melhor do que usam atualmente. A questão
      da reescrita de código e os custos que estão nessa operação inviabilizam a troca de tecnologia, lógico que existe empresas que com
      certeza estão preocupadas com tecnologias melhores e estão sempre se atualizando.

      Por esse motivo gosto sempre de aprender sobre várias ferramentas e tentar identificar onde uma pode ser melhor que a outra, facilidade de
      desenvolvimento e sustentação em produção e principalmente saber quando e se realmente é necessário mudar de tecnologia simplesmente por que
      saiu uma nova e que supostamente é melhor.

      Parabéns pelo seu site/blog e vamos mantendo contato!!

Leave a Reply

O seu endereço de e-mail não será publicado.