DEV Community

Cover image for Build a serverless, real-time application with modern APIs: The GraphQL Real-time Race
Mark Ramrattan for AWS Community Builders

Posted on • Updated on

Build a serverless, real-time application with modern APIs: The GraphQL Real-time Race

I attended this awesome AWS virtual workshop over 5 days from June 21st - 25th, where we spent an hour and half each day going through an episode (5 episodes in total). During this time, I built a fully functioning Formula 1 based application using AWS AppSync, AWS Amplify, Amazon Location Service and many others AWS services. Apart from learning how to build solutions to different use-cases using AWS services, I'm a massive Ferrari Formula 1 fan… Therefore doing this type of workshop is double the fun for me to take on. I am sure you'll learn something in this workshop that can help you with your projects.

However, like with many virtual workshops it doesn't always go smoothly :) This dev post is to help other developers overcome issues I encountered when completing this workshop. Don't worry if you didn't attend, you can still follow along and complete the workshop with the contents in this post. In the words of F1 commentator Murray Walker, 'And it's GO! GO! GO!'


This workshop is well suited for developers, Solution Architects, and anybody looking to get started with GraphQl on AWS. The main programing language used is Typescript and Javascript. However, you do not need to have an advance knowledge of coding. All the code is provided for you.

This workshop should take you about 5 hours to complete.


Virtual Workshop Link: Click Here

This will take you through the workshop, step by step (including all the code)

OLD Workshop Link: Click Here

This is meant to be the new workshop link. However the updated version has removed the code snippets needed to complete the workshop.

Shout out @dev_007_387ddc3e7f1626418 for sourcing a working version of the workshop.


Video for each episode


All 5 Episodes in a Playlist

I also created a playlist of all 5 videos, if you want to watch them all, one after the other: Click Here


Slide Deck for Each Episode & Lab Files

Slide Decks 1 - 5 & Lab File: Click Here

Each person who conducted an episode / session had slides to work alongside the workshop. You might find this useful for understanding the concepts of each section.

Shout out to @jjmats, who noticed the lab files have been removed from the updated workshop. I have a copy and i've uploaded the lab files to the dropbox link above.


Episode 1

Build and deploy your serverless app in minutes
Video: Episode 1 - Walkthrough

Brice Pellé lead this session. I found it hard keeping pace, as I had many errors and was trying to follow along whilst debugging. Below are my tips so you find a faster pathway.

Tips:

Pick Ohio (us-east-2) as your region. Don't do what I did and pick eu-west-1 / eu-west-2 (I'm in London and wanted a region closer). Amazon Location Service is only available in specific regions and in eu-west-1 I had trouble getting it all working in that region. Worked great in us-east-2…


Cloud9 is a great IDE service. Strongly encourage you to use that route to do this workshop. Later on in Episode 3 Video tutorial, you'll see errors and warnings. You can turn it off, to avoid seeing them. Cloud9 -> Preferences -> Language -> Hints and Warnings -> Turn off

Cloud9 - Hints


At the start of the session, many of us had a problem with VPC errors when setting up our Cloud9 for the first time. Simple way to solve this is to create the Default VPC. Your VPCs -> Actions -> Create Default VPC

Default VPC


57:55 mins into the tutorial video (Lab 1 -> Add Auth), Read & Update is selected on Event. Make sure you select both of them, the workshop guide only instructs you to select just Read.

Tick Read & Update


Episode 2

Get started and dive into API modernization with GraphQL
Video: Episode 2 - Walkthrough

Brice Pellé did this session and it was a good continuation from Day 1. I thought it went well, probably because I attempted this lab before the session started (prep work). Following along was easier. Main tip for this area is to make sure you take breaks when you're tired. Lots of detail in setting up the connection with DynamoDB. A typo can result in having to redo the entire section to find out what went wrong.

DynamoDB Table Setup


Episode 3

Integrate real-time location services into your app so you can interact with users based on where they are
Video: Episode 3 - Walkthrough

This is the section where I found out eu-west-2 didn't have Amazon Location Service available (doh moment, happens to all of us). I deleted everything and started again (in us-east-2). I did manage to adjust the code to get eu-west-1 to work though for the sake of fluidity, I went back to the beginning. Probably my favourite feature from the entire workshop. Absolutely love the geofencing and the tracking of movement. Marcia Villalba covered this session swiftly. Watch out for the right IAM role to update:

IAM -

When you see the Map working for the First Time:

Tracking Movement

Check out this quick screen share I made during this episode. The geofencing and tracking through amazon location service enables you to track user movement. Left side is one user and the right is another user logged in (side by side so you can see). You could do many different use cases... (Imagine showing content to users based on which paddock they are in i.e. Ferrari, Mercedes, Red Bull, etc):


Episode 4

Integrate chat and push notifications into your app to drive fan engagement via a second screen
Video: Episode 4 - Walkthrough

