<?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: Ahmad Abdulaziz</title>
    <description>The latest articles on DEV Community by Ahmad Abdulaziz (@devamaz).</description>
    <link>https://dev.to/devamaz</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%2F32862%2Fda1dacce-199f-4b76-a872-2e544effe269.JPG</url>
      <title>DEV Community: Ahmad Abdulaziz</title>
      <link>https://dev.to/devamaz</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/devamaz"/>
    <language>en</language>
    <item>
      <title>Resolving "This workflow run was not suspended" in Nested Mastra Workflows</title>
      <dc:creator>Ahmad Abdulaziz</dc:creator>
      <pubDate>Wed, 31 Dec 2025 14:15:40 +0000</pubDate>
      <link>https://dev.to/devamaz/mastra-this-workflow-run-was-not-suspended-error-4o3a</link>
      <guid>https://dev.to/devamaz/mastra-this-workflow-run-was-not-suspended-error-4o3a</guid>
      <description>&lt;p&gt;If you are building nested workflows with Mastra and encountering the error "This workflow run was not suspended," it is likely because you are attempting to resume the child workflow directly instead of through the parent.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Problem
&lt;/h2&gt;

&lt;p&gt;When a nested workflow hits a suspension point like a manual trigger or user input step, the entire execution state is tied to the main parent workflow.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;//mainworkflow.ts&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;mainWorkflow&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;createWorkflow&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;id&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;benki&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;childWorkflow&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;commit&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;//childworkflow.ts&lt;/span&gt;

&lt;span class="c1"&gt;//nested workflow&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;childWorkflow&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;createWorkflow&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;id&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;child-workflow&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;description&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Workflow for processing transfers&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;inputSchema&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;z&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;object&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
    &lt;span class="na"&gt;message&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;z&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;string&lt;/span&gt;&lt;span class="p"&gt;(),&lt;/span&gt;
  &lt;span class="p"&gt;}),&lt;/span&gt;
  &lt;span class="na"&gt;outputSchema&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;z&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;object&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
    &lt;span class="na"&gt;message&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;z&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;string&lt;/span&gt;&lt;span class="p"&gt;(),&lt;/span&gt;
  &lt;span class="p"&gt;})&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;resolveStep&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;requestInfoFormUserStep&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;//suspend step to get info from the user&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;finalExecutionStep&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;commit&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// app.ts&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;mastra&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;../mastra&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;workflow&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;mastra&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getWorkflow&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;mainWorkflow&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;workflowRun&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;workflow&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;createRun&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In the example below, even though the suspension happens inside childWorkflow, attempting to resume it using &lt;code&gt;mastra.getWorkflow("childWorkflow")&lt;/code&gt; will fail because that specific run context doesn't exist independently of the parent.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;resumeWorkflow&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;mastra&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getWorkflow&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;childWorkflow&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;workflowRun&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;resumeWorkflow&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;createRun&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;runId&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;


&lt;span class="c1"&gt;// Resume the workflow from the suspended step&lt;/span&gt;
&lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;workflowRun&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;resume&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;step&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;child-workflow&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;request-data&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
  &lt;span class="na"&gt;resumeData&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="cm"&gt;/* ... */&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  The Solution
&lt;/h2&gt;

&lt;p&gt;You must access the main workflow that initiated the run. The step property in the resume object should then use an array representing the suspendedPaths to point to the correct step inside the nested workflow.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;resumeWorkflow&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;mastra&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getWorkflow&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;mainWorkflow&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;//main workflow&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;workflowRun&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;resumeWorkflow&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;createRun&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;runId&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;workflowRun&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;resume&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;step&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;child-workflow&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;request-data&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
  &lt;span class="na"&gt;resumeData&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="cm"&gt;/* ... */&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Note: Ensure the strings in your step array exactly match the id fields defined in your workflow configuration.&lt;/p&gt;

