{"id":1307,"date":"2025-01-28T00:47:08","date_gmt":"2025-01-28T05:47:08","guid":{"rendered":"https:\/\/itp.nyu.edu\/networks\/?page_id=1307"},"modified":"2025-01-28T05:45:11","modified_gmt":"2025-01-28T10:45:11","slug":"apis-and-web-apis","status":"publish","type":"page","link":"https:\/\/itp.nyu.edu\/networks\/explanations\/apis-and-web-apis\/","title":{"rendered":"APIs and Web APIs"},"content":{"rendered":"\n<p><em>Author: Cara Cai<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_is_an_API\"><\/span><strong>What is an API?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>An <strong>API (Application Programming Interface)<\/strong> is a structured set of rules, protocols, and tools that allow different software applications to communicate and share functionality. APIs are not limited to web-based interactions; they also exist in various forms, including <strong>Operating System APIs<\/strong> (allowing applications to interact with system resources like file systems or memory), <strong>Database APIs<\/strong> (facilitating querying and data manipulation in databases), <strong>Hardware APIs<\/strong> (enabling communication with devices like cameras or sensors), and <strong>Library APIs<\/strong> (offering predefined functionalities for developers to integrate into their applications). Some APIs operate locally within a system, some connect disparate systems, sometimes over a network.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_is_a_Web_API\"><\/span><strong>What is a Web API?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>A <strong>Web API<\/strong> is a specialized type of API designed for communication over the Internet using web protocols like <strong><a href=\"https:\/\/itp.nyu.edu\/networks\/explanations\/a-gentle-introduction-to-http\/\" data-type=\"page\" data-id=\"210\">HTTP\/HTTPS<\/a><\/strong>. It facilitates interaction between clients and servers, enabling applications to request and exchange data dynamically. For instance, Web APIs power functionalities like embedding Google Maps into a website, fetching real-time weather updates, or processing online payments through gateways. By enabling seamless integration between platforms, devices, and services, Web APIs are crucial for building modern, interactive web applications.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Arduino_as_API_and_Web_API_Client\"><\/span>Arduino as API and Web API Client<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Arduino_as_an_API\"><\/span>Arduino as an API<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Arduino can be understood as an <strong>API for hardware.<\/strong> Through its built-in <strong>Serial library<\/strong>, Arduino enables developers to send and receive data between the microcontroller and connected devices. For example, using functions like <code>Serial.print()<\/code> or <code>Serial.read()<\/code>, developers can transfer sensor readings to a computer or receive commands to control an actuator.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Arduino_as_a_Web_API_Client\"><\/span>Arduino as a Web API Client<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>When equipped with network capabilities, such as Wi-Fi or Ethernet shields, or by using boards like the ESP32 or Arduino Uno WiFi, Arduino can interact with web servers via HTTP, making it capable of working with <strong>web APIs<\/strong>. This transforms Arduino into a powerful tool for Internet of Things (IoT) projects. For instance, an Arduino board can use a REST API to send sensor data\u2014such as temperature or humidity readings\u2014to a cloud server, which can then process and display the data in real time on a dashboard. Similarly, it can retrieve data or control commands from a web server, such as fetching weather updates or toggling a connected device based on user inputs from a web application.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"To_distinguish\"><\/span>To distinguish:<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>If you&#8217;re building an installation where Arduino sends sensor data to a web app (via HTTP) or retrieves commands, you&#8217;re leveraging <strong>web APIs<\/strong>.<\/li>\n\n\n\n<li>If you&#8217;re controlling Arduino from software like Processing or p5.js using serial communication, that&#8217;s an <strong>API for hardware<\/strong>, not a web API.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"P5js_as_a_Web_API\"><\/span><strong>P5.js as a Web API<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>P5.js as a commonly used tool in ITP as well as the creative field, is not just a creative coding library; it functions as a web API designed to make graphics, multimedia, and interaction accessible to everyone.<\/p>\n\n\n\n<p>It operates on two primary levels: as a <strong>simplified JavaScript API<\/strong> and as an <strong>API for the HTML5 Canvas<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"P5js_as_a_Simplified_JavaScript_API\"><\/span><strong>P5.js as a Simplified JavaScript API<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>p5.js simplifies the complexities of JavaScript by providing a high-level interface tailored for creative coding. For instance, functions like <code>createCanvas()<\/code> and <code>mousePressed()<\/code> make it easy to set up drawing environments and handle user interaction without requiring extensive knowledge of the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document_Object_Model\">Document Object Model (DOM)<\/a> or event handling.<\/p>\n\n\n\n<p>On top of that, p5.js extends JavaScript\u2019s capabilities by incorporating features for animation, sound, video handling, etc.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"P5js_as_an_API_for_the_HTML5_Canvas\"><\/span><strong>P5.js as an API for the HTML5 Canvas<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>p5.js can be understood as an API for the HTML Canvas, which requires detailed commands and a solid understanding of low-level drawing operations. P5.js builds on this foundation, offering intuitive, high-level functions like <code>ellipse()<\/code> and <code>rect()<\/code> that translate into the corresponding drawing commands for the Canvas. P5.js also extends Canvas&#8217;s functionality by integrating features such as WebGL for 3D rendering.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Common_Web_APIs_in_Creative_Technology\"><\/span><strong>Common Web APIs in Creative Technology<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th><strong>API Type<\/strong><\/th><th><strong>Example<\/strong><\/th><th><strong>Use Case<\/strong><\/th><\/tr><\/thead><tbody><tr><td><strong><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/REST\">RESTful API<\/a><\/strong><\/td><td>Spotify API<\/td><td>Interactive music installations.<\/td><\/tr><tr><td><strong><a href=\"https:\/\/graphql.org\/\">GraphQL API<\/a><\/strong><\/td><td>GitHub GraphQL API<\/td><td>Querying project repositories for visualizations.<\/td><\/tr><tr><td><strong><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Web_Audio_API\">Web Audio API<\/a><\/strong><\/td><td>p5.sound (built on Web Audio API)<\/td><td>Generative soundscapes.<\/td><\/tr><tr><td><strong><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Canvas_API\">Canvas API<\/a><\/strong><\/td><td>Used by p5.js<\/td><td>Drawing interactive graphics.<\/td><\/tr><tr><td><strong><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/MediaDevices\">Media Devices API<\/a><\/strong><\/td><td>Accessing webcams\/microphones for installations.<\/td><td>Integrating live video or audio streams.<\/td><\/tr><\/tbody><\/table><figcaption class=\"wp-element-caption\"><em>Table 1: a list of common programming APIs<\/em><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"A_Common_Web_API_RESTful_API\"><\/span><strong>A Common Web API: RESTful API<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"RESTful_API_Overview\"><\/span><strong>RESTful API Overview<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>Note: I added a link to the previous REST explainer article. Please check that they&#8217;re more or less in agreement<\/strong>. <\/p>\n\n\n\n<p>A <a href=\"https:\/\/itp.nyu.edu\/networks\/explanations\/rest\/\" data-type=\"page\" data-id=\"942\"><strong>RESTful API<\/strong> <\/a>is one of the most widely used types of Web APIs, offering a structured and efficient way for applications to communicate over the Web. It facilitates the retrieval, updating, and interaction of data between clients (such as web browsers or mobile apps) and servers. The RESTful API process revolves around two primary components: <strong>Request<\/strong> and <strong>Response<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Request\"><\/span><strong>Request<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>A <strong>request<\/strong> is what the client sends to the server to operate. It consists of three main components: the <strong>HTTP method<\/strong>, the <strong>headers<\/strong>, and the <strong>body<\/strong> (optional). The method defines the action to be taken, headers provide metadata such as content type or authentication, and the body contains the <strong>payload<\/strong>\u2014the actual data being sent.<\/p>\n\n\n\n<p>Here are some key terms and concepts to understand Request:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Endpoint\"><\/span><strong>Endpoint<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>An <strong>endpoint<\/strong> is a specific URL or URI (Uniform Resource Identifier) that defines where an API resource can be accessed. It serves as the address for performing operations, such as retrieving, updating, or deleting data. For example, in the API <code>https:\/\/api.example.com\/users<\/code>, the <code>\/users<\/code> endpoint allows the client to manage user data, whether by retrieving a list of users or adding a new one.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"HTTP_Methods\"><\/span><strong>HTTP Methods<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>RESTful APIs use standard HTTP methods to perform actions on resources, providing a consistent and intuitive framework for interaction. The most common methods include <strong>GET<\/strong> (retrieve data), <strong>POST<\/strong> (create new data), <strong>PUT<\/strong> (update existing data), and <strong>DELETE<\/strong> (remove data). For example, a <code>GET<\/code> request to <code>\/users<\/code> fetches a list of users, while a <code>POST<\/code> request to the same endpoint creates a new user.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Headers\"><\/span><strong>Headers<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p><strong>Headers<\/strong> are metadata included in both requests and responses to provide additional context. In a request, headers might specify the content type (<code>Content-Type: application\/json<\/code>) or include authentication tokens. In response, headers might inform the client about the data format or server details. Headers ensure smooth communication between the client and server by standardizing how data is sent and received.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Payload_and_JSON\"><\/span><strong>Payload and JSON<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>The <strong>payload<\/strong> refers to the actual data or content sent in a request or received in a response. It is the meaningful part of the interaction, excluding metadata like headers. For example, in a <code>POST<\/code> request to add a new user, the payload might be:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{ \"name\": \"Alice\", \"email\": \"alice@example.com\" }\n<\/code><\/pre>\n\n\n\n<p>Similarly, the server&#8217;s response may include a payload containing the created user\u2019s details.<\/p>\n\n\n\n<p>To note, this data format is <strong>JSON (JavaScript Object Notation),<\/strong> the most commonly used data format in RESTful APIs due to its simplicity, readability, and compatibility with most programming languages. It can be used to structure the <strong>payload<\/strong> for both requests and responses. JSON ensures that data can be easily understood by both humans and machines, making it a key component of modern APIs.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Example_of_a_Request\"><\/span><strong>Example of a Request<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Here\u2019s an example of a complete RESTful API request to create a new user in a user management system. You are building a system where users can sign up. To create a new user, the client sends a <code>POST<\/code> request with user information in the request body to the <code>\/users<\/code> endpoint.<\/p>\n\n\n\n<p><strong>HTTP Method<\/strong>: <code>POST<\/code> (create a new resource)<\/p>\n\n\n\n<p><strong>Endpoint<\/strong>: <code>https:\/\/api.example.com\/users<\/code><\/p>\n\n\n\n<p><strong>Headers<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Content-Type: application\/json\nAuthorization: Bearer your-access-token\n\n<\/code><\/pre>\n\n\n\n<p><strong>Body<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"name\": \"Alice\",\n  \"email\": \"alice@example.com\",\n  \"age\": 25\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Response\"><\/span><strong>Response<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>A <strong>response<\/strong> is what the server sends back to the client after processing a request. It includes three main elements: the <strong>status code<\/strong>, which indicates the result of the operation (e.g., 200 for success, 404 for not found); the <strong>headers<\/strong>, which provide metadata about the response; and the <strong>body<\/strong>, which contains the <strong>payload<\/strong> with the requested or updated data.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Example_of_a_Response\"><\/span><strong>Example of a Response<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p><strong>Response Status Code<\/strong>: <code>201 Created<\/code> (Response successfully created)<\/p>\n\n\n\n<p><strong>Response Headers<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Content-Type: application\/json\n<\/code><\/pre>\n\n\n\n<p><strong>Response Body<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"id\": 1,\n  \"name\": \"Alice\",\n  \"email\": \"alice@example.com\",\n  \"age\": 25,\n  \"createdAt\": \"2024-11-28T10:15:00Z\"\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Key_Features_of_REST_APIs\"><\/span><strong>Key Features of REST APIs<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>REST APIs offer several essential features, making them a cornerstone of modern web development. They use <strong>human-readable URLs<\/strong> like <code>\/users<\/code> or <code>\/artworks<\/code>, which makes endpoints intuitive and easy to navigate (As a contrast example: <a href=\"https:\/\/www.example.com\/query?name=here&amp;lat=40.77&amp;long=-74.99\">https:\/\/www.example.com\/query?name=here&amp;lat=40.77&amp;long=-74.99<\/a>, this is a query string API that is not as friendly to read).<\/p>\n\n\n\n<p>REST APIs also support <strong>flexible data formats<\/strong>, with JSON being the most widely used due to its simplicity and compatibility, though XML and other formats are also supported. These features make REST APIs particularly valuable in creative technology, where they power data-driven installations, IoT systems, and real-time art platforms, enabling seamless integration and innovation.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span><strong>Conclusion<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h1>\n\n\n\n<p>Web APIs are powerful tools for enabling creative, dynamic, and interactive projects in fields like ITP. Whether using RESTful APIs to fetch data, p5.js to manipulate visuals, or integrating IoT devices with Arduino APIs, Web APIs provide the essential foundation for many modern projects. By leveraging Web APIs, creative technologists can seamlessly design innovative solutions that connect the digital and physical worlds<\/p>\n\n\n\n<h1 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"References\"><\/span>References<span class=\"ez-toc-section-end\"><\/span><\/h1>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/docs.arduino.cc\/arduino-cloud\/api\/arduino-iot-api\">Arduino IOT Documentation<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/happycoding.io\/tutorials\/p5js\/web-dev\">Happy Coding,  &#8220;From p5.js to Web Dev&#8221;<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.spiceworks.com\/tech\/devops\/articles\/application-programming-interface\">Spiceworks Inc, &#8220;API Meaning, Working, Types, Protocols, and Examples&#8221;<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/konghq.com\/blog\/learning-center\/what-is-restful-api\">Kong, &#8220;What is RESTful APIs? Benefits and Examples&#8221;<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/help.vidizmo.com\/support\/solutions\/articles\/17000111404-understanding-rest-api-request-response-structure\">VIDIZMO, &#8220;Understanding REST API Request\/Response Structure&#8221;<\/a><\/li>\n\n\n\n<li>ChatGPT<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Author: Cara Cai What is an API? An API (Application Programming Interface) is a structured set of rules, protocols, and tools that allow different software applications to communicate and share functionality. APIs are not limited to web-based interactions; they also exist in various forms, including Operating System APIs (allowing applications to interact with system resources &hellip; <a href=\"https:\/\/itp.nyu.edu\/networks\/explanations\/apis-and-web-apis\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;APIs and Web APIs&#8221;<\/span><\/a><\/p>\n","protected":false},"author":64,"featured_media":0,"parent":19,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1307","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/itp.nyu.edu\/networks\/wp-json\/wp\/v2\/pages\/1307"}],"collection":[{"href":"https:\/\/itp.nyu.edu\/networks\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/itp.nyu.edu\/networks\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/itp.nyu.edu\/networks\/wp-json\/wp\/v2\/users\/64"}],"replies":[{"embeddable":true,"href":"https:\/\/itp.nyu.edu\/networks\/wp-json\/wp\/v2\/comments?post=1307"}],"version-history":[{"count":3,"href":"https:\/\/itp.nyu.edu\/networks\/wp-json\/wp\/v2\/pages\/1307\/revisions"}],"predecessor-version":[{"id":1350,"href":"https:\/\/itp.nyu.edu\/networks\/wp-json\/wp\/v2\/pages\/1307\/revisions\/1350"}],"up":[{"embeddable":true,"href":"https:\/\/itp.nyu.edu\/networks\/wp-json\/wp\/v2\/pages\/19"}],"wp:attachment":[{"href":"https:\/\/itp.nyu.edu\/networks\/wp-json\/wp\/v2\/media?parent=1307"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}