<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Katie McKnight</title>
    <description>The latest articles on DEV Community by Katie McKnight (@kmcknight91).</description>
    <link>https://dev.to/kmcknight91</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F229064%2F4180e505-8f25-4e85-86dc-5aa8276de725.jpg</url>
      <title>DEV Community: Katie McKnight</title>
      <link>https://dev.to/kmcknight91</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/kmcknight91"/>
    <language>en</language>
    <item>
      <title>How to use Insomnia to Test API Endpoints</title>
      <dc:creator>Katie McKnight</dc:creator>
      <pubDate>Fri, 18 Oct 2019 02:05:16 +0000</pubDate>
      <link>https://dev.to/kmcknight91/how-to-use-insomnia-to-test-api-endpoints-1lad</link>
      <guid>https://dev.to/kmcknight91/how-to-use-insomnia-to-test-api-endpoints-1lad</guid>
      <description>&lt;p&gt;So you're building an app that makes various HTTP requests, eh? You know how to make the API calls, whether you're using a library or good ole &lt;code&gt;.fetch()&lt;/code&gt;. But without the ability to test your endpoints, you're bound to run into some issues. Testing endpoints will save time, prevent potential errors (and lots of stress!), and give you a better relationship/understanding with your API. &lt;/p&gt;

&lt;p&gt;In this article I'll be using Insomnia to demonstrate how to do this. However, there are more options out there (a popular choice being Postman). Feel free to try different platforms to see which one you like best. 😄&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Step 1:&lt;/strong&gt; Install Insomnia
&lt;/h3&gt;

&lt;p&gt;Head over to the &lt;a href="https://insomnia.rest" rel="noopener noreferrer"&gt;official Insomnia website&lt;/a&gt; to install it on your machine. There are directions to prompt you once you're there. &lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Step 2:&lt;/strong&gt; Check your API Docs
&lt;/h3&gt;

&lt;p&gt;&lt;em&gt;Hopefully&lt;/em&gt; your API has a nice set of docs to guide you through this process. Nothing beats some killer docs. Read through them and figure out what you'll need to make each request. What's the base URL? Are there any params or headers required? Do you need a request body and, if so, is it in JSON format? Etcetera, etcetera.  &lt;/p&gt;

&lt;p&gt;Once you're more familiar with the functionality of your API, go ahead and open up Insomnia. &lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Step 3:&lt;/strong&gt; Make your 1st HTTP GET Request w/ Insomnia
&lt;/h3&gt;

&lt;p&gt;Once the app is open, you'll see a mostly "blank" workspace. To begin making requests click the plus icon, which will trigger a dropdown giving you the option to either make a New Request or create a New Folder. Let's make a folder, specific to our project. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fqjs6xvxq2qtt2meka434.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fqjs6xvxq2qtt2meka434.png" alt="Insomnia app with no HTTP requests made, showing how to make a new folder"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Name the folder however you'd like. I usually use the project name. Or, if it's a large project, you may want to use the entire workspace and have various folders within it... the organization is completely up to you. &lt;/p&gt;

&lt;p&gt;I'm going to use an API that I built to demonstrate making HTTP requests that cover all CRUD functionality. Request bodies should be in JSON format, and other than register &amp;amp; login, the routes require an Authorization header with a JWT (JSON Web Token) as the value. You can find the docs &lt;a href="https://github.com/kmcknight1/Back-End" rel="noopener noreferrer"&gt;here&lt;/a&gt; if you're interested. This project was called Trip Split, so that's what I'll title my folder. &lt;/p&gt;

&lt;p&gt;Now that we have our folder made, we can make our first request. Click the down arrow next to the folder name to see a list of options. Right now we're wanting to make a New Request.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fxh8q0w22lsrmhr67ayv4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fxh8q0w22lsrmhr67ayv4.png" alt="options for a created folder include New Request, New Folder, Duplicate, Rename, Environment, Move, and Delete"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I like to run a "Sanity Check" to see if the server is up. I'll use that as the title for my request then click CREATE. Your Insomnia app should look something like this now: &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fzi0nfijme6ydon5yi9bc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fzi0nfijme6ydon5yi9bc.png" alt="Insomnia app with a newly created request, not yet completed"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can see in the top bar that there's a place to select the type of request you want to make, an input for the URL/endpoint, and a SEND button. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fc510swc6p2x1duvfay73.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fc510swc6p2x1duvfay73.png" alt="HTTP request options include GET, POST, PUT, PATCH, DELETE, OPTIONS, HEAD, and Custom Method"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I want to make a GET request, so that's what I'll select. Then I'll put the base URL followed by the endpoint in the input (circled in green below). This request won't have a body, header, or anything else, so I can go ahead and hit SEND. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fhuk3znggan6763odk02w.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fhuk3znggan6763odk02w.png" alt="a GET request was successful to the API, showing that the server is up and running"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;AWESOME&lt;/strong&gt;, sweet success. You can see the status of your request (here it was 200, which means it was successful), the time it took to complete, when it was placed (which has a dropdown to view/select from all instances of the request being made), and the response (which has a WHOLE LOTTA options, itself. I won't be explaining all of those here, but please play around and see what different options/information are available). &lt;/p&gt;