Derek Bingham, talks through this section. Take your time going through the details of integrating pinpoint. The initial setup of chat is straightforward though adding images and tagging someone requires careful setup. I got bit carried away in my chat :) Yes I know Ferrari are not winning the title this year, we can dream though…

Chat


Episode 5

Live real time race with AWS AppSync

Video: Episode 5 - Walkthrough

Stefano Sandrini went through Session 5. You can easily get something wrong in this section. Take your time, and you're better off watching Stefano video rather than just following the written instructions. During the 'Ingest real-time data into your app' section it asks you to open the 'parameters.json' file (There is no parameters.json file). Don't do what I did and think, he probably meant function-parameters.json file. You need to create a new parameters.json file and insert the code into that file:

{
    "stepFunctionprocessWorkflowArn": {
    "Fn::GetAtt": [
      "stepFunctionprocessWorkflow",
      "Outputs.Arn"
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

The final outcome of the workshop is awesome, definitely worth seeing your car sprint around the track:

Live Race


Summary

Great workshop, thoroughly enjoyed undertaking this one. I definitely know a lot more now than when I started. I'll definitely be adapting this workshop and building this knowledge within my own project. I've gone through this workshop probably 3 times. I will still need to go through it again, understanding how each part of the code interacts. I would recommend you do the same. It's great when it all works at the end, though if you don't understand what's going on in each section (code) you'll have difficulty transferring that over to problems you're trying to solve. Feel free to drop your thoughts in the comments. If you encounter any problems when doing this workshop, feel free to drop them in the comments and you can also find me on Twitter: @markramrattan More information and solutions can be found on AWS Amplify Discord

I have a live fully working version running, so if you have any questions or you want to check something out, let me know. I could do a live code session of me doing it all again from scratch, though the AWS team members have done a great job with the video walkthroughs.


Clean Up

Many of the services used in this workshop have a free tier. However, make sure to clean up at the end of the workshop to avoid incurring charges.

  • To clean up your Amplify project, run:
amplify delete
Enter fullscreen mode Exit fullscreen mode
  • To clean up your Location resources, head to the Location service AWS console:

    • Maps: Select GraphQlRealTimeRacing and click Delete Map
    • Geofence collections: Select MonzaCircuit and click Delete geofence collection.
  • If you used Cloud9 for this workshop, head to the Cloud9 AWS console, select your environment, and click Delete.

Top comments (13)

Collapse
 
hugoroam profile image
HugoRoam

@markramrattan what would you think about using Roam.ai for the location services?

Collapse
 
markramrattan profile image
Mark Ramrattan

Hey, haven't checked out Roam.ai for location services, though will check it out. Would you recommend it?

Collapse
 
dev_007_387ddc3e7f1626418 profile image
Dev 007

The code has been redacted in this workshop. Can someone send me the full code again? @markramrattan

Collapse
 
markramrattan profile image
Mark Ramrattan

Updated the link, though here it is, just incase: catalog.us-east-1.prod.workshops.a...

Collapse
 
zachjonesnoel profile image
Jones Zachariah Noel

Brilliant write. I did the workshop and it's good to see a summary of the workshop for those who missed. Wonder! Kudos Mark! 👍

Collapse
 
markramrattan profile image
Mark Ramrattan

Thanks for the feedback @zachjonesnoel 👍 How did you find the workshop?

Collapse
 
zachjonesnoel profile image
Jones Zachariah Noel

workshop was great!! AppSync is always fascinating to use. have notifications module could have used the push notifications from pinpoint. personally have not used it but read about it exploring use case to implement it.

Collapse
 
focusotter profile image
Michael Liendo

This is great feedback and I'm glad you enjoyed the session. Thanks for putting this together, I went ahead and shared this internally as well.

Collapse
 
markramrattan profile image
Mark Ramrattan

thank you @mtliendo . I've received great feedback so far. I think to make it better, i'll convert some images to GIF. That should help bring out more the impact / benefit of doing this workshop (Also it's fun to see a car / dot move around a F1 Track)

Collapse
 
deekob profile image
Derek Bingham ☘️

Awesome writeup !! Glad you enjoyed the workshop and thx for taking the time to do this post Mark

Collapse
 
markramrattan profile image
Mark Ramrattan

Thanks @deekob , you did a great session on chat integration, attaching images and notifications. It felt like being on the pathway to creating WhatsApp 3.0 :) I think integrating something like Amazon Lex would be an epic next step.

Collapse
 
jjmats profile image
Jeremy Matson

Great writeup! It appears that the workshop no longer has the react project lab files. Are these available anywhere else?

Collapse
 
markramrattan profile image
Mark Ramrattan • Edited

Shout out to @jjmats, who noticed the lab files have been removed from the updated workshop. I have a copy and i've uploaded the lab files to the dropbox link above that has the slide decks in them: Dropbox Link Here