</description>
      <category>agents</category>
      <category>ai</category>
      <category>mastra</category>
      <category>tooling</category>
    </item>
    <item>
      <title>OSI model for Software Engineers</title>
      <dc:creator>Ahmad Abdulaziz</dc:creator>
      <pubDate>Fri, 30 Apr 2021 07:24:02 +0000</pubDate>
      <link>https://dev.to/devamaz/understanding-osi-model-for-software-engineers-3ild</link>
      <guid>https://dev.to/devamaz/understanding-osi-model-for-software-engineers-3ild</guid>
      <description>&lt;p&gt;Few years ago during my CS degree, I could remember my lecturer explaining the Open Systems Interconnection (OSI model) under networking and could still remember how complex it seems, and I had to memorize everything to pass the exam. I thought I will never need to understand it as a software engineer. Fast-forward to some months ago trying to understand how load balancing works in layer 7 and layer 4, I had to restudy the OSI model again, this time around not as a student but as a software engineer. I had to relearn what I thought I never needed to learn.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What is OSI model?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;OSI model is an initial for Open System Interconnection, and it standardized the communication in the computer system. It is what the internet, mobile, LAN, and router uses to establish communication. In a simple term, it is how data is passed from system A to system B either with LAN or Wi-Fi.&lt;/p&gt;

&lt;p&gt;The OSI model consists of 7 different layers and each layer contains a different protocol. The layers are the Application layer, Presentation layer, Session layer, Transport layer, Network layer, Data-Link layer, and the Physical layer. Let's explain how data moves from the topmost layer to the last layer.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Application Layer (Layer 7)&lt;/strong&gt;: This is where System A (the client) makes a request to System B. So let's say System A sent a GET/POST request to  System B, this request contains a bunch of information, such as headers, cookies, content-type, body, etc., which is summed up into a string, passed to the rest of the OSI models as byte data. This layer also consists of other protocols like HTTP, FTP, TELNET, and SMTP.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Presentation Layer (Layer 6)&lt;/strong&gt;: This layer might be optional if you are using HTTPS as data sent through HTTPS is already encrypted. The presentation layer encrypts data coming from the application layer. This layer transforms the data(string) into byte and also compresses the data before sending it to the next layer and uses the SSL for encryption and decryption.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Session Layer (Layer 5)&lt;/strong&gt;: Session Layer is simple as it's just appending a session to the data coming from the presentation layer. This layer checks the authentication and authorization of the user/data being sent.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Transport Layer (Layer 4)&lt;/strong&gt;: This breakdown the data into a sequential, manageable segment, and each segment is attached to the source and destination port. It also controls the amount of data being transmitted and uses Automatic Repeat Request to retransmit data in case of any error. The transport layer uses UDP(User Datagram Protocol) and TCP (Transmission Control Protocol).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Network Layer (Layer 3)&lt;/strong&gt;:  After receiving the segment from the transport layer, the network layer attaches both destination and source IP Address to form packets. This layer also determines the best path for data delivery from source to the determination.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Data Link Layer (Layer 2)&lt;/strong&gt;: Breaks down the packets received from the network layer and the mac address of both the sender and receiver are appended to the packet to form frames.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Physical Layer (Layer 1)&lt;/strong&gt;: On the physical layer, the frames received from the data link layer are converted into 0's and 1's (of course that's what the system understands) i.e. bits that are converted into signals.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;NOTE&lt;/strong&gt;: This is not in any way a comprehensive detail of the OSI model especially from a networking perspective. This is a brief breakdown to help you understand how systems communicate and send data to each other through the OSI model.&lt;/p&gt;

</description>
      <category>computerscience</category>
      <category>networking</category>
      <category>softwareengineer</category>
    </item>
    <item>
      <title>Using Fetch API to Get and Post </title>
      <dc:creator>Ahmad Abdulaziz</dc:creator>
      <pubDate>Thu, 14 Jun 2018 15:48:40 +0000</pubDate>
      <link>https://dev.to/devamaz/using-fetch-api-to-get-and-post--1g7d</link>
      <guid>https://dev.to/devamaz/using-fetch-api-to-get-and-post--1g7d</guid>
      <description>&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--X8TZXn2g--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.ytimg.com/vi/0bec1BmeY4c/maxresdefault.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--X8TZXn2g--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.ytimg.com/vi/0bec1BmeY4c/maxresdefault.jpg" alt="fetchAPI"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In this article, I will talk about how to use javascript fetch API to get and post data to a public API.&lt;/p&gt;

