Create an Android App that Displays List of All Trending Kotlin git-hub Repositories

Kotlin is a popular programming language that has gained much attention in recent years. It is known for its simplicity, conciseness, and compatibility with existing Java code. GitHub is a popular platform for hosting and sharing code, including Kotlin projects. This article will discuss how to build an application that shows a list of Kotlin GitHub projects. In this project, we will be using this API and retrofit library to get details from the API.

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin as the programming language.

Step 2: Adding dependencies

Next, we need to add the necessary dependencies for the application. Open the app-level build.gradle file and add the following dependencies:

def lifecycle_version = "2.6.0-alpha02"
// ViewModel
implementation "androidx.lifecycle:lifecycle-viewmodel-ktx:$lifecycle_version"
// ViewModel utilities for Compose
implementation "androidx.lifecycle:lifecycle-viewmodel-compose:$lifecycle_version"
// LiveData
implementation "androidx.lifecycle:lifecycle-livedata-ktx:$lifecycle_version"
// retrofit
implementation("com.squareup.retrofit2:retrofit:2.9.0")
implementation 'com.squareup.retrofit2:converter-gson:2.3.0'
// glide
implementation 'com.github.bumptech.glide:glide:4.13.2'
implementation 'com.github.bumptech.glide:glide:4.13.2'

Step 3: Creating the GitHub API service

The code you provided defines an interface for the GitHub API with a single function called getKotlinRepos(). The function takes two parameters, q, and date, which are used to filter the search results. The @GET annotation specifies the endpoint of the API, which is repositories? in this case. The function returns a Call object with a generic type of Repo, which represents the response from the API.

The @Query annotation is used to add query parameters to the endpoint URL. In this case, the q parameter is used to specify the search query, and the date parameter is used to filter the results by the date they were last pushed.

Kotlin

interface GithubApi {
    @GET("repositories?")
    fun getKotlinRepos(@Query("q") q : String, @Query("pushed") date: String) : Call<Repo>
}

Step 4: Create a Retrofit Instance

This code defines an object called RetrofitInstance that uses the Retrofit library to create an instance of the GithubApi interface. The lazy delegate is used to create the GithubApi instance only when it is needed, and the Retrofit.Builder() method is used to set the base URL and add a Gson converter factory. Finally, the build() method creates a Retrofit instance, and the create() method is used to create an instance of the GithubApi interface. This provides a convenient way to interact with the GitHub API using Kotlin code.

Kotlin

object RetrofitInstance {
    val api : GithubApi by lazy {
        Retrofit.Builder()
            .baseUrl("https://api.github.com/search/")
            .addConverterFactory(GsonConverterFactory.create())
            .build()
            .create(GithubApi::class.java)
    }
}

Step 5: Generate data classes

Copy the response from the above API. Right-click on the root package and select New->Kotlin-data class from JSON. If you don’t have this plugin, go to File -> Settings -> Plugin and install JSON to Kotlin Plugin. Copy the JSON result and paste it. Give this file a suitable name after that three data classes will be generated.

Kotlin

data class Repo(
    val incomplete_results: Boolean,
    val items: List<Item>,
    val total_count: Int
)

Kotlin

