Flut ??? ?????? ????? ?? ??? ???? ??? ?? ? ?????. ??, ?? ?? ?? ??? QL? ???? ????, ??? ??? ? ???? ?????????. Flutter Fauna? ??? ?? ??? ?????. ??? ??? ??? ??? ? ?? ??????? ???? ????? Flutter ? Fauna? ??? ?????. ? ????? ?? ?? GraphQL ???? ???? ? ?? ??? ?? ????? ??? ?????.

GitHub ??? ??? ?? ??? ?? ? ????.

?? ??

? ??? ?? ??? ??? ?? ??? ??????.

1. ?? ? ??? ????
2. ?? ?? ?? ??? QL ?? ??,
3. Flutter ?? ?????? GraphQL ?????? ????
4. FAUNA GraphQL ????? ?? ? ????? ??????.

?? ? ? AWS Amplify vs. Firebase : ?? ?? ?? ??? ?????? ?? ???? ???? ??? ????? ?? ?? ???? ?? ?? ?? ?? ???? ??? ?? ? ?? ??? ???? ??? ??????.

??? ??? ??? ?????

???? ???? ?? ? TV ??? ???? ??, ?? ? ???? ? ??? ??? ??? ?? ?????.

?? ?? ??????

fauna.com?? ???? ? ??? ????. ??? ? ? ? ??????? ?? ? ??????.

??????? ??? ??????. ?? ? flutter_demo? ????. ???? ?? ??? ??? ? ????. ? ??? ?? ???? ?????. ?? ?? ? ????? ?? ? ???? ?????????. ??? ??? ?? ? ?? ???? ???? ??? ?????????. CDN (Content Distribution Network)?? ????? ????????? ????. ?? ??? ?? ??? ???? ???? ?????.

??? ?? ?????

??????? ???? ?? ??? ??????. ? ? ??? ???? ??????? ? ?? ????. ? ?? GraphQL ??? ?? ???? ?? ???? ??????.

??????? ??? ?? ?? ????. ??? ????? ?? ?????? ??? ?? ??, ?? ?????, ??, ??, ???, ?, ?? ? ??? ?? ??? ??? ?? ??????? ???? ? ?????. ?? ?? ??? ?? ?? ?? ??? ??? ? ??? ?? ???? ??? ??? ?? ? ? ????.

??? QL ?? ??

???? ???? TV ???? ??, ???? ? ??? ??? ??? ?? ?????.

??? ??? ????? ????

?? ??? ???? ??? ??? ????? ??? ???.

 <code>flutter create my_app</code>

???? ?????? GraphQL/Schema.graphQL??? ? ??? ????.

??? ???? ???? ??? ?????. ?? ?? ???? SQL? ???? ?????. ??? ?? ??? ?? ? ??????. ??? ??? ???? ?????.

 <code>### schema.graphql type Character { name: String! description: String! picture: String } type Query { listAllCharacters: [Character] }</code>

??? ? ? ??? ?? ?? (? : ??, ??, ?? ?)??? ???? ??? ?????. ??? SQL ??????? ? ?? NOSQL ??????? ? ? ??? ?? ? ? ????. ??? ?? ??? ?????. ? ??? ?? ??? ?????.

?? ?? ? ?? ??? ?? ???. GraphQL? ???? ?? ?? ??? ???? ??? ?? ?? ???????.

?? ??? ???? ?? ?? GraphQL ?? ? ????? ???? ?? ? ? ????.

Automatic GuphQL? ???? ????? ???? ??? ? ? ???? ????? ? ?? ?? ?? ???? ??? ?? ??? QL ??? ?? ? ? ????. ??? ???? ??? ??????.

Flutter ?? ?????? GraphQL ????? ??

pubspec.yaml ??? ?? ??? ???? ?????.

 <code>... dependencies: graphql_flutter: ^4.0.0-beta hive: ^1.3.0 flutter: sdk: flutter ...</code>

