All Projects → ineat → Flutter Aws Appsync Sample

ineat / Flutter Aws Appsync Sample

Create custom bridge for AWS AppSync in Flutter

Programming Languages

swift
15916 projects

Projects that are alternatives of or similar to Flutter Aws Appsync Sample

Qtsharp
Mono/.NET bindings for Qt
Stars: ✭ 532 (+375%)
Mutual labels:  bridge
React Native Create Bridge
A CLI tool that bridges React Native modules & UI components with ease 🎉
Stars: ✭ 966 (+762.5%)
Mutual labels:  bridge
Tokenbridge Contracts
Smart contracts for TokenBridge
Stars: ✭ 90 (-19.64%)
Mutual labels:  bridge
Hmq
High performance mqtt broker
Stars: ✭ 722 (+544.64%)
Mutual labels:  bridge
Mautrix Hangouts
A Matrix-Hangouts puppeting bridge
Stars: ✭ 29 (-74.11%)
Mutual labels:  bridge
Psr Http Message Bridge
PSR-7 Bridge
Stars: ✭ 1,034 (+823.21%)
Mutual labels:  bridge
Mautrix Telegram
A Matrix-Telegram hybrid puppeting/relaybot bridge
Stars: ✭ 508 (+353.57%)
Mutual labels:  bridge
Esp8266 Wifi Uart Bridge
Transparent WiFi (TCP, UDP) to UART Bridge, in AP or STATION mode
Stars: ✭ 107 (-4.46%)
Mutual labels:  bridge
Emodbus
Modbus library for both RTU and TCP protocols. Primarily developed on and for ESP32 MCUs.
Stars: ✭ 29 (-74.11%)
Mutual labels:  bridge
Btc Parachain
BTC-Parachain: Trustless Bitcoin on Polkadot
Stars: ✭ 70 (-37.5%)
Mutual labels:  bridge
Creative Cloud Linux
PlayOnLinux install script for Adobe Creative Cloud
Stars: ✭ 725 (+547.32%)
Mutual labels:  bridge
Wkwebviewjavascriptbridge
🌉 A Bridge for Sending Messages between Swift and JavaScript in WKWebViews.
Stars: ✭ 863 (+670.54%)
Mutual labels:  bridge
Vue Bridge Webview
javascript bridge android/ios webview
Stars: ✭ 52 (-53.57%)
Mutual labels:  bridge
Jpype
JPype is cross language bridge to allow python programs full access to java class libraries.
Stars: ✭ 685 (+511.61%)
Mutual labels:  bridge
Darwinia
Internet of Tokens, Connected!
Stars: ✭ 97 (-13.39%)
Mutual labels:  bridge
Space Nerds In Space
Multi-player spaceship bridge simulator. Captain your starship through adventures with your friends. See https://smcameron.github.io/space-nerds-in-space
Stars: ✭ 516 (+360.71%)
Mutual labels:  bridge
Ethudp
Ethernet over UDP, similar of VXLAN, transport Ethernet packet via UDP
Stars: ✭ 43 (-61.61%)
Mutual labels:  bridge
Matrix Puppet Imessage
A two-way puppeted Matrix bridge for Apple iMessage / Messages
Stars: ✭ 109 (-2.68%)
Mutual labels:  bridge
Addon Aircast
AirCast - Home Assistant Community Add-ons
Stars: ✭ 100 (-10.71%)
Mutual labels:  bridge
Soluble Japha
PHP Java integration
Stars: ✭ 59 (-47.32%)
Mutual labels:  bridge

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)

Demo

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
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].