amazon-archives / aws-appsync-survey-tool Goto Github PK

View Code? Open in Web Editor NEW

25.0 15.0 59.0 2.44 MB

Sample Survey Tool Progressive Web Application written with React, GraphQL, AWS AppSync & AWS Amplify

License: Apache License 2.0

JavaScript 98.15% HTML 1.14% CSS 0.70%

aws-appsync-survey-tool's Introduction

AWS Appsync Survey Tool

Sample Survey Tool Progressive Web Application written with React, GraphQL, AWS AppSync & AWS Amplify

Features

Full Progressive Web Application (PWA)
Install (desktop) or Add to Homescreen (mobile)
Offline ready
Adminstration Portal
User management

Technologies

AWS AppSync
AWS Amplify
GraphQL
React Router
React Apollo
Material UI

Introduction

This is a demonstration solution that uses AWS AppSync to implement a survey app as a Progressive Web Application (PWA). In this app, users can complete assigned surveys, including pre and post questionnaires. The solution also includes an administration portal, which allows admins to create and manage surveys and questionnaires. The solution demonstrates GraphQL capabilities (e.g. Mutations, Queries and Subscriptions) with AWS AppSync, offline support with the AWS AppSync SDK and React Apollo, and integrates with other AWS Services such as:

Amazon Cognito for user management, as well as Auth N/Z
Amazon DynamoDB with NoSQL Data Sources
Amazon S3 for asset storage
Amazon Pinpoint for web client analytics data collection

Getting Started

Prerequisites

AWS Account with appropriate permissions to create the related resources
NodeJS with NPM
AWS CLI with output configured as JSON (pip install awscli --upgrade --user)
AWS Amplify CLI configured for a region where AWS AppSync and all other services in use are available (npm install -g @aws-amplify/cli)
Create React App (npm install -g create-react-app)

Automated Setup

This process will use the configuration in the amplify folder of this repo.

First, clone this repository and navigate to the created folder:

git clone https://github.com/aws-samples/aws-appsync-survey-tool.git

cd aws-appsync-survey-tool

Install the required modules:
```
npm install
```
Initilize the directory as an Amplify Javascript app using the React framework:
```
amplify init
```
Now it's time to provision your cloud resources based on the local setup and configured features. When asked to generate code, answer "NO" as it would overwrite the current custom files in the src/graphql folder.
```
amplify push
```
Wait for the provisioning to complete. Once done, a src/aws-exports.js file with the resources information is created.
Run the project locally:
```
npm start
```

Manual Setup

This process lets you configure custom settings for your backend components.

First, clone this repository and navigate to the created folder:

git clone https://github.com/aws-samples/aws-appsync-survey-tool.git

cd aws-appsync-survey-tool

Install the required modules:
```
npm install
```
Delete the amplify folder
```
rm -f amplify
```
Init the directory as an amplify Javascript app using the React framework:
```
amplify init
```
Add an Amazon Cognito User Pool auth resource. Use the default configuration.
```
amplify add auth
```
Add an AppSync GraphQL API with Amazon Cognito User Pool for the API Authentication. Follow the default options. When prompted with "Do you have an annotated GraphQL schema?", select "YES" and provide the schema file path backend/schema.graphql
```
amplify add api
```
Now it's time to provision your cloud resources based on the local setup and configured features. When asked to generate code, answer "NO" as it would overwrite the current custom files in the src/graphql folder.
```
amplify push
```
Wait for the provisioning to complete. Once done, a src/aws-exports.js file with the resources information is created.
Run the project locally:
```
npm start
```

Clean Up

To clean up the project use:

amplify delete

to delete the resources created by the Amplify CLI.

Change Log

1.0.0:

Initial release.

License

This library is licensed under the Apache 2.0 License.

aws-appsync-survey-tool's People

Contributors

Stargazers

Watchers

aws-appsync-survey-tool's Issues

Blog article has accuracy issue with security statements

However, it only allows standard users to read the Survey object if their group membership matches with a group name defined in a Survey’s attributes.

Subscriptions are not disabled, so auth does not fulfill the above security controls. This is not a secure solution and a customer using this as a guide may be putting their customers in danger.

Could you turn off subscriptions in this project and in the AWS mobile blog post?

how to identify no of active subscribers by subscription in appsync

Need to keep count of how many subscribers are connected with each subscription.

For UserA, UserB are connected with SubscriptionA : then 2 is the total subscribers
For UserA are connected with SubscriptionB : then 1 is the total subscribers

Can i know when UserA unsubscribes , subscribes, disconnects, reconnects from AppSync ?

How does the PostConfirmation function works?

I wonder how you trigger the add-to-group function within the auth api? I can see there is a trigger inside the parameters.json file which seems to add the user to a group after signup?

Did you write this behaviour manually or is this possible via amplify cli?

Amplify could not deploy to S3 resource - Inaccessible host.

Sorry for the Slightly vague newbie question. There doesn't seem to be any other way of reaching out for regarding this issue. Maybe I or the instructions are missing something ?

I am trying to follow the instructions (i have tried both the auto and manual process) in the readme to deploy this project but the amplify push is failing. The amplify push script seems to be using a fully qualified url path to the s3 resource which is invalid ?

Any pointers in the right direction much appreciated!

Error I am getting:
Inaccessible host: amplify-surveypwa-dev-173816-deployment.s3.eu-west-2.amazonaws.com'. This service may not be available in the eu-west-2' region.
An error occured during the push operation: Inaccessible host: amplify-surveypwa-dev-173816-deployment.s3.eu-west-2.amazonaws.com'. This service may not be available in the eu-west-2' region.

