Front End Web Development

Spark Boulder, Summer 2017

Session 14: The Phantom Session

Coin Flipping App project Show-and-Tell, Lab session

More Dumb Fun Web Stuff

XKCD’s Simple Writer

http://xkcd.com/simplewriter/

A box for writing words where you can only use the ten hundred words that people use the most often.

5 more sessions to go!

Coin Flipping App Show and Tell!

Anybody want to show off what they've got so far?

THE FINAL PROJECT

SFEWDSSS

I'm going to have you create the front end of a very simple social media site. We'll call it the "Spark Front End Web Development Student Social Site", or SFEWDSSS for short.

Your site should have two pages.

The first page should be your news feed. Every time someone goes to it, they'll be able to see all of the most recent posts by everyone on the SFEWDSSS. I'd recommend that this is your index.html, so that whenever people go to http://kens-super-social-media-site.site44.com/ they'll see the main page.

The second page should be your posting page. It will allow you to create new posts on the SFEWDSSS. It should be a secret! Don't include a link to it on your main page. Only you should know which page you should go to in order to create a new post. Your URL for this page will probably be something like http://kens-super-social-media-site.site44.com/kens-super-secret-posting-page.html.

but wait...don't these kinds of sites require a backend?

That's correct! That's why I've built one for you.

Generally, big social media sites like these require you to be able to log in, and edit your profile, and all sorts of complicated backend stuff. This isn't backend web dev, so I'm not going to make any of you do that!

The official documentation for the Spark Front End Web Development Student Social Site API is located at https://spark-class-social-network-api.hoff.tech. You'll use a couple of the provided URLs to make requests in order to get and create posts on SFEWDSSS.

The Social Network Front End Project

For your final project, I'm going to have you create the front end to the Spark Front End Web Development Social Network.

All of the students in the class are on the Social Network! You can create new posts, and everyone else in the Social Network can see those posts.

For your front end, you'll need at least 2 pages:

You'll need to make requests to the API to create and get posts on the Social Network. All of the API documentation is up at https://spark-class-social-network-api.hoff.tech/.

Some notes:

Logistics:

That's all I've got for today!

What questions are there?

How to be a Web Developer

  1. Look stuff up on the internet
  2. Make stuff
  3. Repeat

Excelsior! 🚀

Appendix

Note - these slides are from last semester. Last time I had students put together a "Random Quote App" for their final project, that would pull random quotes from a database, and allow people to post new quotes to the database. I'm going to be taking it in a different direction this semester. If you'd still like to work on this project, go for it! Everything should still be working, just message me if not.

The last project: a Random Quote App

I'm going to have you build an app that displays a random quote whenever you visit the page!

Your Random Quote App must do three things:

You don't have all the information that you need to complete this project yet! That's okay, because we'll be learning jQuery and how to communicate with servers over the next 5 sessions.

Submit your Random Quote App as assignment 19. You can also get this information with readings 19. Remember to keep the site live after the class ends, so that potential employers and clients can see it!

But wait - you need a "backend" for the Random Quote App!

So I built one for you! randomquote is a REST API that allows you to retrieve quotes from lists of quotes, and add new quotes to lists of quotes.

Documentation is available at http://randomquote.hoff.tech.

For this project, you'll only need to do two main things:

(but, the API provides many more functions than that! Feel free to use them)

The Rules of the API

The API is unauthenticated. This means that anyone can get any data or post any data into this database.

Things you should do:

Things you should not do: