ineat / Flutter Aws Appsync Sample
Programming Languages
Projects that are alternatives of or similar to Flutter Aws Appsync Sample
Flutter AppSync Demo
Create custom bridge for AWS AppSync
Presentation
This project is an example of using Flutter with the AWS AppSync solution. It is configured in state UE CENTRAL 1 (Francfort)
AWS AppSync automatically updates web and mobile application data in real time, and offline user data is updated as soon as it is reconnected. If you use AppSync as a simple GraphQL API without the subscribe feature then it would be better to use the following plugin: : https://pub.dartlang.org/packages/graphql_flutter
The bridge is based on the official documentation of the AppSync SDK.
AWS AppSync SDK Android : https://docs.aws.amazon.com/appsync/latest/devguide/building-a-client-app-android.html
AWS AppSync SDK iOS : https://docs.aws.amazon.com/appsync/latest/devguide/building-a-client-app-ios.html
If you want more information on the development of a flutter plugin here is an official link: https://flutter.io/developing-packages/
To make this example work, AppSync is configured with the following GraphQL schema :
GraphQL schema
The GraphQL schema:
type Message {
id: ID!
content: String!
sender: String!
}
type Mutation {
newMessage(content: String!, sender: String!): Message
}
type Query {
getMessages: [Message]
}
type Subscription {
subscribeToNewMessage: Message
@aws_subscribe(mutations: ["newMessage"])
}
schema {
query: Query
mutation: Mutation
subscription: Subscription
}
To create your GraphQL schema for AppSync, see the link https://docs.aws.amazon.com/appsync/latest/devguide/graphql-overview.html
Security
AppSync will be secured by API Key.
https://docs.aws.amazon.com/appsync/latest/devguide/security.html
Data Source
The Data Source used by AppSync is a lambda. Here is this example here is a simplified version :
var incrementId = 0;
var messages = [];
exports.handler = async (event, context, callback) => {
switch (event.field) {
// match with Data Template resolver
case 'getMessages':
getMessages(event, context, callback);
break;
case 'newMessage':
newMessage(event, context, callback);
break;
default: throw new Error("unsupported");
}
};
function getMessages(event, context, callback) {
callback(null, messages);
}
async function newMessage(event, context, callback) {
const args = event.arguments;
const msg = {
id: (++incrementId).toString(),
content: args.content,
sender: args.sender,
conversationId: args.conversationId
};
messages.push(msg);
callback(null, msg);
}
To link the GraphQL schema methods to the lambda refer to the following link : https://docs.aws.amazon.com/appsync/latest/devguide/tutorial-lambda-resolvers.html
Resolvers
Request template resolver for NewMessage Mutation :
{
"version" : "2017-02-28",
"operation": "Invoke",
"payload": {
"field" : "newMessage",
"arguments": $util.toJson($context.args)
}
}
Request template resolver for GetMessages Query :
{
"version" : "2017-02-28",
"operation": "Invoke",
"payload": {
"field" : "getMessages",
"arguments": $util.toJson($context.args)
}
}
Configuration sample
To configure AppSync in the project, modify the constants of the file /lib/constants.dart
const AWS_APP_SYNC_ENDPOINT = "YOUR ENDPOINT"; // like https://xxx.appsync-api.eu-central-1.amazonaws.com/graphql
const AWS_APP_SYNC_KEY = "YOUR API KEY";
Custom Configuration in your project
1. Android
Step 1: add aws android SDK classpath
// android/build.gradle
buildscript {
dependencies {
classpath 'com.amazonaws:aws-android-sdk-appsync-gradle-plugin:2.6.17'
}
}
Step 2: Plugin plugin and SDK
// android/app/build.gradle
apply plugin: 'com.amazonaws.appsync'
dependencies {
implementation 'com.amazonaws:aws-android-sdk-appsync:2.6.17'
implementation 'org.eclipse.paho:org.eclipse.paho.client.mqttv3:1.2.0'
implementation 'org.eclipse.paho:org.eclipse.paho.android.service:1.1.1'
implementation 'com.android.support:support-v4:27.1.1'
}
Step 3: add schema and request GraphQL
Copy your files in :
/android/app/src/main/graphql/your.package.name/.graphql /android/app/src/main/graphql/your.package.name/.json
Step 4: Configure Android Manifest
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.ineat.appsync">
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.WAKE_LOCK" />
<application>
<!-- ... -->
<!-- Service paho for retrieve all data in background -->
<service android:name="org.eclipse.paho.android.service.MqttService" />
</application>
</manifest>
Step 5: Generation GraphQL models
Launch gradle command :
# /android
./gradle generateApolloClasses
2. iOS
Step 1: add AWS SDK in your Podfile
target 'Runner' do
use_frameworks!
pod 'AWSAppSync', '~> 2.6.7'
end
Step 2: Retrieve all dependencies
pod install
Caution: Configure your deployment target at 9.0 (Runner.xcworkspace)
Step 3: add schema and request GraphQL
Copy your files in :
/iOS/*.graphql /iOS/schema.json
For generate models you have to use the npm library aws-appsync-codegen (https://www.npmjs.com/package/aws-appsync-codegen)
Launch the command :
# ios/
aws-appsync-codegen generate *.graphql --schema schema.json --output ./Runner/AppSyncAPI.swift