&lt;p&gt;PREREQUISITE&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Text Editor (Notepad++, VSCode, Atom, Bracket, Sublime,  any text editor of your choice)&lt;/li&gt;
&lt;li&gt;Browser( Chrome, Moxilla)&lt;/li&gt;
&lt;li&gt;Any server of your choice (WAMP, XAMP), you can also install live-server extension if you are using VScode, atom-live-server if you are using Atom, or just install npm live server using

&lt;code&gt;npm install –g live-server&lt;/code&gt;

if you have node install on your machine.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  INTRO
&lt;/h2&gt;

&lt;p&gt;Fetch API is a built-in Javascript ES6 &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise"&gt;Promise&lt;/a&gt; that is used to make XMLHttpRequest simpler and easier to GET or POST data asynchronously. There are a lot of libraries that are used to make XMLHttpRequest simpler and easier to read. The most popular one is "jquery's ajax", but fetch API allows us to make XMLHttpRequest with Native Javascript without import of any library. &lt;/p&gt;

&lt;p&gt;Below is a syntax of simple fetch() call back&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;#fetch Syntax

         fetch(url)
            .then(function (res) {
                return res, json()
            })
            .then(function (data) {
                Console.log(data);
            }).catch(function (err) {
                console.log(err)
            })
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;h3&gt;
  
  
  How to use fetch API  to GET data from an API
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Create a directory, name it any name of your choice, mine will be call fetchAPI. You can do this using the traditional way of creating a directory,  create an index.html file inside the folder or you can use the code below in your terminal.
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;//create directory
       mkdir fecthAPI
//enter the fecthAPI folder
       cd fetchAPI
//create  an index.html file
       touch index.html

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Let add the basic html tags, two button tags with an id of id="getData" and id="getAPI" respectively and a paragraph tag with an id='result'.
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="cp"&gt;&amp;lt;!DOCTYPE html&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;html&lt;/span&gt; &lt;span class="na"&gt;lang=&lt;/span&gt;&lt;span class="s"&gt;"en"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;head&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;meta&lt;/span&gt; &lt;span class="na"&gt;charset=&lt;/span&gt;&lt;span class="s"&gt;"UTF-8"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;meta&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;"viewport"&lt;/span&gt; &lt;span class="na"&gt;content=&lt;/span&gt;&lt;span class="s"&gt;"width=device-width, initial-scale=1.0"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;meta&lt;/span&gt; &lt;span class="na"&gt;http-equiv=&lt;/span&gt;&lt;span class="s"&gt;"X-UA-Compatible"&lt;/span&gt; &lt;span class="na"&gt;content=&lt;/span&gt;&lt;span class="s"&gt;"ie=edge"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;title&amp;gt;&lt;/span&gt;Fetch API&lt;span class="nt"&gt;&amp;lt;/title&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/head&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;body&amp;gt;&lt;/span&gt;
      &lt;span class="nt"&gt;&amp;lt;button&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"getData"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;GET DATA FROM LOCAL&lt;span class="nt"&gt;&amp;lt;/button&amp;gt;&lt;/span&gt;
          &lt;span class="nt"&gt;&amp;lt;button&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"getData"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;GET DATA FROM API &lt;span class="nt"&gt;&amp;lt;/button&amp;gt;&lt;/span&gt;
          &lt;span class="nt"&gt;&amp;lt;p&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"result"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/p&amp;gt;&lt;/span&gt;

&lt;span class="nt"&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;The buttons will be used to send a GET request to a local sampleUser.json and public API. There are a lot of public API's you can get data from e.g &lt;a href="http://api.github.com/users"&gt;Github API&lt;/a&gt;, &lt;a href="http://randomuser.me"&gt;Random User API&lt;/a&gt;. But in this example, we will be using &lt;a href="https://jsonplaceholder.typicode.com"&gt;JSONPlaceholder&lt;/a&gt; API. An API that generates random users.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Create javascript eventListener to handle the click event in the index.html file.
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;script&amp;gt;
        document.getElementById('getData').addEventListener('click', getData);
        document.getElementById('getAPI').addEventListener('click', getAPI);


        function getData(){
            // code to execte
        }

        function getAPI(){
            // code to execte
        }

