From b178faced21c66003bf4351d31d12cdaeaf2eb6c Mon Sep 17 00:00:00 2001 From: phamhieu Date: Fri, 19 May 2023 08:19:58 +0700 Subject: [PATCH] feat: initial kotlin starter guides --- apps/docs/components/Frameworks.tsx | 8 ++ apps/docs/components/HomePageCover.tsx | 10 ++ .../NavigationMenu.constants.ts | 6 +- apps/docs/pages/guides/getting-started.mdx | 14 ++ .../getting-started/quickstarts/kotlin.mdx | 131 ++++++++++++++++++ .../getting-started/tutorials/with-kotlin.mdx | 37 +++++ apps/docs/public/sitemap.xml | 12 ++ apps/www/components/Hero/HeroFrameworks.tsx | 6 + apps/www/lib/redirects.js | 5 + .../Command/utils/shared-nav-items.json | 4 + 10 files changed, 232 insertions(+), 1 deletion(-) create mode 100644 apps/docs/pages/guides/getting-started/quickstarts/kotlin.mdx create mode 100644 apps/docs/pages/guides/getting-started/tutorials/with-kotlin.mdx diff --git a/apps/docs/components/Frameworks.tsx b/apps/docs/components/Frameworks.tsx index a1b6d0da29b..42e4a40c0b0 100644 --- a/apps/docs/components/Frameworks.tsx +++ b/apps/docs/components/Frameworks.tsx @@ -37,6 +37,14 @@ const Frameworks = () => { }, href: '/reference/javascript/installing#javascript', }, + { + name: 'Kotlin', + logo: { + light: '/docs/img/icons/flutter-icon.svg', + dark: '/docs/img/icons/flutter-icon.svg', + }, + href: '/guides/with-kotlin', + }, { name: 'Next.js', logo: { diff --git a/apps/docs/components/HomePageCover.tsx b/apps/docs/components/HomePageCover.tsx index edf3252ca64..06c1273b391 100644 --- a/apps/docs/components/HomePageCover.tsx +++ b/apps/docs/components/HomePageCover.tsx @@ -66,6 +66,16 @@ const HomePageCover = (props) => { iconSize={iconSize} hideArrow tooltip="Flutter" + icon="/docs/img/icons/kotlin-icon" + /> + + + + + diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts index 912faa31c0c..c53cb597263 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts @@ -208,6 +208,7 @@ export const gettingstarted = { { name: 'NextJS', url: '/guides/getting-started/quickstarts/nextjs' }, { name: 'RedwoodJS', url: '/guides/getting-started/quickstarts/redwoodjs' }, { name: 'Flutter', url: '/guides/getting-started/quickstarts/flutter' }, + { name: 'Kotlin', url: '/guides/getting-started/quickstarts/kotlin' }, { name: 'SvelteKit', url: '/guides/getting-started/quickstarts/sveltekit' }, { name: 'SolidJS', url: '/guides/getting-started/quickstarts/solidjs' }, { name: 'Vue', url: '/guides/getting-started/quickstarts/vue' }, @@ -265,7 +266,10 @@ export const gettingstarted = { name: 'Expo', url: '/guides/getting-started/tutorials/with-expo', }, - + { + name: 'Kotlin', + url: '/guides/getting-started/tutorials/with-kotlin', + }, { name: 'Ionic React', url: '/guides/getting-started/tutorials/with-ionic-react', diff --git a/apps/docs/pages/guides/getting-started.mdx b/apps/docs/pages/guides/getting-started.mdx index f2e4d4532c5..65d0e2af1f0 100644 --- a/apps/docs/pages/guides/getting-started.mdx +++ b/apps/docs/pages/guides/getting-started.mdx @@ -150,6 +150,13 @@ export const quickstarts = [ 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a Flutter app.', icon: '/docs/img/icons/flutter-icon', }, + { + title: 'Kotlin', + href: '/guides/getting-started/quickstarts/kotlin', + description: + 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a Kotlin app.', + icon: '/docs/img/icons/kotlin-icon', + }, { title: 'SvelteKit', href: '/guides/getting-started/quickstarts/sveltekit', @@ -247,6 +254,13 @@ export const mobile = [ 'Learn how to build a user management app with Expo and Supabase Database, Auth, and Storage functionality.', icon: '/docs/img/icons/expo-icon', }, + { + title: 'Kotlin', + href: '/guides/getting-started/tutorials/with-kotlin', + description: + 'Learn how to build a groceries store app with Kotlin and Supabase Database, Auth, and Storage functionality.', + icon: '/docs/img/icons/kotlin-icon', + }, { title: 'Ionic React', href: '/guides/getting-started/tutorials/with-ionic-react', diff --git a/apps/docs/pages/guides/getting-started/quickstarts/kotlin.mdx b/apps/docs/pages/guides/getting-started/quickstarts/kotlin.mdx new file mode 100644 index 00000000000..e2dfa410a8e --- /dev/null +++ b/apps/docs/pages/guides/getting-started/quickstarts/kotlin.mdx @@ -0,0 +1,131 @@ +import Layout from '~/layouts/DefaultGuideLayout' +import StepHikeCompact from '~/components/StepHikeCompact' + +export const meta = { + title: 'Use Supabase with Kotlin', + subtitle: + 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a Kotlin 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'); + ```` + + + + + + + + + + ... + + + + + + ```bash Terminal + ... + ``` + + + + + + + + + + ... + + + + + + ```kotlin + ... + ``` + + + + + + + + + + ... + + + + + + ```kotlin MainActivity.kt + ... + ``` + + + + + + + + + + ... + + + + + + ```kotlin MainActivity.kt + ... + ``` + + + + + + + + + + + + + ```bash Terminal + ... + ``` + + + + + + + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-kotlin.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-kotlin.mdx new file mode 100644 index 00000000000..4f1e711c513 --- /dev/null +++ b/apps/docs/pages/guides/getting-started/tutorials/with-kotlin.mdx @@ -0,0 +1,37 @@ +import Layout from '~/layouts/DefaultGuideLayout' + +export const meta = { + title: 'Build a Groceries Store App with Kotlin', + description: 'Learn how to use Supabase in your Kotlin App.', +} + + + +![Supabase User Management example](/docs/img/supabase-flutter-demo.png) + + + If you get stuck while working through this guide, refer to the [full example on + GitHub](https://github.com/supabase/supabase/tree/master/examples). + + + + +## Building the App + +Let's start building the Kotlin app from scratch. + +### Initialize a Kotlin app + +... + +```bash +... +``` + +### Setup deep links + +... + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/public/sitemap.xml b/apps/docs/public/sitemap.xml index 78ce4d811b9..2632034b190 100644 --- a/apps/docs/public/sitemap.xml +++ b/apps/docs/public/sitemap.xml @@ -1122,6 +1122,12 @@ 0.5 + + https://supabase.com/docs/guides/getting-started/quickstarts/kotlin + weekly + 0.5 + + https://supabase.com/docs/guides/getting-started/quickstarts/nextjs weekly @@ -1290,6 +1296,12 @@ 0.5 + + https://supabase.com/docs/guides/getting-started/tutorials/with-kotlin + weekly + 0.5 + + https://supabase.com/docs/guides/getting-started/tutorials/with-ionic-angular weekly diff --git a/apps/www/components/Hero/HeroFrameworks.tsx b/apps/www/components/Hero/HeroFrameworks.tsx index 3d59f73161b..109163e96f5 100644 --- a/apps/www/components/Hero/HeroFrameworks.tsx +++ b/apps/www/components/Hero/HeroFrameworks.tsx @@ -31,6 +31,12 @@ const frameworks = [ docs: '/docs/guides/getting-started/quickstarts/flutter', gaEvent: 'www_hp_hero_frameworks_flutter', }, + { + name: 'Kotlin', + icon: '/images/logos/frameworks/kotlin.svg', + docs: '/docs/guides/getting-started/quickstarts/kotlin', + gaEvent: 'www_hp_hero_frameworks_kotlin', + }, { name: 'Svelte', icon: '/images/logos/frameworks/svelte.svg', diff --git a/apps/www/lib/redirects.js b/apps/www/lib/redirects.js index 7331a19da0b..a8448eceaa2 100644 --- a/apps/www/lib/redirects.js +++ b/apps/www/lib/redirects.js @@ -1707,6 +1707,11 @@ module.exports = [ source: '/docs/guides/with-expo', destination: '/docs/guides/getting-started/tutorials/with-expo', }, + { + permanent: true, + source: '/docs/guides/with-kotlin', + destination: '/docs/guides/getting-started/tutorials/with-kotlin', + }, { permanent: true, source: '/docs/guides/with-ionic-react', diff --git a/packages/ui/src/components/Command/utils/shared-nav-items.json b/packages/ui/src/components/Command/utils/shared-nav-items.json index c3c515cc9d4..8c313ed43d2 100644 --- a/packages/ui/src/components/Command/utils/shared-nav-items.json +++ b/packages/ui/src/components/Command/utils/shared-nav-items.json @@ -208,6 +208,10 @@ "label": "Flutter", "url": "https://supabase.com/docs/guides/getting-started/quickstarts/flutter" }, + { + "label": "Kotlin", + "url": "https://supabase.com/docs/guides/getting-started/quickstarts/kotlin" + }, { "label": "SvelteKit", "url": "https://supabase.com/docs/guides/getting-started/quickstarts/sveltekit"