CÓMO COCINAR
UNA DELICIOSA APP
Hackday Córdoba · 18/07/2015
![](https://s3.amazonaws.com/media-p.slid.es/uploads/67937/images/1581090/pasted-from-clipboard.png)
@marcemira_dev & @joelalejandro
![](https://s3.amazonaws.com/media-p.slid.es/uploads/67937/images/1581112/pasted-from-clipboard.png)
¡HOLA, MUNDO!
Me llamo Ember, y soy lo que usás para hacer esos afamados asados.
(Sí, escuchaste bien. Ember significa 'brasas' en inglés)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/67937/images/1581269/teaching.png)
Y yo me llamo Tomster.
¡Soy la mascota oficial de Ember!
¡A COCINAR PUES!
Veamos el menú para hoy.
El menú del día
(qué SE CUECE hoy)
Nociones generales de Ember
Trabajando con el CLI de Ember
Haciendo una app (¡posta!)
Usando datos en la app (¡re-posta!)
1
2
3
4
la entrada
el aperitivo
el plato principal
el postre
![](https://s3.amazonaws.com/media-p.slid.es/uploads/67937/images/1581170/hotel-services-hi.png)
1
nociones generales
de ember
ember es...
Un framework client-side
Hecho en JavaScript
Convention-first "MVC"
ember ES PARA...
Hacer aplicaciones ambiciosas
Concentrarnos en el negocio y no en nimiedades
ember TIENE...
Controladores
Vistas
Plantillas
Rutas
Componentes
Tests
Modelos
Adaptadores
Serializadores
Addons
ember TIENE...
Controladores
Vistas
Plantillas
Rutas
Componentes
Tests
Modelos
Adaptadores
Serializadores
Addons
(
"Front"
ember TIENE...
Controladores
Vistas
Plantillas
Rutas
Componentes
Tests
Modelos
Adaptadores
Serializadores
Addons
}
(
"Front"
"Back"
/app
|___ /components
|___ /controllers
|___ /helpers
|___ /models
|___ /routes
|___ /styles
|___ /templates
|___ /views
/bower_components
/config
|___ /environment.js
/dist
/node_modules
/public
/tests
/tmp
/vendor
.bowerrc
.editorconfig
.ember-cli
.git
.gitignore
.jshintrc
.settings
.travis.yml
Brocfile.js
bower.json
package.json
README.md
testem.json
una app tiene...
esta estructura de directorios
al inicializarse.
Todo tu código va en /app.
Todas las dependencias se reparten en /node_modules y /bower_components.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/67937/images/1581170/hotel-services-hi.png)
2
trabajando con el cli de ember
Instalar ember es:
Tener Node.js (preferiblemente con nvm)
Instalar el paquete global bower
Instalar el paquete global ember-cli
![](https://s3.amazonaws.com/media-p.slid.es/uploads/67937/images/1582249/keep-calm-and-abracadabra-10.png)
NVM
NODE VERSION MANAGER
https://github.com/creationix/nvm
Bower
A PACKAGE MANAGER FOR THE WEB
npm install -g bower
ember new mi-nueva-app
Todo comienza con una línea:
Ember-cli
A COMMAND LINE INTERFACE FOR EMBER
npm install -g ember-cli
$> ember generate model dish
Y, por supuesto, sigue con otra.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/67937/images/1581170/hotel-services-hi.png)
3
HACIENDO UNA APP
(POSTA!)
objetivo
hacer una app que muestre la carta de un restaurante.
datos a usar
tipos de platos
INGREDIENTES
PLATOS
tipo de plato
(pseudocódigo)
class DishType {
Name: String,
Dishes: ArrayOf('Dish')
}
ingrediente
(pseudocódigo)
class Ingredient {
Name: String,
Dishes: ArrayOf('Dish')
}
plato
(pseudocódigo)
class Dish {
Name: String,
Description: String,
Price: Number,
DishType: TypeOf('DishType'),
Ingredients: ArrayOf('Ingredients')
}
Arquitectura
Cómo se combina todo lo que estamos cocinando.
Ember App (Front-End)
Web API (Back-End, Node.js)
Database (Node Embedded DB)
HTTP+JSON
HTTP+JSON
Vamos a los bifes, pues.
(Esto es, vamos a codear un rato.)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/67937/images/1582719/road-side_www-txt2pic-com.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/67937/images/1581170/hotel-services-hi.png)
4
Usando datos en la app
Hola, Ember data.
Hola, Ember data.
Ember Data es un ORM integrado directamente con Ember.
Permite de manera agnóstica conectarse a distintos tipos de back-end, sin importar el tipo de base de datos o Web API que utilicemos.
Hola, Ember data.
Ember Data es un ORM integrado directamente con Ember.
Permite de manera agnóstica conectarse a distintos tipos de back-end, sin importar el tipo de base de datos o Web API que utilicemos.
= en realidad sí importa, pero ya lo vemos.
ember TIENE...
Controladores
Vistas
Plantillas
Rutas
Componentes
Tests
Modelos
Adaptadores
Serializadores
Addons
}
(
"Front"
"Back"
¿Se acuerdan?
ember TIENE...
Controladores
Vistas
Plantillas
Rutas
Componentes
Tests
Modelos
Adaptadores
Serializadores
Addons
}
(
"Front"
"Back"
Enfoquémonos en el back-end.
un modelo
es un tipo de recurso.
Para la Web API, es un endpoint.
conectando
this.store.find('dish')
HTTP 1.1 GET http://localhost:1337/dishes
![](https://s3.amazonaws.com/media-p.slid.es/uploads/67937/images/1582728/tumblr_inline_nom07iramR1rkg7ly_500.gif)
¿PERO CÓMO ES ESTO POSIBLE?
usando:
adaptadores
&
SERIALIZADORES
un adaptador
define cómo debe comunicarse ember data con el backend.
esto es:
los métodos y cabeceras http, resolución de urls...
un serializador
define cómo parsear la entrada y salida desde y hacia la web api.
esto es:
la estructura del payload que se envía con cada petición y que se recibe con cada respuesta.
para esta app
usamos json api
DS.JSONAPIAdapter
DS.JSONAPISerializer
Vamos a los bifes, pues.
(Esto es, vamos a codear un rato.)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/67937/images/1582719/road-side_www-txt2pic-com.jpg)
¿PREGUNTAS?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/67937/images/1582732/giphy.gif)
¡Gracias!
Slides en:
https://slides.com /joelalejandrovillarrealbertoldi /app-deliciosa-ember/
Repo GitHub del Backend:
https://github.com/joelalejandro/deliciosa-api
Repo GitHub de la Ember App:
https://github.com/marcemira/ember-deliciosa
Cómo cocinar una deliciosa Ember app
By Joel Alejandro Villarreal Bertoldi
Cómo cocinar una deliciosa Ember app
Hackaday Córdoba / 18 de Julio de 2015
- 1,507