&amp;lt;/script&amp;gt; 
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Let get data from the local file using the fetch API to give more understanding on how to work with the local file. Create a JSON demo “sampleUsers.json”  to try and get data in it.
&amp;gt;Note: Create your sampleUser.json in the same folder with the index.html file for easy access.
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[
    {
        "id": 1,
        "name": "Ahmad Abdul-Aziz",
        "email": "Ahmad.abdulaziz37@gmail.com"     
    },
    {
        "id": 2,
        "name": "Ahmad Habib Hussein",
        "email": "Ahmadhabibhussein@mail.com"     
    },
    {
        "id": 3,
        "name": "Abdullahi Aminu",
        "email": "Aminuawesome@mail.com"     
    },
    {
        "id": 4,
        "name": "Idris Muhammad",
        "email": "rismad@mail.com"     
    }
]
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Good, now let write the fetch() script to get data from the sampleUser.json file you just created and output the result to the index.html&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Note: Write script inside getData() function&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;//getData function

//Using javascript ES5 function 

fetch('sampleUser.json')
    .then(function (res) {
        return res.json();
    })
    .then(function (data) {
        let result = `&amp;lt;h2&amp;gt; User Info From sampleUser.json &amp;lt;/h2&amp;gt;`;
        data.forEach((user) =&amp;gt; {
            const { id, name, email } = user
            result +=
            `&amp;lt;div&amp;gt;
                &amp;lt;h5&amp;gt; User ID: ${id} &amp;lt;/h5&amp;gt;
                &amp;lt;ul class="w3-ul"&amp;gt;
                    &amp;lt;li&amp;gt; User Name : ${name}&amp;lt;/li&amp;gt;
                    &amp;lt;li&amp;gt; User Email: ${email} &amp;lt;/li&amp;gt;
                &amp;lt;/ul&amp;gt;
            &amp;lt;/div&amp;gt;`;

            document.getElementById('result').innerHTML = result;
        });
       })

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Ok, we are good to go. Run the code. “Yay” Simple and fast right? We will apply the same method to get data from a real  API but this time supplying the API endpoint. &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Note: Write script inside getAPI() function&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;//sampleUser.json is replaced by an API endpoint.

//Using ES6 arrow function 

    fetch('https://jsonplaceholder.typicode.com/users')
        .then((res) =&amp;gt; { return res.json() })
        .then((data) =&amp;gt; {
            let result = `&amp;lt;h2&amp;gt; Random User Info From Jsonplaceholder API&amp;lt;/h2&amp;gt;`;
            data.forEach((user) =&amp;gt; {
                const { id, name, email, address: { city, street } } = user
                result +=
                    `&amp;lt;div&amp;gt;
                     &amp;lt;h5&amp;gt; User ID: ${id} &amp;lt;/h5&amp;gt;
                         &amp;lt;ul class="w3-ul"&amp;gt;
                             &amp;lt;li&amp;gt; User Full Name : ${name}&amp;lt;/li&amp;gt;
                             &amp;lt;li&amp;gt; User Email : ${email} &amp;lt;/li&amp;gt;
                             &amp;lt;li&amp;gt; User Address : ${city}, ${street} &amp;lt;/li&amp;gt;
                         &amp;lt;/ul&amp;gt;
                      &amp;lt;/div&amp;gt;`;
                        document.getElementById('result').innerHTML = result;
                    });
                })
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Sweet at this point, we can get data from both sampleUser.json locally and Jsonplaceholder API. Let go on and Post data&lt;/p&gt;

