Ember Tutorial

[toddjordan]

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.