Merge pull request #550 from appwrite/feat-android-tutorial-2

Merge pull request #529 from appwrite/feat-android-tutorial

src/lib/utils/code.ts

@@ -24,6 +24,7 @@ import plaintext from 'highlight.js/lib/languages/plaintext';
 import graphql from 'highlight.js/lib/languages/graphql';
 import http from 'highlight.js/lib/languages/http';
 import css from 'highlight.js/lib/languages/css';
+import groovy from 'highlight.js/lib/languages/groovy';
 import { Platform } from './references';
 
 const languages = {
@@ -58,6 +59,7 @@ const languages = {
     rb: ruby,
     cs: csharp,
     css: css,
+    groovy: groovy,
     svelte: xml
 } as const satisfies Record<string, LanguageFn>;
 

src/lib/utils/references.ts

@@ -66,9 +66,9 @@ export const platformMap: Record<Language | string, string> = {
     [Platform.ServerRest]: 'REST',
     sh: 'Shell',
     js: 'JavaScript',
-    jsx: 'React',
-    tsx: 'React',
     ts: 'TypeScript',
+    jsx: 'React',	
+    tsx: 'React',
     typescript: 'TypeScript',
     dart: 'Dart',
     java: 'Java',
@@ -97,7 +97,8 @@ export const platformMap: Record<Language | string, string> = {
     yaml: 'YAML',
     text: 'Text',
     vue: 'Vue',
-    svelte: 'Svelte'
+    svelte: 'Svelte',
+    groovy: 'Groovy'
 };
 
 export const serviceMap: Record<Service, string> = {

src/routes/docs/+page.svelte

@@ -479,4 +479,4 @@
     :global(.theme-dark) .bg-overlay {
         background: linear-gradient(to right, #19191c00 0%, #19191c00 10%, #19191c);
     }
-</style>
+</style>

src/routes/docs/quick-starts/android/+page.markdoc

@@ -88,7 +88,7 @@ Find your project's ID in the **Settings** page.
 Create a new file `Appwrite.kt` and add the following code to it, replacing `[YOUR_PROJECT_ID]` with your project ID.
 
 ```kotlin
-package com.example.myapplication
+package <YOUR_ROOT_PACKAGE_HERE>
 
 import android.content.Context
 import io.appwrite.Client
@@ -139,7 +139,7 @@ object Appwrite {
 Add the following code to `MainActivity.kt`.
 
 ```kotlin
-package com.example.myapplication
+package <YOUR_ROOT_PACKAGE_HERE>
 
 import android.os.Bundle
 import androidx.activity.ComponentActivity
@@ -151,7 +151,7 @@ import androidx.compose.runtime.*
 import androidx.compose.ui.*
 import androidx.compose.ui.text.input.*
 import androidx.compose.ui.unit.*
-import com.example.myapplication.ui.theme.MyApplicationTheme
+import <YOUR_ROOT_PACKAGE_HERE>.ui.theme.MyApplicationTheme
 import kotlinx.coroutines.launch
 
 class MainActivity : ComponentActivity() {

src/routes/docs/tutorials/android/step-1/+page.markdoc

@@ -1,18 +1,24 @@
 ---
 layout: tutorial
-title: Coming soon
+title: Build an ideas tracker with Android
 description: Learn to build an Android app with no backend code using an Appwrite backend.
 framework: Android
 category: Mobile and native
 step: 1
-draft: true
 ---
 
-Improve the docs, add this guide.
+**Idea tracker**: an app to track all the side project ideas that you'll start, but probably never finish.
+In this tutorial, you will build Idea tracker with Appwrite and Android.
 
-We still don't have this guide in place, but we do have some great news. 
-The Appwrite docs, just like Appwrite, is completely open sourced.
-This means, anyone can help improve them and add new guides and tutorials. 
+# Concepts {% #concepts %}
+This tutorial will introduce the following concepts:
 
-If you see this page, **we're actively looking for contributions to this page**.
-Follow our contribution guidelines, open a PR to [our Website repo](https://github.com/appwrite/website), and collaborate with our core team to improve this page.
+1. Setting up your first project
+2. Authentication 
+3. Databases and collections
+4. Queries and pagination
+5. Storage
+
+# Prerequisites {% #prerequisites %}
+1. Basic knowledge of Kotlin and Android development.
+2. Have [Android Studio](https://developer.android.com/studio) installed on your computer.

src/routes/docs/tutorials/android/step-2/+page.markdoc

@@ -0,0 +1,48 @@
+---
+layout: tutorial
+title: Create app
+description: Create a Android app project using Appwrite.
+step: 2
+---
+
+# Create Android project {% #create-android-project %}
+
+Create a Android app with the Android Studio **New Project** wizard. Select **Empty Activity** as the template.
+
+# Add dependencies {% #add-dependencies %}
+
+Install the Android Appwrite SDK.
+
+Add the following to your dependencies in the `app/build.gradle` file:
+
+```groovy
+implementation("io.appwrite:sdk-for-android:4.0.1")
+```
+
+In case you need to create OAuth 2 sessions in the future, the following activity needs to be added inside the `<application>` tag, along side the existing `<activity>` tags in your [AndroidManifest.xml](https://developer.android.com/guide/topics/manifest/manifest-intro). 
+Be sure to replace the **<PROJECT_ID>** string with your actual Appwrite project ID. 
+You can find your Appwrite project ID in you project settings screen in your Appwrite Console.
+
+```xml
+<manifest ...>
+  ...
+  <application ...>
+    ...
+    <!-- Add this inside the `<application>` tag, along side the existing `<activity>` tags -->
+    <activity android:name="io.appwrite.views.CallbackActivity" android:exported="true">
+      <intent-filter android:label="android_web_auth">
+        <action android:name="android.intent.action.VIEW" />
+        <category android:name="android.intent.category.DEFAULT" />
+        <category android:name="android.intent.category.BROWSABLE" />
+        <data android:scheme="appwrite-callback-[PROJECT_ID]" />
+      </intent-filter>
+    </activity>
+  </application>
+</manifest>
+```
+
+# Using the emulator {% #using-the-emulator %}
+
+Run your app on the [Android emulator](https://developer.android.com/studio/run/emulator).
+ You can use the emulator to test your app on different versions of the Android platform and different screen sizes without the need to use physical devices.
+For now, you should see a blank screen.

src/routes/docs/tutorials/android/step-3/+page.markdoc

@@ -0,0 +1,65 @@
+---
+layout: tutorial
+title: Set up Appwrite
+description: Initialize Appwrite in your Android project.
+step: 3
+---
+
+# Create project {% #create-project %}
+
+Head to the [Appwrite Console](https://cloud.appwrite.io/console).
+
+{% only_dark %}
+![Create project screen](/images/docs/quick-starts/dark/create-project.png)
+{% /only_dark %}
+{% only_light %}
+![Create project screen](/images/docs/quick-starts/create-project.png)
+{% /only_light %}
+
+If this is your first time using Appwrite, create an account and create your first project.
+
+Then, under **Add a platform**, add an **Android app**. The **Package Name** should be the same as the one you used when creating your app.
+
+{% only_dark %}
+![Add a platform](/images/docs/quick-starts/dark/add-platform.png)
+{% /only_dark %}
+{% only_light %}
+![Add a platform](/images/docs/quick-starts/add-platform.png)
+{% /only_light %}
+
+You can skip optional steps.
+
+# Initialize Appwrite SDK {% #init-sdk %}
+
+To use Appwrite in our Android app, we'll need to find our project ID. Find your project's ID in the **Settings** page. 
+
+{% only_dark %}
+![Project settings screen](/images/docs/quick-starts/dark/project-id.png)
+{% /only_dark %}
+{% only_light %}
+![Project settings screen](/images/docs/quick-starts/project-id.png)
+{% /only_light %}
+
+Create a new file `services/Appwrite.kt` to hold our Appwrite related code.
+Only one instance of the `Client` class should be created per app.
+Add the following code to it, replacing `<YOUR_PROJECT_ID>` with your project ID.
+
+```kotlin
+package <YOUR_ROOT_PACKAGE_HERE>.services
+
+import android.content.Context
+import io.appwrite.Client
+
+object Appwrite {
+    private const val ENDPOINT = "https://cloud.appwrite.io/v1"
+    private const val PROJECT_ID = "<YOUR_PROJECT_ID>"
+
+    private lateinit var client: Client
+
+    fun init(context: Context) {
+        client = Client(context)
+            .setEndpoint(ENDPOINT)
+            .setProject(PROJECT_ID)
+    }
+}
+```