Flutter是Google的UI框架，用於創(chuàng)建靈活、富有表現(xiàn)力的跨平臺(tái)移動(dòng)應(yīng)用程序。它是增長(zhǎng)最快的移動(dòng)應(yīng)用程序開(kāi)發(fā)框架之一。另一方面，F(xiàn)auna是一個(gè)事務(wù)性的、對(duì)開(kāi)發(fā)者友好的無(wú)服務(wù)器數(shù)據(jù)庫(kù)，支持原生GraphQL。 Flutter Fauna是天作之合。如果您希望在創(chuàng)紀(jì)錄的時(shí)間內(nèi)構(gòu)建和發(fā)布功能豐富的全棧應(yīng)用程序，F(xiàn)lutter和Fauna是正確的工具。在本文中，我們將引導(dǎo)您使用Fauna和GraphQL後端構(gòu)建您的第一個(gè)Flutter應(yīng)用程序。

您可以在GitHub上找到本文的完整代碼。

學(xué)習(xí)目標(biāo)

在閱讀完本文後，您應(yīng)該知道如何：

1. 設(shè)置Fauna實(shí)例，
2. 為Fauna編寫(xiě)GraphQL模式，
3. 在Flutter應(yīng)用程序中設(shè)置GraphQL客戶端，以及
4. 對(duì)Fauna GraphQL後端執(zhí)行查詢和變異。

Fauna與AWS Amplify與Firebase : Fauna解決了哪些問(wèn)題？它與其他無(wú)服務(wù)器解決方案有何不同？如果您不熟悉Fauna，並且想了解更多關(guān)於Fauna與其他解決方案的比較信息，我建議您閱讀這篇文章。

我們正在構(gòu)建什麼？

我們將構(gòu)建一個(gè)簡(jiǎn)單的移動(dòng)應(yīng)用程序，允許用戶添加、刪除和更新他們最喜歡的電影和電視劇角色。

設(shè)置Fauna

前往fauna.com並創(chuàng)建一個(gè)新帳戶。登錄後，您應(yīng)該能夠創(chuàng)建一個(gè)新的數(shù)據(jù)庫(kù)。

為您的數(shù)據(jù)庫(kù)命名。我將我的命名為flutter_demo。接下來(lái)，我們可以選擇一個(gè)區(qū)域組。對(duì)於此演示，我們將選擇classic。 Fauna是一個(gè)全球分佈式的無(wú)服務(wù)器數(shù)據(jù)庫(kù)。它是唯一一個(gè)支持從任何地方進(jìn)行低延遲讀寫(xiě)訪問(wèn)的數(shù)據(jù)庫(kù)。可以把它想像成CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)），但它是針對(duì)您的數(shù)據(jù)庫(kù)的。要了解有關(guān)區(qū)域組的更多信息，請(qǐng)遵循本指南。

生成管理員密鑰

數(shù)據(jù)庫(kù)創(chuàng)建完成後，轉(zhuǎn)到“安全”選項(xiàng)卡。單擊“新建密鑰”按鈕並為您的數(shù)據(jù)庫(kù)創(chuàng)建一個(gè)新密鑰。請(qǐng)妥善保管此密鑰，因?yàn)槲覀冃枰鼇?lái)進(jìn)行GraphQL操作。

我們將為我們的數(shù)據(jù)庫(kù)創(chuàng)建一個(gè)管理員密鑰。具有管理員角色的密鑰用於管理其關(guān)聯(lián)的數(shù)據(jù)庫(kù)，包括數(shù)據(jù)庫(kù)訪問(wèn)提供程序、子數(shù)據(jù)庫(kù)、文檔、函數(shù)、索引、密鑰、令牌和用戶定義的角色。您可以在以下鏈接中了解有關(guān)Fauna各種安全密鑰和訪問(wèn)角色的更多信息。

編寫(xiě)GraphQL模式

我們將構(gòu)建一個(gè)簡(jiǎn)單的應(yīng)用程序，允許用戶添加、更新和刪除他們最喜歡的電視角色。

創(chuàng)建一個(gè)新的Flutter項(xiàng)目

讓我們通過(guò)運(yùn)行以下命令創(chuàng)建一個(gè)新的Flutter項(xiàng)目。

 <code>flutter create my_app</code>

在項(xiàng)目目錄中，我們將創(chuàng)建一個(gè)名為graphql/schema.graphql的新文件。

