Giter Site home page Giter Site logo

ember-learn / super-rentals Goto Github PK

View Code? Open in Web Editor NEW
160.0 27.0 174.0 4.91 MB

Codebase for the Super Rentals official tutorial

Home Page: https://guides.emberjs.com/release/tutorial/

JavaScript 64.46% HTML 11.03% CSS 14.62% Handlebars 9.88%
emberjs ember

super-rentals's Introduction

This project uses GitHub Actions for continuous integration.

Super Rentals

Deploy

This is a working repository for the Super Rentals tutorial, which you can check out at https://guides.emberjs.com/release/tutorial/.

Prerequisites

You will need the following things properly installed on your computer.

Installation

  • git clone <repository-url> this repository
  • cd super-rentals
  • yarn install

Running / Development

Code Generators

Make use of the many generators for code, try ember help generate for more details

Running Tests

  • ember test
  • ember test --server

Linting

  • yarn lint:hbs
  • yarn lint:js
  • yarn lint:js --fix

Building

  • MAPBOX_ACCESS_TOKEN=YOUR_TOKEN ember build (development)
  • MAPBOX_ACCESS_TOKEN=YOUR_TOKEN ember build --environment production (production)

Deploying

Specify what it takes to deploy your app.

Further Reading / Useful Links

super-rentals's People

Contributors

acorncom avatar bradenlawrence avatar camelcased avatar chancancode avatar code0100fun avatar dayton-bobbitt avatar derekbassett avatar dhaulagiri avatar dkim-95112 avatar dpk101 avatar ember-tomster avatar ewusipee avatar guustnieuwenhuis avatar hankfanchiu avatar hone avatar ijlee2 avatar jenweber avatar joaogfarias avatar kennethlarsen avatar locks avatar mansona avatar marpo60 avatar rmminusrfslash avatar rwjblue avatar salbador avatar sivakumar-kailasam avatar stdavis avatar toddjordan avatar yawboakye avatar ybakos avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

super-rentals's Issues

Testing Error

Following the tutorial, the code on this section is giving me an error:
https://guides.emberjs.com/v2.9.0/tutorial/routes-and-templates/#toc_an-index-route

I wrote the code initially but when I noticed the error I copy and pasted it just to be sure. By the end of this section of the tutorial, the test Acceptance | list rentals: should redirect to rentals route should be passing, but it is not. The test logs the following error:

Expected: "rentals"
Result: "/rentals"
Diff: "/rentals"

I've tried changing the assertion to expect "/rentals" but it remains expecting "rentals".

mapbox API key required?

When I clone and run master locally I don't see the maps and I see 3 mapbox API requests that fail with Failed to load resource: the server responded with a status of 401 (Unauthorized):

image

I don't see anything in the instructions about how to configure an API key, though I do see this:

super-rentals/app.json

Lines 12 to 14 in 288834b

