NextJs

Demo

FAQs

Get Started

Resources

Home

API Documentation

Product Hunt

Logo Designer

Shoppable Link

Features

Hugo Framework

About

Telegram Bot

Buy Domain

Payment Gateway Integration

Headless API

Community

Referral Program

Back to Main site

Google Play

Careers

Astro Framework

GraphQL Playground

Storefronts

Shopemaa Checkout

API Status

Pricing

Storefront (Android)

Blogs

QR Generator

Contact

Linkly Demo

Hello%20folks%2C%20Today%20I%20will%20share%20how%20you%20can%20develop%20an%20eCommerce%20app%20in%20a%20couple%20of%20hours.%0A%0A%23%23%23%20Tech%20Stack%0A*%20Kotlin%0A*%20Apollo%20GraphQL%20client%0A*%20Shopemaa%20GraphQL%20eCommerce%20API%0A%0A%23%23%23%20Project%20Setup%0AOpen%20Android%20Studio%20and%20create%20a%20project%20(Language%3A%20Kotlin).%20Then%20in%20build.gradle%20(Module)%20add%2C%0A%0AIn%20plugins%2C%0A%0A%60%60%60text%0Aid%20'com.apollographql.apollo3'%20version%20'3.3.2'%0A%60%60%60%0A%0AIn%20dependencies%2C%0A%0A%60%60%60text%0Aimplementation(%22com.apollographql.apollo3%3Aapollo-runtime%3A3.3.2%22)%0A%60%60%60%0A%0Aand%20at%20the%20end%20of%20the%20file%2C%0A%0A%60%60%60text%0Aapollo%20%7B%0A%20%20%20%20packageName.set(%22com.example.graphql%22)%0A%7D%0A%60%60%60%0A%0AGreat%2C%20we%20have%20successfully%20configured%20the%20apollo%20graphQL%20client.%20All%20the%20code%20will%20be%20generated%20within%20com.example.graphql%20package%20based%20on%20graphQL%20schema.%0A%0ANow%20time%20to%20download%20the%20schema.%20For%20that%2C%20we%20will%20use%20a%20small%20script%20to%20make%20things%20easy.%20Create%20a%20Makefile%20file%20and%20put%2C%0A%0A%60%60%60text%0A.PHONY%3A%20pullSchema%0A%0ApullSchema%3A%0A%20%20%20.%2Fgradlew%20%3Aapp%3AdownloadApolloSchema%20--endpoint%3D'https%3A%2F%2Fapi.shopemaa.com%2Fquery'%20--schema%3Dapp%2Fsrc%2Fmain%2Fgraphql%2Fschema.graphqls%0A%60%60%60%0A%0ANow%20execute%20make%20pullSchema%20it%20will%20download%20the%20schema%20from%20Shopemaa%20API.%20We%20are%20good%20now%2C%20later%20we%20will%20add%20queries%20and%20mutations.%0A%0A%23%23%20Open%20Store%0A%0ANow%20time%20to%20open%20an%20account%20on%20Shopemaa%20platform.%20Shopemaa%20is%20a%20SaaS%20platform%2C%20that%20offers%20graphQL-based%20eCommerce%20API%20and%20an%20on-demand%20storefront%20(website).%20In%20this%20tutorial%2C%20we%20will%20use%20only%20the%20API.%20Shopemaa%20stores%20the%20data%20securely%20and%20provides%20a%20dashboard%20to%20access%20that.%0A%0A!%5B%5D(https%3A%2F%2Fmiro.medium.com%2Fmax%2F1400%2F1*hQz2ppXeHcy4OKxHtoRstA.webp)%0A%0AAfter%20opening%20the%20account%2C%20create%20a%20store%20and%20an%20app%20type%20key.%0A%0A!%5B%5D(https%3A%2F%2Fmiro.medium.com%2Fmax%2F1400%2F1*ln_DXqxC1y1fv1pwDoBdKQ.webp)%0A%0AThe%20keys%20are%20required%20to%20access%20the%20API.%20Alternatively%2C%20you%20can%20use%20the%20QR%20code%20provided%20by%20Shopemaa%20to%20access%20the%20API.%0A%0A!%5B%5D(https%3A%2F%2Fmiro.medium.com%2Fmax%2F1400%2F1*jm5LmD8pBMJ237yCF-UD3A.webp)%0A%0AIn%20this%20tutorial%2C%20we%20will%20use%20the%20QR%20code%20to%20access%20the%20API.%0A%0A%23%23%20Configure%20API%0AAt%20this%20point%2C%20we%20will%20implement%20a%20UI%20to%20scan%20the%20QR%20code%20and%20keep%20the%20store%20credentials%20to%20access%20the%20API.%0A%0A!%5B%5D(https%3A%2F%2Fmiro.medium.com%2Fmax%2F1400%2F1*qPMCBU5xvvZx8TKaD-L9ug.webp)%0A%0A%5BSource%20Code%5D(https%3A%2F%2Fgithub.com%2Fshopemaa%2FShopemaaAndroidStorefront%2Fblob%2Fmain%2Fapp%2Fsrc%2Fmain%2Fjava%2Fcom%2Fshopemaa%2Fandroid%2Fstorefront%2Fui%2Factivities%2FBarcodeScannerActivity.kt)%0A%0A%23%23%23%20Create%20client%20object%2C%0A%0A%60%60%60kotlin%0Aobject%20ApiHelper%20%7B%0Afun%20apolloClient(headers%3A%20Map%3CString%2C%20String%3E)%3A%20ApolloClient%20%7B%0A%20%20%20%20%20%20%20%20return%20ApolloClient%0A%20%20%20%20%20%20%20%20%20%20%20%20.Builder()%0A%20%20%20%20%20%20%20%20%20%20%20%20.httpHeaders(headers.map%20%7B%20kv%20-%3E%20HttpHeader(kv.key%2C%20kv.value)%20%7D)%0A%20%20%20%20%20%20%20%20%20%20%20%20.serverUrl(%22https%3A%2F%2Fapi.shopemaa.com%2Fquery%22)%0A%20%20%20%20%20%20%20%20%20%20%20%20.build()%0A%20%20%20%20%7D%0A%7D%0A%60%60%60%0A%0A%23%23%20Adding%20Query%20and%20Mutation%0ATo%20add%20queries%20and%20mutations%20add%20a%20directory%20named%20graphql%20under%20src.%20For%20example%2C%20let%E2%80%99s%20add%20a%20query%20to%20search%20for%20products%2C%20create%20products.graphql%2C%20and%20then%20put%2C%0A%0A%60%60%60kotlin%0Aquery%20Products(%24search%3A%20Search!%2C%20%24page%3A%20Int!%2C%20%24limit%3A%20Int!)%7B%0A%20%20%20%20productSearch(search%3A%20%24search%2C%20sort%3A%20%7B%0A%20%20%20%20%20%20%20%20by%3A%20CreatedAt%0A%20%20%20%20%20%20%20%20direction%3A%20Desc%0A%20%20%20%20%7D%2C%20pagination%3A%20%7B%0A%20%20%20%20%20%20%20%20perPage%3A%20%24limit%0A%20%20%20%20%20%20%20%20page%3A%20%24page%0A%20%20%20%20%7D)%20%7B%0A%20%20%20%20%20%20%20%20id%0A%20%20%20%20%20%20%20%20name%0A%20%20%20%20%20%20%20%20slug%0A%20%20%20%20%20%20%20%20description%0A%20%20%20%20%20%20%20%20sku%0A%20%20%20%20%20%20%20%20stock%0A%20%20%20%20%20%20%20%20maxItemPerOrder%0A%20%20%20%20%20%20%20%20price%0A%20%20%20%20%20%20%20%20fullImages%0A%20%20%20%20%20%20%20%20isDigitalProduct%0A%20%20%20%20%20%20%20%20views%0A%20%20%20%20%20%20%20%20createdAt%0A%20%20%20%20%20%20%20%20productUnit%0A%20%20%20%20%20%20%20%20updatedAt%0A%20%20%20%20%20%20%20%20category%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20id%0A%20%20%20%20%20%20%20%20%20%20%20%20name%0A%20%20%20%20%20%20%20%20%20%20%20%20slug%0A%20%20%20%20%20%20%20%20%20%20%20%20description%0A%20%20%20%20%20%20%20%20%20%20%20%20fullImage%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20attributes%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20id%0A%20%20%20%20%20%20%20%20%20%20%20%20name%0A%20%20%20%20%20%20%20%20%20%20%20%20values%0A%20%20%20%20%20%20%20%20%20%20%20%20isRequired%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20productSpecificDiscount%0A%20%20%20%20%7D%0A%7D%0A%60%60%60%0A%0ANow%20if%20you%20build%20the%20application%2C%20related%20codes%20for%20the%20query%20will%20be%20generated%20automatically%20by%20the%20apollo%20graphQL%20client.%0A%0ASend%20request%2C%0A%0A%60%60%60kotlin%0Aval%20search%20%3D%20Search(Optional.Absent%2C%20filters)%0Aval%20page%20%3D%201%0Aval%20limit%20%3D%2025%0Aval%20storeKey%20%3D%20%22%22%20%2F%2F%20got%20in%20previous%20step%20from%20QR%20code%0Aval%20storeSecret%20%3D%20%22%22%20%2F%2F%20got%20in%20previous%20step%20from%20QR%20code%0Aval%20resp%20%3D%20ApiHelper%0A%20%20%20%20.apolloClient(%0A%20%20%20%20%20%20%20%20mutableMapOf(%0A%20%20%20%20%20%20%20%20%20%20%20%20%22store-key%22%20to%20storeKey%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22store-secret%22%20to%20storeSecret%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20)%0A%20%20%20%20.query(ProductsQuery(search%2C%20page%2C%20limit))%0A%20%20%20%20.execute()%0Aif%20(resp.hasErrors())%20%7B%0A%20%20%20%20%2F%2F%20Got%20some%20error%0A%20%20%20%20return%0A%7D%0Aresp.data!!.productSearch%20%2F%2F%20Search%20result%0A%60%60%60%0A%0AImplementing%20Features%0AIt%E2%80%99s%20time%20to%20implement%20a%20few%20features.%20We%20will%20implement%20product%20listing%2C%20checkout%2C%20and%20order%20details%20features.%20Shopemaa%20has%20a%20lot%20of%20other%20features%20but%20for%20the%20sake%20of%20simplicity%2C%20we%20will%20skip%20those%20in%20this%20tutorial.%20You%20can%20check%20the%20documentation%20to%20learn%20more.%20https%3A%2F%2Fdocs.shopemaa.com%2F%0A%0A!%5B%5D(https%3A%2F%2Fmiro.medium.com%2Fmax%2F1400%2F1*Uq0XoAXyz9Cf6BeOe0mxSg.webp)%0A%0A**Product%20Listing**%0A%0A!%5B%5D(https%3A%2F%2Fmiro.medium.com%2Fmax%2F1400%2F1*QC-74DU4ehuZ6RmQNxpIOA.webp)%0A%0A%5BSource%20Code%5D(https%3A%2F%2Fgithub.com%2Fshopemaa%2FShopemaaAndroidStorefront%2Fblob%2Fmain%2Fapp%2Fsrc%2Fmain%2Fjava%2Fcom%2Fshopemaa%2Fandroid%2Fstorefront%2Fui%2Factivities%2FHomeActivity.kt)%0A%0A**Cart**%0A%0A!%5B%5D(https%3A%2F%2Fmiro.medium.com%2Fmax%2F1400%2F1*MpwKzwsRcotz4p3tjmYItA.webp)%0A%0A%5BSource%20Code%5D(https%3A%2F%2Fgithub.com%2Fshopemaa%2FShopemaaAndroidStorefront%2Fblob%2Fmain%2Fapp%2Fsrc%2Fmain%2Fjava%2Fcom%2Fshopemaa%2Fandroid%2Fstorefront%2Fui%2Factivities%2FCartActivity.kt)%0A%0A**Order%20Details**%0A%0A!%5B%5D(https%3A%2F%2Fmiro.medium.com%2Fmax%2F1400%2F1*fDTUi5MpK2ApI0k6gKR-ww.webp)%0A%0A%5BSource%20Code%5D(https%3A%2F%2Fgithub.com%2Fshopemaa%2FShopemaaAndroidStorefront%2Fblob%2Fmain%2Fapp%2Fsrc%2Fmain%2Fjava%2Fcom%2Fshopemaa%2Fandroid%2Fstorefront%2Fui%2Factivities%2FOrderDetailsActivity.kt)%0A%0AHope%20it%20will%20help%20you%20to%20develop%20your%20next%20online%20store%20in%20a%20fast%20and%20easy%20way.%0A%0ALearn%20more%3A%20www.shopemaa.com%0A%0AFull%20app%20source%20code%3A%20https%3A%2F%2Fgithub.com%2Fshopemaa%2FShopemaaAndroidStorefront

Develop an android eCommerce app in hours, not months