Develop an android eCommerce app in hours, not months

Sakib Sami
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 code
val 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/

Product Listing

Source code

Cart

Source code

Order Details

Source code

Hope it will help you to develop your next online store in a fast and easy way.

Learn more: www.shopemaa.com

Full app source code: https://github.com/shopemaa/ShopemaaAndroidStorefront

--

--

Sakib Sami

Senior Software Engineer @ Twilio | Entrepreneur | Tech Ninja