First Code in Kotlin

Introduction

Jetpack Compose est une framework moderne d’Android pour la création d’interfaces utilisateur natives. Elle simplifie et accélère le développement d’interfaces utilisateur sur Android. Donnez rapidement vie à votre application avec moins de code, des outils puissants et des API Kotlin intuitives.

Au moment de la rédaction de cet article, jetpack compose est en version bêta, et la version stable est prévue pour le mois prochain, il est donc grand temps de commencer à apprendre jetpack compose

Installation

Pour une meilleure expérience de développement avec Jetpack Compose, vous devriez télécharger la dernière version d’Android Studio Arctic Fox . En effet, lorsque vous utilisez Android Studio pour développer votre application avec Jetpack Compose, vous pouvez bénéficier des fonctionnalités de l’éditeur intelligent, telles que les modèles de nouveau projet et la possibilité de prévisualiser immédiatement votre interface utilisateur Compose.

Configurer Kotlin

Assurez-vous que vous utilisez Kotlin 1.5.10 ou une version plus récente dans votre projet, la dernière version de Kotlin n’est pas encore compatible avec Jetpack Compose :

				
					plugins {
    id("org.jetbrains.kotlin.android") version "1.5.10"
}

Configurer Gradle

				
					android { 
    defaultConfig { 
        ... 
        minSdkVersion(21) 
    } 
    
    buildFeatures { 
        // Enables Jetpack Compose for this module 
        compose = true 
    }
    ... 
    
    // Set both the Java and Kotlin compilers to target Java 8. 
    
    compileOptions {
        sourceCompatibility = JavaVersion.VERSION_1_8
        targetCompatibility = JavaVersion.VERSION_1_8 
    }
    
    kotlinOptions { 
        jvmTarget = "1.8"
        useIR = true 
    } 
    
    composeOptions { kotlinCompilerVersion = "1.5.10"
        kotlinCompilerExtensionVersion = "1.0.0-beta09"
    } 
}

Ajouter les dépendances Jetpack Compose

Incluez les dépendances de la boîte à outils Jetpack Compose dans le fichier build.gradle de votre application, comme indiqué ci-dessous :

				
					dependencies {
    implementation("androidx.compose.ui:ui:1.0.0-beta09")
    implementation("androidx.compose.ui:ui-tooling:1.0.0-beta09")
    implementation("androidx.compose.foundation:foundation:1.0.0-beta09")
    implementation("androidx.compose.material:material:1.0.0-beta09")

   //  For ViewModel
   implementation("androidx.lifecycle:lifecycle-viewmodel-compose:1.0.0-alpha07")

    // For Interoperability
    implementation("androidx.activity:activity-compose:1.0.0-beta09")
}

Une fois l’installation de Jetpack Composer terminée, vous devez maintenant configurer firebase dans votre projet, les détails sur la configuration de Firebase sont disponibles sur le lien suivant, Firebase Setup

Afin d’utiliser Firebase dans notre projet nous devons avoir ces dépendances.

				
					dependencies {
    implementation(platform("com.google.firebase:firebase-bom:28.2.0"))
    implementation("com.google.firebase:firebase-auth")
    implementation("com.google.android.gms:play-services-auth:19.0.0")

    implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.5.0")
    implementation("org.jetbrains.kotlinx:kotlinx-coroutines-android:1.5.0")
    implementation("org.jetbrains.kotlinx:kotlinx-coroutines-play-services:1.5.0")
}