"GOOGLE_MAPS_API_KEY": {
"description": "Google API KEY for Google Maps, https://developers.google.com/maps/documentation/javascript/get-api-key",
"required": true

Which seems possibly outdated?

I see the same errors with what is currently deployed at https://ember-learn-super-rentals.herokuapp.com/rentals

[Suggestion] Copy/Paste Issue

There is an issue when copy-pasting code from the official website in VSCode, namely the - (dash) is being copied as \U+2013 which is the n-dash character (ref: https://www.compart.com/en/unicode/U+2013).

VSCode will highlight this:

image

If your editor doesn't warn about this, you'll notice the tests are failing, but without indication as to why its failing:

not ok 16 Chrome 103.0 - [39 ms] - Integration | Component | rental/detailed: it renders detailed information about a rental property
    ---
        actual: >
            Type: Standalone - Estate
        expected: >
            Standalone – Estate
        stack: >
                at DOMAssertions.includesText (http://localhost:7357/assets/test-support.js:9731:12)
                at DOMAssertions.containsText (http://localhost:7357/assets/test-support.js:9741:19)
                at Object.<anonymous> (http://localhost:7357/assets/tests.js:406:42)
        message: >
            Element article .detail.type has text containing "Standalone – Estate"
        negative: >
            false
        browser log: |
    ...

I think this should be added as a warning as it seems to be specific to VSCode (as WebStorm doesn't have this problem).

Missing / incomplete integration test

Hi, I've been working through v3.0.0 of the tutorial. On the page Creating a Handlebars Helper I'm having trouble getting the integration tests to pass (see attached screen shot).

When I look to the official repo to compare code, I can't find the corresponding file that would contain these integration tests:
\super-rentals\tests\integration\helpers\rental-property-type-test.js

rental-property-type-test

Remove use of jQuery

Octane coming up means that we need to remove jquery if we want to be able to work off the stock blueprint. We rely on Ember-ajax (through the maps addon?) and I think that's the main thing to fix.

To-do:

  • find where we use jquery (may include the leaflets map addon)
  • refactor the addon to not use jquery
  • update dependency on ember-simple-leaflet-maps to v 0.3
  • open a PR to master

Fail on bower install

$ ember --version

ember-cli: 2.12.0
node: 7.7.3
os: linux x64

$ git clone https://github.com/ember-learn/super-rentals.git

$ npm install

Installing stuff…

$ bower install

module.js:472
    throw err;
    ^

Error: Cannot find module 'internal/fs'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at evalmachine.<anonymous>:18:20
    at Object.<anonymous> (/usr/lib/node_modules/bower/node_modules/graceful-fs/fs.js:11:1)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)

$ ember --version

Missing bower packages: 
Package: pretender
  * Specified: ~0.10.1
  * Installed: (not installed)

Package: Faker
  * Specified: ~3.0.0
  * Installed: (not installed)

Run `bower install` to install missing dependencies.

Update code to use `{{this.property}}` syntax where appropriate

In an effort to clarify where a value in a template interpolation comes from ({{}}), we started prefixing local properties (that belong to the Controller/Component of the respective template) with this, like the following:

import Component from '@ember/component';

export default Component.extend({
  framework: 'Ember.js'
});
{{this.framework}}

This repository needs to be updated to match v3.6 of the Guides.

Wide property CSS is conflicting and doesn't work as intended

.listing .wide {
  max-width: 100%;
  position: relative;
  z-index: 999;
}

.listing .wide img {
  height: initial;
  width: 100%;
}

.listing .wide small {
  display: none;
}

.listing a.image {
  max-width: 150px;
  display: block;
}

Since max-width is set to 150px, and the default is set to 136px, a toggle on the image doesn't fill the container width, and only expands to 150px. Hence, the image shown on the Ember Tutorial page is not the actual end result when going through the tutorial.

This is also in addition to the 'View Larger' not being centered as shown in the image. I would submit a pull request, but I just wanted to be sure I have correctly diagnosed the issue and that it's not just me with the problem. :)

Attachments with the default behaviour:

issue-1
issue-2

demo heroku app is missing Google Maps API

When running the demo app (https://ember-learn-super-rentals.herokuapp.com/rentals) the google map is not working (looks broken)

from the developer console:

Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error
_.rb @ js?v=3.22:35
util.js:216 Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys
uB.j @ util.js:216
util.js:216 Google Maps API warning: RetiredVersion https://developers.google.com/maps/documentation/javascript/error-messages#retired-version
uB.j @ util.js:216

I was easily able to use the "Deploy to Heroku" function to successfully run the application, after generating a map api key and adding to the "Config Vars".

I expect the demo version just needs a new key to be generated and added to the heroku dashboard for the app.

Ember-cli generate test problem.

When i try ember g acceptance-test list-rentals . It just return installing acceptance-test without file created.

ember-cli: 2.11.1
node: 6.9.4
npm: 3.10.10
os: win32 x64

GoogleMaps error

creating the maps on the listing throws a GoogleMaps error:
InvalidValueError: setTitle: not a string

The issue is that in /app/utils/google-maps.js, on line 20, the argument 'location' of the 'pinLocation' function is overwritten. While on line 23 the original value is expected.

This should also be corrected in the tutorial.

Config/environment import in app.js

I have the following question: the import directive of the environment.js module on app.js file is './config/environment' instead of '../config/environment/'. Although it works as expected, I cannot understand how does it work, and why the more obvious '../config/environment/' doesn't work.

Add useful tests.

This would provide useful references to writing testcases for people using super-rentals as a reference.

Ember Tutorial

This is a continuation of what started in issue emberjs/guides#445

Goal: to create guided tutorial, geared towards people new to Ember. This will be some people's first experience with the techology, so we want to make it show off the basics of creating an application from scratch. At the end of the tutorial the developer should have an understanding of the basic concepts of ember and ember-cli and be able to create and deploy a basic ember application from scratch.

The tutorial will lead the user through the process of creating a vacation rental app called "Super Rentals". MVP of the app will be to allow perspective renters to browse available properties.

  • Creating a new app
  • Routes and Templates
  • The Model Hook
  • A Simple Component
  • Handlebars Helper
  • A Complex Component
  • Service
  • Nested Routes
  • Using Addons
  • Integrate testing into existing tutorials
  • Links to the super-rentals repo
  • Update tutorial to new page design

Standards for Each Tutorial Page

  • Clear language adhering to guides contributing standards: https://github.com/emberjs/guides/blob/master/CONTRIBUTING.md
  • Each Tutorial Page should be written in a step-by-step format, guiding the user through how they would build it themselves
  • Examples tailored to someone new to ember, showing off basic concepts while not diving into complex approaches
  • Testing should be incorporated into each functionality described.
  • The super-rentals repo should be updated with working code (and tests): https://github.com/emberjs/super-rentals

Complex Component

the autocomplete section already exists, but it needs to be improved. Right now it does an autocomplete dropdown of the properties that are already right below it. Also the dropdown is unstyled and looks pretty bad. I'd like to tweak the component to just be a filter of the list below, so no "search" button and no dropdown.

Service

There's a current PR out there emberjs/guides#1289 , but in hindsight I think its a bit complicated for a first time ember app. I'm going to simplify this into a basic map display of the location

Nested Routes

Right now we just do index route and and the about route. I'd like to add a route for rental details and then a nested route under that, maybe for editing a rental, or for displaying picture vs a map.

Using addons

For an addon example the original issue has using pagefront and dotenv. I'm fine with this as it will get a first time ember using deploying their app somewhere. Would like some feedback on whether the pagefront plugin is still the thing to suggest.

An alternative is creating an addon for adding styles into the addon (suggested by tom dale) This would show how to install the addon, plus give the app a nice look and feel without having to include css in the tutorials.

Integrate testing into existing tutorials

As test is a first class citizen in Ember, we need to incorporate testing into each tutorial page. That means test is a must for any new section we add, and we also need to go back to sections we've already done and add it as well. We should make use of Unit, Integration, and Acceptance tests to give developers a good idea of what each does and when to use them.

Links to super-rentals

The completed tutorial lives in its own repo, and we should link back to that repo so developers can download and try for themselves, or use as a reference.

Update to new Page Design

Here's a rough drawing of the screen flow. Trying to keep it really simple so that the CSS work is light Not sure how I'll handle nested routes. Ideas appreciated. I was thinking Edit would be a good place, or a reserve page. I could also open a bigger view of the map when you click on it.

image

Install instructions do NOT work

Today I just wanted to do some research about how cool ember octane is because I wanted to see some really good architectural brilliance and wanted to delight myself with glancing at admirable code, after spending some weeks in very dark areas of web dev I need that.

I cloned the repo, did yarn install and ember serve and I get this:

user@bionic:~/tmp/ember/super-rentals -> ember serve
Required packages are missing, run `yarn install` from this directory to install them.

user@bionic:~/tmp/ember/super-rentals -> yarn install
➤ YN0000: ┌ Resolution step
➤ YN0002: │ ember-cli-babel@npm:6.17.2 doesn't provide @babel/core@^7.0.0-beta.42 requested by babel-plugin-debug-macros@npm:0.2.0
➤ YN0002: │ ember-cli-typescript@npm:2.0.0 doesn't provide @babel/core@^7.0.0-0 requested by @babel/plugin-proposal-class-properties@npm:7.4.0
➤ YN0002: │ ember-cli-typescript@npm:2.0.0 doesn't provide @babel/core@^7.0.0-0 requested by @babel/plugin-transform-typescript@npm:7.4.0
➤ YN0002: │ ember-compatibility-helpers@npm:1.1.2 doesn't provide @babel/core@^7.0.0-beta.42 requested by babel-plugin-debug-macros@npm:0.2.0
➤ YN0000: └ Completed in 0.31s
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed in 0.66s
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed in 1.89s
➤ YN0000: Done with warnings in 2.93s
user@bionic:~/tmp/ember/super-rentals -> ember serve
Required packages are missing, run `yarn install` from this directory to install them.

I did already a yarn install before which generated of course much more output, the fragments above show that I did try that again after that frustrating ember serve.

It just does not work on step 1.

Now I am very hungry.

Google Maps API error

When running the demo app (https://ember-learn-super-rentals.herokuapp.com/rentals) the google map is not working (looks broken).

from the developer console:

Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error
_.rb @ js?v=3.22:35

Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys
JB.j @ util.js:222
(anonymous) @ js?v=3.22:134
(anonymous) @ js?v=3.22:53
(anonymous) @ js?v=3.22:50
(anonymous) @ js?v=3.22:53
(anonymous) @ js?v=3.22:105
(anonymous) @ js?v=3.22:50
(anonymous) @ js?v=3.22:105
Sc @ js?v=3.22:52
Rc.jb @ js?v=3.22:105
(anonymous) @ stats.js:1
util.js:222 Google Maps API warning: RetiredVersion https://developers.google.com/maps/documentation/javascript/error-messages#retired-version

this.namespace = '/api' causes Mirage to crash.

Hi,

While going through the Building a complex component part of the tutorial, the app start crashing with the following message in the console:


assert.js:35 Mirage: Your Ember app tried to GET '/rentals',
         but there was no route defined to handle this request.
         Define a route that matches this path in your
         mirage/config.js file. Did you forget to add your namespace?

MirageError @ assert.js:35
assert @ assert.js:9
unhandledRequest @ server.js:47
handleRequest @ pretender.js:397
send @ pretender.js:164
send @ jquery.js:9566
ajax @ jquery.js:9173
_ajaxRequest @ rest.js:630
(anonymous) @ rest.js:626
initializePromise @ rsvp.js:453
Promise @ rsvp.js:919
ajax @ rest.js:609
findAll @ rest.js:359
_findAll @ -private.js:8768
_fetchAll @ -private.js:11464
findAll @ -private.js:11432
filterByCity @ rentals.js:14
join @ backburner.js:576
run.join @ ember-metal.js:4309
(anonymous) @ action.js:390
exports.flaggedInstrument @ ember-metal.js:3730
(anonymous) @ action.js:389
init @ list-filter.js:16
superWrapper @ ember-utils.js:426
Class @ core_object.js:113
_ClassMixinProps.create @ core_object.js:283
create @ container.js:391
create @ container.js:135
create @ curly.js:178
(anonymous) @ runtime.js:1671
evaluate @ runtime.js:70
next @ runtime.js:7244
next @ runtime.js:7315
RootState.render @ renderer.js:62
exports.runInTransaction @ ember-metal.js:641
_renderRoots @ renderer.js:341
_renderRootsTransaction @ renderer.js:379
_renderRoot @ renderer.js:299
_appendDefinition @ renderer.js:209
appendOutletView @ renderer.js:192
invoke @ backburner.js:272
flush @ backburner.js:153
flush @ backburner.js:345
end @ backburner.js:455
run @ backburner.js:539
join @ backburner.js:546
run.join @ ember-metal.js:4309
(anonymous) @ ember-metal.js:4382
mightThrow @ jquery.js:3583
process @ jquery.js:3651
setTimeout (async)
(anonymous) @ jquery.js:3689
fire @ jquery.js:3317
fireWith @ jquery.js:3447
fire @ jquery.js:3455
fire @ jquery.js:3317
fireWith @ jquery.js:3447
ready @ jquery.js:3920
completed @ jquery.js:3930
assert.js:36 MirageError {description: "Mirage: undefined", fileName: undefined, lineNumber: undefined, message: "Mirage: Your Ember app tried to GET '/rentals',↵  …ig.js file. Did you forget to add your namespace?", name: "Error", …}
MirageError @ assert.js:36
assert @ assert.js:9
unhandledRequest @ server.js:47
handleRequest @ pretender.js:397
send @ pretender.js:164
send @ jquery.js:9566
ajax @ jquery.js:9173
_ajaxRequest @ rest.js:630
(anonymous) @ rest.js:626
initializePromise @ rsvp.js:453
Promise @ rsvp.js:919
ajax @ rest.js:609
findAll @ rest.js:359
_findAll @ -private.js:8768
_fetchAll @ -private.js:11464
findAll @ -private.js:11432
filterByCity @ rentals.js:14
join @ backburner.js:576
run.join @ ember-metal.js:4309
(anonymous) @ action.js:390
exports.flaggedInstrument @ ember-metal.js:3730
(anonymous) @ action.js:389
init @ list-filter.js:16
superWrapper @ ember-utils.js:426
Class @ core_object.js:113
_ClassMixinProps.create @ core_object.js:283
create @ container.js:391
create @ container.js:135
create @ curly.js:178
(anonymous) @ runtime.js:1671
evaluate @ runtime.js:70
next @ runtime.js:7244
next @ runtime.js:7315
RootState.render @ renderer.js:62
exports.runInTransaction @ ember-metal.js:641
_renderRoots @ renderer.js:341
_renderRootsTransaction @ renderer.js:379
_renderRoot @ renderer.js:299
_appendDefinition @ renderer.js:209
appendOutletView @ renderer.js:192
invoke @ backburner.js:272
flush @ backburner.js:153
flush @ backburner.js:345
end @ backburner.js:455
run @ backburner.js:539
join @ backburner.js:546
run.join @ ember-metal.js:4309
(anonymous) @ ember-metal.js:4382
mightThrow @ jquery.js:3583
process @ jquery.js:3651
setTimeout (async)
(anonymous) @ jquery.js:3689
fire @ jquery.js:3317
fireWith @ jquery.js:3447
fire @ jquery.js:3455
fire @ jquery.js:3317
fireWith @ jquery.js:3447
ready @ jquery.js:3920
completed @ jquery.js:3930
ember-metal.js:3927 Mirage: Your Ember app tried to GET '/rentals',
         but there was no route defined to handle this request.
         Define a route that matches this path in your
         mirage/config.js file. Did you forget to add your namespace?
Mirage: Error: Your Ember app tried to GET '/rentals',
         but there was no route defined to handle this request.
         Define a route that matches this path in your
         mirage/config.js file. Did you forget to add your namespace?
    at new MirageError (http://localhost:4200/assets/vendor.js:122006:21)
    at assert (http://localhost:4200/assets/vendor.js:121992:13)
    at Pretender.unhandledRequest (http://localhost:4200/assets/vendor.js:127122:46)
    at Pretender.handleRequest (http://localhost:4200/assets/vendor.js:67202:14)
    at FakeRequest.send (http://localhost:4200/assets/vendor.js:66969:17)
    at Object.send (http://localhost:4200/assets/vendor.js:9907:10)
    at Function.ajax (http://localhost:4200/assets/vendor.js:9514:15)
    at Class._ajaxRequest (http://localhost:4200/assets/vendor.js:172229:15)
    at http://localhost:4200/assets/vendor.js:172225:17
    at initializePromise (http://localhost:4200/assets/vendor.js:63620:7)

Removing this.namespace = '/api'; Fixes this and everything works fine again. Why is this happening?

Alternative to yarn install

I tried to install yarn way and it will not succeed in my Ubuntu 16.04 LTS setup which is as

4.10.0-35-generic #39~16.04.1-Ubuntu SMP Wed Sep 13 09:02:42 UTC 2017 x86_64 x86_64 x86_64 GNU/Linux

Ubuntu tells me to install cmdtest instead. I installed cmdtest. yarn gets installed and it will not recognize install parameter. I spent lot of time. I found package.json file in super rentals directory. So, I used "npm install" to install the sample app. It worked and I could bring up SuperRentals website at localhost:4200.

Just wanted to share my findings with folks who have issue installing yarn way.

Thanks,

Sunil Sabat

License

I see the project has several forks, but no license to clearly state what are the limitations of the usage of the code.

IMO, it would be interesting to have a license so forkers can know what they can do with this code.

image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.