Git Product home page Git Product logo

ember-workshops-3's Introduction

APLICACIONES WEB CON UN HAMSTER GAFAPASTA

Slides: https://slides.com/shokmaster/ember-workshops-3

¿Por qué este workshop?

Porque empezar con un framework da mucha pereza. Pero don’t worry my friend, en menos de dos horas sabrás enfrentarte a uno de los mejores frameworks Javascript del momento.

¿Qué vas a aprender?

Te contaremos por qué Ember mola tanto y cómo funciona, y haremos una aplicación web en tiempo récord. Entenderás lo que es "The Ember Way", sus convenciones y su arquitectura. Definirás rutas, modelos, controladores y componentes. Descubrirás Ember CLI, una herramienta potente y fácil de usar con la que generar automáticamente distintas partes de tu aplicación. Conocerás los addons de Ember y los generadores de patrones.

¿Qué necesito?

  • Tu editor de código HTML/JS favorito
  • Node instalado (versión mínima recomendada 8+) y npm (5+)
  • Git

Slides:

Puedes verlas aquí: https://slides.com/shokmaster/ember-workshops-3


Start! fork this project or just download it

1. Start up: create your Ember app

Steps:

  • cd foodme (we did ember new foodme for you)
  • npm install
  • ember serve

2. List restaurants from json on new route

Steps:

  • ember g route index && ember g route restaurants
  • Redirect index to restaurants route
  • Change the Restaurant Route to use resources/restaurants.json as the model
  • Show restaurants list in the restaurants.hbs Template
  • Go http://localhost:4000/ and see it!
  • ember g template application
  • Personalize the page design using resources/css and bootstrap

BONUS TRACK: Create About page: generate route about and add some content to the template. Remember to add the menu entry.

3. Create component nav-menu

Steps:

  • ember g component nav-menu
  • ember g controller aplication to set some variables
  • Add toggle behaviour to menu

4. Add translations

Steps:

  • ember install ember-i18n
  • Add translations with ember generate locale en && ember generate locale es
  • Copy the translations from resources/translations folder
  • Add change language dropdown with: ember install ember-cli-sass && ember install ember-power-select

5. Create a helper

Steps:

  • ember g helper restaurant-img
  • Copy images from resources and add restaurant img

6. Filter the restaurants

Steps:

  • ember g controller restaurants
  • Copy the cuisines object from resources/cuisines.js
  • Add a new panel to templates/restaurants.hbs with a power-select-multiple
  • Add a button with action filter

BONUS TRACK: Create helper that receives an array of numbers and shows the name of the weekday.

7. Add rating stars and filter by it

Steps:

  • ember install ember-cli-star-rating
  • Add to template/restaurants.hbs to show the restaurants rating and the filter

ember-workshops-3's People

Contributors

shokmaster avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.