Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@paladique
Last active December 5, 2019 21:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save paladique/3e4e41002edc82e025fa9fd588d87463 to your computer and use it in GitHub Desktop.
Save paladique/3e4e41002edc82e025fa9fd588d87463 to your computer and use it in GitHub Desktop.
25 Days of Serverless - Day 10 Solution

25 Days of Serverless Challenge: Day 10, Author's Solution

There are many ways to approach this challenge, this is my solution.

  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. Logic app configuration
  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: completed site

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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="anchorme.min.js" type="text/javascript"></script>
<script>
let request = new XMLHttpRequest();
request.responseType = 'text'
request.open('GET', "blob_filename.json");
request.send();
request.onload = function() {
var tweetData = JSON.parse(request.response);
var list = document.getElementById("dealsList")
for (const t of tweetData) {
var li = document.createElement("li")
li.innerHTML = anchorme(t.TweetText)
list.appendChild(li)
}
}
</script>
<title>Today's Deals</title>
</head>
<body>
<h1>Today's Deals</h1>
<div id="dealContainer">
<ul id="dealsList">
</ul>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment