<p><em>DynamoDB, AWS IoT, Lambda, API Gateway, React, SVG</em></p>
<p>My workstation is in a loft room and it's become very clear through numerous lockdowns quite how hot it gets up there. Back in 2020 I started tracking the temperature with a Raspberry PI and a small temperature sensor plugged into a breadboard.</p>
<p>This reports to a DynamoDB table using AWS IoT. API Gateway &#x26; Lambda make this data available via an API. Christmas at the folks then gave me a couple of spare days to have this data surfaced using a semi-interactive SVG.</p>
<p>The SVG displays the average temperature each day as recorded in the room for the last 30+ days.</p>
<p>I wanted the SVG to clearly convey a comfortable/normal temperature band, and to show quite a contrast when temperatures stray outside of these values. To do this there's no visible change in position for "normal" values (20°-24°). Values outside of this range contrast in their physical position as well as colour.</p>
<p>A good result is a set of grey bars with very few outliers. The reality of the summer period however is many uncomfortably hot days, even with aircon to help.</p>
<p>Whilst this is an SVG, it's actually a React component. The next iteration would want it being a stand-alone SVG with inline JS.</p>
<p>Why is it on my website? No good reason.</p>
<p><img src="/posts/temperature/graph.png" alt="Graph Example"></p>


Temperature

<h2>Amplify</h2>
<p>AWS Amplify pulls together a number of key AWS services into one handy plug and play CLI tool. With a few commands, and by answering a set of questions, you can spin up a whole serverless backend in minutes.</p>
<p>I recently ran a tutorial at work on some of the basics of Amplify, and thought I'd share here a brief overview of the things I covered. This post is an overview to give a flavour of what Amplify makes easy and not a full tutorial in itself.</p>
<h2>Beer</h2>
<p>With an only increasing love of beer (read: dependency) and having taken a foray into the world of home brew, it naturally found its way to being the example I used.</p>
<p><em>New Brew</em> is a home brew tracker providing a configurable timeline of the key stages after brew day, a record of key pieces of information such as the ingredients used, and push notifications to your phone each time you hit a new stage and have work to carry out. In the following example, I'll briefly cover how I used AWS Amplify to take an entirely offline React interface to a serverless, GraphQL backed web app utilising Cognito, DynamoDB, AppSync, and using Cloudwatch + IFTTT for push notifications. (IFTTT isn't covered by Amplify but is a simple webhook).</p>
<p align="center">
    <br />
    <img src="/posts/aws-amplify/newbrew.png" />
</p>
<h2>Amplify Commands</h2>
<p>The main Amplify commands are as follows:</p>
<pre><code class="language-bash">
# set up the IAM user you'll be using to push your changes to the cloud
amplify configure

# initialise the project, connect your repo, pick the name, environment, front-end stack etc.
amplify init

# provide a summary of the services you're using
amplify status

# add a service to your project such as hosting, api etc.
amplify add &#x3C;service>

# push your changes to the cloud
amplify push

# view your Amplify project in the AWS console
amplify console

</code></pre>
<h2>Setup</h2>
<pre><code class="language-bash">amplify init
</code></pre>
<p>Amplify not only builds out the backend for you, but it also generates the front-end integration code you'll need. So, once you've run <code>configure</code> and then hit the <code>init</code> step, it'll ask you questions such as which front-end language and framework you're using. It supports a number, including iOS, Android and specifically React in this example.</p>
<p>At any point you can use the following command to see which features of AWS Amplify you're using, and whether the latest changes have been pushed to the cloud. At this point, there'll be nothing - so let's get started!</p>
<pre><code class="language-bash">amplify status
</code></pre>
<h2>Host Your Frontend</h2>
<p>I often like to prototype front-ends entirely offline, using local storage <code>window.localStorage</code> for simple state. It's a great way to build up behaviour and UX without having to worry about a backend. I can focus on project structure and data structure, without needing to spend much time on plumbing.</p>
<p>But once you've got impatient with not being able to use the app across devices, or need some functionality only a backend will bring, it's time to get the app online.</p>
<pre><code class="language-bash">amplify add hosting
</code></pre>
<p>This command will quickly have the app hosted. I opted for Amplify Managed with CI connectivity to Github. It'll helpfully create a pipeline for CI/CD and auto-deploy your frontend.</p>
<p>You can run the following to push your changes to the cloud. You'll need to run this often to apply your auto-generated cloudformation that's been created with each Amplify command.</p>
<pre><code class="language-bash">amplify push
</code></pre>
<h2>Add Authentication</h2>
<p>Next up we want to ensure only authorised users are able to access the web app. This will be important when we come to implement the GraphQL API in a moment.</p>
<pre><code class="language-bash">amplify add auth
</code></pre>
<p>You can add an off-the-shelf log-in gate just by adding some dependencies and a few lines to your <code>App.tsx</code>. This log-in gate also provides sign up and email verification. The look and feel is configurable.</p>
<p>As this point if you're running your frontend locally, you'll now be able to register, verify your email address, and log in. Alternatively, you can commit, and have the CI pipeline deploy this for you.</p>
<h2>Add API</h2>
<p>This is where it gets a bit more exciting...</p>
<pre><code class="language-bash">amplify add api
</code></pre>
<p>You're asked a series of questions such as what to use for auth (hint: the Cognito Pool just created), and also the type of API you'd like to create. Picking <code>GraphQL</code> and the <code>one-to-many</code> option will then create you an example GraphQL Schema for a blog with posts and comments.</p>
<p>This GraphQL schema is the crucial part underpinning the API structure and DynamoDB persistence layer that will be created when you push.</p>
<p>Edit it to suit your app, <code>Brew</code> and <code>Stage</code> types in my case, and use Directives to signal relationships, rules and more.</p>
<pre><code class="language-bash">
type Brew @model @auth(rules: [{ allow: owner }]) {
  id: ID!
  name: String!
  description: String
  startDate: AWSDateTime!
  ingredients: AWSJSON
  abv: String!
  stages: [Stage] @connection(keyName: "byBrew", fields: ["id"])
}

