mirror of
https://github.com/supabase/supabase.git
synced 2026-10-15 06:09:08 +03:00
Partials are currently defined via MDX includes. This PR switches to pre-compile-time partials, which have a new syntax: ``` <$Partial path="path/to/file.mdx" /> ``` ## Rationale This produces two improvements: 1. Partial substitution can occur in pipelines that don't use MDX compilation. For example, we can now do partial substitution before building the search index, so partial content will also be indexed. 2. After the App Router migration, the MDXProviders should've been deprecated, but were kept around for the sole reason of making partials work, and leading to us shipping unnecessary client-side code. We get a minor decrease in overall client bundle size (5.74 MB to 5.6 MB) by getting rid of the Providers. ## Breaking changes Besides the change to partial syntax, the arguments are also less powerful than before because we are doing string substitution and don't have the full power of JS. Defining string variables is still possible (documented in the Contributing guide), and since that's all we actually do in practice, this shouldn't be too cumbersome. There is always the escape hatch of making a custom component for more complex content reuse cases.
188 lines
5.6 KiB
Plaintext
188 lines
5.6 KiB
Plaintext
---
|
|
title: 'Use Supabase with Android Kotlin'
|
|
subtitle: 'Learn how to create a Supabase project, add some sample data to your database, and query the data from an Android Kotlin app.'
|
|
breadcrumb: 'Framework Quickstarts'
|
|
hideToc: true
|
|
---
|
|
|
|
<StepHikeCompact>
|
|
|
|
<StepHikeCompact.Step step={1}>
|
|
|
|
<$Partial path="quickstart_db_setup.mdx" />
|
|
|
|
</StepHikeCompact.Step>
|
|
|
|
<StepHikeCompact.Step step={2}>
|
|
|
|
<StepHikeCompact.Details title="Create an Android app with Android Studio">
|
|
Open Android Studio > New > New Android Project.
|
|
|
|
</StepHikeCompact.Details>
|
|
|
|
</StepHikeCompact.Step>
|
|
|
|
<StepHikeCompact.Step step={3}>
|
|
|
|
<StepHikeCompact.Details title="Install the Dependencies">
|
|
Open `build.gradle.kts` (app) file and add the serialization plug, Ktor client, and Supabase client.
|
|
|
|
Replace the version placeholders `$kotlin_version` with the Kotlin version of the project, and `$supabase_version` and `$ktor_version` with the respective latest versions.
|
|
|
|
The latest supabase-kt version can be found [here](https://github.com/supabase-community/supabase-kt/releases) and Ktor version can be found [here](https://ktor.io/docs/welcome.html).
|
|
|
|
</StepHikeCompact.Details>
|
|
|
|
<StepHikeCompact.Code>
|
|
```kotlin
|
|
plugins {
|
|
...
|
|
kotlin("plugin.serialization") version "$kotlin_version"
|
|
}
|
|
...
|
|
dependencies {
|
|
...
|
|
implementation(platform("io.github.jan-tennert.supabase:bom:$supabase_version"))
|
|
implementation("io.github.jan-tennert.supabase:postgrest-kt")
|
|
implementation("io.ktor:ktor-client-android:$ktor_version")
|
|
}
|
|
```
|
|
|
|
</StepHikeCompact.Code>
|
|
|
|
</StepHikeCompact.Step>
|
|
|
|
<StepHikeCompact.Step step={4}>
|
|
|
|
<StepHikeCompact.Details title="Add internet access permission">
|
|
Add the following line to the `AndroidManifest.xml` file under the `manifest` tag and outside the `application` tag.
|
|
</StepHikeCompact.Details>
|
|
|
|
<StepHikeCompact.Code>
|
|
```xml
|
|
...
|
|
<uses-permission android:name="android.permission.INTERNET" />
|
|
...
|
|
```
|
|
|
|
</StepHikeCompact.Code>
|
|
|
|
</StepHikeCompact.Step>
|
|
|
|
<StepHikeCompact.Step step={5}>
|
|
|
|
<StepHikeCompact.Details title="Initialize the Supabase client">
|
|
You can create a Supabase client whenever you need to perform an API call.
|
|
|
|
For the sake of simplicity, we will create a client in the `MainActivity.kt` file at the top just below the imports.
|
|
|
|
Replace the `supabaseUrl` and `supabaseKey` with your own:
|
|
|
|
<ProjectConfigVariables variable="url" />
|
|
<ProjectConfigVariables variable="anonKey" />
|
|
|
|
</StepHikeCompact.Details>
|
|
|
|
<StepHikeCompact.Code>
|
|
|
|
```kotlin
|
|
import ...
|
|
|
|
val supabase = createSupabaseClient(
|
|
supabaseUrl = "https://xyzcompany.supabase.co",
|
|
supabaseKey = "your_public_anon_key"
|
|
) {
|
|
install(Postgrest)
|
|
}
|
|
...
|
|
```
|
|
|
|
</StepHikeCompact.Code>
|
|
|
|
</StepHikeCompact.Step>
|
|
|
|
<StepHikeCompact.Step step={6}>
|
|
|
|
<StepHikeCompact.Details title="Create a data model for instruments">
|
|
Create a serializable data class to represent the data from the database.
|
|
|
|
Add the following below the `createSupabaseClient` function in the `MainActivity.kt` file.
|
|
</StepHikeCompact.Details>
|
|
|
|
<StepHikeCompact.Code>
|
|
```kotlin
|
|
@Serializable
|
|
data class Instrument(
|
|
val id: Int,
|
|
val name: String,
|
|
)
|
|
```
|
|
|
|
</StepHikeCompact.Code>
|
|
|
|
</StepHikeCompact.Step>
|
|
|
|
<StepHikeCompact.Step step={7}>
|
|
|
|
<StepHikeCompact.Details title="Query data from the app">
|
|
Use `LaunchedEffect` to fetch data from the database and display it in a `LazyColumn`.
|
|
|
|
Replace the default `MainActivity` class with the following code.
|
|
|
|
Note that we are making a network request from our UI code. In production, you should probably use a `ViewModel` to separate the UI and data fetching logic.
|
|
</StepHikeCompact.Details>
|
|
|
|
<StepHikeCompact.Code>
|
|
```kotlin
|
|
class MainActivity : ComponentActivity() {
|
|
override fun onCreate(savedInstanceState: Bundle?) {
|
|
super.onCreate(savedInstanceState)
|
|
setContent {
|
|
SupabaseTutorialTheme {
|
|
// A surface container using the 'background' color from the theme
|
|
Surface(
|
|
modifier = Modifier.fillMaxSize(),
|
|
color = MaterialTheme.colorScheme.background
|
|
) {
|
|
InstrumentsList()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@Composable
|
|
fun InstrumentsList() {
|
|
var instruments by remember { mutableStateOf<List<Instrument>>(listOf()) }
|
|
LaunchedEffect(Unit) {
|
|
withContext(Dispatchers.IO) {
|
|
instruments = supabase.from("instruments")
|
|
.select().decodeList<Instrument>()
|
|
}
|
|
}
|
|
LazyColumn {
|
|
items(
|
|
instruments,
|
|
key = { instrument -> instrument.id },
|
|
) { instrument ->
|
|
Text(
|
|
instrument.name,
|
|
modifier = Modifier.padding(8.dp),
|
|
)
|
|
}
|
|
}
|
|
}
|
|
```
|
|
</StepHikeCompact.Code>
|
|
|
|
</StepHikeCompact.Step>
|
|
|
|
<StepHikeCompact.Step step={8}>
|
|
<StepHikeCompact.Details title="Start the app">
|
|
Run the app on an emulator or a physical device by clicking the `Run app` button in Android Studio.
|
|
</StepHikeCompact.Details>
|
|
|
|
</StepHikeCompact.Step>
|
|
|
|
</StepHikeCompact>
|