Join GitHub today
GitHub is home to over 36 million developers working together to host and review code, manage projects, and build software together.Sign up
Ember Tutorial #1374
This is a continuation of what started in issue #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.
Standards for Each Tutorial Page
Our addon examples will use Mirage and a custom CSS addon we've written to decorate our website. This section should occur early in the tutorial so as pages are create they are instantly styled. Also we want to employ Mirage as our datasource.
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.
Writing an acceptance test
As a good basic intro to acceptance testing, we want to show how we can write a test to exercise the basic initial load of the page and test one of the routes. We'll do this early, after we've installed mirage, but before creating most of the page content.
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.
There's a current PR out there #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
Right now we just do index route and and the about route. I'd like to add a sub-route for rental details
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.
This was referenced
Apr 15, 2016
This was referenced
Apr 25, 2016
referenced this issue
May 2, 2016
As someone who spent the last year learning Ember, I'd love to help contribute. I'd be willing to take a couple stabs at the nested-routes tutorial. I actually did a screencast of a similar scenario:
Was thinking of a details route that takes the
An editing route may be more complicated since my assumption would be to handle saving the records, which may be out of the scope of a beginning tutorial.
For my own clarification: are contributors supposed to open a PR against super-rentals repo with all the changes?
Re: a PR against super-rentals, we’ve been trying to keep things in sync, but having the PR to guides is probably more important. Happy to have you work on the tutorial if you’d like. Fair warning: we’re quite hard on those tutorials (text, code, etc) because they’re so central. Todd Jordan has been getting a ton of feedback on his PRs ;-) So we’d love to get the help, but look out if you send in a PR :-D
On May 13, 2016, at 3:17 PM, Scott Batson email@example.com wrote:
Thanks for the quick response @acorncom. I thought I would start with the PR against super-rentals just to make sure I'm on the right path. Here is a quick stab at subroutes:
I changed my mind on an edit sub-route. I thought we would add an
Hi @sbatson5 , Thanks for your willingness to help. We would love it! Here are some of my thoughts from the subroute tutorial:
@toddjordan Was going to try a first draft this weekend. If you have time, would you mind looking over the PR here to see if I am on the right track as to what you envisioned: https://github.com/emberjs/super-rentals/pull/24/files.
Not sure I follow what you mean by using
I added a
In the router, we update the
Then, in the
In terms of testing, I wrote a unit test for the
Thanks in advance!