dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-17 15:19:08 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' of github.com:supabase/supabase

Browse Source
This commit is contained in:
Terry Sutton committed 2023-01-08 09:03:00 -03:30
2 parents 15a84f8eb6 c3833c8682
commit ddb5e32d56
5 files changed
+232 -27
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+8 -7
View File
@@ -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: [
apps/docs/pages/guides/getting-started/quickstarts/flutter.mdx
+196
View File
@@ -0,0 +1,196 @@
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',
}
<StepHikeCompact>
<StepHikeCompact.Step step={1}>
<StepHikeCompact.Details title="Set up a Supabase project with sample data">
[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.
</StepHikeCompact.Details>
<StepHikeCompact.Code>
```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');
````
</StepHikeCompact.Code>
</StepHikeCompact.Step>
<StepHikeCompact.Step step={2}>
<StepHikeCompact.Details title="Create a Flutter app">
Create a Flutter app using the `flutter create` command. You can skip this step if you already have a working app.
</StepHikeCompact.Details>
<StepHikeCompact.Code>
```bash Terminal
flutter create my_app
```
</StepHikeCompact.Code>
</StepHikeCompact.Step>
<StepHikeCompact.Step step={3}>
<StepHikeCompact.Details title="Install the Supabase client library">
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` as a dependency.
</StepHikeCompact.Details>
<StepHikeCompact.Code>
```yaml pubspec.yaml
supabase_flutter: ^1.2.2
```
</StepHikeCompact.Code>
</StepHikeCompact.Step>
<StepHikeCompact.Step step={4}>
<StepHikeCompact.Details title="Initialize the Supabase client">
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).
</StepHikeCompact.Details>
<StepHikeCompact.Code>
```dart lib/main.dart
import 'package:supabase_flutter/supabase_flutter.dart';
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await Supabase.initialize(
url: 'YOUR_SUPABASE_URL',
anonKey: 'YOUR_SUPABASE_ANON_KEY',
);
runApp(MyApp());
}
```
</StepHikeCompact.Code>
</StepHikeCompact.Step>
<StepHikeCompact.Step step={5}>
<StepHikeCompact.Details title="Query data from the app">
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 `MyHomePage` classes with the following code.
</StepHikeCompact.Details>
<StepHikeCompact.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<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final _future = Supabase.instance.client
.from('countries')
.select<List<Map<String, dynamic>>>();
@override
Widget build(BuildContext context) {
return Scaffold(
body: FutureBuilder<List<Map<String, dynamic>>>(
future: _future,
builder: (context, snapshot) {
if (!snapshot.hasData) {
return const Center(child: CircularProgressIndicator());
}
final countries = snapshot.data!;
return ListView.builder(
itemCount: countries.length,
itemBuilder: ((context, index) {
final country = countries[index];
return ListTile(
title: Text(country['name']),
);
}),
);
},
),
);
}
}
```
</StepHikeCompact.Code>
</StepHikeCompact.Step>
<StepHikeCompact.Step step={6}>
<StepHikeCompact.Details title="Start the app">
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.
</StepHikeCompact.Details>
<StepHikeCompact.Code>
```bash Terminal
flutter run
```
</StepHikeCompact.Code>
</StepHikeCompact.Step>
</StepHikeCompact>
export const Page = ({ children }) => <Layout meta={meta} children={children} hideToc={true} />
export default Page
apps/docs/pages/guides/getting-started/quickstarts/nextjs.mdx
+10 -7
View File
@@ -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 = {
<StepHikeCompact.Details title="Install the Supabase client library">
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`.
</StepHikeCompact.Details>
@@ -95,8 +96,8 @@ export const meta = {
<StepHikeCompact.Step step={5}>
<StepHikeCompact.Details title="Query data from the app">
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.
</StepHikeCompact.Details>
@@ -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
},
}
}
apps/docs/pages/guides/getting-started/quickstarts/reactjs.mdx
+7 -6
View File
@@ -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 = {
<StepHikeCompact.Details title="Install the Supabase client library">
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`.
</StepHikeCompact.Details>
@@ -73,11 +74,11 @@ export const meta = {
</StepHikeCompact.Step>
<StepHikeCompact.Step step={5}>
<StepHikeCompact.Step step={4}>
<StepHikeCompact.Details title="Query data from the app">
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.
</StepHikeCompact.Details>
@@ -90,7 +91,7 @@ export const meta = {
const supabase = createClient('https://<project>.supabase.co', '<your-anon-key>')
async function getCountries() {
const countries = await supabase.from('countries').select('*')
const countries = await supabase.from('countries').select()
console.log(countries)
}
@@ -101,7 +102,7 @@ export const meta = {
</StepHikeCompact.Step>
<StepHikeCompact.Step step={6}>
<StepHikeCompact.Step step={5}>
<StepHikeCompact.Details title="Start the app">
Start the app, go to http://localhost:3000 in a browser, and open the browser console and you should see the list of countries.
apps/docs/pages/index.mdx
+11 -7
View File
@@ -11,16 +11,15 @@ export const meta = {
<h2 className="text-base max-w-xl m-0">
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.
</h2>
{/* start container */}
<div className="flex flex-col gap-12 my-12">
<div className="space-y-8 hidden">
<div className="space-y-8">
<div className="
border border-scale-400
relative overflow-hidden
@@ -63,16 +62,21 @@ export const meta = {
<Button size="small">Get started</Button>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-3 md:gap-6">
<Link href={`/getting-started/quickstarts/reactjs`} passHref>
<Link href={`/guides/getting-started/quickstarts/reactjs`} passHref>
<a className="no-underline">
<IconPanel title="ReactJS" icon="/docs/img/icons/react-icon" />
</a>
</Link>
<Link href={`/getting-started/quickstarts/nextjs`} passHref>
<Link href={`/guides/getting-started/quickstarts/nextjs`} passHref>
<a className="no-underline">
<IconPanel title="NextJS" icon="/docs/img/icons/nextjs-icon" />
</a>
</Link>
<Link href={`/guides/getting-started/quickstarts/flutter`} passHref>
<a className="no-underline">
<IconPanel title="Flutter" icon="/docs/img/icons/flutter-icon" />
</a>
</Link>
</div>
</div>
</div>
@@ -106,7 +110,7 @@ export const meta = {
md:items-center md:gap-3
">
<h2 className="text-sm lg:text-base text-scale-1200 m-0">Ready to make a fully working app?</h2>
<p className="text-sm lg:text-base text-scale-1100 m-0">Follow the step-by-step <Link href="/guides/tutorials"><a className="m-0 text-scale-1200 underline">tutorials</a></Link>.</p>
<p className="text-sm lg:text-base text-scale-1100 m-0">Follow the step-by-step <Link href="/guides/getting-started#tutorials"><a className="m-0 text-scale-1200 underline">tutorials</a></Link>.</p>
</div>
</div>