type Stage
  @model
  @auth(rules: [{ allow: owner }])
  @key(name: "byBrew", fields: ["brewID"]) {
  id: ID!
  name: String!
  durationDays: Int!
  startDate: AWSDateTime!
  brewID: ID!
  brew: Brew @connection(fields: ["brewID"])
}

</code></pre>
<p>Once pushed, Amplify will ask if you'd like to auto-generate the front-end integration code needed to interact with the API. The answer is probably yes and means you now need to add in only a simple bit of plumbing to switch your app from local storage to the GraphQL API!</p>
<pre><code class="language-bash">amplify push
</code></pre>
<h2>Push Notifications</h2>
<p>Finally, I built push notifications into the app through the creation of a couple of Lambdas, Cloudwatch and IFTTT.</p>
<pre><code class="language-bash">amplify add function
</code></pre>
<p>The above creates a Lambda, and by selecting <code>Lambda Trigger</code> and <code>DynamoDB Stream</code>, you can have that lambda triggered each time data is modified in the specified table. I created a Lambda plugged into the <code>Stage</code> table, which takes a given stage start date, and creates a Cloudwatch Rule. This Cloudwatch Rule has a target of another Lambda (also created with <code>amplify add function</code>), which when triggered will then hit IFTTT using a simple HTTP request to their Webhook applet. A push notification will then make its way to your device, assuming you have their app installed.</p>
<p>Like with previous steps, most of the plumbing and access control to set all this up is handled by Amplify, however you do need to manually add the IAM permissions needed to create &#x26; modify Cloudwatch Rules. This is a good example of where you hit the limits of what Amplify can bring you, but due to the way it generates Cloudformation, you're able to make the edits you need to achieve your goal.</p>
<h2>Tasty Beer</h2>
<p>This is a simple example but start to finish it took next to no time at all. Amplify is a great tool if you want to rapidly prototype something, need a backend for a hackday, or are looking to get something to market fast. Right now, it's not something we'll be using at work as we have the capabilities and importantly time, to craft our infrastructure in exactly the way we want (and with Terraform). However, I can certainly see us picking up tools similar to this in future, to empower developers even further.</p>
<p>By the way the beer turned out great, which I can only assume is due in most part to precision brew tracking.</p>


Rapidly Building a Backend with AWS Amplify

<h2>Protecting Your Eyesight</h2>
<p>I recently read a news item on how the recent lockdowns could be affecting people's eyesight.</p>
<p>A study showed that a large proportion of people believed their eyesight had been deteriorating through their time solely working from home. This appears to be down to prolonged periods of time in front of the computer, and presumably fewer distractions and reasons to get up and look away from your screen compared to working in an office.</p>
<p>Fight for Sight, a research charity, <a href="https://www.fightforsight.org.uk/news-and-articles/articles/news/screen-time/">recommends</a> screen users should look at something <strong>20 feet away, for 20 seconds, every 20 minutes</strong>.</p>
<p>Sight loss can be avoidable, and strategies like this can help.</p>
<h2>Keeping Track</h2>
<p>Another fact about lockdown is you don't have a whole lot of options for things to do. So my time has been spent mostly working on random software projects (and drinking <a href="https://lefthandedgiant.com/">Left Handed Giant</a>).</p>
<p>With this in mind, I built a quick web app to remind you to follow the 20-20-20 rule. The timer beeps to alert you every 20 minutes and counts down the 20 seconds you need to be looking away. Built in React, Typescript, and uses the HTML <code>canvas</code> tag for some basic animation of a timer ring.</p>
<p align="center">
    <img src="/posts/202020-rule/timer.png" />
</p>
<p>I have to be honest; the timer is pretty annoying. 20 minutes comes around very quickly and then 20 seconds somehow seems an age. Still, I'm giving it a go while I work through the day. I guess it might actually make a difference to my eyesight in the long term?</p>
<p>You can find the timer at: <a href="https://byr.io/202020/">byr.io/202020</a>.</p>
<p>The source code is on <a href="https://github.com/byrion/202020">github</a>.</p>


Byrion Smith