Giter Club home page Giter Club logo

m3-8-node--rest-apis's Introduction

Module 3 - Node

see bottom of this page, if you need help getting this onto your computer.

Exercise 1 - API Architecture

There s a corner cafe that wants your help to propel itself into the digital age... The owner, Greg, has read extensively and is anxious to get started, but lacks the technical chops to get his digital transformation off the ground. He knows that big data is the way to go. He is planning on tracking everything in his cafe.

He needs an RESTful API to serve all of the data that he'll have and gather more!

He's asked a couple of future developers to architect this API for him.

He wants to track everything from the stock, the customers, the seating in the cafe.

Provide him with a series of REST endpoints that meet all, or most of the RESTful principles that you've just heard about! Your feedback will dictate how the database will eventually be built... no pressure.

This activity is more about the discussion in how to best organize data endpoints. There will not be any coding, unless you really want to provide Greg with working endpoints that he can test in Insomnia.


Exercise 2 (Optional)

There is a clients.js file inside of the data folder.

Create RESTful endpoint (only one) that expects a search query and responds with the requested data, and/or the appropirate HTTP code.


Exercise 3

Let's finally build that Hangman Game!

Obviously, this could all be done in the frontend, with vanilla JS, but where is the fun in that! Besides, we are not very trusting and keeping the entire game in the FE would allow users to cheat, if they knew enough JavaScript to find the answer in the script.

Guidelines

You will divide your concerns in two: the frontend, and the backend. Start with the backend. Only move on to the fronted once you have a fully functional API.

Backend

  • Create a data file with an array of 10 to 20 words objects. don't forget to export the array.
    • e.g. { word: 'bacon', id: '123', letterCount: '5' }
  • Create a RESTful API that contains these endpoints. GET /hangman/words This will return an object that contains - the id of a random word selected from an array of words - the letterCount of the word.
    • GET /hangman/guess/:wordId/:letter This will return
      • the appropriate status code
      • If the letter guessed is in the word, return an array of booleans that map the letter's position in the word. This will be processed by the FE.
  • Once you have completed these steps, you should be able to play the game via the Insomnia app to test your code.
  • Grab pen and paper and test it out!
Challenge / Optional

The /hangman/words endpoint can also accept an id in its url, like so, /hangman/words/:wordId. If it's provided, it will return the word object, as it is in the array of words. This is ONLY for testing purposes. Do not use this endpoint in the Frontend.

Create some sort of authentication that will not allow this to be accessed by anyone without the proper credentials.

Frontend

  • There is is an existant static endpoint in the public folder /hangman. use that to create your HTML.
  • Add all of your JS to the scripts.js file.
  • Create a UI for the game. At a minimum, you should have spaces for the letters in the word that into which you can add the letters, as they are guessed.
  • User input is entirely up to you. It could be a set of 26 buttons, or yuo could listen for keyDown events.
  • No need to render a hanging man...
  • The FE application will NEVER know the word that the user is trying to guess.
    • You will ask the server for a word.
    • It will provide a word object that includes an id and a letterCount that you will store to render the game.
  • When the user guesses a letter, you will query the server with the letter and the word.id. The server will respond with the appropriate an array if indices as to where that letter is positioned in the word and a status code.
  • Feel free to create some sass to style the hangman page.

Exercise 4 (Optional)

If you need some more work for today, take a look at Programmable Web for an API that has data that is free and interests you.

  • Test out the API in Insomnia
  • If it works as expected and provides you with good data that you feel you can work with, build a few endpoints in the server to GET data from there and render it from a static page in the public folder. (this means alse creating a fetch to your server to get the data.)

Fun times!


Bibliography


Getting this workshop to your computer!

  1. Fork it from the GitHub repo page. (this will give you a copy of it in your account.)
  2. Clone it to your computer using the https address.
    • On your computer, navigate to the folder where you have been saving your workshops. To through folders in the terminal, use
      • MAC: ls to view enclosed files/folders
      • WIN: dir to view enclosed files/folders
      • cd <FOLDERNAME> to move into a folder.
      • Use cd .. to go up one level (parent folder)
    • git clone <URL>
    • cd into the repo folder.
    • code .
    • Create a new branch to work from: git checkout -b my-solutions
    • Get to work!
    • Once you are done, stage the files with git add .
    • Commit them to the branch with git commit -m 'I did it!
    • Push it to GitHub git push origin HEAD
    • In the GitHub UI, open a PR
    • Done!!

m3-8-node--rest-apis's People

Contributors

guibibeau avatar scottanthonymorin avatar

Stargazers

 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.