From cd24de4f16a23e73e2a6f9b06c4593470aa7152a Mon Sep 17 00:00:00 2001 From: dannykng Date: Wed, 14 Dec 2022 16:42:02 -0800 Subject: [PATCH 01/10] Stub Flutter quickstart --- .../getting-started/quickstarts/flutter.mdx | 116 ++++++++++++++++++ 1 file changed, 116 insertions(+) create mode 100644 apps/docs/pages/guides/getting-started/quickstarts/flutter.mdx diff --git a/apps/docs/pages/guides/getting-started/quickstarts/flutter.mdx b/apps/docs/pages/guides/getting-started/quickstarts/flutter.mdx new file mode 100644 index 00000000000..413c43dab44 --- /dev/null +++ b/apps/docs/pages/guides/getting-started/quickstarts/flutter.mdx @@ -0,0 +1,116 @@ +import Layout from '~/layouts/DefaultGuideLayout' +import StepHikeCompact from '~/components/StepHikeCompact' + +export const meta = { + title: 'Use Supabase with Flutter', + subtitle: + 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a Flutter app.', + breadcrumb: 'Framework Quickstarts', +} + + + + + + + [Create a new project](https://app.supabase.com) in the Supabase Dashboard. + + After your project is ready, create a table in your Supabase database using the [SQL Editor](https://app.supabase.com/project/_/sql) in the Dashboard. Use the following SQL statement to create a `countries` table with some sample data. + + + + + + ```sql SQL_EDITOR + -- Create the table + CREATE TABLE countries ( + id SERIAL PRIMARY KEY, + name VARCHAR(255) NOT NULL + ); + -- Insert some sample data into the table + INSERT INTO countries (name) VALUES ('United States'); + INSERT INTO countries (name) VALUES ('Canada'); + INSERT INTO countries (name) VALUES ('Mexico'); + ```` + + + + + + + + + + Step 2 details + + + + + + ```bash Terminal + code example + ``` + + + + + + + + + + Step 3 details + + + + + + ```bash Terminal + code example + ``` + + + + + + + + + + Step 4 details + + + + + + ```bash Terminal + code example + ``` + + + + + + + + + + Step 5 details + + + + + + ```bash Terminal + code example + ``` + + + + + + + +export const Page = ({ children }) => + +export default Page From b165b79c0eb0320c572a6a874bb9444ea3af44b3 Mon Sep 17 00:00:00 2001 From: dannykng Date: Wed, 14 Dec 2022 16:42:50 -0800 Subject: [PATCH 02/10] Update docs landing page and nav for quickstarts --- .../NavigationMenu/NavigationMenu.constants.ts | 15 ++++++++------- apps/docs/pages/index.mdx | 16 ++++++++++------ 2 files changed, 18 insertions(+), 13 deletions(-) diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts index e686c28dd60..09cab7fa1ae 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts @@ -42,13 +42,14 @@ export const gettingstarted = { items: [ { name: 'Features', url: '/guides/getting-started/features', items: [] }, { name: 'Architecture', url: '/guides/getting-started/architecture', items: [] }, - // { - // name: 'Quickstarts', - // items: [ - // { name: 'NextJS', url: '/guides/getting-started/quickstarts/nextjs', items: [] }, - // { name: 'ReactJS', url: '/guides/getting-started/quickstarts/reactjs', items: [] }, - // ], - // }, + { + name: 'Framework Quickstarts', + items: [ + { name: 'ReactJS', url: '/guides/getting-started/quickstarts/reactjs', items: [] }, + { name: 'NextJS', url: '/guides/getting-started/quickstarts/nextjs', items: [] }, + { name: 'Flutter', url: '/guides/getting-started/quickstarts/flutter', items: [] }, + ], + }, { name: 'Web app tutorials', items: [ diff --git a/apps/docs/pages/index.mdx b/apps/docs/pages/index.mdx index a47df32ed83..3317f6198b4 100644 --- a/apps/docs/pages/index.mdx +++ b/apps/docs/pages/index.mdx @@ -11,16 +11,15 @@ export const meta = {

Supabase is an open source Firebase alternative providing all the backend features you need to - build a product. [Learn more](/docs/architecture) about Supabase, start with the - [tutorials](/docs/guides/getting-started#tutorials), or dive straight into the different products - and APIs. + build a product. [Learn more](/docs/architecture) about Supabase, start with a quickstart or + tutorial, or dive straight into the different products and APIs.

{/* start container */}
-
+
Get started
- + - + + + + + +
From aee1f7422d81457317f5d557134445e25a8e0c67 Mon Sep 17 00:00:00 2001 From: dshukertjr <18113850+dshukertjr@users.noreply.github.com> Date: Sat, 17 Dec 2022 12:49:22 +0900 Subject: [PATCH 03/10] adds contents for flutter quick starter guide --- .../getting-started/quickstarts/flutter.mdx | 107 +++++++++++++++--- 1 file changed, 93 insertions(+), 14 deletions(-) diff --git a/apps/docs/pages/guides/getting-started/quickstarts/flutter.mdx b/apps/docs/pages/guides/getting-started/quickstarts/flutter.mdx index 413c43dab44..173b08ea8d2 100644 --- a/apps/docs/pages/guides/getting-started/quickstarts/flutter.mdx +++ b/apps/docs/pages/guides/getting-started/quickstarts/flutter.mdx @@ -39,16 +39,16 @@ export const meta = { - + - Step 2 details + Create a Flutter app using the `flutter create` command. ```bash Terminal - code example + flutter create my_app ``` @@ -57,16 +57,18 @@ export const meta = { - + - Step 3 details + The fastest way to get started is to use the [`supabase_flutter`](https://pub.dev/packages/supabase_flutter) client library which provides a convenient interface for working with Supabase from a Flutter app. + + Open the `pubspec.yaml` file inside your Flutter app and add `supabase_flutter`. - ```bash Terminal - code example + ```yaml pubspec.yaml + supabase_flutter: ^1.2.2 ``` @@ -75,16 +77,24 @@ export const meta = { - + - Step 4 details + Open `main.dart` edit the main function to include the initialization code for Supabase using your [project URL and public API (anon) key](https://app.supabase.com/project/_/settings/api). - ```bash Terminal - code example + ```dart lib/main.dart + Future main() async { + WidgetsFlutterBinding.ensureInitialized(); + + await Supabase.initialize( + url: 'YOUR_SUPABASE_URL', + anonKey: 'YOUR_SUPABASE_ANON_KEY', + ); + runApp(MyApp()); + } ``` @@ -93,16 +103,85 @@ export const meta = { - + - Step 5 details + Use a `FutureBuilder` to fetch the data when the home page loads and display the query result in a `ListView`. + + Replace the default `MyApp` and `HomePage` classes with the following code. + + + + + + ```dart lib/main.dart + class MyApp extends StatelessWidget { + const MyApp({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return const MaterialApp( + title: 'Countries', + home: HomePage(), + ); + } + } + + class HomePage extends StatefulWidget { + const HomePage({super.key}); + + @override + State createState() => _HomePageState(); + } + + class _HomePageState extends State { + final _future = Supabase.instance.client + .from('countries') + .select>>(); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: FutureBuilder>>( + future: _future, + builder: (context, snapshot) { + if (!snapshot.hasData) { + return const Center(child: CircularProgressIndicator()); + } + final countries = snapshot.data!; + return ListView.builder( + itemCount: items.length, + itemBuilder: ((context, index) { + final country = items[index]; + return ListTile( + title: Text(item['name']), + ); + }), + ); + }, + ), + ); + } + } + ``` + + + + + + + + + + Run your app on a platform of your choosing! By default an app should launch in your web browser. + + Note that `supabase_flutter` is compatible with web, iOS, Android, macOS, and Windows apps. ```bash Terminal - code example + flutter run ``` From 67f6bb988a7fbc25f2c38aac1245171b13f47494 Mon Sep 17 00:00:00 2001 From: dannykng Date: Mon, 19 Dec 2022 16:51:23 -0800 Subject: [PATCH 04/10] Update Flutter steps --- .../getting-started/quickstarts/flutter.mdx | 23 ++++++++++--------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/apps/docs/pages/guides/getting-started/quickstarts/flutter.mdx b/apps/docs/pages/guides/getting-started/quickstarts/flutter.mdx index 173b08ea8d2..1e4dd5ecc64 100644 --- a/apps/docs/pages/guides/getting-started/quickstarts/flutter.mdx +++ b/apps/docs/pages/guides/getting-started/quickstarts/flutter.mdx @@ -41,7 +41,7 @@ export const meta = { - Create a Flutter app using the `flutter create` command. + Create a Flutter app using the `flutter create` command. You can skip this step if you already have a working app. @@ -60,8 +60,8 @@ export const meta = { The fastest way to get started is to use the [`supabase_flutter`](https://pub.dev/packages/supabase_flutter) client library which provides a convenient interface for working with Supabase from a Flutter app. - - Open the `pubspec.yaml` file inside your Flutter app and add `supabase_flutter`. + + Open the `pubspec.yaml` file inside your Flutter app and add `supabase_flutter` as a dependency. @@ -79,13 +79,15 @@ export const meta = { - Open `main.dart` edit the main function to include the initialization code for Supabase using your [project URL and public API (anon) key](https://app.supabase.com/project/_/settings/api). + Open `lib/main.dart` and edit the main function to initialize Supabase using your [project URL and public API (anon) key](https://app.supabase.com/project/_/settings/api). ```dart lib/main.dart + import 'package:supabase_flutter/supabase_flutter.dart'; + Future main() async { WidgetsFlutterBinding.ensureInitialized(); @@ -106,8 +108,8 @@ export const meta = { Use a `FutureBuilder` to fetch the data when the home page loads and display the query result in a `ListView`. - - Replace the default `MyApp` and `HomePage` classes with the following code. + + Replace the default `MyApp` and `MyHomePage` classes with the following code. @@ -161,19 +163,18 @@ export const meta = { ), ); } - } + } ``` - - Run your app on a platform of your choosing! By default an app should launch in your web browser. - + Run your app on a platform of your choosing! By default an app should launch in your web browser. + Note that `supabase_flutter` is compatible with web, iOS, Android, macOS, and Windows apps. @@ -181,7 +182,7 @@ export const meta = { ```bash Terminal - flutter run + flutter run ``` From a5657df4cdd259b4989a70d42518ff1297e4ba15 Mon Sep 17 00:00:00 2001 From: dshukertjr <18113850+dshukertjr@users.noreply.github.com> Date: Thu, 22 Dec 2022 11:30:19 +0900 Subject: [PATCH 05/10] fix: use the correct variable for Flutter guide --- .../pages/guides/getting-started/quickstarts/flutter.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/docs/pages/guides/getting-started/quickstarts/flutter.mdx b/apps/docs/pages/guides/getting-started/quickstarts/flutter.mdx index 1e4dd5ecc64..339eb20dd2f 100644 --- a/apps/docs/pages/guides/getting-started/quickstarts/flutter.mdx +++ b/apps/docs/pages/guides/getting-started/quickstarts/flutter.mdx @@ -151,11 +151,11 @@ export const meta = { } final countries = snapshot.data!; return ListView.builder( - itemCount: items.length, + itemCount: countries.length, itemBuilder: ((context, index) { - final country = items[index]; + final country = countries[index]; return ListTile( - title: Text(item['name']), + title: Text(country['name']), ); }), ); From 25e3ddb06b2ecf27563e43495768a2cd689c6d36 Mon Sep 17 00:00:00 2001 From: dannykng Date: Wed, 4 Jan 2023 17:13:54 -0800 Subject: [PATCH 06/10] Fix step numbers --- .../guides/getting-started/quickstarts/reactjs.mdx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/apps/docs/pages/guides/getting-started/quickstarts/reactjs.mdx b/apps/docs/pages/guides/getting-started/quickstarts/reactjs.mdx index da4f7431bb3..e890e3e0111 100644 --- a/apps/docs/pages/guides/getting-started/quickstarts/reactjs.mdx +++ b/apps/docs/pages/guides/getting-started/quickstarts/reactjs.mdx @@ -3,7 +3,8 @@ import StepHikeCompact from '~/components/StepHikeCompact' export const meta = { title: 'Use Supabase with React', - subtitle: 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a React app.', + subtitle: + 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a React app.', breadcrumb: 'Framework Quickstarts', } @@ -58,7 +59,7 @@ export const meta = { The fastest way to get started is to use the `supabase-js` client library which provides a convenient interface for working with Supabase from a React app. - + Navigate to the React app and install `supabase-js`. @@ -73,11 +74,11 @@ export const meta = { - + In `index.js`, create a Supabase client using your [Project URL and public API (anon) key](https://app.supabase.com/project/_/settings/api). - + Add a `getCountries` function to fetch the data and log the query result to the browser console. @@ -101,7 +102,7 @@ export const meta = { - + Start the app, go to http://localhost:3000 in a browser, and open the browser console and you should see the list of countries. From abbc9f0cd4cdbff1ae485f0e793c4380eef5ad01 Mon Sep 17 00:00:00 2001 From: Terry Sutton Date: Fri, 6 Jan 2023 12:27:59 -0330 Subject: [PATCH 07/10] Fix data fetch section --- .../guides/getting-started/quickstarts/nextjs.mdx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/apps/docs/pages/guides/getting-started/quickstarts/nextjs.mdx b/apps/docs/pages/guides/getting-started/quickstarts/nextjs.mdx index 25e4b066c09..321684565e0 100644 --- a/apps/docs/pages/guides/getting-started/quickstarts/nextjs.mdx +++ b/apps/docs/pages/guides/getting-started/quickstarts/nextjs.mdx @@ -3,7 +3,8 @@ import StepHikeCompact from '~/components/StepHikeCompact' export const meta = { title: 'Use Supabase with NextJS', - subtitle: 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a NextJS app.', + subtitle: + 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a NextJS app.', breadcrumb: 'Framework Quickstarts', } @@ -58,7 +59,7 @@ export const meta = { The fastest way to get started is to use the `supabase-js` client library which provides a convenient interface for working with Supabase from a NextJS app. - + Navigate to the NextJS app and install `supabase-js`. @@ -96,7 +97,7 @@ export const meta = { Use a `getInitialProps` method to fetch the data when the page loads and display the query result as a simple list. - + Replace the existing function in your index file in the `pages` directory with the following code. @@ -116,11 +117,13 @@ export const meta = { ); } - Page.getInitialProps = async () => { - const { data, error } = await supabase.from('countries').select() + export async function getServerSideProps() { + let { data } = await supabase.from('countries').select() return { - countries: data + props: { + countries: data + }, } } From 45237c8e2460082de0cabee4408ec8b669566a14 Mon Sep 17 00:00:00 2001 From: Terry Sutton Date: Fri, 6 Jan 2023 12:29:07 -0330 Subject: [PATCH 08/10] update --- apps/docs/pages/guides/getting-started/quickstarts/nextjs.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/pages/guides/getting-started/quickstarts/nextjs.mdx b/apps/docs/pages/guides/getting-started/quickstarts/nextjs.mdx index 321684565e0..67d258c8575 100644 --- a/apps/docs/pages/guides/getting-started/quickstarts/nextjs.mdx +++ b/apps/docs/pages/guides/getting-started/quickstarts/nextjs.mdx @@ -96,7 +96,7 @@ export const meta = { - Use a `getInitialProps` method to fetch the data when the page loads and display the query result as a simple list. + Use the `getServerSideProps` method to fetch the data server-side and display the query result as a simple list. Replace the existing function in your index file in the `pages` directory with the following code. From c3527058c179b6ae14d203d866c23b1e319a8b02 Mon Sep 17 00:00:00 2001 From: Terry Sutton Date: Fri, 6 Jan 2023 12:31:04 -0330 Subject: [PATCH 09/10] Update --- apps/docs/pages/guides/getting-started/quickstarts/reactjs.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/pages/guides/getting-started/quickstarts/reactjs.mdx b/apps/docs/pages/guides/getting-started/quickstarts/reactjs.mdx index e890e3e0111..ea117046949 100644 --- a/apps/docs/pages/guides/getting-started/quickstarts/reactjs.mdx +++ b/apps/docs/pages/guides/getting-started/quickstarts/reactjs.mdx @@ -91,7 +91,7 @@ export const meta = { const supabase = createClient('https://.supabase.co', '') async function getCountries() { - const countries = await supabase.from('countries').select('*') + const countries = await supabase.from('countries').select() console.log(countries) } From ccd091cc21868e54781d3c63a957d979e8928a26 Mon Sep 17 00:00:00 2001 From: dannykng Date: Fri, 6 Jan 2023 12:00:14 -0800 Subject: [PATCH 10/10] Update landing page --- apps/docs/pages/index.mdx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/apps/docs/pages/index.mdx b/apps/docs/pages/index.mdx index 342d8dc4504..5de1c11462e 100644 --- a/apps/docs/pages/index.mdx +++ b/apps/docs/pages/index.mdx @@ -11,9 +11,8 @@ export const meta = {

Supabase is an open source Firebase alternative providing all the backend features you need to - build a product. [Learn more](/docs/guides/getting-started/architecture) about Supabase, start - with the [tutorials](/docs/guides/getting-started#tutorials), or dive straight into the different - products and APIs. + build a product. [Learn more](/docs/guides/getting-started/architecture) about Supabase, follow a + quickstart for an overview, or dive straight into the different products and APIs.

{/* start container */} @@ -111,7 +110,7 @@ export const meta = { md:items-center md:gap-3 ">

Ready to make a fully working app?

-

Follow the step-by-step tutorials.

+

Follow the step-by-step tutorials.