If it try and do an s3 syn to the that bucket from the aws cli it work fine with s3://amplify-surveypwa-dev-173816-deployment But doesn't work with the .s3.eu-west-2.amazonaws.com on the end.

I have pasted the full output of the script below

sam@sams-zenbook:~/aws-appsync-survey-tool$ amplify init

Amplify CLI uses Lambda backed custom resources with CloudFormation to manage part of your backend resources.
In response to the Lambda Runtime support deprecation schedule
https://docs.aws.amazon.com/lambda/latest/dg/runtime-support-policy.html
Nodejs runtime need to be updated from nodejs8.10 to nodejs10.x in the following template files:
/home/sam/aws-appsync-survey-tool/amplify/backend/auth/surveypwa1a7615c6/surveypwa1a7615c6-cloudformation-template.yml
/home/sam/aws-appsync-survey-tool/amplify/backend/function/surveypwa1a7615c6PostConfirmation/surveypwa1a7615c6PostConfirmation-cloudformation-template.json

Please test the changes in a test environment before pushing these changes to production. There might be a need to update your Lambda function source code due to the NodeJS runtime update. Please take a look at https://aws-amplify.github.io/docs/cli/lambda-node-version-update for more information

? Confirm to update the NodeJS runtime version to 10.x Yes

NodeJS runtime version updated successfully to 10.x in all the CloudFormation templates.
Make sure the template changes are pushed to the cloud by "amplify push"
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the environment dev
? Choose your default editor: Visual Studio Code
Using default provider awscloudformation

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html

? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use amplify-sam
Adding backend environment dev to AWS Amplify Console app: duv2lx8m8lfsx
⠼ Initializing project in the cloud...

CREATE_IN_PROGRESS DeploymentBucket AWS::S3::Bucket Fri May 01 2020 17:38:24 GMT+0700 (Indochina Time) Resource creation Initiated
CREATE_IN_PROGRESS AuthRole AWS::IAM::Role Fri May 01 2020 17:38:24 GMT+0700 (Indochina Time) Resource creation Initiated
CREATE_IN_PROGRESS UnauthRole AWS::IAM::Role Fri May 01 2020 17:38:24 GMT+0700 (Indochina Time) Resource creation Initiated
CREATE_IN_PROGRESS UnauthRole AWS::IAM::Role Fri May 01 2020 17:38:24 GMT+0700 (Indochina Time)
CREATE_IN_PROGRESS DeploymentBucket AWS::S3::Bucket Fri May 01 2020 17:38:23 GMT+0700 (Indochina Time)
CREATE_IN_PROGRESS AuthRole AWS::IAM::Role Fri May 01 2020 17:38:23 GMT+0700 (Indochina Time)
CREATE_IN_PROGRESS amplify-surveypwa-dev-173816 AWS::CloudFormation::Stack Fri May 01 2020 17:38:21 GMT+0700 (Indochina Time) User Initiated
⠹ Initializing project in the cloud...

CREATE_COMPLETE AuthRole AWS::IAM::Role Fri May 01 2020 17:38:39 GMT+0700 (Indochina Time)
CREATE_COMPLETE UnauthRole AWS::IAM::Role Fri May 01 2020 17:38:39 GMT+0700 (Indochina Time)
⠙ Initializing project in the cloud...

CREATE_COMPLETE DeploymentBucket AWS::S3::Bucket Fri May 01 2020 17:38:45 GMT+0700 (Indochina Time)
⠇ Initializing project in the cloud...

CREATE_COMPLETE amplify-surveypwa-dev-173816 AWS::CloudFormation::Stack Fri May 01 2020 17:38:47 GMT+0700 (Indochina Time)
✔ Successfully created initial AWS cloud resources for deployments.
✔ Initialized provider successfully.
? Do you want to configure Lambda Triggers for Cognito? No
? Enter the name of the group to which users will be added. users
Initialized your environment successfully.

Your project has been successfully initialized and connected to the cloud!

Some next steps:
"amplify status" will show you what you've added already and if it's locally configured or deployed
"amplify add " will allow you to add features like user login or a backend API
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify console" to open the Amplify Console and view your project status
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

Pro tip:
Try "amplify add api" to create a backend API and then "amplify publish" to deploy everything

sam@sams-zenbook:~/aws-appsync-survey-tool$ amplify push
✔ Successfully pulled backend environment dev from the cloud.

Current Environment: dev

Category	Resource name	Operation	Provider plugin
Auth	surveypwa1a7615c6	Create	awscloudformation
Analytics	surveypwa	Create	awscloudformation
Api	surveypwa	Create	awscloudformation
Function	surveypwa1a7615c6PostConfirmation	Create	awscloudformation
? Are you sure you want to continue? Yes

GraphQL schema compiled successfully.

Edit your schema at /home/sam/aws-appsync-survey-tool/amplify/backend/api/surveypwa/schema.graphql or place .graphql files in a directory at /home/sam/aws-appsync-survey-tool/amplify/backend/api/surveypwa/schema
✖ An error occurred when pushing the resources to the cloud

Inaccessible host: amplify-surveypwa-dev-173816-deployment.s3.eu-west-2.amazonaws.com'. This service may not be available in the eu-west-2' region.
An error occured during the push operation: Inaccessible host: amplify-surveypwa-dev-173816-deployment.s3.eu-west-2.amazonaws.com'. This service may not be available in the eu-west-2' region.
sam@sams-zenbook:~/aws-appsync-survey-tool$

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.