在模式文件中，我們將定義集合的結(jié)構(gòu)。 Fauna中的集合類似於SQL中的表。我們現(xiàn)在只需要一個(gè)集合。我們將它命名為Character。

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

如上所示，我們定義了一個(gè)名為Character的類型，它具有多個(gè)屬性（即名稱、描述、圖片等）?？梢詫傩砸暈镾QL數(shù)據(jù)庫(kù)的列或NoSQL數(shù)據(jù)庫(kù)的鍵值對(duì)。我們還定義了一個(gè)Query。此查詢將返回角色列表。

現(xiàn)在讓我們回到Fauna儀表板。單擊GraphQL，然後單擊導(dǎo)入模式以將我們的模式上傳到Fauna。

導(dǎo)入完成後，我們將看到Fauna生成了GraphQL查詢和變異。

不喜歡自動(dòng)生成的GraphQL？想要更好地控制您的業(yè)務(wù)邏輯？在這種情況下，F(xiàn)auna允許您定義自定義GraphQL解析器。要了解更多信息，請(qǐng)點(diǎn)擊此鏈接。

在Flutter應(yīng)用程序中設(shè)置GraphQL客戶端

讓我們打開(kāi)pubspec.yaml文件並添加所需的依賴項(xiàng)。

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

我們?cè)谶@裡添加了兩個(gè)依賴項(xiàng)。 graphql_flutter是Flutter的GraphQL客戶端庫(kù)。它將GraphQL客戶端的所有現(xiàn)代功能集成到一個(gè)易於使用的包中。我們還添加了hive包作為我們的依賴項(xiàng)。 Hive是用純Dart編寫(xiě)的輕量級(jí)鍵值數(shù)據(jù)庫(kù)，用於本地存儲(chǔ)。我們使用hive來(lái)緩存我們的GraphQL查詢。

接下來(lái)，我們將創(chuàng)建一個(gè)新的文件lib/client_provider.dart。我們將在該文件中創(chuàng)建一個(gè)提供程序類，其中將包含我們的Fauna配置。

要連接到Fauna的GraphQL API，我們首先需要?jiǎng)?chuàng)建一個(gè)GraphQLClient。 GraphQLClient需要一個(gè)緩存和一個(gè)鏈接才能初始化。讓我們看一下下面的代碼。

 <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>

在上面的代碼中，我們創(chuàng)建了一個(gè)ValueNotifier來(lái)包裝GraphQLClient。請(qǐng)注意，我們?cè)诘?3-15行（突出顯示）配置了AuthLink。在第14行，我們添加了來(lái)自Fauna的管理員密鑰作為令牌的一部分。在這裡，我硬編碼了管理員密鑰。但是，在生產(chǎn)應(yīng)用程序中，我們必須避免硬編碼Fauna的任何安全密鑰。

有幾種方法可以在Flutter應(yīng)用程序中存儲(chǔ)密鑰。請(qǐng)查看此博文以供參考。

我們希望能夠從應(yīng)用程序的任何小部件調(diào)用Query和Mutation。為此，我們需要使用GraphQLProvider小部件包裝我們的Widget。

 <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>

接下來(lái)，我們轉(zhuǎn)到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>

此時(shí)，我們所有的下游小部件都將能夠運(yùn)行Queries和Mutations函數(shù)，並可以與GraphQL API交互。

應(yīng)用程序頁(yè)面

演示應(yīng)用程序應(yīng)該簡(jiǎn)單易懂。讓我們繼續(xù)創(chuàng)建一個(gè)簡(jiǎn)單的列表小部件，它將顯示所有角色的列表。讓我們創(chuàng)建一個(gè)新的文件lib/screens/character-list.dart。在這個(gè)文件中，我們將編寫(xiě)一個(gè)名為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行]我們有一個(gè)for循環(huán)，用一些假數(shù)據(jù)填充列表。最終，我們將對(duì)Fauna後端進(jìn)行GraphQL查詢，並從數(shù)據(jù)庫(kù)中獲取所有角色。在我們這樣做之前，讓我們嘗試運(yùn)行我們的應(yīng)用程序。我們可以使用以下命令運(yùn)行我們的應(yīng)用程序

<code>flutter run</code>

此時(shí)，我們應(yīng)該能夠看到以下屏幕。

執(zhí)行查詢和變異