data class Item(
    val allow_forking: Boolean,
    val archive_url: String,
    val archived: Boolean,
    val assignees_url: String,
    val blobs_url: String,
    val branches_url: String,
    val clone_url: String,
    val collaborators_url: String,
    val comments_url: String,
    val commits_url: String,
    val compare_url: String,
    val contents_url: String,
    val contributors_url: String,
    val created_at: String,
    val default_branch: String,
    val deployments_url: String,
    val description: String,
    val disabled: Boolean,
    val downloads_url: String,
    val events_url: String,
    val fork: Boolean,
    val forks: Int,
    val forks_count: Int,
    val forks_url: String,
    val full_name: String,
    val git_commits_url: String,
    val git_refs_url: String,
    val git_tags_url: String,
    val git_url: String,
    val has_discussions: Boolean,
    val has_downloads: Boolean,
    val has_issues: Boolean,
    val has_pages: Boolean,
    val has_projects: Boolean,
    val has_wiki: Boolean,
    val homepage: String,
    val hooks_url: String,
    val html_url: String,
    val id: Int,
    val is_template: Boolean,
    val issue_comment_url: String,
    val issue_events_url: String,
    val issues_url: String,
    val keys_url: String,
    val labels_url: String,
    val language: String,
    val languages_url: String,
    val merges_url: String,
    val milestones_url: String,
    val mirror_url: Any,
    val name: String,
    val node_id: String,
    val notifications_url: String,
    val open_issues: Int,
    val open_issues_count: Int,
    val owner: Owner,
    val `private`: Boolean,
    val pulls_url: String,
    val pushed_at: String,
    val releases_url: String,
    val score: Double,
    val size: Int,
    val ssh_url: String,
    val stargazers_count: Int,
    val stargazers_url: String,
    val statuses_url: String,
    val subscribers_url: String,
    val subscription_url: String,
    val svn_url: String,
    val tags_url: String,
    val teams_url: String,
    val topics: List<String>,
    val trees_url: String,
    val updated_at: String,
    val url: String,
    val visibility: String,
    val watchers: Int,
    val watchers_count: Int,
    val web_commit_signoff_required: Boolean
)

Kotlin

data class Item(
    val allow_forking: Boolean,
    val archive_url: String,
    val archived: Boolean,
    val assignees_url: String,
    val blobs_url: String,
    val branches_url: String,
    val clone_url: String,
    val collaborators_url: String,
    val comments_url: String,
    val commits_url: String,
    val compare_url: String,
    val contents_url: String,
    val contributors_url: String,
    val created_at: String,
    val default_branch: String,
    val deployments_url: String,
    val description: String,
    val disabled: Boolean,
    val downloads_url: String,
    val events_url: String,
    val fork: Boolean,
    val forks: Int,
    val forks_count: Int,
    val forks_url: String,
    val full_name: String,
    val git_commits_url: String,
    val git_refs_url: String,
    val git_tags_url: String,
    val git_url: String,
    val has_discussions: Boolean,
    val has_downloads: Boolean,
    val has_issues: Boolean,
    val has_pages: Boolean,
    val has_projects: Boolean,
    val has_wiki: Boolean,
    val homepage: String,
    val hooks_url: String,
    val html_url: String,
    val id: Int,
    val is_template: Boolean,
    val issue_comment_url: String,
    val issue_events_url: String,
    val issues_url: String,
    val keys_url: String,
    val labels_url: String,
    val language: String,
    val languages_url: String,
    val merges_url: String,
    val milestones_url: String,
    val mirror_url: Any,
    val name: String,
    val node_id: String,
    val notifications_url: String,
    val open_issues: Int,
    val open_issues_count: Int,
    val owner: Owner,
    val `private`: Boolean,
    val pulls_url: String,
    val pushed_at: String,
    val releases_url: String,
    val score: Double,
    val size: Int,
    val ssh_url: String,
    val stargazers_count: Int,
    val stargazers_url: String,
    val statuses_url: String,
    val subscribers_url: String,
    val subscription_url: String,
    val svn_url: String,
    val tags_url: String,
    val teams_url: String,
    val topics: List<String>,
    val trees_url: String,
    val updated_at: String,
    val url: String,
    val visibility: String,
    val watchers: Int,
    val watchers_count: Int,
    val web_commit_signoff_required: Boolean
)

Step 6: Create an Adapter Class For Recycler View

Now, We will create an adapter class for our recycler view. This code defines a RecyclerView adapter for displaying a list of GitHub repository items. The data variable is an ArrayList of Item objects, which represents the data to be displayed in the RecyclerView. The setOnGitHubRepoClickListener variable is an instance of the SetOnGitHubRepoClickListener interface, which is used to handle click events on each item in the list.

The setData() function is used to update the data ArrayList with a new list of Item objects, and it calls notifyDataSetChanged() to inform the RecyclerView that the data has changed.

Kotlin

class GitHubAdapter() : RecyclerView.Adapter<GitHubAdapter.ViewHolder>() {

    // ArrayList of data items to be
    // displayed in the RecyclerView
    var data = ArrayList<Item>()

