IMPORTANT! Working w/Exoplanet Explorer

What is this?

You'll be working with a stripped down version of the Exoplanet Explorer to complete all of the programming quizzes for the rest of the course. So, you need to install it.

Installation

Instructions: (this will also download polymer starter kit and install it

git clone https://github.com/udacity/exoplanet-explorer.git

cd exoplanet-explorer

npm install -g gulp bower

npm install && bower install -f polymer-starter-kit

gulp serve

Reference:https://stackoverflow.com/questions/50281186/my-local-server-cant-find-bower-files-when-i-run-my-application/50997199#50997199

https://github.com/udacity/exoplanet-explorer/issues/13

clone branch

git clone <git-url> - b <branch-name>

I built the Exoplanet Explorer from the PolymerStarter Kit. I'm copying most of the rest of these instructions from the README written by the Polymer team. If you ever need help, check out the README.

Clone the repo first (for everyone)

Here's thelink to the repo.

You should be on thexhr-startbranch. If not, thengit checkout xhr-startorgit checkout origin xhr-start.

Quick-start (for experienced users)

With Node.js installed, run the following one liner from the root of your Exoplanet Explorer download:

npm install -g gulp bower && npm install&& bower install

Prerequisites (for everyone)

The full starter kit requires the following major dependencies:

  • Node.js, used to run JavaScript tools from the command line.
  • npm, the node package manager, installed with Node.js and used to install Node.js packages.
  • gulp, a Node.js-based build tool.
  • bower, a Node.js-based package manager used to install front-end packages (like Polymer).

To install dependencies:

1) Check your Node.js version.

node --version

The version should be at or above 0.12.x.

2) If you don't have Node.js installed, or you have a lower version, go tonodejs.organd click on the big green Install button.

3) Installgulpandbowerglobally.

npm install -g gulp bower

This lets you rungulpandbowerfrom the command line.

4) Install the starter kit's localnpmandbowerdependencies.

cd exoplanet-explorer && npm install&& bower install

This installs the element sets (Paper, Iron, Platinum) and tools the starter kit requires to build and serve apps.

NOTE! INSTALLATION MAY TAKE A LONG TIME!There are many dependencies to download and install.

Post-Installation and Workflow

For every quiz, you'll be given a branch to checkout. You can always find it in the instructor notes. All of your work will be done in:

app/scripts/app.js

Serve / watch

gulp  serve

This outputs an IP address you can use to locally test and another that can be used on devices connected to your network.

It's recommended to use Chrome, as non-vulcanized Polymer projects will load fastest on Chrome.

Build & Vulcanize

gulp

Build and optimize the current project, ready for deployment. This includes linting as well as vulcanization, image, script, stylesheet and HTML optimization and minification.

Troubleshooting

Seethis bugif you get the following error from Gyp:

"Error: self signed certificate in certificate chain"

11. Quiz: Wrap an XHR

Instructions

  1. If you haven't already, read this and follow the instructions on working with the Exoplanet Explorer repo.
  2. Checkout the xhr-start branch and navigate to app/scripts/app.js.
  3. Wrap the XHR in a Promise in the get() function. See XHR documentation for more information.
  4. Resolve on load and reject on error.
  5. If the XHR resolves, use addSearchHeader() to add the search header to the page.
  6. If the XHR fails, console.log() the error and pass 'unknown' to addSearchHeader().

Answer Video

12. Web Technologies

Issues with jQuery Promises:

Q Style Promises

Browser Implementation

APIs that Use Promises

13. Quiz: Fetch API

Instructions

  1. If you haven't already, read this and follow the instructions on working with the Exoplanet Explorer repo .
  2. Checkout the fetch-start branch and navigate to app/scripts/app.js.
  3. Rewrite get with the Fetch API: https://davidwalsh.name/fetch
  4. Finish the getJSON() method, which should take a URL and return the parsed JSON response.
    • getJSON() needs to return a Promise!
  5. Test by logging the response and by passing the query string from getJSON() to addSearchHeader().
  6. Handle errors by passing 'unknown' to addSearchHeader() and logging them.

Fetch API Walkthrough

Checkout thefetch-solutionbranch to see my code.

Answer Video

14 What Happens Next?

"Thenable" used in context of promises on MDN.

results matching ""

    No results matching ""