Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
app
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

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

About

Building a Contact Manager App. Ember.js Tutorial.

Resources

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.