Tag Archives: light-code

Light-Code Data Integration With Zapier

Recently I started sharing my learning around various experiments in area of no-code & light-code. Previously I had written a blog post on no-code Airtable Integration for data collection & processing. This post is about an experiment that I did few weeks back for a Proof-Of-Concept to create tickets and search for users in Zendesk [ to many this should not need any introduction ]

In order to complete my Proof-Of-Concept , I divided my processing into four major blocks:

  • Data Entry
    • Leverages a simple app created using React & React Zapier Form
    • Deploys to a very a easy to use static web publishing platform using surge.sh
  • Data Collection & Mapping
    • Created a workflow step to collect & map data using Zapier
  • Triggers
  • Data Persistence
    • Created a workflow step to persist the processed information back into storage of choice
    • or Can also inspect the data using RequestBin

The over-all architecture flow would like somewhat like this :

flow

In terms of account set-up , you would need trial or entry level account set-up with following

  • Zapier
  • Zendesk
  • Surge.sh
  • RequestBin

In this experiment the dominant design pattern is around Zapier. As we walk through various blocks you would understand how different constructs of a Zap as Zapier calls it are at play.

Data Entry

Using a default React App , I integrated the react-zapier-form package [ details are provided above ] . This package helped me to quickly integrate with a catch-hook that was defined within the Zapier workflow which allows us to post the data from the react form to the catch-hook as a json payload.

</p>import ZapierForm from 'react-zapier-form'
 
...
 
<ZapierForm action='INSERT YOUR HOOK'>
   {({ error, loading, success }) => {
      return (
         <div>
            {!success && !loading &&
               <div>
                  <input type='email' name='Email' placeholder='Email' />
                  <textarea name='Message' placeholder='Your message' />
                  <button>Submit</button>
               </div>
            }
            {loading && <div>Loading...</div>}
            {error && <div>Something went wrong. Please try again later.</div>}
            {success && <div>Thank you for contacting us!</div>}
         </div>
      )
   }}
</ZapierForm><p class="has-text-align-justify">

Once this react app is ready for deployment , I always love to move away from localhost Proof-Of-Concept to a deployment in cloud experience , so leveraging surge.sh came very handy to that effect. Surge has been built from the ground up for native web application publishing and is committed to being the best way for Front-End Developers to put HTML5 applications into production.

& you can deploy for free for starters 🙂

</p>npm install -g surge
npm run build
cd build
mv index.html 200.html
surge<p class="has-text-align-justify">

The command sequence does as follows

  • Install surge
  • Build your React App
  • Rename index.html to 200.html [ If we don’t rename index.html, everything will work fine, but in case you have client side routing routing (maybe with React Router) and we navigate to a new route and refresh the page, we’ll get a 404 “page not found” error. Since many React projects implement client-side routing, I have included this step. If you aren’t using client-side routing, feel free to skip renaming the index.html file. Read more about adding a 200 page for client-side routing on the Surge help docs.
  • Now run the surge command , that’s it !

Data Mapping & Triggers

Zapier workflow construction is pretty straight forward and one can proceed very swiftly through the integration. As you can see that there is node based code to capture the response and then post back on a URL , which I grabbed from RequesBin to post the data.

Once the whole process runs end to end you can then see that a post of the processed information is available at the HTTP hook . One can similarly send this data to a persistent storage using Zapier as it has integrated to many popular persistence mechanism including queues.

One of the things you would see in the workflow schematic image and the workflow itself is the use of a request_id that is generated on client side and then floated across the processing pipeline for us to create trace all along Zapier workflow and then be able to get the result look-up using the same request_id. I used the uuid package to achieve this piece of GUID generation.

I hope people find this useful for their day-to-day problem statement around workflow automation and it provides them some more options on how to move steadily through some integration problems of connecting with different Apps because Zapier provides more than 1500+ integrations that can be useful to automate many tasks.

If you have any feedback or comments post back on the blog . Happy Reading !