Develop an android eCommerce app in hours, not months

4 min readAug 21, 2022

Hello folks, I hope you are fine, writing on medium after a long time. Today I will share how you can develop an eCommerce app in a couple of hours.

Tech Stack

Kotlin
Apollo GraphQL client
Shopemaa GraphQL eCommerce API

Project Setup

Open Android Studio and create a project (Language: Kotlin). Then in build.gradle (Module) add,

In plugins,

id 'com.apollographql.apollo3' version '3.3.2'

In dependencies,

implementation("com.apollographql.apollo3:apollo-runtime:3.3.2")

and at the end of the file,

apollo {
    packageName.set("com.example.graphql")
}

Great, we have successfully configured the apollo graphQL client. All the code will be generated within com.example.graphql package based on graphQL schema.

Now time to download the schema. For that, we will use a small script to make things easy. Create a Makefile file and put,

.PHONY: pullSchema

pullSchema:
   ./gradlew :app:downloadApolloSchema --endpoint='https://api.shopemaa.com/query' --schema=app/src/main/graphql/schema.graphqls

Now execute make pullSchema it will download the schema from Shopemaa API. We are good now, later we will add queries and mutations.

Open Store

Now time to open an account on Shopemaa platform. Shopemaa is a SaaS platform, that offers graphQL-based eCommerce API and an on-demand storefront (website). In this tutorial, we will use only the API. Shopemaa stores the data securely and provides a dashboard to access that.

After opening the account, create a store and an app type key.

The keys are required to access the API. Alternatively, you can use the QR code provided by Shopemaa to access the API.

In this tutorial, we will use the QR code to access the API.

Configure API

At this point, we will implement a UI to scan the QR code and keep the store credentials to access the API.

Source Code

Create client object,

object ApiHelper {fun apolloClient(headers: Map<String, String>): ApolloClient {
        return ApolloClient
            .Builder()
            .httpHeaders(headers.map { kv -> HttpHeader(kv.key, kv.value) })
            .serverUrl("https://api.shopemaa.com/query")
            .build()
    }
}

Adding Query and Mutation

To add queries and mutations add a directory named graphql under src. For example, let’s add a query to search for products, create products.graphql, and then put,

query Products($search: Search!, $page: Int!, $limit: Int!){
    productSearch(search: $search, sort: {
        by: CreatedAt
        direction: Desc
    }, pagination: {
        perPage: $limit
        page: $page
    }) {
        id
        name
        slug
        description
        sku
        stock
        maxItemPerOrder
        price
        fullImages
        isDigitalProduct
        views
        createdAt
        productUnit
        updatedAt
        category {
            id
            name
            slug
            description
            fullImage
        }
        attributes {
            id
            name
            values
            isRequired
        }
        productSpecificDiscount
    }
}

Now if you build the application, related codes for the query will be generated automatically by the apollo graphQL client.

Send request,

val search = Search(Optional.Absent, filters)
val page = 1
val limit = 25
val storeKey = "" // got in previous step from QR code
val storeSecret = "" // got in previous step from QR codeval resp = ApiHelper
    .apolloClient(
        mutableMapOf(
            "store-key" to storeKey,
            "store-secret" to storeSecret
        )
    )
    .query(ProductsQuery(search, page, limit))
    .execute()
if (resp.hasErrors()) {
    // Got some error
    return
}resp.data!!.productSearch // Search result

Implementing Features

It’s time to implement a few features. We will implement product listing, checkout, and order details features. Shopemaa has a lot of other features but for the sake of simplicity, we will skip those in this tutorial. You can check the documentation to learn more. https://docs.shopemaa.com/