This document provides an overview and agenda for a webinar on building a Calendly clone using AWS serverless technologies. The webinar will cover the state of serverless computing, key AWS serverless services like AppSync, API Gateway, Lambda, DynamoDB, and Amplify. It will include a live demo of building the backend using AppSync and associated services, followed by a frontend demo using Vue.js and Amplify. The document outlines the architecture of the Calendly clone demo, breaking it into backend and frontend sections. It also includes background information on serverless computing models, GraphQL, and an overview of the webinar content and structure.

1. Build your own Calendly using AWS Serverless, AppSync, & Amplify
- Dhaval Nagar

2. ● 12x AWS, Kubernetes, Docker Certified
● AWS Serverless Hero - 2020
● AWS Certification Subject Matter Expert (SME)
● Founder - AppGambit (AWS Consulting Partner)
● AWS User Group Leader, Surat, India
Dhaval Nagar
WELCOME TO TODAY’S WEBINAR

3. Build your own Calendly using AWS Serverless, AppSync, & Amplify
● State of Serverless
● AWS Serverless
● What is GraphQL?
● Amazon AppSync
● Demo
- Backend Demo + QA
- Frontend Demo + QA
● Summary
● Q&A
● Exciting Rewards
TODAY’S AGENDA

4. Structure of the Demo
Calendly Backend
● AppSync
● API Gateway
● Lambda
● DynamoDB
● Pinpoint
● Cognito
Calendly Frontend
● Single Page App using Vue.js
● Amplify JS Library
● S3 Web Hosting
● CloudFront CDN
Note: The application is designed using the Backend First Developement Approach and Front-end
is configured later after the Backend resources are available.

5. State of Serverless - 2021
Cloud 1.0 “as a service” Offerings
● Infrastructure as a service (IaaS) offered virtual environments, platform as a
service (PaaS) provided runtime environments, and software as a service (SaaS)
took it further by offering ready-to-use applications.
● These are the foundation for the next two stages in the evolution of serverless
architecture: backend as a service and function as a service.

6. State of Serverless - 2021
Backend as a service (BaaS)
● Cloud-based services such as cloud storage, push notifications, authentication
and authorization, and location services that are provided to developers via
APIs.
● The easiest way to think about BaaS is as full software services offered by
third-party providers and readily available for developers to integrate and
utilize.

7. State of Serverless - 2021
Function as a service (FaaS).
● Custom development of event-driven functions (business logic) running in
ephemeral containers (with on-demand/as-needed capacity).
● Level of increase in abstraction above PaaS/containerization and a level of
decrease in abstraction below SaaS.
● The primary difference between FaaS and PaaS is in the way the application is
composed, deployed, used, and scaled. Compared with PaaS, FaaS is more
granular and deployed by providers, and both cost and scalability are based on
usage.

8. Adoption of Serverless Architecture
will be a process over time
Serverless IT Architecture is still in its infancy, but early efforts show promise for the
next phase of streamlined and cost-effective IT transformation.
https://www.mckinsey.com/business-functions/mckinsey-digital/our-insights/tech-forward/cloud-20-serverless-architecture-and-the-next-wave-of-enterprise-offerings

9. AWS Serverless Services

10. Quick Question For You
You run an ad-supported photo sharing website using S3 to serve photos to
visitors of your site. At some point, you find out that other sites have been linking
to the photos on your site, causing loss to your business. What would be an
effective method to mitigate this?

11. Application Programming Interface

12. Why GraphQL?
https://www.toptal.com/api-development/graphql-vs-rest-tutorial

13. Overfetching and Underfetching

14. REST Serverless API (serverless.yml file)

15. GraphQL Serverless API (schema.api.graphql file)

16. Mapping Field to Data Source
(serverless.appsync-api.yml)

17. VTL Request Template (Apache Velocity)
Query.mySessions.request.vtl file

18. Whizlabs Hands-On Labs Platform
-
Demo
By Pavan Gumaste

19. How to Get Hands On Lab Experience
1. How do I get Hands on Experience?
a. Where should I start?
2. What should I learn?
a. What should I focus on?
3. How do I validate my practical skills wrt given concepts?
4. How much will it cost ?
a. What happens if I forget to delete resources I created?
b. Credit card charges
5. Can I peacefully learn something without any hassles?
Cloud - Pet Peeves