現(xiàn)在我們有一些基本的小部件，我們可以繼續(xù)連接GraphQL查詢。我們希望從數(shù)據(jù)庫(kù)獲取所有角色，而不是硬編碼字符串，並在AllCharacters小部件中查看它們。

讓我們回到Fauna的GraphQL playground。請(qǐng)注意，我們可以運(yùn)行以下查詢來(lái)列出所有角色。

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

要從我們的Widget執(zhí)行此查詢，我們需要對(duì)其進(jìn)行一些更改。

 <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>

首先，我們定義了從數(shù)據(jù)庫(kù)獲取所有角色的查詢字符串[第5到17行]。我們使用flutter_graphql中的Query小部件包裝了列表小部件。

隨意查看flutter_graphql庫(kù)的官方文檔。

在query options參數(shù)中，我們提供了GraphQL查詢字符串本身。我們可以為pollInterval參數(shù)傳遞任何浮點(diǎn)數(shù)。 Poll Interval定義了我們希望多長(zhǎng)時(shí)間從後端重新獲取一次數(shù)據(jù)。該小部件還有一個(gè)標(biāo)準(zhǔn)的builder函數(shù)。我們可以使用builder函數(shù)將查詢結(jié)果、重新獲取回調(diào)函數(shù)和獲取更多回調(diào)函數(shù)傳遞到Widget樹(shù)中。

接下來(lái)，我將更新CharacterTile小部件以在屏幕上顯示角色數(shù)據(jù)。

 <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>

添加新數(shù)據(jù)

我們可以通過(guò)運(yùn)行以下變異來(lái)向我們的數(shù)據(jù)庫(kù)添加新角色。

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

要從我們的Widget運(yùn)行此變異，我們需要使用flutter_graphql庫(kù)中的Mutation小部件。讓我們創(chuàng)建一個(gè)帶有簡(jiǎn)單表單的新小部件，供用戶交互和輸入數(shù)據(jù)。提交表單後，將調(diào)用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>

從上面的代碼可以看出，Mutation小部件的工作方式與Query小部件非常相似。此外，Mutation小部件為我們提供了一個(gè)onComplete函數(shù)。此函數(shù)在變異完成後返回?cái)?shù)據(jù)庫(kù)中的更新結(jié)果。

刪除數(shù)據(jù)

我們可以通過(guò)運(yùn)行deleteCharacter變異來(lái)從數(shù)據(jù)庫(kù)中刪除角色。我們可以將此變異函數(shù)添加到我們的CharacterTile中，並在按下按鈕時(shí)觸發(fā)它。

 <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>

編輯數(shù)據(jù)

編輯數(shù)據(jù)與添加和刪除相同。它只是GraphQL API中的另一個(gè)變異。我們可以創(chuàng)建一個(gè)類似於新角色表單小部件的編輯角色表單小部件。唯一的區(qū)別是編輯表單將運(yùn)行updateCharacter變異。為了編輯，我創(chuàng)建了一個(gè)新的Widget lib/screens/edit.dart。以下是此Widget的代碼。

 <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>

您可以查看本文的完整代碼如下。

對(duì)Fauna或Flutter有疑問(wèn)？您可以在Twitter @HaqueShadid上聯(lián)繫我

GitHub ### 後續(xù)步驟

本文的主要目的是讓您開(kāi)始使用Flutter和Fauna。我們?cè)谶@裡只觸及了表面。 Fauna生態(tài)系統(tǒng)為您的移動(dòng)應(yīng)用程序提供了一個(gè)完整的、自動(dòng)縮放的、對(duì)開(kāi)發(fā)者友好的後端即服務(wù)。如果您的目標(biāo)是在創(chuàng)紀(jì)錄的時(shí)間內(nèi)發(fā)布一個(gè)可用於生產(chǎn)的跨平臺(tái)移動(dòng)應(yīng)用程序，請(qǐng)嘗試使用Fauna和Flutter 。

我強(qiáng)烈建議您查看Fauna的官方文檔網(wǎng)站。如果您有興趣了解更多關(guān)於Dart/Flutter的GraphQL客戶端的信息，請(qǐng)查看graphql_flutter的官方GitHub存儲(chǔ)庫(kù)。

祝您編程愉快，下次再見(jiàn)。

以上是如何使用Flutter，F(xiàn)auna和GraphQL構(gòu)建全堆棧移動(dòng)應(yīng)用程序的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！