reading-notes

Class 8 - APIs

Lab 8 - APIs

Setup

In this lab assignment, you will show live weather and movie data in response to City Explorer searches. This data comes from third-party APIs, that allow you to make queries with an access token (or key). To keep your key secure, you can’t expose it in your front-end code, but you can use it from within your own custom back-end API server code you started in the last lab. Your web client will make a request to your custom API server, which will in turn use the key to make a request to the data API. When your server gets the data back, you can wrangle the data as you like, and send it on back to the web client.

Resources

Process

When available, your instructor will pair you with a partner for this lab. Review each other’s code from the previous lab and plan out an approach to this lab’s work on a whiteboard.

  1. Do a formal code review of each person’s code (10 minutes each).
  2. Open your partner’s GitHub pull request on your laptop.
  3. Identify an area in the code that:
    • you don’t understand
    • or seems overly complex
    • or you see a way to improve
    • or you want more information on
    • or you really like or think is interesting
  4. Add kind comments or questions inline using the GitHub review feature.
  5. Draw the web request-response cycle for the current lab tasks (about 10 minutes).
  6. Document the data flow: identify inputs and outputs for each part of the cycle.
  7. Outline the functions that support this data flow.
  8. Be sure to include these drawings in your README.md.
  9. You will then work independently for the rest of the day, implementing your plan, coding in your own repository, submitting your own pull request.

Workflow

  1. We will be using the Trello project management tool for the duration of this project.
  2. To maximize your experience with Trello, you should create a free Trello account by clicking on the Sign Up button.
  3. After creating an account, go to the City Explorer Trello Board, open the “… Show Menu” link, click the “… More” link, and then click “Copy Board”. Before you create it, be sure to “Change” from Private to “Public” (and click “Yes, Make Board Public”) so your instructional team can see your work. Now, click “Create” to add a copy to your personal account.
  4. This Trello board contains all of the features required to complete this lab assignment.
  5. Review the user stories and analyze the feature requests and requirements in the lab. Within each story, note the acceptance criteria (“Given … When … Then…”) and the checklist of feature tasks. Be careful to execute tasks in order as they are often dependencies of one another.
  6. Throughout the lab time, check off tasks as you complete them, and move the story cards through the workflow.

Documentation

Your README.md must include:

Project Name

Author: Your Name Goes Here Version: 1.0.0 (increment the patch/fix version number if you make more commits past your first submission)

Overview

Getting Started

Architecture

Change Log

Credit and Collaborations

Time Estimates

For each of the lab features, make an estimate of the time it will take you to complete the feature, and record your start and finish times for that feature:

Name of feature: ****____****

Estimate of time needed to complete: _

Start time: _

Finish time: _

Actual time needed to complete: _

Add this information to your README.

Submission Instructions

  1. Complete your Feature Tasks for the lab, according to the Trello cards.

  2. Your lab will require 2 repositories: 1 for the Server (back-end) and 1 for the client (front-end)

  3. Run your Lighthouse Accessibility report looking for a score of 65 or higher. Make adjustments as needed.
  4. Create a PR back to the main branch of your repository, showing ALL your work, and merge it cleanly.
  5. On Canvas, submit a link to your PR. Add a comment in your Canvas assignment which includes the following:
    • A link to the deployed version of your latest code.
    • A link to your public Trello board.
    • A question within the context of this lab assignment.
    • An observation about the lab assignment, or related ‘Ah-hah!’ moment.
    • How long you spent working on this assignment.

Code Challenge - Array and String Methods Fun with split, join, slice, and splice!

Overview Read this overview.

Video Watch the video for this class from the demo playlist.

Demonstration Look through these sample problems.

Challenges Navigate to the javascript folder within your data-structures-and-algorithms repository.

  1. Create a new branch for this challenge called array-methods git checkout -b array-methods

  2. Retrieve the code challenge from the system npm run get-challenge 08

  3. In your terminal, from the javascript folder, run npm test 08 to execute the tests in this file for this challenge.

  4. At this point you will see the failed tests scroll through your terminal window with a brief report of the number of failed tests at the bottom.

  5. If you do not see this, verify your installation of Jest by typing npx jest –version in your terminal. Filename typos can make things break!

  6. Write code to make the tests pass, one at a time. Let the error messages guide you.

  7. Once the test is passing, refactor as needed, then move on to the next challenge.

  8. Note, you can also run npm test (without a challenge number) to run all of the tests for every code challenge file assignment during the course all at once. This can get “noisy”, but it’s an opportunity to get a view of your overall progress