??? ? ?? ???? ??????. GraphQL_Flutter? Flutter? GraphQL ????? ????????. GraphQL ?????? ?? ?? ??? ???? ?? ???? ?????. ??? ?? ??? ???? ??? ????? ??????. Hive? ?? ????? ?? Pure Dart? ??? ??? ? ? ?????????. Hive? ???? GraphQL ??? ?????.

???? ? ?? Lib/Client_Provider.dart? ?????. ??? ?? ? ??? ?? ? ??? ??? ???? ?? ????.

?? ?? GraphQL API? ????? ?? GraphQLClient? ???????. GraphQlclient?? ??? ??? ?????????. ?? ??? ?? ?????.

 <code>// lib/client_provider.dart import 'package:graphql_flutter/graphql_flutter.dart'; import 'package:flutter/material.dart'; ValueNotifier<graphqlclient> clientFor({ @required String uri, String subscriptionUri, }) { final HttpLink httpLink = HttpLink( uri, ); final AuthLink authLink = AuthLink( getToken: () async => 'Bearer fnAEPAjy8QACRJssawcwuywad2DbB6ssrsgZ2-2', ); Link link = authLink.concat(httpLink); return ValueNotifier<graphqlclient> ( GraphQLClient( cache: GraphQLCache(store: HiveStore()), link: link, ), ); }</graphqlclient></graphqlclient></code>

?? ????? GraphQLClient? ??? ValueNotifier? ????. 13-15 ??? AuthLink? ?????? (?? ??). 14 ???, ??? ??? ??? ?? ??? ??? ?? ??????. ??? ?? ?? ?? ??????. ??? ?? ?? ??????? ?? ?? ?? ?? ?? ???? ??????.

??? ??????? ?? ???? ???? ?? ??? ????. ???? ???? ??????.

?? ????? ???? ?? ? ????? ?? ? ? ??? ????. ?? ???? GraphQLProvider ??? ???? ??? ?? ????.

 <code>// lib/client_provider.dart .... /// 使用`graphql_flutter`客戶端包裝根應(yīng)用程序。 /// 我們使用緩存進(jìn)行所有狀態(tài)管理。 class ClientProvider extends StatelessWidget { ClientProvider({ @required this.child, @required String uri, }) : client = clientFor( uri: uri, ); final Widget child; final ValueNotifier<graphqlclient> client; @override Widget build(BuildContext context) { return GraphQLProvider( client: client, child: child, ); } }</graphqlclient></code>

???? Main.Dart ??? ???? ClientProvider ???? ?? ??? ????. ?? ??? ?? ?????.

 <code>// lib/main.dart ... void main() async { await initHiveForFlutter(); runApp(MyApp()); } final graphqlEndpoint = 'https://graphql.fauna.com/graphql'; class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return ClientProvider( uri: graphqlEndpoint, child: MaterialApp( title: 'My Character App', debugShowCheckedModeBanner: false, initialRoute: '/', routes: { '/': (_) => AllCharacters(), '/new': (_) => NewCharacter(), } ), ); } }</code>

? ???? ?? ?? ??? ??? ?? ? ???? ??? ??? ? ??? GraphQL API? ?? ??? ? ????.

?? ???? ???

?? ?? ????? ???? ???? ??????. ???? ?? ??? ??? ?? ? ??? ?? ??? ???????. ? ?? Lib/Screens/Character-List.dart? ??? ???. ? ????? AllCharacters?? ??? ??? ?????.

 <code>// lib/screens/character-list.dart.dart class AllCharacters extends StatelessWidget { const AllCharacters({Key key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( body: CustomScrollView( slivers: [ SliverAppBar( pinned: true, snap: false, floating: true, expandedHeight: 160.0, title: Text( 'Characters', style: TextStyle( fontWeight: FontWeight.w400, fontSize: 36, ), ), actions:<widget> [ IconButton( padding: EdgeInsets.all(5), icon: const Icon(Icons.add_circle), tooltip: 'Add new entry', onPressed: () { Navigator.pushNamed(context, '/new'); }, ), ], ), SliverList( delegate: SliverChildListDelegate([ Column( children: [ for (var i = 0; i _CharacterTileeState(); } class _CharacterTileState extends State<charactertile> { @override Widget build(BuildContext context) { return Container( child: Text("Character Tile"), ); } }</charactertile></widget></code>

