Aws Mobile Appsync Chat Starter Angular

Overview

ChatQL is an AWS AppSync Chat Starter App implemented in Angular that showcases real-time capabilities in a chat application using GraphQL Mutations, Queries, and Subscriptions. It leverages technologies like Service Workers to create a Progressive Web Application (PWA) that functions similar to a mobile app.

Features

• PWA: Utilizes Service Workers to combine web and mobile app functionalities.
• GraphQL Mutations: Allows for creating users, conversations, linking them, and posting messages.
• GraphQL Queries: Enables fetching users, messages in a conversation, and user-related conversations.
• GraphQL Subscriptions: Provides real-time updates for new messages in conversations.
• Authentication: Integrates Cognito User Pools for onboarding and authenticating users.
• Authorization: Uses JWT Tokens from Cognito User Pools for authorization.

Prerequisites

• AWS Account with permissions for resource creation
• NodeJS with NPM
• AWS CLI
• AWS Amplify CLI
• Angular CLI

Backend Setup

1. Clone the repository and navigate to the folder.

2. Set up AWS resources with Amplify CLI.

   npm install
   amplify init
   amplify add auth
   amplify add analytics
   amplify push
   

3. Retrieve the Cognito User Pool ID from ./src/aws-exports.js.

4. Option 1: Deploy from AWS Console

   • Access the AWS AppSync console
   • Create API using the Chat App option and configure it.
   • Integrate with your app using the provided amplify codegen command.
   • Start the application.

5. Option 2: Deploy with CloudFormation

Summary

ChatQL is a powerful Angular PWA that demonstrates the capabilities of AWS AppSync for building real-time chat applications. By combining GraphQL Mutations, Queries, and Subscriptions, along with features like authentication and authorization via Cognito User Pools, this starter app provides a solid foundation for developers looking to implement similar functionalities in their projects.