Create a website with daily deals from Twitter using Logic Apps and Blob Storage

This article is part of #25DaysOfServerless. New challenges will be published every day from Microsoft Cloud Advocates throughout the month of December. Find out more about how Microsoft Azure enables your Serverless functions.

Have an idea or a solution? Share your thoughts on Twitter!

In Italy, children hang stockings on their fireplace so that an older woman named Befana can place their gifts inside of them. Along with the gifts, Befana also places candy or coal in each stocking based on how good they were that year.

This year has been really busy for Befana so she hired you as an assistant to help move things along faster. While Befana was shopping for candy, she lost her glasses. Her replacement glasses will arrive before the night of Epiphany, when children will be expecting their gifts. This is very unfortunate for Befana because she hasn't finished her gift shopping yet!

Befana is relying on you to finish shopping for the remaining gifts. Befana is really particular about getting a good deal on her shopping and expects you to be the same. Luckily, this is a major time of year for shoppers and deal seekers! But how do you keep track of all of these deals?Let's make a daily digest of current deals of interest!

In today's challenge, you'll create a tool that finds deals of the day from Twitter and adds them to a static web page. A Logic App is great serverless solution for this!

Author's Solution

There are many ways to approach this challenge, this is my solution. You can check out my HTML page in this gist.

1. Create a Storage Account
   • Enable "Static Website" option.
   • Set index document name to index.html
   • Save the primary endpoint somewhere to visit later.
2. Create a Logic App with a recurrence trigger
   • Add Twitter connector and write the search syntax for desired Tweets. Here's a sample: (from:DealsUnderCost OR from:wirecutterdeals ) OR (#deal OR #deals) filter:links -filter:replies
     • This search gathers tweets that:
       • Are my favorite accounts for deals
       • Uses the #deals or #deal hashtags
       • Only have links in them
       • Are not replies
   • Create an variable action and save the search results body to a variable.
   • Create a blob creation action, select the blob container named $web from step 1 and name the blob something unique (the date time expressions are good option for this. Example: dayOfYear(utcNow())). Add .json to the end of its name.
   • Set the blob contents to the value of the variable. Alternatively, you can use the update blob action to modify the same blob each instead.
3. Open VS Code and create an HTML page called index.html.
   • In index.html, create a basic barebones HTML page by typing html and pressing tab.
   • Add a script tag with JavaScript code that loops through the JSON blob from step 2 and adds/appends the TweetText content to the HTML page. Add as much information as you'd like from the Twitter data.
   • If you'd like Tweets with links to render as links on your webpage, use a library like anchorme.
4. Visit the page created in step 1.

Here's the end result:

Additional Approaches

• Use a loop action in Logic Apps to loop through the Twitter search result body, grabs the tweet contents, and inserts it into the body of the HTML. JavaScript is not needed for this approach.
• Using an HTTP triggered Azure Function to serve the JSON file through its endpoint.

Want to submit your solution to this challenge? Build a solution locally and then submit an issue. If your solution doesn't involve code you can record a short video and submit it as a link in the issue description. Make sure to tell us which challenge the solution is for. We're excited to see what you build! Do you have comments or questions? Add them to the comments area below.

Watch for surprises all during December as we celebrate 25 Days of Serverless. Stay tuned here on dev.to as we feature challenges and solutions! Sign up for a free account on Azure to get ready for the challenges!