Building a Reddit Browser (and XML Parser) in Appsmith

Building a Reddit Browser (and XML Parser) in Appsmith

Did you know you can turn almost any sub-Reddit into an RSS feed by adding .RSS to the url?!

shocked

RSS? Ok, by why is this useful? 🤨

Because it's basically an API to GET the recent posts, in XML format, without all the setup of enabling the API!!

Screen Shot 2021-07-20 at 7.33.48 PM.png

And with a little data transformation using Appsmith, the raw XML can easily be turned into an array of JSON objects to build a feed viewer. From there, all kinds of other integrations could be built, passing data from the selected feed to the next function.

For this tutorial, I'll be parsing data from Reddit.com using the .RSS url, but this method could be applied for viewing any XML data source.

⚙️ Setup

Create a new Appsmith app and add the following Widgets:

2021-07-20 19.36.18.gif

NameType
subredditInput/Text
resultsTable
updateButton
previewIframe
  1. Add a new Datasource>APIs>Create New: Name: getXML GET: https://www.reddit.com/r/{{subreddit.text}}/.rss
  2. Enter a sub-reddit name in the subreddit Input Widget
  3. Run getXML

Now that the API response is populated, the auto-complete will help us navigate the results and bind the correct property of the response to a the results table Widget.

  1. Bind the results Table-Widget to the getXML API {{xmlParser.parse(getXML.data).feed.entry}} Screen Shot 2021-07-20 at 7.40.32 PM.png
  2. Bind the preview Iframe-Widget to the 3rd link in the content property of the "currentRow" Screen Shot 2021-07-20 at 7.47.44 PM.png
  3. DEPLOY! 🚀

2021-07-20 19.49.59.gif


{{results.selectedRow.content.split('"')[3]}}

This line 'splits' the content property of the getXML API results by the &quote; pattern, and creates and array from the results. The 4rd value in this list is the one we want for the preview, but the list is zero-based. So [3] gets the 4th item from the array.

2021-07-20 20.18.28.gif


Thanks for reading! Even though RSS isn't as popular these days for personal use, there are still TONS of uses for no-code solutions! Here are a few resources to help inspire your own integration:

rss.app

rss2json.com

listennotes.com/rss-viewer

google.com/alerts

#xml#rss#devops#tutorial#7daystreak
 
Share this