Nos posts anteriores vimos um pouco sobre aplicações Web conectadas (Real-time) com algumas tecnologias, como NodeJs/Socket.io, ASP.NET/SignalR e Firebase. Vamos agora nos aprofundar um pouco mais e criar alguns exemplos mais reais com estas plataformas.
A ideia aqui é simples, construir um Instagram (Aquele que você posta suas fotos com uns efeitos maneiros) utilizando as tecnologias mencionadas no título do post.
Para isto, você precisará do seguinte:
- NodeJs
- Bower, Grunt, Ionic (Instalados via NPM)
- MongoDB (Local ou via MongoLab)
- Um editor de código que você goste
Post anterior para referência
Criando um chat com NodeJs e Socket.io
https://andrebaltieri.wordpress.com/2015/07/09/criando-um-chat-com-nodejs-e-socket-io/
Construindo o Backend
Antes de tudo, crie uma pasta para sua aplicação e execute os comandos abaixo
npm init npm install socket.io --save
Isto vai fazer com que os módulos do Socket.io, sejam baixados para pasta node_modules da aplicação.
Para este exemplo, não vamos utilizar o Express. Na verdade não precisamos dele, pois vamos ter o servidor Socket separado do servidor da aplicação. Como o Angular já tem seu esquema de rotas e tudo mais, só precisamos do Socket.io rodando no server mesmo.
Sendo assim, vamos criar um arquivo chamado “app.js” na raiz da aplicação com o seguinte conteúdo.
Na instância do Socket, já informamos a porta que a aplicação vai rodar, no caso a 5430. Fora isso, nada de novo por aqui (Se você acompanhou os posts anteriores…).
Execute o comando abaixo na raiz da aplicação, e já podemos acessar o “js” gerado pelo Socket.io no browser.
node app.js
Então, no browser navegue para http://localhost:5430/socket.io/socket.io.js. Nosso arquivo a ser consumido pelo cliente (AngularJs está aí).
Por hora, nosso backend está pronto 🙂
Frontend
Para iniciar o frontend, na raiz da aplicação vamos executar os seguintes comandos.
bower init bower install angular angular-route ng-socket-io ngImgCrop --save
Estes são os pacotes que vamos precisar para trabalhar com AngularJs e Socket.io.
O pacote “ng-socket-io” tem um detalhe, ele não suporta a especificação da URL que vamos utilizar na conexão do Socket, que neste caso é diferente da URL da aplicação.
Eu fiz um ajuste no meu fork deste repositório e submeti um request para eles, mas até a escrita deste post ele não havia sido aceito. Então, substitua o arquivo “ng-socket-io.js” da pasta “bower_component/ng-socket-io” por este abaixo:
https://github.com/andrebaltieri/ngSocketIO/blob/master/src/ng-socket-io.js
Para melhor organização, criei uma pasta chamada “app” na raiz, e vamos manter o frontend todo aí dentro. Por hora, crie uma página chamada “index.html” na raíz desta pasta, apenas com o esqueleto padrão (HTML, HEAD, TITLE, BODY).
Criando os efeitos
O charme do Instagram são os efeitos que ele adiciona as fotos, e isto conseguimos reproduzir facilmente via CSS. Separei um arquivo com alguns efeitos como escala de cinza, brilho extra, sépia e afins. Você pode encontrá-lo aqui:
https://github.com/andrebaltieri/insta-sockeio/blob/master/app/content/filters.css
Este arquivo deve ficar na pasta “app/content/filters.css”.
Adicionando os estilos
Para uma melhor estética da aplicação, vamos utilizar um tema do Bootswatchm que se baseia no Bootstrap, os estilos do ngImageCrop e também os filtros que criamos em nosso CSS.
Então, no arquivo “Index.html”, abaixo da tag TITLE, vamos adicionar os scripts necessários para aplicação funcionar.
<link rel="stylesheet" href="https://bootswatch.com/paper/bootstrap.min.css"/> <link rel="stylesheet" href="../bower_components/ngImgCrop/compile/minified/ng-img-crop.css"/> <link rel="stylesheet" href="content/filters.css"/>
Criando o cabeçalho
Nossa aplicação vai ter apenas duas páginas, sendo elas “Home”, onde serão listadas as imagens e “Postar” onde vamos poder publicar novas imagens. Deste modo, criei um “navbar”, logo após a tag “body” que ficará no topo da página, e serve como menu principal para o usuário.
Um dos requisitos para as rotas no AngularJs é o “#” antes da mesma, então nas linhas vinte e cinco e vinte e seis, temos os links apontados para “#/” e “#/post”. Veremos isto com mais detalhes posteriormente.
Adicionando os scripts
Outro requisito são os scripts, do Angular, rotas, image crop e do Socket. Então vamos adicioná-los ao final da página, antes da tag “</body>”.
<script src="http://localhost:5430/socket.io/socket.io.js"></script> <script src="../bower_components/angular/angular.min.js"></script> <script src="../bower_components/angular-route/angular-route.min.js"></script> <script src="../bower_components/ngImgCrop/compile/minified/ng-img-crop.js"></script> <script src="../bower_components/ng-socket-io/ng-socket-io.js"></script>
E pronto! Isto é tudo que precisamos para iniciar nossa aplicação.
No próximo post vamos ver como trabalhar com AngularJs e Socket.io e finalizar a postagem e leitura de imagens!
Este exemplo completo e funcionando você encontra no meu GitHub:
https://github.com/andrebaltieri/insta-sockeio
Abraços,
@andrebaltieri 