&lt;h3&gt;
  
  
  How to use fetch API to POST data to an API
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;In our index.html file let add a form with an id='postData', two input box and a submit button.
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;form  id="postData"&amp;gt;
        &amp;lt;div&amp;gt;
            &amp;lt;input type="text" name="" id="tittle"&amp;gt;
        &amp;lt;/div&amp;gt;
        &amp;lt;div&amp;gt;
            &amp;lt;textarea name="" id="body" cols="20" rows="5"&amp;gt;&amp;lt;/textarea&amp;gt;
        &amp;lt;/div&amp;gt;
        &amp;lt;input type="submit" value="SEND POST"&amp;gt;
    &amp;lt;/form&amp;gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Add an eventListener to handle the submit button in our form.
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;document.getElementById('postData').addEventListener('submit', postData);

 function postData(event){
            event.preventDefault();

            let tittle = document.getElementById('tittle').value;
            let body = document.getElementById('body').value;

            fetch('https://jsonplaceholder.typicode.com/posts', {
                method: 'POST',
                headers : new Headers(),
                body:JSON.stringify({tittle:tittle, body:body})
            }).then((res) =&amp;gt; res.json())
            .then((data) =&amp;gt;  console.log(data))
            .catch((err)=&amp;gt;console.log(err))
        }
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Use preventDefault() method to stop or prevents the browser from executing the default action. You can handle your response any way you feel like but in this example, we are going to output it to the console.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;We have come to the end of this tutorial. Thank you for reading thus far.&lt;/p&gt;

&lt;p&gt;This post is just a simple introduction of how to GET and POST data with fetch API. Feel free to explore more:&lt;/p&gt;

&lt;p&gt;You can grab the final source code with styling using &lt;a href="https://www.w3schools.com/w3css/4/w3.css"&gt;w3schools CSS &lt;/a&gt;&lt;br&gt;
here on my GitHub repo, &lt;a href="https://github.com/devamaz/fetchAPI"&gt;Repo Link&lt;/a&gt;.  and &lt;a href="https://devamaz.github.io/fetchAPI/"&gt;DEMO ON&lt;/a&gt;.  Don't forget to star the repo&lt;/p&gt;

&lt;p&gt;If you’d like to learn more please visit.  &lt;a href="http://developer.mozilla.org/en-US/docs/Web/API/Fetch_API"&gt;Mozilla fetchAPI&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Follow me on twitter &lt;a href="http://twitter.com/dev_amaz"&gt;@dev_amaz&lt;/a&gt; and feel free to contact me if you need any help. You can also send me email on &lt;a href="mailto:Ahmad.abdulaziz37@gmail.com"&gt;Ahmad.abdulaziz37@gmail.com&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>es6fetch</category>
      <category>api</category>
    </item>
    <item>
      <title>Let discuss Software License</title>
      <dc:creator>Ahmad Abdulaziz</dc:creator>
      <pubDate>Wed, 13 Jun 2018 12:47:37 +0000</pubDate>
      <link>https://dev.to/devamaz/let-discuss-software-license-3h2f</link>
      <guid>https://dev.to/devamaz/let-discuss-software-license-3h2f</guid>
      <description>&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--o0FabO8P--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://s8333.pcdn.co/wp-content/uploads/2015/08/software-licensing-product-image.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--o0FabO8P--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://s8333.pcdn.co/wp-content/uploads/2015/08/software-licensing-product-image.png" alt="software licensiing"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Software licensing is one of the important things most developers neglect, especially when cloning, working or building  an OSS. &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;What is Software license &lt;/li&gt;
&lt;li&gt;Types &lt;/li&gt;
&lt;li&gt;Why you should have one&lt;/li&gt;
&lt;li&gt;And Advantages.&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>discuss</category>
      <category>product</category>
      <category>dev</category>
      <category>software</category>
    </item>
    <item>
      <title>What Podcast do you recommend for developer to get better.</title>
      <dc:creator>Ahmad Abdulaziz</dc:creator>
      <pubDate>Tue, 28 Nov 2017 20:17:02 +0000</pubDate>
      <link>https://dev.to/devamaz/what-podcast-do-you-recommend-for-developer-to-get-better-1n6</link>
      <guid>https://dev.to/devamaz/what-podcast-do-you-recommend-for-developer-to-get-better-1n6</guid>
      <description>&lt;p&gt;What podcast would you advice developers to checkout to improve, and become better developer.&lt;/p&gt;

</description>
      <category>discuss</category>
      <category>webdev</category>
      <category>podcast</category>
    </item>
    <item>
      <title>What the heck is an API?</title>
      <dc:creator>Ahmad Abdulaziz</dc:creator>
      <pubDate>Thu, 23 Nov 2017 14:21:08 +0000</pubDate>
      <link>https://dev.to/devamaz/what-the-heck-is-api-31</link>
      <guid>https://dev.to/devamaz/what-the-heck-is-api-31</guid>
      <description>&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--h6DQXlPT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://developers.giphy.com/static/img/api.c99e353f761d.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--h6DQXlPT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://developers.giphy.com/static/img/api.c99e353f761d.gif" alt="giphy"&gt;&lt;/a&gt;&lt;br&gt;
