GithubHelp home page GithubHelp logo

api's Introduction

Personal API

It's time to have some fun and play with the technologies you've learned in the past week. Your goal is to build a API about yourself. Your API will incorporate:

  • Well-documented JSON API Endpoints
  • A full set of REST-ful Routes (GET, POST, UPDATE, DELETE)
  • At least one CRUD-able resource (Create, Read, Update, Destroy)
  • and an /api/profile endpoint with some basic details about you

Finally, you will consume your API using AJAX and render the results to the page using jQuery.

Please fork & clone this repo to get started.

Part 0. Deploy to Heroku

Before we start coding, our first goal together is to configure our application so that it can be deployed to Heroku (a web application host).

Follow the instructions here: Deploying Express Apps to Heroku

As you continue to work on this project, you'll need to remember to push your changes to heroku (just like you would with github!):

# git add . -A
# git commit -m "detailed description of what I changed"
git push heroku master
heroku open

It's common for code to break "in production" (broken links, different environment, missing dependenies...), even if it worked in development, so do your best to debug! Let us know if you get stuck.

Part 1. Personal API

Now that we're deployed, it's time to start coding your "personal" api!

Minimum Requirements

  • Documented API Endpoints

    • You must document your API endpoints. We really want to know how to use your API! And for starters, we need to know what endpoints exist! (Do this step first! Plan plan plan!)

    • One cool way to do this is to create an endpoint at /api that describes all the available endpoints. We've set you up with an example in server.js. Make sure to update it to fill it in with your own information!

      • Here's a good example student /api endpoint:
      example api documentation
  • A Profile Endpoint (/api/profile) that responds with hard-coded data:

    • name - a string
    • githubUsername - a string
    • githubLink - a url to your github profile
    • githubProfileImage - the url of your github profile image
    • personalSiteLink - a link to your personal site.
    • currentCity
    • pets - an array of your pets
      • e.g. [{name: "foo", type: "Cat", breed: "Siamese"}, {name: "bar", type: "Dog", breed: "Dalmation"}]
      • if you do not have any pets, please get creative, or use hobbies instead
    • Please hardcode it! It would be seriously overkill to save a single profile to the database.
  • At least one resource (mongoose model) that you can CRUD using RESTful Routes

    • That means endpoints for index, show, create update, delete!
    • Here are some ideas:
      • RECOMMENDED: projects that you have built for this class
        • _id, name, description, githubRepoUrl, deployedUrl, screenshot
      • places that you've lived or that are important to you
        • _id, description, town, state, country, years, gps: {lat, lon}, photo
      • destinations you've visited, or vacations you're planning
        • _id, country, date, duration, photo
      • books you've read or love
        • _id, title, author, image, releaseDate, characters
      • movies or shows you like
        • _id, title, season, director
      • portfolioProjects or lyrics you've written
        • _id, title, body, date
      • Wish list (e.g. gifts or wishes)
        • _id, description, price, amazonLink

All API Endpoints must return JSON.

Pro-Tip: One good strategy is to add the database last. Start with your api routes and some hard-coded data. Make sure it's working the way you want before tackling the database layer!

API Stretch Goals

  • Profile info stretch goals
    • Add a daysOld field that calculates how many days old you are.
    • Add an isAwake field that's only true between 8am and 10pm!
  • CRUD resource stretch goals
    • Use query parameters to filter results from one of your CRUD endpoints:
      • e.g. ?limit=2 only return two results
    • Create a /search endpoint
      • e.g. ?q=mad+men only returns tv shows with that in the title
      • e.g. ?type=romance only returns romance novels

Examples

An example API for 'Jon Snow' might have endpoints like:

JSON API Endpoint           Response JSON
=============               =============
GET /api/profile            {
                              name: "Jon Snow",
                              githubLink: "http://github.com/u-know-nothing-jon-snow",
                              currentCity: "The Wall",
                              isAwake: false,
                              familyMembers: [
                                { name: 'Arya Stark', relationship: 'sister' },
                                { name: 'Bran Stark', relationship: 'brother' }
                              ]
                            }

GET /api/projects           [
                             {
                                \_id: 2,
                                name: 'Defeat the wildlings',
                                type: 'quest',
                                opponents: [ 'Mance Rayder', 'Lord of Bones'],
                                status: 'resolved'
                             },
                             {
                                \_id: 3,
                                name: 'Save the wildlings',
                                type: 'campaign',
                                opponents: ['the Night Watch', 'the Others'],
                                status: 'pending'
                             }
                            ]

GET /api/projects?limit=1   [ { \_id: 2, name:'Defeat...' } ]

GET /api/projects?status=pending
                            [ { \_id: 3, name:'Save...' } ]                                
GET /api/projects/2         { \_id: 2, name:'Defeat...' }

POST /api/projects          etc
PUT /api/projects/2         etc
DELETE /api/projects/2      etc

Make sure to spend time planning this part out!

Bonus: Personal Dashboard

Consume the Personal API you just created, and use it to build your own personal dashboard.

  • Create an index.html homepage that's linked to your main JavaScript and CSS files.

  • Use jQuery and AJAX to consume your Personal API.

  • Use Template Strings and Array Iteration to render data to the page.

  • Display at least one image/gif that you retrieved from your Personal API.

  • Create at least one form, so you can CRUD at least one of your resources.

  • Get rid of that ugly blue background. Style it up!



api's People

Contributors

coderkarma avatar

Watchers

 avatar

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.