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
14. Playing with Computed Properties
- Change
and
toor
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
intemplates/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
istrue
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
andcontact-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
incontact-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
andcontacts/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 inapplication.hbs