    // Interface to handle click events on the RecyclerView items
    private lateinit var setOnGitHubRepoClickListener: SetOnGitHubRepoClickListener

    // Function to set the click listener on the RecyclerView items
    fun setOnGitHubRepoClickListener(setOnGitHubRepoClickListener: SetOnGitHubRepoClickListener) {
        this.setOnGitHubRepoClickListener = setOnGitHubRepoClickListener
    }

    // Function to update the data items in the RecyclerView
    // and notify the adapter of changes
    fun setData(data : List<Item>){
        this.data = data as ArrayList<Item>
        notifyDataSetChanged()
    }

    // ViewHolder class for a single item in the RecyclerView
    class ViewHolder(val binding: RecyclerLayoutBinding)  : RecyclerView.ViewHolder(binding.root)

    // Called when a new ViewHolder is needed, inflates the layout
    // for each item in the list
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        return ViewHolder(
            RecyclerLayoutBinding.inflate(LayoutInflater.from(parent.context) ,parent,false)
        )
    }

    // Called for each item in the list, sets the values for
    // the various UI elements in the ViewHolder layout
    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        // Set the name of the repository in the ViewHolder layout
        holder.binding.repoName.text = data[position].name

        // Set the number of stars for the
        // repository in the ViewHolder layout
        var max = 0
        if (data[position].stargazers_count> max){
            max = data[position].stargazers_count
            holder.binding.noOfStars.text = max.toString()
        }

        // Set the description of the repository in the ViewHolder layout
        holder.binding.description.text = data[position].description

        // Set an OnClickListener on the ViewHolder item view,
        // which triggers the setOnClickListener() function
        // on the setOnGitHubRepoClickListener interface
        // when the item is clicked
        holder.itemView.setOnClickListener{
            setOnGitHubRepoClickListener.setOnClickListener(data[position])
        }
    }

    // Returns the number of items
    // in the data ArrayList
    override fun getItemCount(): Int {
        return data.size
    }

    // Interface to handle click events
    // on the RecyclerView items
    interface SetOnGitHubRepoClickListener{
        fun setOnClickListener(item : Item)
    }
}

Step 7: Design UI

activity_main.xml

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.activity.MainActivity">

      <LinearLayout
        android:id="@+id/linear_layout"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:layout_constraintTop_toTopOf="parent"
        android:orientation="horizontal">

          <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="@string/app_name"
            android:textSize="20dp"
            android:padding="10dp"
            android:textColor="@color/black"
            android:textStyle="bold"
            android:textAlignment="center"
            android:background="@color/cardview_light_background">
        </TextView>

      </LinearLayout>

      <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/linear_layout"
        tools:listitem="@layout/recycler_layout" />

</androidx.constraintlayout.widget.ConstraintLayout>

