Skip to content

Instantly share code, notes, and snippets.

@paladique paladique/index.html Secret
Last active Dec 5, 2019

Embed
What would you like to do?
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
You can’t perform that action at this time.