Tags

, ,

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.

20150712_001

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.

20150712_002

 

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,

 

Anúncios