Merge pull request #379 from turingschool/zf-Calling-API-Project

Calling api project and Swagger

module5/index.md

@@ -38,7 +38,8 @@ In Module 5, students will begin learn tools to make their MVC applications even
 
 ### Week 4
 * Calling Third Party APIs: [Prep](./preparation/Week4/CallingThirdPartyAPIs) | [Lesson](./lessons/Week4/CallingThirdPartyAPIs) | [Lab](./labs/Week4/CallingThirdPartyAPIs) 
-* API Documentation
+* Calling an API Mini Project:  [Prep](./preparation/Week4/Swagger) | [Project](./projects/CallingAnApiMiniProject)
+    * [Swagger](./lessons/Week4/Swagger)
 * [Process Optimization (Big O)](./lessons/Week4/ProcessOptimization)
 * [PD: Cover Letters](./lessons/Week4/CoverLetters)
 

module5/lessons/Week4/Swagger.md

@@ -0,0 +1,64 @@
+---
+layout: page
+title: Swagger API Documentation
+---
+
+### Introduction
+
+Let's start by sharing our responses to the questions from today's prep in two Slack waterfalls.
+
+* Why would someone use Swagger API Documentation?
+* What questions to you have about Swagger?
+
+<aside class="instructor-notes" markdown="1">
+    <p><strong>Instructor Note</strong><br>
+    We want students to have the key takeaways that it's easily created documentation for someone new to understand your API endpoints without having to dig into the code. We also want them to understand it's an easy way to test calling the API, similarly to Postman but with less set up. </p>
+</aside>
+
+<section class="call-to-action" markdown="1">
+With your partner, discuss the following question. Be prepared to share your thoughts when we come back together.
+
+How do you think Swagger might be helpful for this week's this mini-project?
+</section>
+
+## Adding Swagger to an API project
+
+Swagger is an incredibly popular tool, and luckily for us, it's already a part of the .NET framework!
+
+To generate the swagger UI, when creating a new API project make sure that `Enable OpenAPI support` is checked.
+
+![Creating a new API project](/assets/images/module5/week4/NewAPIProject.png)
+
+![Enable Open API Support](/assets/images/module5/week4/EnableOpenAPISupport.png)
+
+Once you've checked that box, when running your API application, your browser will automatically direct you to the Swagger UI page!
+
+If you're curious about the details, these are the lines that are added to the Program.CS file when you check that box and enable swagger.
+
+```c#
+var builder = WebApplication.CreateBuilder(args);
+
+// Add services to the container.
+
+builder.Services.AddControllers();
+// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
+builder.Services.AddEndpointsApiExplorer();
+builder.Services.AddSwaggerGen(); <--- Swagger setup line 1
+
+var app = builder.Build();
+
+// Configure the HTTP request pipeline.
+if (app.Environment.IsDevelopment())
+{
+    app.UseSwagger(); <--- Swagger setup line 2
+    app.UseSwaggerUI(); <--- Swagger setup line 3
+} 
+
+app.UseHttpsRedirection();
+
+app.UseAuthorization();
+
+app.MapControllers();
+
+app.Run();
+```

module5/preparation/Week4/Swagger.md

@@ -0,0 +1,21 @@
+---
+layout: page
+title: Swagger API Documentation Prep
+---
+
+As part of this week's Calling an API Mini Project, you will be learning about a new tool called [Swagger](https://swagger.io/).
+
+Watch [this](https://www.youtube.com/watch?v=txArM31my9M) video to get an introduction to Swagger API Documentation.
+
+Feel free do also do some independent research. Swagger is a broad tool that can have a lot of uses, we are focusing on it's ability to create API documentation and an interactive environment for calling an API, as shown in the video.
+
+Be prepared to share answers to the following questions:
+
+* Why would someone use Swagger API Documentation?
+
+<aside class="instructor-notes" markdown="1">
+    <p><strong>Instructor Note</strong><br>
+    We want students to have the key takeaways that it's easily created documentation for someone new to understand your API endpoints without having to dig into the code. We also want them to understand it's an easy way to test calling the API, similarly to Postman but with less set up. </p>
+</aside>
+
+* What questions to you have about Swagger?

module5/projects/CallingAnApiMiniProject.md

@@ -0,0 +1,60 @@
+---
+layout: page
+title: Calling An API Mini Project
+---
+
+## Learning Goals
+* Practice the skill of calling an API from a .NET application
+* Learn how to make a PUT and DELETE request to an API
+* Gain experience navigating vague directions for how to approach a problem
+
+## Overview
+
+For this mini project, imagine that you are working on a team with other developers. One of your teammates is responsible for building an API for keeping track of someone's favorite gifs. Your job is to build a .NET MVC application to call your teammate's API and allow for user interaction.
+
+For this project you will be working in pairs and utilizing driver/navigator pair programming.
+
+A new tool you'll run into with this project is [Swagger](https://swagger.io/)! Let's take a detour to [this](../lessons/Week4/Swagger) mini lesson on Swagger.
+
+## The API
+
+[This](https://github.com/turingschool-examples/GifTracker) is the API repo your teammate is working on. Clone down this repo and checkout the branch `GET-all-gifs`. When you start up the application you should be directed to a Swagger page.
+
+Respond to the checkpoint your instructor will share in Slack when you see the Swagger page.
+
+## The User Experience - Your Job!
+
+calls the API endpoints implemented in GifTracker, so that users of your application can: get all gifs, create a gif...
+
+The pair of you are responsible for creating a separate application that calls the API endpoints implemented in GifTracker, so that the users of your application can: get all gifs, create a gif, update a gif, and delete a gif. Your application should not be directly interacting with a database. How you build the UI for these features is up to you! You're welcome to either use the tools we have covered in class or dive more into javascript.
+
+You will be working in four iterations, it's recommended that you start by sketching a mockup of the UI for each phase before moving on to implementation. 
+
+As is best practice, check out a new branch for each iteration. Once you have completed the iteration, make a PR and merge your changes in to main.
+
+Because we are simulating working with a teammate, after you finish each iteration you will check out a new branch of the API to simulate your teammate making additional changes.
+
+✅ Once you've created your repo, one partner should send a link to all instructors. After each iteration, send a link to your PR to all instructors so they can follow your progress.
+
+### Iteration 1 - Get all Gifs
+* You should already have checked out the API branch `GET-all-gifs`.
+* Implement a way for the user to see all gifs currently in the database.
+
+### Iteration 2 - Add a new Gif
+* Check out the API branch `POST-a-new-gif`.
+* Implement a way for the user to add a new Gif to the database (Yesterday's lab is a great reference!)
+* Note that there is a new migration! Take a look at what changed there and update your database. Also, take a look at what's in the schemas section in Swagger.
+* Is there anything that you wish the developer working on the API had done differently? If you have any feedback you would communicate to your teammate, but that in your PR comment for this iteration.
+
+### Iteration 3 - Update a Gif
+* Check out the API branch `PUT-update-a-gif`.
+* Implement a way for the user to update an existing gif.
+
+### Iteration 4 - Delete a Gif
+* Check out the API branch `DELETE-a-gif`.
+* Implement a way for the user to delete a gif.
+
+<aside class="instructor-notes" markdown="1">
+    <p><strong>Instructor Note</strong><br>
+    Since this is a day and a half project, some students may need some more stretch goals. One potential stretch goal is adding a search where the student's application calls the Giphy API to retrieve gifs based on the search. And then somehow the user can choose which to add to the database. </p>
+</aside>