20. 1. Very quick and absolutely no hassles in setting up the Cloud Environment.
2. No costs and no need to provide Credit Card Information.
3. Learn cloud computing completely risk-free.
4. Quickly build practical expertise with hands-on-labs and lab challenges – no costs
accounts, or setup time.
5. Validate practical experience without jeopardizing your live production environment.
6. Spend zero time setting up your environment.
Whizlabs- Hands-On-Lab Platform

21. Whizlabs - New Announcements
New and updated online Course - In Progress

22. Amazon AppSync

23. Quick Question For You
You want to host a new website on AWS. As a Solutions architect, you have been
given a task to design a serverless architecture for the website. Which of the
following services are suitable to store the application data?

25. Demo
Calendly Backend
● AppSync
● API Gateway
● Lambda
● DynamoDB
● Pinpoint
● Cognito

26. Application
Architecture

27. Q&A

28. Demo
Calendly Frontend
● Single Page Application using Vue.js and Bulma.io
● S3
● CloudFront

29. Q&A

30. Summary
● Power of GraphQL with Ease of Start
● Security and Scaling are built in
● Real time and Offline capabilities built in
● Easy to extend the architecture
● Monitoring and Observability is built in (few things are still hard)
● Leverage all the other AWS Services
● Design your application with Micro-service pattern

31. Quick Question For You
A company wants to implement a data store in AWS. The data store needs to have
the following requirements :
1) Completely managed by AWS
2) Ability to store JSON objects efficiently
3) Scale based on demand
Which of the following would you use as the data store?

32. Add-on Challenge to the Source
● User Event key validation - Right now I am not validating if the Event exist or
not.
● Separate Email Template for the Host and Attendee - Right now the same email
template is used to send to both the Host and Guest.
● Real-time Subscription to update Sessions on User’s screen - Right now you
have to refresht the profile page to load the updated data, but instead you can
use the GraphQL Subscription to update the UI in real-time.

33. References and Tools
● For Web and Mobile Applications with Front-end approach -
https://aws.amazon.com/amplify/
● Yan Cui AppSync Masterclass - https://appsyncmasterclass.com/
● GraphQL Basic - https://graphql.org/learn/
● Logging and Monitoring -
https://lumigo.io/blog/how-to-monitor-and-debug-appsync-apis/
● Resolver Mapping Template Documentation -
https://docs.aws.amazon.com/appsync/latest/devguide/resolver-mapping-template-
reference.html
● Parse GraphQL queries using graphql-tag -
https://www.npmjs.com/package/graphql-tag
● AppSync Pricing - https://aws.amazon.com/appsync/pricing/
● AppSync Offline Reference Architect -
https://aws.amazon.com/blogs/mobile/aws-appsync-offline-reference-architecture/

34. 1. Best 5 submissions will win FREE Whizlabs Annual Subscription.
2. Grab a Flat 60% OFF on all courses/practice tests. Use code: WHIZDHAVAL60
3. Grab a Flat 30% OFF on Whizlabs Subscription. Use code: WHIZDHAVAL30
IT’S RAINING REWARDS

35. 1. All the attendees will be invited to a special 7-Day Slack Channel.
2. You can discuss your queries there with each other, we will be there to support you.
3. All the further instructions will be provided on the Slack channel.
How Will You Submit Your Project?

36. Try For Yourself And Let Me Know
How It Goes :)
https://github.com/AppGambitStudio/calendly-appsync
https://github.com/AppGambitStudio/calendly-frontend
Connect with me on LinkedIn
https://www.linkedin.com/in/dhavaln/

37. Setup Your Environment
● AWS Account IAM Credentials
https://www.serverless.com/framework/docs/providers/aws/guide/credentials/
● IAM User Role and Policies https://www.serverless.com/blog/abcs-of-iam-permissions
● Serverless Framework Setup
https://www.serverless.com/framework/docs/providers/aws/guide/installation/
https://www.serverless.com/framework/docs/providers/aws/guide/credentials/
● Amazon Pinpoint Verify Sender Email
https://docs.aws.amazon.com/pinpoint/latest/userguide/channels-email-manage-verify.html
● Amazon SES Sandbox Account
https://docs.aws.amazon.com/ses/latest/DeveloperGuide/request-production-access.html

38. THANK YOU