zoltan-nz/library-app

Detailed Ember.js v4.7 tutorial for absolute beginners. https://yoember.com

Ember.js Octane Tutorial - Demo Application

This is the original repository of the Library App.

For detailed, step by step implementation click here: Ember tutorial

Live demo: library-app.firebaseapp.com

How can you run this application locally?

I assume, you have Node.js on your computer. Node.js installation

• Please create an app on Firebase first. You can register there with one click and create a new app. You have to setup this app name in config/environment.js. (This will be your own cloud based database.)

• Clone this repository in your project folder

$ git clone [email protected]:zoltan-nz/library-app.git

• Change to the application directory

$ cd library-app

• Install node packages

$ npm install

• Copy .env-sample file and save as .env. Update the API_KEY and PROJECT_ID.

• Launch the application with Ember server.

$ ember server

• Open the application in your browser

$ open http://localhost:4200

www.yoember.com - The Ember.js Tutorial

library-app's Issues

Question on Query on has-many Attributes

Is there a way to query on a has-many attributes? For example, I would like to query books that belong to an author which between certain publish date period.

this.store.query('author', {orderBy: 'uid', equalTo: 'xxxxxxxx'})
  .then((records) => {
    return record.get('firstObject');
  }).then((author) => {
    author.store.query('book', {orderBy: 'publishDate', endAt: 'xxxx-xx-xx'});
  })

The code above seems works but it does not feel right. I look through the doc. but I could not find that I could not retrieve store from an Ember Data object.

My question is is there a way to query again on the Ember data object?

Thanks for your time.

Fix yarn test:coverage task

Running yarn test:coverage print out a lot of errors, like:

[test] Unable to cover: app/components/author-select.js . Newer JS features may need Babel instrumentation to work. Try setting useBabelInstrumenter to true in your config/coverage.js.
[test]  Error: Line 8: Unexpected token ILLEGAL
[test]     at constructError (/Users/zoltan/projects/library-app/node_modules/istanbul/node_modules/esprima/esprima.js:2407:21)
[test]     at createError (/Users/zoltan/projects/library-app/node_modules/istanbul/node_modules/esprima/esprima.js:2426:17)

After fixing, we can turn back coverage and codacy report in Travis.

Lesson 3 FireBase version 2.2.1

First of all, thanks so much for this excellent tutorial!

In Lesson 3, we're integrating FireBase. It would be good to mention that the way FireBase is integrated into the tutorial has been deprecated as of version 3. Everything still works when installing FireBase version 2.2.1, so this should be mentioned in the tutorial.

npm install [email protected]