activity_repo_details

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.activity.RepoDetails">

      <LinearLayout
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:gravity="center_vertical"
        app:layout_constraintTop_toTopOf="parent"
        android:background="@color/white">

          <ImageView
            android:id="@+id/btnBack"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="20dp"
            android:backgroundTint="@color/white"
            android:src="@drawable/ic_baseline_arrow_back_ios_24" />
        <TextView
            android:id="@+id/catName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="5dp"
            android:text="Github Trends"
            android:textColor="#3366CC"
            android:textSize="20sp" />

    </LinearLayout>

    <TextView
        android:id="@+id/tv_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="appwrite"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/toolbar"
        android:layout_marginTop="3dp"
        android:textColor="@color/black"
        android:textSize="20dp"
        android:textStyle="bold">
    </TextView>

    <ImageView
        android:id="@+id/ownerAvatarImage"
        android:layout_width="70dp"
        android:layout_height="70dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv_name"
        android:layout_marginTop="2dp"
        android:src="@color/teal_200">
    </ImageView>

    <TextView
        android:id="@+id/tv_name_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="appwrite"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/ownerAvatarImage"
        android:layout_marginTop="0dp"
        android:textColor="@color/black"
        android:textSize="20dp"
        android:background="@color/white" />

     <TextView
         android:id="@+id/desc"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="@string/descriptions"
         app:layout_constraintTop_toBottomOf="@id/tv_name_1"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
         android:gravity="center"
         android:textSize="18dp"
         android:textColor="@color/black">

     </TextView>

    <LinearLayout
        android:id="@+id/linear_layout_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/desc"
        android:layout_marginTop="10dp">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:src="@drawable/ic_baseline_star_24"
            android:layout_marginStart="20dp">
        </ImageView>

        <TextView
            android:id="@+id/star_count"
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:text="27866 Stars"
            android:textSize="20dp"
            android:padding="8dp"
            android:layout_marginStart="10dp"
            android:textColor="@color/black">

        </TextView>

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/linear_layout_1"
        app:layout_constraintTop_toBottomOf="@id/desc"
        android:layout_marginTop="10dp"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:layout_marginStart="50dp"
            android:src="@drawable/ic_baseline_scatter_plot_24">
        </ImageView>

        <TextView
            android:id="@+id/fork_count"
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:layout_marginStart="8dp"
            android:padding="8dp"
            android:text="2380 Forks"
            android:layout_marginEnd="20dp"
            android:textColor="@color/black"
            android:textSize="20dp">
        </TextView>

    </LinearLayout>

    <TextView
        android:id="@+id/tv_read_me"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/linear_layout_1"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_marginTop="10dp"
        android:layout_marginStart="10dp"
        android:text="ReadMe"
        android:textSize="18sp"
        android:textColor="@color/black">
    </TextView>

    <WebView
        android:id="@+id/web_view"
        android:layout_width="match_parent"
        android:layout_height="380dp"
        android:layout_marginTop="5dp"
        android:layout_margin="12dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv_read_me">
    </WebView>

</androidx.constraintlayout.widget.ConstraintLayout>

recycler_layout

This will be the layout file for the RecyclerView

XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

      <TextView
        android:id="@+id/repoName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="swift-algorithm-club"
        android:textColor="@color/black"
        android:textSize="20dp"
        android:textStyle="bold"
        android:layout_marginStart="5dp"
        android:padding="5dp">
    </TextView>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="20dp"
            android:layout_height="30dp"
            android:src="@drawable/ic_baseline_star_border_24"
            android:layout_marginStart="10dp">
        </ImageView>

      <TextView
            android:id="@+id/noOfStars"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="27688"
            android:textSize="20dp"
            android:layout_marginStart="5dp"
            android:textColor="@color/black">
        </TextView>

    </LinearLayout>

    <TextView
        android:id="@+id/description"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Algorithms and data structures in Swift"
        android:textSize="18dp"
        android:layout_marginStart="5dp"
        android:padding="5dp">
    </TextView>

</LinearLayout>

Step 8: Create a view model class

The ViewModel in this project is used to manage the UI-related data in a lifecycle-conscious way. The GitHubViewModel class, which extends the ViewModel class from the Android Jetpack Architecture Components library, holds the data that are displayed in the UI and provides it to the UI as needed.

Kotlin

class GitHubViewModel : ViewModel() {
    // Create a MutableLiveData object to
    // hold the list of GitHub repositories
    private var githubLiveData = MutableLiveData<List<Item>>()
    // Fetch the list of Kotlin repositories
    // from the GitHub API using Retrofit
    fun getAllKotlinRepos(){
        RetrofitInstance.api.getKotlinRepos("language:kotlin",">2022-12-19")
            .enqueue(object : Callback<Repo>{
                override fun onResponse(call: Call<Repo>, response: Response<Repo>) {
                    // If the API call is successful and the response body is not null,
                    // set the value of githubLiveData to the list of repositories returned by the API
                    if (response.body() != null){
                        githubLiveData.value = response.body()!!.items
                    } else {
                        return
                    }
                }

                // If the API call fails, log the error message using Logcat
                override fun onFailure(call: Call<Repo>, t: Throwable) {
                    Log.d("TAG",t.message.toString())
                }
            })
    }
    // Expose the list of repositories as LiveData
    // so it can be observed by the UI
    fun observeGitHubLiveData() : LiveData<List<Item>>{
        return githubLiveData
    }
}

Step 9: Write Code for RepoDetails Activity

We will be passing data from the repo details activity from the main activity. Repo Details Activity also holds a web view in which we will be loading the URL of a particular repository.