Have you come across or heard of this acronym API but don't really know what is it and/or what its used for? I remember the first time I heard about it. It was in a boot camp when I was told to build a web app that can consume API I was like, what the heck is API?&lt;br&gt;
Here in this article we will address the following :-&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;What is an API&lt;/li&gt;
&lt;li&gt;Why API&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;All set? Ready? Go!&lt;/p&gt;

&lt;p&gt;What is API?&lt;br&gt;
API (Application Programming Interface) is a set of subroutine definitions, protocols, and tools for building application software. &lt;a href="https://en.wikipedia.org/wiki/Application_programming_interface"&gt;-wikipedia&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Does that sound more confusing, Ok let push aside the fancy development lingo - I mean the “wikipedia standard” and imagine an API being a messenger that accepts requests and delivers messeages. Are you following or should we makes it more interesting?&lt;/p&gt;

&lt;p&gt;Imagine API to be Pizza hut (a company that sells pizza and does home delivery) everybody loves pizza 🍕 right? We pick our phone and call Pizza hut to place an order with the type of pizza we want, the quantity we want and the address we want it delivered (i.e sending a request). Pizza hut takes our order and sends a pizza to that address. &lt;/p&gt;

&lt;p&gt;Have you ever wondered how Pizza Hut prepares it’s pizza and delivers it on time? how they do it is actually none of our business). And tyhat is basically how API works.&lt;/p&gt;

&lt;p&gt;APIs allow software(application) to talk to each other without user intervention. When we place our order with Pizza Hut, we gave them our address how pizza hut delivery guy found the address is not something  we must know or worry about and I am sure nobody wants to be bored with that detail.&lt;/p&gt;

&lt;p&gt;Why API&lt;br&gt;
Let’s imagine everyone have to go to pizza hut (the pizzeria) to get their pizza, no delivery guy, no waiter, no order arrangement. Can you imagine how time consuming and inconvenient that will be; following long queues and getting  stress out.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--9eVYkDs2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://media1.tenor.com/images/83db6f25888c982b3b04c41de0b5dd2a/tenor.gif%3Fitemid%3D5018456" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--9eVYkDs2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://media1.tenor.com/images/83db6f25888c982b3b04c41de0b5dd2a/tenor.gif%3Fitemid%3D5018456" alt="image from tenor"&gt;&lt;/a&gt;&lt;br&gt;
Instead of going to Pizza Hut ourselves anytime we want pizza, we can make Pizza hut come to us. Pizza hut makes it easier for us by delivering what we want to our  convenient address. That is how API make our work easier in development.&lt;/p&gt;

&lt;p&gt;Now let say we want to build an app that displays weather report, the region, humidity, temperature, time and date. We can just assign a static data and that will never change but we all know the weather changes every time. So the question is how do we get the data to change? Luckily for us we have a lot of web services (provider of weather report) that we can get these data from without having to mount whether sensors all over the world just to get data for our simple app. We will send a GET request to their server through an API endpoint, just like we place order for pizza from pizza hut. The server respond to our request in a ‘‘JSON’’ format. Just like the pizza delivery guy deliver our pizza.&lt;br&gt;
There’s a lot more we can do with the API, but to keep this simple that’s all we will cover in this article. Thanks for reading.&lt;/p&gt;

&lt;p&gt;For more information on API visit &lt;a href="https://money.howstuffworks.com/business-communications/how-to-leverage-an-api-for-conferencing1.htm"&gt;How stuff work&lt;/a&gt; or &lt;a href="https://auth0.com/blog/api-less-scary-approach"&gt;Introduction to API&lt;/a&gt; by Biodun Chris.&lt;/p&gt;

</description>
      <category>api</category>
      <category>webdev</category>
      <category>javascript</category>
      <category>beginners</category>
    </item>
  </channel>
</rss>