index.js : this.set('responseMessage' wrong display

In Lesson 3 - First Ember.js Model

in actions: {
saveInvitation() {

    this.set('responseMessage', "Thank you! We\'ve just saved your email address: ${this.get('emailAddress')}");   

display ${this.get('emailAddress')} in the page as full string

  Thank you! We've just saved your email address: ${this.get('emailAddress')}  

The address is save into the db..

Books and authors

I am wondering if you can expand on your tutorial and show setting up the route for adding a new book? I am trying to expand on this with firebase and having all types of issues

Expand the tutorial to cover pagination?

Hi, I'm getting started with your tutorial and one thing I really wish was included is pagination of results. There isn't much beginner-friendly material on pagination online so this would be a nice addition to your already-comprehensive tutorial.

Using CP-validations instead of comp props on the model?

Great tut btw!

I think this would bring the app up to date with more real world validation, what do you think?

Update `action`s to `on` and `fn`

library-app/templates/admin/seeder.hbs
  9:55  error  Do not use `action` as {{action ...}}. Instead, use the `on` modifier and `fn` helper.  no-action
  9:100  error  Do not use `action` as {{action ...}}. Instead, use the `on` modifier and `fn` helper.  no-action
  11:64  error  Do not use `action` as {{action ...}}. Instead, use the `on` modifier and `fn` helper.  no-action
  11:115  error  Do not use `action` as {{action ...}}. Instead, use the `on` modifier and `fn` helper.  no-action

library-app/templates/authors.hbs
  17:18  error  Do not use `action` as <form {{action ...}} />. Instead, use the `on` modifier and `fn` helper.  no-action
  22:63  error  Do not use `action` as <button {{action ...}} />. Instead, use the `on` modifier and `fn` helper.  no-action
  27:32  error  Do not use `action` as <span {{action ...}} />. Instead, use the `on` modifier and `fn` helper.  no-action

library-app/templates/books.hbs
  26:102  error  Do not use `action` as {{action ...}}. Instead, use the `on` modifier and `fn` helper.  no-action
  27:57  error  Do not use `action` as <button {{action ...}} />. Instead, use the `on` modifier and `fn` helper.  no-action
  29:32  error  Do not use `action` as <span {{action ...}} />. Instead, use the `on` modifier and `fn` helper.  no-action
  34:18  error  Do not use `action` as <form {{action ...}} />. Instead, use the `on` modifier and `fn` helper.  no-action
  39:63  error  Do not use `action` as <button {{action ...}} />. Instead, use the `on` modifier and `fn` helper.  no-action
  44:32  error  Do not use `action` as <span {{action ...}} />. Instead, use the `on` modifier and `fn` helper.  no-action
  50:108  error  Do not use `action` as {{action ...}}. Instead, use the `on` modifier and `fn` helper.  no-action
  51:57  error  Do not use `action` as <button {{action ...}} />. Instead, use the `on` modifier and `fn` helper.  no-action
  53:32  error  Do not use `action` as <span {{action ...}} />. Instead, use the `on` modifier and `fn` helper.  no-action

library-app/templates/contact.hbs
  23:52  error  Do not use `action` as <button {{action ...}} />. Instead, use the `on` modifier and `fn` helper.  no-action

library-app/templates/index.hbs
  11:69  error  Do not use `action` as <button {{action ...}} />. Instead, use the `on` modifier and `fn` helper.  no-action

library-app/templates/libraries/form.hbs
  4:89  error  Do not use `action` as {{action ...}}. Instead, use the `on` modifier and `fn` helper.  no-action

library-app/templates/libraries/index.hbs
  29:60  error  Do not use `action` as <button {{action ...}} />. Instead, use the `on` modifier and `fn` helper.  no-action

• seeder.hbs
• authors.hbs
• books.hbs
• contacts.hbs
• templates/index.hbs
• libraries/form.hbs
• libraries/index.hbs

Tutorial is Outdated

I’ve been learning Ember using v4.5, and it appears much of tutorial content is outdated. So I’m having a bit of trouble modernizing everything:

• The code in the tutorial doesn’t match that in the repo and should be updated.
• ember-cli-shims is causing the app to crash just it because it can’t find Ember.
• @import "bootstrap"; won’t work.

Fix `fader-label` test

not ok 104 Chrome 80.0 - [6048 ms] - Unit | Component | fader-label: isShowingChanged observer
    ---
        actual: >
            true
        expected: >
            false
        stack: >
                at http://localhost:7357/assets/tests.js:735:16
                at invoke (http://localhost:7357/assets/vendor.js:67434:16)
                at Queue.flush (http://localhost:7357/assets/vendor.js:67323:13)
                at DeferredActionQueues.flush (http://localhost:7357/assets/vendor.js:67520:21)
                at Backburner._end (http://localhost:7357/assets/vendor.js:68054:34)
                at Backburner.end (http://localhost:7357/assets/vendor.js:67804:12)
        negative: >
            false
        browser log: |

What about using closure actions instead of actions?

Migrate the app to Ember Octane

Deleted record visible until "hard" refresh - Ember Data - Firebase

Hi Zoltan, thanks for this tutorial. I found it very helpful to get started in emberjs while creating my own server backend instead of firebase. I have one problem, though:

1. I open the libraries index in two browser tabs.
2. In one tab I delete a library. The tab stays in the index and the library is gone.
3. The other tab still shows the deleted library when I navigate away from the page and back to it via the navbar. The item only disappears when I refresh the page via F5.

Why does the store still show a deleted item in the list, even after it sends a GET to the server when opening the library index? Or is the response to the DELETE request incomplete when I only send status 200 and an empty json object? I'm using a RESTAdapter for the communication.

p.s. I also posted this as a comment on yoember's disqus but that got caught in a spam filter.

Ember.computed.and not right

Thanks for your tutorial ...

In the Contact Page setup homework, I tried to use the Ember.computed.and property
I wrote

  isValid: Ember.computed.match('senderEmailAddress', /^.+@.+\..+$/),
  isNotValid: Ember.computed.not('isValid'),
  isTooShort: Ember.computed.lte('message.length', 4),
 disabled: Ember.computed.and('isNotValid', 'isTooShort'),

so the Send button should be disable when email is invalid and message is too short .. OK
but the when email is valid OR message is long enough the button is Enabled , it should not

I guess we should use Ember.computed.or , Send button will be disabled when one of the 2 computed properties is true ..

disabled: Ember.computed.or('isNotValid', 'isTooShort'),

Isn't it ?

Cannot find module 'ember-cli/lib/broccoli/ember-app'`

I am getting this version: 2.4.1 Could not require 'ember-cli-build.js': Cannot find module 'ember-cli/lib/broccoli/ember-app'

when I ran $ember server

Fix `nav-link-to` test

not ok 113 Chrome 80.0 - [27 ms] - Unit | Component | nav-link-to: hrefForA computed property
    ---
        actual: >
            false
        expected: >
            true
        stack: >
                at Object.<anonymous> (http://localhost:7357/assets/tests.js:874:14)
                at runTest (http://localhost:7357/assets/test-support.js:21495:30)
                at Test.run (http://localhost:7357/assets/test-support.js:21481:6)
                at http://localhost:7357/assets/test-support.js:21712:12
                at processTaskQueue (http://localhost:7357/assets/test-support.js:21068:24)
                at http://localhost:7357/assets/test-support.js:21072:8
        message: >
            failed, expected argument to be truthy, was: false
        negative: >
            false
        browser log: |
            WARN: DEPRECATION: The <library-app@component:nav-link-to::ember307>#loading computed property was just overridden. This removes the computed property and replaces it with a plain value, and has been deprecated. If you want this behavior, consider defining a setter which does it manually. [deprecation id: computed-property.override] See https://emberjs.com/deprecations/v3.x#toc_computed-property-override for more details.
                    at logDeprecationStackTrace (http://localhost:7357/assets/vendor.js:47026:21)
                    at HANDLERS.<computed> (http://localhost:7357/assets/vendor.js:47123:9)
                    at raiseOnDeprecation (http://localhost:7357/assets/vendor.js:47053:9)
                    at HANDLERS.<computed> (http://localhost:7357/assets/vendor.js:47123:9)
                    at invoke (http://localhost:7357/assets/vendor.js:47135:9)
                    at deprecate (http://localhost:7357/assets/vendor.js:47091:28)
                    at ComputedProperty.clobberSet (http://localhost:7357/assets/vendor.js:26165:49)
                    at ComputedProperty.set (http://localhost:7357/assets/vendor.js:26133:21)
                    at initialize (http://localhost:7357/assets/vendor.js:39784:24)

Update EmberFire to v3.0rc

fix computed-property.override deprecation

Run npm test in the terminal for details.

Add prettier formatter

https://gist.github.com/alexdiliberto/bdb0096aa63dabc1d6f389df564fc10c
https://github.com/ember-template-lint/ember-template-lint-plugin-prettier

Fix all the yarn lint:hbs linting error with upgrading syntax

Run yarn lint:hbs. There are 47 errors reported...

Upgrading templates to the latest format would fix these issues.

_parent.type is undefined

I'm on lesson 6 where we work on seeding the database with randomly generated data. I'm able to generate seed data for library. I'm facing issues when it comes to generating authors and books. The issue pops up only if the record count is more than 1. You can view my code here https://github.com/sureshprasanna70/yoember.

FIREBASE WARNING: Exception was thrown by user callback. getFirstEmbeddingParent@http://localhost:4200/assets/vendor.js:146509:13
_getAbsoluteRef@http://localhost:4200/assets/vendor.js:146469:34
updateRecord@http://localhost:4200/assets/vendor.js:146225:28
createRecord@http://localhost:4200/assets/vendor.js:146205:19
_commit/promise<@http://localhost:4200/assets/vendor.js:137203:77
tryCatcher@http://localhost:4200/assets/vendor.js:63901:21
invokeCallback@http://localhost:4200/assets/vendor.js:64073:33
then/<@http://localhost:4200/assets/vendor.js:64137:16
@http://localhost:4200/assets/vendor.js:58989:16
invoke@http://localhost:4200/assets/vendor.js:57473:24
flush@http://localhost:4200/assets/vendor.js:57385:25
flush@http://localhost:4200/assets/vendor.js:57558:31
_end@http://localhost:4200/assets/vendor.js:58056:42
end@http://localhost:4200/assets/vendor.js:57776:18
_run@http://localhost:4200/assets/vendor.js:58101:26
run@http://localhost:4200/assets/vendor.js:57819:25
run@http://localhost:4200/assets/vendor.js:46165:27
callback@http://localhost:4200/assets/vendor.js:147407:29
jb/<@http://localhost:4200/assets/vendor.js:122574:1149
Ah/<@http://localhost:4200/assets/vendor.js:122748:49
fc@http://localhost:4200/assets/vendor.js:122587:166
Ah@http://localhost:4200/assets/vendor.js:122748:24
g.update/<@http://localhost:4200/assets/vendor.js:122744:435
Kg/<@http://localhost:4200/assets/vendor.js:122705:168
g.wd@http://localhost:4200/assets/vendor.js:122706:105
og.prototype.wd@http://localhost:4200/assets/vendor.js:122696:365
qg/<@http://localhost:4200/assets/vendor.js:122694:282
ag@http://localhost:4200/assets/vendor.js:122678:465
Yf.prototype.open/this.Ia.onmessage@http://localhost:4200/assets/vendor.js:122677:246
_selectRandomLibrary@http://localhost:4200/assets/yoember.js:295:7
_generateSomeBooks@http://localhost:4200/assets/yoember.js:271:30
generateBooksAndAuthors/books<@http://localhost:4200/assets/yoember.js:223:73
tryCatcher@http://localhost:4200/assets/vendor.js:63901:21
invokeCallback@http://localhost:4200/assets/vendor.js:64073:33
publish@http://localhost:4200/assets/vendor.js:64059:9
@http://localhost:4200/assets/vendor.js:58989:16
invoke@http://localhost:4200/assets/vendor.js:57473:24
flush@http://localhost:4200/assets/vendor.js:57385:25
flush@http://localhost:4200/assets/vendor.js:57558:31
_end@http://localhost:4200/assets/vendor.js:58056:42
end@http://localhost:4200/assets/vendor.js:57776:18
_run@http://localhost:4200/assets/vendor.js:58101:26
run@http://localhost:4200/assets/vendor.js:57819:25
run@http://localhost:4200/assets/vendor.js:46165:27
callback@http://localhost:4200/assets/vendor.js:147407:29
jb/<@http://localhost:4200/assets/vendor.js:122574:1149
Ah/<@http://localhost:4200/assets/vendor.js:122748:49
fc@http://localhost:4200/assets/vendor.js:122587:166
Ah@http://localhost:4200/assets/vendor.js:122748:24
g.update/<@http://localhost:4200/assets/vendor.js:122744:435
Kg/<@http://localhost:4200/assets/vendor.js:122705:168
g.wd@http://localhost:4200/assets/vendor.js:122706:105
og.prototype.wd@http://localhost:4200/assets/vendor.js:122696:365
qg/<@http://localhost:4200/assets/vendor.js:122694:282
ag@http://localhost:4200/assets/vendor.js:122678:465
Yf.prototype.open/this.Ia.onmessage@http://localhost:4200/assets/vendor.js:122677:246
 firebase.amd.js:853

TypeError: _parent.type is undefined firebase.js:689

My package.json

{
  "name": "yoember",
  "version": "0.0.0",
  "private": true,
  "description": "Small description for yoember goes here",
  "repository": "",
  "license": "MIT",
  "author": "",
  "directories": {
    "doc": "doc",
    "test": "tests"
  },
  "scripts": {
    "build": "ember build",
    "lint:hbs": "ember-template-lint .",
    "lint:js": "eslint .",
    "start": "ember serve",
    "test": "ember test"
  },
  "devDependencies": {
    "@ember/jquery": "^0.5.2",
    "@ember/optional-features": "^0.6.3",
    "broccoli-asset-rev": "^2.7.0",
    "ember-ajax": "^3.1.0",
    "ember-cli": "~3.7.1",
    "ember-cli-app-version": "^3.2.0",
    "ember-cli-babel": "^7.1.2",
    "ember-cli-bootstrap-sassy": "^0.5.8",
    "ember-cli-dependency-checker": "^3.0.0",
    "ember-cli-eslint": "^4.2.3",
    "ember-cli-htmlbars": "^3.0.0",
    "ember-cli-htmlbars-inline-precompile": "^1.0.3",
    "ember-cli-inject-live-reload": "^1.8.2",
    "ember-cli-sass": "^10.0.1",
    "ember-cli-shims": "^1.2.0",
    "ember-cli-sri": "^2.1.1",
    "ember-cli-template-lint": "^1.0.0-beta.1",
    "ember-cli-uglify": "^2.1.0",
    "ember-data": "~3.7.0",
    "ember-export-application-global": "^2.0.0",
    "ember-faker": "^1.5.0",
    "ember-load-initializers": "^1.1.0",
    "ember-maybe-import-regenerator": "^0.1.6",
    "ember-qunit": "^3.4.1",
    "ember-resolver": "^5.0.1",
    "ember-source": "~3.7.0",
    "ember-welcome-page": "^3.2.0",
    "emberfire": "^2.0.10",
    "eslint-plugin-ember": "^5.2.0",
    "loader.js": "^4.7.0",
    "qunit-dom": "^0.8.0",
    "sass": "^1.20.1"
  },
  "engines": {
    "node": "6.* || 8.* || >= 10.*"
  }
}

Any help would be appreciated. Thanks

Migrate bootstrap-sassy to ember-bootstrap

https://www.ember-bootstrap.com/#/

Fix `author-select` test

not ok 2 Chrome 80.0 - [undefined ms] - Global error: Uncaught TypeError: this.onChange is not a function at http://localhost:7357/assets/library-app.js, line 176
 While executing test: Integration | Component | author-select: it renders
    ---
        browser log: |
            testContext: [object Object]
            ERROR: Uncaught TypeError: this.onChange is not a function at http://localhost:7357/assets/library-app.js, line 176

not ok 3 Chrome 80.0 - [115 ms] - Integration | Component | author-select: it renders
    ---
        actual: >
            Tanya Gutmann
        expected: >
            Rodrick Connelly
        stack: >
                at Object.<anonymous> (http://localhost:7357/assets/tests.js:139:14)
        message: >
            component renders with default author selected
        negative: >
            false
        browser log: |

not ok 98 Chrome 80.0 - [42 ms] - Unit | Component | author-select: default action exists
    ---
        actual: >
            null
        stack: >
            Error: Failed to create an instance of 'component:author-select'. Most likely an improperly defined class or an invalid module export.
                at FactoryManager.create (http://localhost:7357/assets/vendor.js:11812:15)
                at instantiateFactory (http://localhost:7357/assets/vendor.js:11642:29)
                at lookup (http://localhost:7357/assets/vendor.js:11556:12)
                at Container.lookup (http://localhost:7357/assets/vendor.js:11397:14)
                at Class.lookup (http://localhost:7357/assets/vendor.js:38067:33)
                at Object.<anonymous> (http://localhost:7357/assets/tests.js:668:35)
                at callHook (http://localhost:7357/assets/test-support.js:21514:25)
                at runHook (http://localhost:7357/assets/test-support.js:21539:7)
                at processTaskQueue (http://localhost:7357/assets/test-support.js:21068:24)
                at advanceTaskQueue (http://localhost:7357/assets/test-support.js:21053:4)
        message: >
            beforeEach failed on default action exists: Failed to create an instance of 'component:author-select'. Most likely an improperly defined class or an invalid module export.
        negative: >
            false
        browser log: |
    ...
not ok 99 Chrome 80.0 - [27 ms] - Unit | Component | author-select: change handler function
    ---
        actual: >
            null
        stack: >
            Error: Failed to create an instance of 'component:author-select'. Most likely an improperly defined class or an invalid module export.
                at FactoryManager.create (http://localhost:7357/assets/vendor.js:11812:15)
                at instantiateFactory (http://localhost:7357/assets/vendor.js:11642:29)
                at lookup (http://localhost:7357/assets/vendor.js:11556:12)
                at Container.lookup (http://localhost:7357/assets/vendor.js:11397:14)
                at Class.lookup (http://localhost:7357/assets/vendor.js:38067:33)
                at Object.<anonymous> (http://localhost:7357/assets/tests.js:668:35)
                at callHook (http://localhost:7357/assets/test-support.js:21514:25)
                at runHook (http://localhost:7357/assets/test-support.js:21539:7)
                at processTaskQueue (http://localhost:7357/assets/test-support.js:21068:24)
                at advanceTaskQueue (http://localhost:7357/assets/test-support.js:21053:4)
        message: >
            beforeEach failed on change handler function: Failed to create an instance of 'component:author-select'. Most likely an improperly defined class or an invalid module export.
        negative: >
            false
        browser log: |
    ...

beforeEach and async pattern in seeder controller

Investigate and resolve questions raised in #73.

Not Ember Octane Syntax

This is a good repo for a new learner. But...

This app does not implement the new Ember Octane syntax.

So who might follow this based on the title of this repo will be misguided/misinformed.
Therefore, I think either the syntax should be updated or the title should be changed.
:-)

Thank you and Good luck!