/contacts-app-client

Building a Contact Manager App. Ember.js Tutorial.

Primary LanguageSCSS

Contacts App - Ember.js Tutorial

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

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

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:

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