Skip to content

Commit da32d97

Browse files
Documentation edits made through Mintlify web editor (#109)
Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com>
1 parent c7ccaad commit da32d97

File tree

2 files changed

+31
-24
lines changed

2 files changed

+31
-24
lines changed

integration-guides/flutterflow-+-powersync/github-workflow.mdx

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ description: "Advanced workflow for users requiring more control."
88
</Note>
99

1010
<Info>
11-
Before you begin, it's important that you (or someone on your team) are comfortable with FlutterFlow's workflow for managing custom code in GitHub as documented [here](https://docs.flutterflow.io/customizing-your-app/manage-custom-code-in-github). Using PowerSync with FlutterFlow currently requires dropping down into Dart code and merging code changes using git.
11+
Before you begin, it's important that you (or someone on your team) are comfortable with FlutterFlow's workflow for managing custom code in GitHub as documented [here](https://docs.flutterflow.io/customizing-your-app/manage-custom-code-in-github). Using PowerSync with FlutterFlow currently requires dropping down into Dart code and merging code changes using Git.
1212
</Info>
1313

1414
<Check>
@@ -20,10 +20,10 @@ Skills needed to use this guide:
2020
* SQL
2121
</Check>
2222

23-
Used in conjunction with **FlutterFlow**, PowerSync enables developers to build offline-first apps that are robust in poor network conditions and that have highly responsive frontends while relying on Supabase for their backend. This guide provides instructions for how to configure PowerSync for use with your FlutterFlow project that has Supabase integration enabled.
23+
Used in conjunction with **FlutterFlow**, PowerSync enables developers to build offline-first apps that are robust in poor network conditions and have highly responsive frontends while relying on Supabase for their backend. This guide provides instructions for configuring PowerSync for use with your FlutterFlow project that has Supabase integration enabled.
2424

2525
<Check>
26-
This guide takes just over 1 hour to complete. The bulk of that time is the initial FlutterFlow tutorial.
26+
This guide takes just over 1 hour to complete. The bulk of that time is spent on the initial FlutterFlow tutorial.
2727
</Check>
2828

2929
<Info>
@@ -40,16 +40,16 @@ Used in conjunction with **FlutterFlow**, PowerSync enables developers to build
4040

4141
## Create Your FlutterFlow Project
4242

43-
This guide assumes you are starting off by following FlutterFlow's tutorial '[Build a Notes App With FlutterFlow and Supabase](https://docs.flutterflow.io/guides/build-a-notes-app-with-flutterflow-and-supabase)'. Some small changes are required to this tutorial to bring it up to date with the latest Supabase, and to make adding PowerSync simpler:
43+
This guide assumes you are starting by following FlutterFlow's tutorial '[Build a Notes App With FlutterFlow and Supabase](https://docs.flutterflow.io/guides/build-a-notes-app-with-flutterflow-and-supabase)'. Some small changes are required to bring this tutorial up to date with the latest Supabase and to make adding PowerSync simpler:
4444

45-
1. Create your `notes` table using the `UUID` type for your `id` column instead of `int` . It's [simpler to work with UUID](/usage/sync-rules/client-id) based primary key columns in PowerSync.
45+
1. Create your `notes` table using the `UUID` type for your `id` column instead of `int`. It's [simpler to work with UUID](/usage/sync-rules/client-id) based primary key columns in PowerSync.
4646
2. Disable [Row Level Security (RLS)](https://supabase.com/docs/guides/database/postgres/row-level-security) in [Step 3 - Creating the notes table](https://docs.flutterflow.io/guides/build-a-notes-app-with-flutterflow-and-supabase#3.-creating-the-notes-table). Since the FlutterFlow tutorial was published, RLS is now mandatory for new tables created in Supabase. This is for development purposes only — it's important to use RLS in production.
4747
3. Enable insert permissions for the Storage object in [Step 4 - Creating a Storage Bucket](https://docs.flutterflow.io/guides/build-a-notes-app-with-flutterflow-and-supabase#4.-creating-a-storage-bucket-in-supabase-for-storing-images). Without this, users won't be able to upload images.
4848
<Frame>
4949
<img src="/images/integration-70.avif"/>
5050
</Frame>
5151
This can be found under Dashboard -> Storage -> Policies. This policy is a template provided by Supabase.
52-
4. In [Step 10 - Displaying Data in the UI](https://docs.flutterflow.io/guides/build-a-notes-app-with-flutterflow-and-supabase#step-10), pass the `id` column as a parameter instead of the entire row
52+
4. In [Step 10 - Displaying Data in the UI](https://docs.flutterflow.io/guides/build-a-notes-app-with-flutterflow-and-supabase#step-10), pass the `id` column as a parameter instead of the entire row.
5353

5454
## Connect Your Project to GitHub
5555

@@ -64,8 +64,8 @@ This can be found under Dashboard -> Storage -> Policies. This policy is a templ
6464
CREATE PUBLICATION powersync FOR TABLE notes;
6565
```
6666

67-
1. Connect PowerSync to your Supabase environment, as detailed in our [Supabase Guide](/integration-guides/supabase-+-powersync#connect-powersync-to-your-supabase).
68-
2. Deploy the below Sync Rules:
67+
2. Connect PowerSync to your Supabase environment, as detailed in our [Supabase Guide](/integration-guides/supabase-+-powersync#connect-powersync-to-your-supabase).
68+
3. Deploy the below Sync Rules:
6969

7070
```yaml
7171
# Sync-rule docs: https://docs.powersync.com/usage/sync-rules
@@ -92,27 +92,31 @@ All of the work in this section will be performed on the `develop` branch that y
9292
### Install PowerSync
9393

9494
1. Add the [powersync](https://pub.dev/packages/powersync) Dart package to your `pubspec.yaml` file: `powersync: ^0.4.1`
95-
1. It's also useful having a decent Logging framework in your app, so we also recommend adding `logging: ^1.1.1`
95+
1. It's also useful to have a decent Logging framework in your app, so we recommend adding `logging: ^1.1.1`
9696
2. Run `flutter pub get` and iteratively resolve any dependency issues, for example updating `flutter_cache_manager: 3.3.0` to `flutter_cache_manager: ^3.3.0`
9797
1. See [this commit](https://github.com/powersync-ja/powersync-flutterflow-notes-demo/commit/3e5864b9eb41f11600c3a7d595822d50ec2074a1#diff-8b7e9df87668ffa6a04b32e1769a33434999e54ae081c52e5d943c541d4c0d25) to see exactly which dependencies we had to resolve.
9898

9999
<Info>
100-
Note: The FlutterFlow team are always updating their platform, so the exact dependencies that you will need to update may differ.
100+
Note: The FlutterFlow team is always updating their platform, so the exact dependencies that you will need to update may differ.
101101
</Info>
102102

103103
### Import Helper Functions
104104

105-
1. Create a new file`lib/powersync/powersync.dart` and copy the contents of this file:
105+
1. Create a new file `lib/powersync/powersync.dart` and copy the contents of this file:
106106

107107
[https://github.com/powersync-ja/powersync-flutterflow-notes-demo/blob/powersync/lib/powersync/powersync.dart](https://github.com/powersync-ja/powersync-flutterflow-notes-demo/blob/powersync/lib/powersync/powersync.dart)
108108

109-
1. Replace the default value of `powersyncUrl` on line 12 with the value of your PowerSync Service Instance — you can obtain this by opening your Instance properties and copying the value of "Instance URL":
109+
2. Replace the default value of `powersyncUrl` on line 12 with the value of your PowerSync Service Instance — you can obtain this by opening your Instance properties and copying the value of "Instance URL":
110110
<Frame>
111111
<img src="/images/integration-71.avif" />
112112
</Frame>
113-
2. Make the following changes in `lib/main.dart` :
114-
1. Add the following imports:`import 'package:flutter/foundation.dart';` `import './powersync/powersync.dart';`
115-
`import 'package:logging/logging.dart';`
113+
3. Make the following changes in `lib/main.dart`:
114+
1. Add the following imports:
115+
```dart
116+
import 'package:flutter/foundation.dart';
117+
import './powersync/powersync.dart';
118+
import 'package:logging/logging.dart';
119+
```
116120
2. Add the below snippet and test query immediately before `runApp(MyApp())`:
117121

118122
```dart
@@ -134,7 +138,7 @@ Import the following file into your project, it should be located in `lib/powers
134138

135139
### Smoke Test
136140

137-
At this point, you can launch your app using `flutter run` and you should see some 'notes' rows from your Supabase being printed out on the console! Something like this:
141+
At this point, you can launch your app using `flutter run`, and you should see some 'notes' rows from your Supabase being printed out on the console! Something like this:
138142

139143
```js
140144
I/flutter (27958): [powersync-supabase] INFO: 2023-10-23 14:23:59.408889: test_query results = [{id: 4aeaabcd-4143-438d-a49b-903e051ec4bc, id:1: 4aeaabcd-4143-438d-a49b-903e051ec4bc, created_at: 2023-10-23 13:26:34.436Z, title: first note, note: success!, image_link: https://xyz.supabase.co/storage/v1/object/public/notes/users/uploads/1698089188788000.png}, {id: 56e99a0f-3e47-4d12-8fbe-5cb2b45da8ec, id:1: 56e99a0f-3e47-4d12-8fbe-5cb2b45da8ec, created_at: 2023-10-23 13:27:51.015Z, title: second note, note: workes :) , image_link: https://xyz.supabase.co/storage/v1/object/public/notes/users/uploads/1698089268369000.png}]
@@ -150,22 +154,22 @@ Import the following 'notes' model into your project:
150154

151155
### Connect Your UI
152156

153-
Generally speaking, you'll want to replace any Supabase calls in your UI to use the newly implemented methods from the appropriate models defined in the previous step.
157+
Generally speaking, you'll want to replace any Supabase calls in your UI with the newly implemented methods from the appropriate models defined in the previous step.
154158

155-
In this app, we need to update three pages: `home_list_page`, `note_display_page` and `create_note_page`. It's recommended to do these one at a time.
159+
In this app, we need to update three pages: `home_list_page`, `note_display_page`, and `create_note_page`. It's recommended to do these one at a time.
156160

157161
#### Notes Display Page
158162

159163
Copy the changes from [this commit](https://github.com/powersync-ja/powersync-flutterflow-notes-demo/commit/ca4636e687843b6709aff77d1f630508b1247a9e) into your notes display page.
160164

161165
<Check>
162-
This is a big milestone. At this point, force-quit your app, place your test device into airplane mode and relaunch your app. You should see your notes page being populated — all from your local SQLite database
166+
This is a big milestone. At this point, force-quit your app, place your test device into airplane mode, and relaunch your app. You should see your notes page being populated — all from your local SQLite database.
163167
</Check>
164168

165-
Run your app and verify whether you can launch and see your notes list without connectivity (i.e. in offline mode).
169+
Run your app and verify whether you can launch and see your notes list without connectivity (i.e., in offline mode).
166170

167171
Then repeat the steps for the note display and create note pages ([link to commit](https://github.com/powersync-ja/powersync-flutterflow-notes-demo/commit/86d0c3827679b5b2357a420d49ccca2c543360b7)).
168172

169173
## Additional Resources
170174

171-
For more information, explore [the PowerSync docs](/intro/powersync-overview) or join us on [our community Discord](https://discord.gg/powersync) where our team is always available to answer questions.
175+
For more information, explore [the PowerSync docs](/intro/powersync-overview) or join us on [our community Discord](https://discord.gg/powersync) where our team is always available to answer questions.

mint.json

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -252,7 +252,8 @@
252252
"integration-guides/flutterflow-+-powersync",
253253
"integration-guides/flutterflow-+-powersync/flutter-web",
254254
"integration-guides/flutterflow-+-powersync/full-text-search",
255-
"integration-guides/flutterflow-+-powersync/powersync-+-flutterflow-legacy"
255+
"integration-guides/flutterflow-+-powersync/powersync-+-flutterflow-legacy",
256+
"integration-guides/flutterflow-+-powersync/github-workflow"
256257
]
257258
},
258259
"integration-guides/railway-+-powersync",
@@ -376,7 +377,9 @@
376377
},
377378
{
378379
"group": "",
379-
"pages": ["tutorials/overview"]
380+
"pages": [
381+
"tutorials/overview"
382+
]
380383
},
381384
{
382385
"group": "Client",
@@ -424,7 +427,7 @@
424427
"resources/troubleshooting",
425428
"resources/troubleshooting/error-codes"
426429
]
427-
},
430+
},
428431
{
429432
"group": "Usage & Billing",
430433
"pages": [

0 commit comments

Comments
 (0)