Contacts App - Ember.js Tutorial

• Live demo: https://contactsappdata.firebaseapp.com/
• Login: admin@example.com, password: admin1

Implementation log

Prerequisite: nodejs and npm.

1. Ember CLI

Install ember cli and bower:

npm install -g ember-cli bower

2. New app

Create a new ember-app

ember new contacts-app

3. Debugging options

Turn on a couple of debug option in config/environment.js

4. Adding sass and bootstrap

ember install ember-cli-sass
mv app/styles/app.css app/styles/app.scss

ember install ember-cli-bootstrap-sassy
cp bower_components/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss app/styles/boostrap-custom.scss
#Add the following two lines to app/styles/app.scss
@import "boostrap-custom";
@import "bootstrap";

5. Creating navigation component

Add main-nav component (could be partial as well). Note: a component name has to contain a dash. | Commit | Bootstrap example

6. Creating a static page and using link-to

Add About page: router.js, main-nav.hbs with link-to, index.hbs, about.hbs, link-to on logo | Commit

7. Generating the first resource (model)

Generate Contacts resource: ember g resource contacts, add link-to to main-nav.hbs, add header to contacts.hbs | Commit

Add a simple array to routes/contacts.js and show this list in template. | Commit

Add a simple show/hide button to template. | Commit

• ember g controller contacts
• Add isShowingPhoneNumber property
• Add #if block to template
• Add button to template
• Add actions to controller

Binding class attributes and button label. Using ES6 function property syntax. | Commit

8. Ember Data and Usage of LocalForage Adapter

Adding LocalForage Adapter. (ember-localforage-adapter)[https://github.com/genkgo/ember-localforage-adapter]

ember install ember-localforage-adapter
ember generate adapter application

Add createRecord action to contacts controller | Commit

Add deleteRecord and add checking of empty input fields | Commit

9. Adding bulk data generator and updating Ember

Adding two buttons (bulk data generator and Delete All). Update Ember.js. | Commit

10. Heroku deployment

• More details: http://www.ember-cli.com/#deployments
• Buildpack link: https://github.com/tonycoco/heroku-buildpack-ember-cli

11. Firebase database service integration

• Instruction on Firebase website. Firebase with ember-cli

  ember install emberfire

• Configure your firebase URL in config/environment.js.

12. Loading phase

• Create a loading.hbs in template folder. It appears while Promise has been resolved: data downloading from server in the background. | Commit

13. Add a query param

• More details about query-params: Guide | Commit

14. Playing with Computed Properties

• Change and to or at validation.
• Add email attribute to contact model.
• Add computed property for counting records with email addresses.

15. Clean up controller with components

• Official guide about Components
• Generate contacts/add-contact-form component with the following ember command: ember g component contacts/add-contact-form
• Move all form related html code from templates/contacts.hbs in templates/components/contacts/add-contact-form.hbs
• Insert in templates/contacts.hbs the one liner component code: {{contacts/add-contact-form}}
• Move model modifier actions from controller to route.
• Create action in component and send action with params to higher level route action.
• Change computed properties for using the new preferred syntax.
• Connected commit

16. Create a phone-input component

• Create a phone-input component which extend from Ember.TextInput
• Add an observer with regular expression which accept only numbers and insert dash after each third digit.

17. Update Ember Data fetching method

• Using .findAll('contact') for downloading contacts.
• Data downloading in the backtround, model.isUpdating is true until all data downloaded.
• Update template with showing different message during data download. Commit

18. Move table and table rows in separated components

• Remove showingPhoneNumber toggle.
• Create contact-table and contact-row component and move html and logic there from main contacts template and controller. Commit

19. Implement Boostrap modal window for Delete confirmation

• Create modal-dialog component
• Insert modal-dialog in contact-row
• Commit

20. Move the form in a contacts/new page

• Add a new nested route to app/router.js
• Create a contacts/new.hbs and contacts/new.js controller.
• Move index content to contacts/index.hbs.
• Add {{outlet}} to contacts.js
• Commit

21. Create a contacts/show route, template

• Add a new nested route to router.js
• Create component, template for show route.
• Commit

22. Refactor contact-form component and using in create, edit and show route

• Create and edit route in router.js
• Create the new universal component app/components/contacts/contact-form.js
• Delete old components
• Update route models and actions
• Update css
• Commit

23. Update Firebase and add authentication

Readings:

• https://www.firebase.com/blog/2015-07-28-emberfire-1-13-0.html
• http://vestorly.github.io/torii/
• https://www.firebase.com/docs/web/libraries/ember/guide.html#section-authentication

Steps:

• Run in console: ember install emberfire - Update adapter, bower.json and package.json
• Run in console: ember install torii
• Add this to config/environment.js

    torii: {
      sessionServiceName: 'session'
    },

• Add torii-adapters/application.js for service injection.
• Create actions in application.js and template in application.hbs