&lt;p&gt;Alright, we've made our first request! Now that we've done a GET request....&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Step 4:&lt;/strong&gt; Make a POST Request
&lt;/h3&gt;

&lt;p&gt;I want to try logging in now. The docs say that I need a username and password in my request body in order to login. I'll use credentials that I know to be correct and stored in this API's database. &lt;/p&gt;

&lt;p&gt;Make a New Request (I'll title mine "Login"). Here, I want to select POST for the request type and JSON for the body format. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F018lmmauf40xh9du7tzo.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F018lmmauf40xh9du7tzo.png" alt="form for creating a new HTTP POST request in Insomnia with a JSON body format selected"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Once you hit CREATE you'll need to complete the rest of the request. For Login, I need to add the URL/endpoint and the body. Once I complete all required fields for my request, I can hit SEND. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fhgiorvu86qc5smqxpuep.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fhgiorvu86qc5smqxpuep.png" alt="a POST request to login was successful"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;HECK YEAH!!&lt;/strong&gt; Another successful request made. You'll see the body as it was sent on the left and the response on the right (or you can view with a top/bottom split). This response contains a &lt;em&gt;very&lt;/em&gt; important piece of information, our JWT. For all endpoints following a login, the requests must contain an Authorization header with this JWT. Let's see how to make one of those. &lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Step 5:&lt;/strong&gt; Make a Request that Requires a Header
&lt;/h3&gt;

&lt;p&gt;Let's make another post request, to create some data. Only now, we must use our JWT to access the endpoint. Make a New Request and select the proper type &amp;amp; format. Then, complete the request URL/endpoint and body (make sure all required fields are included). Once you've done that, click on the HEADER tab. I want to make a header called Authorization and paste in the JWT I received from my Login request. Once I've done that, I'll hit SEND.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fnfvw3ucahn32wkhdh0co.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fnfvw3ucahn32wkhdh0co.png" alt="form to create request headers, filled out with Authorization and JWT value"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fvijokufassjmthbqugnz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fvijokufassjmthbqugnz.png" alt="POST request was successful and a response body was received"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;YES&lt;/strong&gt;, successful requests never get old. 💚&lt;/p&gt;

&lt;p&gt;Again, you can see the request body on the left, the response on the right, and the info bar up top. Getting the hang of this? Awesome. &lt;/p&gt;

&lt;p&gt;Now that you're more familiar with Insomnia, I'll quickly show you how to make PUT and DELETE requests. &lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Step 6:&lt;/strong&gt; Make a PUT Request
&lt;/h3&gt;

&lt;p&gt;You know the drill. Make a request, select the proper options, complete the body, headers, etc., then SEND. For a PUT request, your body will include the property/properties that you want to update. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fo7rhrbnudcekpv8nxx7n.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fo7rhrbnudcekpv8nxx7n.png" alt="a successful PUT request with the request body on the left and the response on the right"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Step 7:&lt;/strong&gt; Make a DELETE Request
&lt;/h3&gt;

&lt;p&gt;Make request, select options, yadda yadda. Got it? Cool. With a DELETE request, you won't need a body. For my API I just need the Authorization header and to include the id for which item I want to delete in the endpoint param (for example, my URL ended up looking like this "&lt;a href="https://tripsplit-backend.herokuapp.com/api/trips/7" rel="noopener noreferrer"&gt;https://tripsplit-backend.herokuapp.com/api/trips/7&lt;/a&gt;", 7 being the id).&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F0llszafxokc54u9dhbq4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F0llszafxokc54u9dhbq4.png" alt="a successful DELETE request showing that the item was deleted"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Aaaaaand there you go. How to use Insomnia to test your endpoints and make HTTP requests. &lt;/p&gt;

&lt;p&gt;I appreciate you taking the time to check this article out and I hope it helped you in some way. ❤️&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>tutorial</category>
      <category>insomnia</category>
    </item>
    <item>
      <title>How To Write Your 1st Blog Post as a Developer</title>
      <dc:creator>Katie McKnight</dc:creator>
      <pubDate>Sat, 14 Sep 2019 18:13:13 +0000</pubDate>
      <link>https://dev.to/kmcknight91/how-to-write-your-1st-blog-post-as-a-developer-1nff</link>
      <guid>https://dev.to/kmcknight91/how-to-write-your-1st-blog-post-as-a-developer-1nff</guid>
      <description>&lt;h1&gt;
  
  
  &lt;strong&gt;Like this.&lt;/strong&gt;
&lt;/h1&gt;

&lt;p&gt;&lt;em&gt;Starting new things can be a daunting task. Just jump in.&lt;/em&gt; 🏊‍♀️&lt;/p&gt;

&lt;h6&gt;
  
  
  Cover Photo by &lt;a href="https://unsplash.com/@kaitlynbaker?utm_source=unsplash&amp;amp;utm_medium=referral&amp;amp;utm_content=creditCopyText"&gt;Kaitlyn Baker&lt;/a&gt; on &lt;a href="https://unsplash.com/"&gt;Unsplash&lt;/a&gt;
&lt;/h6&gt;

</description>
      <category>productivity</category>
      <category>writing</category>
    </item>
  </channel>
</rss>