? ???? ? ? ??? [37 ?] ??? ?? ???? ??? ??? for ??? ????. ????? ?? ???? GraphQL ??? ???? ???????? ?? ??? ?????. ????? ?? ?? ????? ?? ? ?????. ?? ??? ???? ?? ????? ??? ? ????

 <code>flutter run</code>

? ???? ?? ??? ? ? ??????.

?? ? ????? ??????

?? GraphQL ??? ?? ??? ??? ? ?? ?? ??? ????. ??? ?? ?? ? ??? ?? ???????? ?? ??? ?? ?? AllCharacters ?????? ????.

?? ?? GraphQL ???? ?? ???. ?? ??? ???? ?? ??? ?? ? ? ????.

 <code>query ListAllCharacters { listAllCharacters(_size: 100) { data { _id name description picture } after } }</code>

?? ??? ??? ????? ??? ??? ???????.

 <code>import 'package:flutter/material.dart'; import 'package:graphql_flutter/graphql_flutter.dart'; import 'package:todo_app/screens/Character-tile.dart'; String readCharacters = ";";"; query ListAllCharacters { listAllCharacters(_size: 100) { data { _id name description picture } after } } ";";";; class AllCharacters extends StatelessWidget { const AllCharacters({Key key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( body: CustomScrollView( slivers: [ SliverAppBar( pinned: true, snap: false, floating: true, expandedHeight: 160.0, title: Text( 'Characters', style: TextStyle( fontWeight: FontWeight.w400, fontSize: 36, ), ), actions:<widget> [ IconButton( padding: EdgeInsets.all(5), icon: const Icon(Icons.add_circle), tooltip: 'Add new entry', onPressed: () { Navigator.pushNamed(context, '/new'); }, ), ], ), SliverList( delegate: SliverChildListDelegate([ Query(options: QueryOptions( document: gql(readCharacters), // 我們要執(zhí)行的graphql查詢pollInterval: Duration(seconds: 120), // 重新獲取間隔), builder: (QueryResult result, { VoidCallback refetch, FetchMore fetchMore }) { if (result.isLoading) { return Text('Loading'); } return Column( children: [ for (var item in result.data\['listAllCharacters'\]['data']) CharacterTile(Character: item, refetch: refetch), ], ); }) ]) ) ], ), ); } }</widget></code>

?? ?? ???? ???? ?????? [5 ~ 17 ?]?? ?? ??? ?????. flutter_graphql?? ?? ??? ???? ?? ??? ?????.

flutter_graphql ?????? ?? ??? ????????.

?? ?? ?? ???? GraphQL ?? ??? ??? ?????. Pollinterval ?? ??? ?? ??? ??? ??? ? ????. ?? ?? ??? ????? ???? ????? ??? ?????. ???? ?? ?? ??? ????. Builder ??? ???? ?? ??? ???? ?? ??? ?? ???? ? ?? ?? ??? ?? ??? ??? ? ????.

???? ??? ?? ???? ????? ?? ?? ??? ???????.

 <code>// lib/screens/character-tile.dart ... class CharacterTile extends StatelessWidget { final Character; final VoidCallback refetch; final VoidCallback updateParent; const CharacterTile({ Key key, @required this.Character, @required this.refetch, this.updateParent, }) : super(key: key); @override Widget build(BuildContext context) { return InkWell( onTap: () { }, child: Padding( padding: const EdgeInsets.all(10), child: Row( children: [ Container( height: 90, width: 90, decoration: BoxDecoration( color: Colors.amber, borderRadius: BorderRadius.circular(15), image: DecorationImage( fit: BoxFit.cover, image: NetworkImage(Character['picture']) ) ), ), SizedBox(width: 10), Expanded( child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( Character['name'], style: TextStyle( color: Colors.black87, fontWeight: FontWeight.bold, ), ), SizedBox(height: 5), Text( Character['description'], style: TextStyle( color: Colors.black87, ), maxLines: 2, ), ], ) ) ], ), ), ); } }</code>

? ???? ??????

?? ????? ???? ??????? ??? ??? ?? ? ? ????.

 <code>mutation CreateNewCharacter($data: CharacterInput!) { createCharacter(data: $data) { _id name description picture } }</code>

?? ??? ????? ????? flutter_graphql ?????? ???? ??? ???????. ???? ???? ?? ???? ?? ? ??? ??? ???? ? ??? ??? ???. ??? ?? ? ? CreateCharacter ????? ?????.

 <code>// lib/screens/new.dart ... String addCharacter = ";";"; mutation CreateNewCharacter(\$data: CharacterInput!) { createCharacter(data: \$data) { _id name description picture } } ";";";; class NewCharacter extends StatelessWidget { const NewCharacter({Key key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Add New Character'), ), body: AddCharacterForm() ); } } class AddCharacterForm extends StatefulWidget { AddCharacterForm({Key key}) : super(key: key); @override _AddCharacterFormState createState() => _AddCharacterFormState(); } class _AddCharacterFormState extends State<addcharacterform> { String name; String description; String imgUrl; @override Widget build(BuildContext context) { return Form( child: Padding( padding: EdgeInsets.all(20), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ TextField( decoration: const InputDecoration( icon: Icon(Icons.person), labelText: 'Name *', ), onChanged: (text) { name = text; }, ), TextField( decoration: const InputDecoration( icon: Icon(Icons.post_add), labelText: 'Description', ), minLines: 4, maxLines: 4, onChanged: (text) { description = text; }, ), TextField( decoration: const InputDecoration( icon: Icon(Icons.image), labelText: 'Image Url', ), onChanged: (text) { imgUrl = text; }, ), SizedBox(height: 20), Mutation( options: MutationOptions( document: gql(addCharacter), onCompleted: (dynamic resultData) { print(resultData); name = ''; description = ''; imgUrl = ''; Navigator.of(context).push( MaterialPageRoute(builder: (context) => AllCharacters()) ); }, ), builder: ( RunMutation runMutation, QueryResult result, ) { return Center( child: ElevatedButton( child: const Text('Submit'), onPressed: () { runMutation({ 'data': { ";picture";: imgUrl, ";name";: name, ";description";: description, } }); }, ), ); } ) ], ), ), ); } }</addcharacterform></code>

?? ???? ? ? ??? ???? ??? ?? ??? ?? ???? ?????. ??, ???? ??? ???? oncompleter ??? ?????. ? ??? ????? ??? ? ???????? ???? ??? ?????.

??? ??

Deletecharacter ????? ???? ???????? ??? ??? ? ????. ???? ????? ???? ???? ??? ??? ??? ? ? ????.

 <code>// lib/screens/character-tile.dart ... String deleteCharacter = ";";"; mutation DeleteCharacter(\$id: ID!) { deleteCharacter(id: \$id) { _id name } } ";";";; class CharacterTile extends StatelessWidget { final Character; final VoidCallback refetch; final VoidCallback updateParent; const CharacterTile({ Key key, @required this.Character, @required this.refetch, this.updateParent, }) : super(key: key); @override Widget build(BuildContext context) { return InkWell( onTap: () { showModalBottomSheet( context: context, builder: (BuildContext context) { print(Character['picture']); return Mutation( options: MutationOptions( document: gql(deleteCharacter), onCompleted: (dynamic resultData) { print(resultData); this.refetch(); }, ), builder: ( RunMutation runMutation, QueryResult result, ) { return Container( height: 400, padding: EdgeInsets.all(30), child: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, mainAxisSize: MainAxisSize.min, children:<widget> [ Text(Character['description']), ElevatedButton( child: Text('Delete Character'), onPressed: () { runMutation({ 'id': Character['_id'], }); Navigator.pop(context); }, ), ], ), ), ); } ); } ); }, child: Padding( padding: const EdgeInsets.all(10), child: Row( children: [ Container( height: 90, width: 90, decoration: BoxDecoration( color: Colors.amber, borderRadius: BorderRadius.circular(15), image: DecorationImage( fit: BoxFit.cover, image: NetworkImage(Character['picture']) ) ), ), SizedBox(width: 10), Expanded( child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( Character['name'], style: TextStyle( color: Colors.black87, fontWeight: FontWeight.bold, ), ), SizedBox(height: 5), Text( Character['description'], style: TextStyle( color: Colors.black87, ), maxLines: 2, ), ], ) ) ], ), ), ); } }</widget></code>

??? ??

??? ??? ?? ? ??? ?????. GraphQL API? ? ?? ???? ?????. ??? ?? ?? ??? ??? ?? ?? ?? ??? ?? ? ????. ??? ???? ??? ???? UpdateCharacter ????? ????? ????. ??? ?? ??? ?? lib/screens/edit.dart? ??????. ? ??? ????? ??? ????.

 <code>// lib/screens/edit.dart String editCharacter = """ mutation EditCharacter(\$name: String!, \$id: ID!, \$description: String!, \$picture: String!) { updateCharacter(data: { name: \$name description: \$description picture: \$picture }, id: \$id) { _id name description picture } } """; class EditCharacter extends StatelessWidget { final Character; const EditCharacter({Key key, this.Character}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Edit Character'), ), body: EditFormBody(Character: this.Character), ); } } class EditFormBody extends StatefulWidget { final Character; EditFormBody({Key key, this.Character}) : super(key: key); @override _EditFormBodyState createState() => _EditFormBodyState(); } class _EditFormBodyState extends State<editformbody> { String name; String description; String picture; @override Widget build(BuildContext context) { return Container( child: Padding( padding: const EdgeInsets.all(8.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ TextFormField( initialValue: widget.Character['name'], decoration: const InputDecoration( icon: Icon(Icons.person), labelText: 'Name *', ), onChanged: (text) { name = text; } ), TextFormField( initialValue: widget.Character['description'], decoration: const InputDecoration( icon: Icon(Icons.person), labelText: 'Description', ), minLines: 4, maxLines: 4, onChanged: (text) { description = text; } ), TextFormField( initialValue: widget.Character['picture'], decoration: const InputDecoration( icon: Icon(Icons.image), labelText: 'Image Url', ), onChanged: (text) { picture = text; }, ), SizedBox(height: 20), Mutation( options: MutationOptions( document: gql(editCharacter), onCompleted: (dynamic resultData) { print(resultData); Navigator.of(context).push( MaterialPageRoute(builder: (context) => AllCharacters()) ); }, ), builder: ( RunMutation runMutation, QueryResult result, ) { print(result); return Center( child: ElevatedButton( child: const Text('Submit'), onPressed: () { runMutation({ 'id': widget.Character['_id'], 'name': name != null ? name : widget.Character['name'], 'description': description != null ? description : widget.Character['description'], 'picture': picture != null ? picture : widget.Character['picture'], }); }, ), ); } ), ] ) ), ); } }</editformbody></code>

? ??? ?? ??? ??? ?? ? ? ????.

?? ??? ???? ?? ??? ?? ????? Twitter @haqueshadid? ??? ?? ? ? ????

github ### ?? ??

? ??? ?? ??? Flutter and Fauna? ???? ????. ??? ??? ?? ? ????. FAUNA Ecosystem? ??? ??????? ???? ???? ?? ????, ??? ??? ? ???? ?????. ??? ??? ??? ??? ??? ??? ??? ??? ??? ?? ???? ???? ?? ?? ???? ???????.

Fauna? ?? ?? ? ???? ???? ?? ????. Dart/Flutter? GraphQL ?????? ?? ? ??? ?? ??? GraphQL_Flutter? ?? GitHub ???? ??????.

?? ???? ??? ?????? ?????. ??? ?????.

? ??? Flutter, Fauna ? GraphQL? ???? ? ?? ??? ??????? ???? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!