large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<a href="https://snipcart.com/blog/apis-integration-usage-benefits">medium bookmark / Raindrop.io</a> | 
If you work even remotely near the web dev industry, you&#8217;re 100% sure to hear these three infamous letters: API.
They get thrown around by n00bs and experts alike:
&#8220;Why do I have to make an API call? Does it have a number?&#8221;
&#8220;A simple call to this third party API will do the trick here.&#8221;
&#8220;We&#8217;ll build you a RESTful API; making sure your new system plays well with other services.&#8221;
While APIs may first seem intimidating, they can literally change your life as a developer.
Why? Well, learning how to use APIs properly can simplify, accelerate, and strengthen your development workflow. Building or integrating APIs brings a fair share of benefits for both clients and yourself.
As developers, you often hear the &#8220;don&#8217;t re-invent the wheel&#8221; advice:
Jokes aside, APIs play a significant role in you not re-inventing the wheel. At Snipcart, we firmly believe that understanding the basics of APIs is a crucial skill for modern web developers. In this post, we&#8217;ll help you do just that. We&#8217;ll cover:
<ul>
<li>Benefits of using an API</li>
<li>What an API really is</li>
<li>What types of APIs there are</li>
<li>Practical use cases on how to use APIs</li>
</ul>
Let&#8217;s dive into it, shall we?
<h2>The API benefits: why use them?</h2>
<img src="https://snipcart.com/media/175854/why-use-api-benefits.gif" alt="why-use-api-benefits">
Level up your dev skills with APIs
<a href="https://twitter.com/home?status=One%20of%20the%20first%2C%20biggest%20milestones%20in%20my%20programming%20career%20was%20understanding%20APIs%20properly.%20https%3A%2F%2Fbuff.ly%2F2yBrftE%20via%20%40snipcart%20%23API">One of the first, biggest milestones in my programming career was understanding APIs properly.</a>
I still use them every single day.
Before stepping into the nitty-gritty, let me first convince you that understanding APIs is well worth your time.
Because learning to use APIs dramatically increases your development effectiveness.
First, it allows you to leverage pre-existing logic or parts you don&#8217;t have to write yourself. Some stuff you might just not be able to code yourself even! So to save yourself precious time, it&#8217;s essential, as a developer, to have an idea of what the API landscape looks like.
Second, many development problems you&#8217;ll encounter have already been solved by someone before you. Whatever shape these existing solutions take (<a href="https://snipcart.com/blog/webtask-baas-serverless-tutorial">FaaS</a>, libraries, web services, SDK, <a href="https://snipcart.com/blog/intro-api-first-headless-cms-directus">content APIs</a>, etc.), you&#8217;ll most likely need an API to interact with them.
<h2>So what are APIs, exactly?</h2>
<img src="https://snipcart.com/media/175855/what-are-apis-definition.png" alt="what-are-apis-definition">
<div>Web APIs, image <a href="https://blogs.msdn.microsoft.com/martinkearn/2015/01/05/introduction-to-rest-and-net-web-api/">from MS</a></div>
Well, the official, daunting definition goes like this:
<blockquote>
In computer programming, an application programming interface (API) is a set of subroutine definitions, protocols, and tools for building application software. In general terms, it is a set of clearly defined methods of communication between various software components. A good API makes it easier to develop a computer program by providing all the building blocks, which are then put together by the programmer.
</blockquote>
A bit heavy, huh? Let&#8217;s take the academic prose down a notch. Here&#8217;s a friendlier, home-cooked API definition:
Simply put, an API declares an interface for you to interact with its logic without you having to know what happens under the hood. This definition can be applied to whatever language, protocol, or environment you&#8217;re in—as long as it happens on the programmatic level (more on that below).
To shed an even better light on APIs, let&#8217;s list what they are NOT:
<ul>
<li>
An API is not necessarily an external service. For instance, you can include libraries directly in your solution OR use them through an API.
</li>
<li>
An API is not just an interface. It&#8217;s both the specification/format and the implementation.
</li>
<li>
An API is not a GUI (graphical user interface). It doesn&#8217;t do interactions on the graphical level; it solely operates on the programmatic layer, either through a programming language or a communication protocol.
</li>
</ul>
<h3>Different types of APIs</h3>
All APIs aren&#8217;t created equal.
Even though they mostly share the same goal, some achieve it way better than others. Since this is to be a smooth intro, I won&#8217;t dive into what makes an API better than others. However, keep in mind that people have really different approaches to building APIs. If that subject interests you, Google around &#8220;API design patterns&#8221; &amp; &#8220;API paradigms.&#8221; Or just start with <a href="https://blog.cloudobjects.io/api-design/2017/04/10/api-design-paradigms/">this neat entry-level article</a>. 🙂
<h3>Endpoints</h3>
The goal of APIs is to make your life as a developer easier. How do they do that? By aggregating features/functions set together and exposing these functionalities through endpoints (typically URL patterns used to communicate with the API). These endpoints are the only way you can interact with any API. Each endpoint will have a specified format for both its requests and responses—you usually find this format in the API&#8217;s documentation.
Endpoints can either be simple functions or composed of many functions which call other APIs and so on. The only crucial point here is that the underlying logic of those functions is entirely abstracted. You don&#8217;t need any knowledge of what&#8217;s happening inside them to use them. As long as you use the proper format you will be able to consume them, which is a fancy way of saying using parts of them from your application.
Bottom line, an API is just like any interface: the light switch will turn on the light, whether you know how electric currents function or not (as a young adult I also learned you need to pay the electricity bill to make it work, but that&#8217;s a different story.)
<h2>How to use APIs: practical examples</h2>
<img src="https://snipcart.com/media/175854/how-to-use-apis.png" alt="how-to-use-apis-examples">
Typical API call
<h3>Reading &amp; understanding an API documentation</h3>
I don&#8217;t want to overextend conceptual explanations too much here. So let&#8217;s analyze a really straightforward API to dumb this down and see how it works in a real-life scenario. We&#8217;ll take the native JavaScript Math object to do so (<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math">open documentation here</a>).
You can see in the docs that each function of the object describes what the input format should be (number, array of numbers, etc.) and describes the format of the output. Notice, however, how nothing is mentioned regarding the logic to run these functions. For instance, if you fire up your dev console and type <code>Math.sqrt</code> (without executing the function) you get something like <code>ƒ sqrt() { [native code] }</code>. That&#8217;s the spirit of an API: whether you&#8217;re calling one of your Operating System API or a web-based API, these principles will stay.
<h3>Basic examples of API use cases</h3>
There&#8217;s a ton of stuff to be done with popular API providers out there. The Google Maps API, for instance, is often used to build better user experiences with data based on real-time mapping and traffic signals. The Twitter API, another big one, can be used to filter and display targeted Tweets in real-time.
Now, if you follow our blog, I suspect you&#8217;re more interested in web-based APIs than anything else. So let&#8217;s dive into specific use cases. Note that we&#8217;ll be using Postman in our examples. Of course, this Rest Client is bound to a web environment, but such tools usually exist in other environments also. It&#8217;s worth having a look around the tools provided for a given environment before starting to play with it; can save you lots of time.
If you want to follow along with us, you&#8217;ll need to <a href="https://www.getpostman.com/">download the Postman client</a>.
<h4>Consuming a public API to fetch data</h4>
Our first example is going to be quite simple, but still more interesting than the Math one.
We will be using the Dog API! Not only is it a funny API, but it also doesn&#8217;t require any authentication. Plus, it&#8217;s a HTTP REST API, which means it&#8217;s a web-based API. Since it&#8217;s bound to this environment, it requires us to conform to some of the protocol specificity: in this case <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods">HTTP Verbs</a> (GET, PUT, POST, DELETE, etc.). For our example, we&#8217;ll keep things simple and only use the GET verb. The API doesn&#8217;t allow support anything else anyway. Most public APIs only allow you to consume data and not post any, thus the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET">GET</a> verb.
Let&#8217;s fire up Postman and see how its UI looks.
<img src="https://snipcart.com/media/175855/postman-ui.png" alt="postman-ui">
My UI uses the dark theme, so it might slightly differ from yours.
There might be a lot of information to digest at first here, so let&#8217;s just start with the VERB and URL.
The default verb should be GET so you can keep it this way and enter the following URL: 
https://dog.ceo/api/breeds/list/all
Hit &#8220;Send&#8221; and bang! You should receive a response with the appropriate data. Voilà! You&#8217;ve just made your first API call. Now, for this example, we won&#8217;t be using any of the data received. But you get the idea: you could show different dog breeds to your user and display an image of a given breed if they click on it.
You can play with the different routes in their documentation to familiarize yourself with the environment.
Cool fact: this little project is also open source, so you can have a look under the hood <a href="https://github.com/ElliottLandsborough/dog-ceo-api">here</a>.
<h4>Handling authentication with a private API</h4>
You should now better understand how different pieces work together when it comes to APIs. So let&#8217;s do a more complex tutorial that includes authentication. I&#8217;m going to use our own application&#8217;s API here.
Here we&#8217;ll only use code to interact with <a href="https://docs.snipcart.com/api-reference/introduction">Snipcart&#8217;s API</a>. You can close Postman, but keep it handy; it&#8217;s good to use such a tool when starting out with an API.
The goal will be to create a simple CLI tool to create 1-time usage discounts for shoppers. These discounts will be generated via API, and all this will be happening entirely on your computer.
Create a new folder for this project, use <code>npm init</code> in the folder and boot up your text editor. Now create a <code>index.js</code> file, then open the <code>package.json</code> file. In it, add the following lines in the top level object:
<pre><code>"bin": { 
 "discounts": "./index.js" 
} 
</code></pre>
We will also need the commander package to parse inputs from the client. So, run <code>npm install --save commander</code> in the current folder. We will also use a small lib to create IDs; you can install it with <code>npm install --save shortid</code>. While we&#8217;re at it lets also run <code>npm install --save request</code> lib to make it easier for us to make HTTP calls. Hop back in your <code>index.js</code> file and paste this code:
<pre><code>#!/usr/bin/env node 
var program = require('commander'); 
var shortid = require('shortid'); 
var request = require('request'); 
 
function CreateDiscount(){ 
 var discount = { 
 name: '20% OFF', 
 trigger: 'Code', 
 type: 'Rate', 
 rate: 20, 
 maxNumberOfUsages: 1, 
 code: shortid.generate() 
 } 
 
 request({ 
 url: "http://app.snipcart.com/api/discounts", 
 auth: { 
 'user': 'YOUR_API_KEY' 
 }, 
 method: "POST", 
 json: true, 
 body: discount 
 }, function (error, response, body){ 
 console.log(body.code); 
 }); 
} 
 
program 
 .arguments('&lt;number&gt;') 
 .action(function(number) { 
 for(var i = parseFloat(number); i &gt; 0; i--){ 
 CreateDiscount(); 
 } 
 }) 
 .parse(process.argv); 
</code></pre>
Let&#8217;s just focus on the <code>request</code> function here. This is where we make the external API call to Snipcart. You can see we pass the <code>method: "POST"</code> to the method. This is because we want to post data to Snipcart&#8217;s API. By specifying this method, the API will map the action correctly so it can read the body of the request where the discount data lies.
An exciting API feature we had not used yet is authentication. Our other examples were all on public APIs: they require no authentication. But in real life scenarios, most APIs you&#8217;ll use will probably require some authentication, like the Twitter API or Google Maps API, for instance. It&#8217;s a standard &#8220;pattern&#8221; in the API world. Our customers wouldn&#8217;t be so happy if we were letting anyone create discounts on their shop. 😉
Authentication concepts can become burdensome quite quickly; you can read <a href="http://blog.restcase.com/restful-api-authentication-basics/">this cool post</a> to better master the subject.
For our purpose, we pass the <a href="https://en.wikipedia.org/wiki/Application_programming_interface_key">API key</a> directly in the request and hooray the server recognizes us! It can then execute the request scoped only to our account.
If you want to test our little app, you can run <code>npm install -g</code> in the project directory and simply run <code>discounts x</code> to create discounts x number of times. You can go in your Snipcart dashboard (<a href="https://app.snipcart.com/register">forever free accounts</a> in Test mode) and see for yourself that the discounts have been created properly. You can imagine how powerful this can be: if you had to create 200 of those discounts this would require wayyy too much time to do this via our UI. When you&#8217;re familiar with how APIs work, however, this can be done in a matter of minutes. The code is also reusable, so if you need to do so the same thing a month from now, well, you&#8217;re already all set!
<blockquote>
If you have specific API use cases you&#8217;d like us to cover, write them in the comments. We&#8217;ll consider adding them to our content roadmap! 🙂
</blockquote>
<h2>Closing thoughts</h2>
I genuinely hope this primer helped you better understand what APIs are, and how you can leverage them in your development workflow.
A few takeaways:
<ul>
<li>APIs will accelerate your velocity and widen your development scope. Use them!</li>
<li>APIs are NOT necessarily bound to the web ecosystem; you&#8217;ll see them everywhere.</li>
<li>Always double check the documentation of the API you want to use.</li>
<li>Always search for existing tools (APIs or otherwise) in your ecosystem before starting to code.</li>
</ul>
Now, our last example isn&#8217;t really &#8220;production&#8221; ready, but it gives you a good idea of how things could look like for a real life use case. There are a lot of things we could have improved, such as letting the user choose the discount type, etc. We could also use the codes created to send them via Email directly in the same function instead of merely logging them. If we had advanced needs for our discounts tools, we could have written an API ourselves. From there we could even create a UI that interacts with our API if we wanted to. Anyway, I hope you get the idea now.! 🙂
So what&#8217;s the next step? Like almost anything in the development sphere, you&#8217;ll need to code, code, code, and code some more! That&#8217;s how you&#8217;ll familiarize yourself API management &amp; integration. After a while, you&#8217;ll become efficient with them.
And that&#8217;s where the real fun begins.
<hr>
If you&#8217;ve enjoyed this post, please take a second to <a href="https://twitter.com/home?status=A%20Painless%20Intro%20to%20APIs%3A%20How%20to%20Use,%20Integrate,%20%26%20Benefit%20https%3A//buff.ly/2yBrftE%20via%20%40snipcart%20by%20%40maxlaboisson%20%23API%20%23webdev">share it on Twitter</a>. Got comments, questions? Hit the section below!
<div><a href="https://snipcart.com/blog/apis-integration-usage-benefits">https://snipcart.com/blog/apis-integration-usage-benefits</a></div>

A Painless Intro to APIs: How to Use, Integrate, & Benefit

A Painless Intro to APIs: How to Use, Integrate, & Benefit

Top Stories