Submission When you have completed the entire set of code challenges and all tests pass, create a pull request from your current branch to the main branch and merge it into main.

You will be able to see a test coverage report in GitHub on the Actions tab of your data-structures-and-algorithms repository. It should match what you saw on your terminal in the above steps. Your graders will be looking at this as well.

Submit a link to your pull request.

Written Class Notes

errors come from the server side 200 success 500 broken 404 not found 403 forbidden api wrong

Use middle man to make it easier on client side, best practice to off load to backend service, no intelligence on client side

Read 8 - Readings Overview

Resources Link/Pages

Bookmark and Review

API Design Best Practices

  1. API Design Best Practices

Answer

Statement on why this topic matter as it relates to what I’m studying in this module:

APIs serve as the backbone for communication between different software components. REST provides a standardized architectural approach to designing these APIs.

API Design Best Practices

  1. What does REST stand for?
    • Representational State Transfer.
  2. REST APIs are designed around a resource.
  3. What is an identifier of a resource? Give an example.
    • URI (Uniform Resource Identifier). Example: https://adventure-works.com/orders/1
  4. What are the most common HTTP verbs?
    • GET, POST, PUT, PATCH, DELETE.

  5. What should the URIs be based on?

    • The nouns (the resource) and not verbs (the operations on the resource).
  6. Give an example of a good URI.
    • Good: https://adventure-works.com/orders
    • Avoid: https://adventure-works.com/create-order
  7. What does it mean to have a ‘chatty’ web API? Is this a good or a bad thing?
    • When one that exposes a large number of small resources, leading to many requests. This is generally a bad thing as it increases the load on the server and may result in poor performance.
  8. What status code does a successful GET request return?
    • HTTP status code 200 (OK).
  9. What status code does an unsuccessful GET request return?
    • HTTP status code 404 (Not Found) if the resource cannot be found.
  10. What status code does a successful POST request return?
    • HTTP status code 201 (Created).
  11. What status code does a successful DELETE request return?
    • HTTP status code 204 (No Content).

The common HTTP methods used by most RESTful web APIs are:

Things I want to know more about

Retrospective

Retrospectives are a critical part of Agile, and typically take the form of meetings held by a team at the end of a sprint cycle. To get us acclimated to that process, we will use the format of a retrospectives to guide today’s reflection.

This article gives a nice overview to the role of retrospectives.

  1. What went well, that I might forget if I don’t write down?
    • Two things went well but I forgot to write them down and now I don’t remember. I will blame that only getting two hours of sleep.
  2. What did I learn today?
    • Some API sites make things so hard to use….
  3. What should I do differently next time?
    • I should take notes when a TA is talking to me so I remember what helped.
  4. What still puzzles me, or what do I need to learn more about?
    • I think no brainer everything about this week still confuses me.

Thinking about each of your assignments for the day, reflect on:

Is the assignment complete? If not, where exactly did you leave off, and what work remains? It is not complete, I still have to do the hard part of fixing the movie data feth and also rendering that.

Career 8 - Professional Pitch and Introduction

Watch the videos:

Now review the video of your professional pitch that you created earlier. It’s not easy to hear your own voice, or watch your own face, so be brave! This is one of the simplest ways to improve. Watch and listen carefully. Imagine you are hearing it for the first time.

Assignment

Re-record your pitch video, keeping the positives, and changing the things you’d like to improve.

Send your Career Coach, or a trusted mentor, the link to your pitch video to respond to you with their feedback. This exercise will better prepare you for the 401 Personal Pitch workshop where you will present your pitch to your classmates for their collective feedback.

Remember that feedback is a gift. Being receptive to ways you can improve is imperative when you are developing your story and your personal brand. Knowing what is working and what needs improvement early helps you practice with intention and excellence and be prepared for the interview process.

Submit the reworked version of your video to complete the assignment.