Kotlin

// This is the class that displays
// the details of a repository
class RepoDetails : AppCompatActivity() {
    // View binding for the activity
    private lateinit var binding : ActivityRepoDetailsBinding

    // The full name of the repository
    private lateinit var fullName : String

    // The number of stars
    // that the repository has
    private  var starCount  = 0

    // The number of forks that
    // the repository has
    private  var forkCount  = 0

    // The URL of the owner's avatar image
    private lateinit var image : String

    // The description of the repository
    private lateinit var description : String

    // The name of the repository's owner
    private lateinit var ownerName : String

    // The URL of the repository's webpage
    private lateinit var webUrl : String

    // This function is called when the activity is created
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityRepoDetailsBinding.inflate(layoutInflater)
        setContentView(binding.root)

        // Set the values of the views
        setViews()

        // Initialize the views with the values
        initialViews()
    }

    // This function sets the values of the views from the intent extras
    private fun setViews() {
        fullName = intent.getStringExtra(MainActivity.FULL_NAME).toString()
        starCount = intent.getIntExtra(MainActivity.STARGAZERS_COUNT,0)
        forkCount = intent.getIntExtra(MainActivity.FORK_COUNT,0)
        image = intent.getStringExtra(MainActivity.IMG).toString()
        description = intent.getStringExtra(MainActivity.DESCRIPTION).toString()
        ownerName = intent.getStringExtra(MainActivity.OWNERNAME).toString()
        webUrl = intent.getStringExtra(MainActivity.Web_URL).toString()
    }

    // This function initializes the views with the values
    private fun initialViews() {
        binding.tvName.text = fullName
        binding.starCount.text  = "$starCount Stars"
        binding.forkCount.text  =  "$forkCount Forks"
        binding.desc.text = description
        binding.tvName1.text = ownerName
        binding.webView.loadUrl(webUrl)
        Glide.with(applicationContext).load(image).into(binding.ownerAvatarImage)
        binding.btnBack.setOnClickListener {
            startActivity(Intent(this@RepoDetails,MainActivity::class.java))
        }
    }
}

Step 10: Write code for the MainActivity

Kotlin

// This is the class that displays the details of a repository
class RepoDetails : AppCompatActivity() {
    private lateinit var binding : ActivityRepoDetailsBinding // View binding for the activity
    private lateinit var fullName : String // The full name of the repository
    private  var starCount  = 0 // The number of stars that the repository has
    private  var forkCount  = 0 // The number of forks that the repository has
    private lateinit var image : String // The URL of the owner's avatar image
    private lateinit var description : String // The description of the repository
    private lateinit var ownerName : String // The name of the repository's owner
    private lateinit var webUrl : String // The URL of the repository's webpage

    // This function is called when the activity is created
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityRepoDetailsBinding.inflate(layoutInflater)
        setContentView(binding.root)

        // Set the values of the views
        setViews()

        // Initialize the views with the values
        initialViews()
    }

    // This function sets the values of the views from the intent extras
    private fun setViews() {
        fullName = intent.getStringExtra(MainActivity.FULL_NAME).toString()
        starCount = intent.getIntExtra(MainActivity.STARGAZERS_COUNT,0)
        forkCount = intent.getIntExtra(MainActivity.FORK_COUNT,0)
        image = intent.getStringExtra(MainActivity.IMG).toString()
        description = intent.getStringExtra(MainActivity.DESCRIPTION).toString()
        ownerName = intent.getStringExtra(MainActivity.OWNERNAME).toString()
        webUrl = intent.getStringExtra(MainActivity.Web_URL).toString()
    }

    // This function initializes the views with the values
    private fun initialViews() {
        binding.tvName.text = fullName
        binding.starCount.text  = "$starCount Stars"
        binding.forkCount.text  =  "$forkCount Forks"
        binding.desc.text = description
        binding.tvName1.text = ownerName
        binding.webView.loadUrl(webUrl)
        Glide.with(applicationContext).load(image).into(binding.ownerAvatarImage)
        binding.btnBack.setOnClickListener {
            startActivity(Intent(this@RepoDetails,MainActivity::class.java))
        }
    }
}

Output: