O documento fornece instruções para um hackathon sobre desenvolvimento web usando MEAN stack (MongoDB, Express, AngularJS e Node.js). Ele descreve como configurar o ambiente de desenvolvimento, criar uma aplicação CRUD básica para lista de compras usando essas tecnologias e fazer deploy da aplicação no IBM Bluemix.

1. Hackaton!
Jonathan Juares Beber
Outubro, 2015

2. Agenda
● Git[HUB]
○ Básico do básico
● hub.jazz.net
● MEAN
● Deploy

3. ● Conta no IBM Bluemix
○ Use o email da univille
● Conta no GitHub
● Conta no Cloud9 IDE
○ Logue com o Github
● Acesso a internet
● Um navegador atualizado
○ GoogleChrome ou
○ Firefox!
● Lógica de programação
● Qualquer editor de texto
○ Depende da nossa internet :)
Será preciso

4. HUB.JAZZ.NET
1. Create a project;
2. Name it;
3. Create a new repository;
4. Choose by github;
5. This isn’t a private repo;
6. Enable scrum interface;
7. Deploy it on IBM Bluemix!

5. c9.io
● Não é o time de eSports
● Tenha seu ambiente de
desenvolvimento em
qualquer lugar
● Terminal Linux sempre a
mão
● Sua prórpia máquina
○ Inside a docker image!
● It’s free
○ OpenSource repositories
Change port!

7. package.json
jbeber@my-note:~/hackaton-ibm$ npm init
name: (hackaton-ibm) lista-de-compras
version: (0.0.0) 0.0.1
description: Lista de compras para o IBM Hackaton
entry point: (index.js) index.js
test command: ...

8. package.json

9. Express
Install: npm i --save express
var express = require('express');
var app = express();
app.get('/', function(req, res){
res.send(“Hello world!”);
});
app.listen(3000);

10. MVC
Model -> Mongoose - ORM
View -> ejs
Controller -> Routes

11. Routes
…
var routes = require(‘./routes’);
…
app.get(‘/’, routes.index);
exports.index = function(req, res) {
res.send(‘Hello World!’);
}

12. Views
EJS -> Embeded JavaScript
● Crie um arquivo index.ejs
exports.index = function(req, res) {
res.render(‘index’);
}
…
var ejs = require(‘ejs’);
var path = require(‘path’);
…
app.set(‘views’, path.join(__dirname, ‘views’));
app.set(‘view engine’, ‘ejs’);
npm i --save ejs

13. Angular!
● Public path:
○ app.use(express.static(path.join(__dirname, ‘public’)));
● Download Angular
○ wget ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js
● Use it!
○ <script src="js/angular.min.js"></script>
○ <script src="js/main.js"></script>
○ <script src="js/shoplist.js"></script>
● Visualizar aqui!

14. First deploy!
● Criar uma tarefa de deploy;
● Use um nome de aplicação único;
● Fazer com que cada alteração no gitHub inicie o deploy;
● Por baixo ele usa:
○ Um pouco de Jenkins;
○ Um pouco de CloudFoundry;
○ É possível usar docker;
Change port!
add an start
command!

15. CRUD in AngularJS
● Create, Read, Update and Delete
● Faremos ainda sem banco
● Vamos listar (read):
app.get('/lista', routes.index);
$http.get('/lista').success(
function(retorno){
$scope.lista = retorno.lista;
}
);
exports.lista = function(req, res) {
res.json({
lista: [
{
item: 'Detergente',
quantidade: 10
},
{
item: 'Sabão',
quantidade: 2
}
]
});
}
<h1>Lista de compras da Dona Salete</h1>
<div ng-repeat="item in lista">
{{item.item}} = {{item.quantidade}}
</div>

16. Novo deploy!
● Cada alteração no GitHub inicia o deploy!

17. Adicionar ( CREATE )
● Ainda não vamos pedir nada para o servidor
● Criamos um form:
<form ng-submit="addItem()">
Produto: <input type="text" ng-model="newItem.item" name="text" />
<br>
Quantidade:
<input type="number" ng-model="newItem.quantidade" name="qtd">
<br>
<input type="submit" value="Mãe, compra pra mim?" />
</form>

18. Adicionar ( CREATE )
● Agora criamos a função que adiciona esse item:
function newItem() {
this.item = '';
this.quantidade = 0;
}
$scope.newItem = newItem();
$scope.addItem = function() {
$scope.lista.push($scope.newItem);
$scope.newItem = newItem();
}

19. Adicionar ( MODELS )
● Se reiniciar, vamos perder tudo!
● Adicionando persistência:
[ AQUI ]
npm i --save mongoose
Test it!
jonathanb@my-note$ wget -o mongod goo.gl/gkKCWN
jonathanb@my-note$ chmod +x mongod
jonathanb@my-note$ ./mongod &
jonathanb@my-note$ node testeBanco.js (ctrl + C)
jonathanb@my-note$ mongo items
> db.items.find()

20. Models ( MongoDB )
var Item = require('../models/items');
...
exports.lista = function(req, res) {
Item.find(
{},
function(err, items){
if(err)
return console.log('Erro: ' + err);
res.json({lista: items})
}
);
}
● Não vamos mais buscar itens estáticos:

21. Create
● Agora vamos também adicionar ao banco!
app.post('/add', routes.add);
$scope.addItem = function() {
$http.post('/add', $scope.newItem)
.then(function successCallback(resposta){
$scope.lista.push(resposta);
$scope.newItem = newItem();
});
}
exports.add = function(req, res) {
var item = new Item(req.body);
item.save( function(err, item) {
if(err) return console.log('Erro ao salvar');
res.send(item);
});
}

22. Create
● Falto o body-parser
…
var bodyParser = require('body-parser');
…
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: true
}));
npm i --save body-parser

23. Update
● Vamos ter que criar links:
● Agora a função:
● E criar a rota:
<a href="#" ng-click="loadItem(item)">{{item.item}} = {{item.quantidade}}</a>
$scope.loadItem = function(item){
$scope.newItem = item;
}
Atualizar o addItem
app.put('/update', routes.update); Atualizar as rotas

24. Remove
● Vamos ter que criar links:
● Agora... se vira!
○ Faz deletar;
○ E vê se deixa isso bonito!
<a href="#" ng-click="loadItem(item)">
{{item.item}} = {{item.quantidade}}
</a>
<a href="#" ng-click="deleteItem(item)">
<img src="https://cdn2.iconfinder.com/data/icons/drf/PNG/trash.png"/>
</a>

25. Obrigado!
● Dúvidas?
jonathanbeber@gmail.com
jbeber@contaazul.com
http://github.com/jonathanbeber