CÓMO COCINAR

UNA DELICIOSA                     APP

Hackday Córdoba · 18/07/2015

@marcemira_dev & @joelalejandro

¡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)

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

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.

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

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.

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.)

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

¿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.)

¿PREGUNTAS?

¡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