Intro

In this tutorial I will show you how to create an eCommerce application that is made with Kodular, I will create a PDF Market App where Admins can sell books and Users can buy books.
Let’s start with a Splash Screen

Screen1

This will be a splash screen, if you don’t know how to make a splash screen then check back my old tutorial about splash screen, so I am skipping this step and going to Home Screen. Screenshot of Splash Screen :

Home Screen

Design

In this app I will use a Paid Extension which is DeepHost’s CustomGridView extension which cost INR 100 or nearly 2$, so first of all Buy that extension from DeepHost App.
NOTE – In my provided AIA File there will be no extension so you have to setup the DeepHost extension by your own using my this Tutorial
So now in Home Screen just drag a Vertical Scroll Arrangement and set Height and Width as Fill Parent and upload newly bought Deep Host’s Custom Grid View extension. After uploading done, you can see 2 extensions imported, one is Registered and other is Custom_ListView. Drag both extensions and in Registered enter you Registered Mobile number of DeepHost App, by which number you bought the extension and then drag Custom_ListView extension and in this extension enable GridView and customise Text Sizes and other as you want, I have just changes the Text Height to 65 from 72. Now, you can use SQL database but here I will use Airtable database for storing PDF books, so drag 2 Airtable Spreadsheet and set API Key, Base Id and Table Name. And drag a TinyDB because we will not use User Registration, we will use TinyDB for Purchasing Books and Download Books

(red marked are unnecessary extension)

In this screen all available categories will be available, so see the Spreadsheet how I created

Here Name is for all Books Category Name and Image is for Thumbnails of all categories

Blocks

First when Screen Initialize you have to call DeepHost’s Registered then call Registered Confirmation to Confirm your Mobile Number and from here you can start rest blocks, So when Confirmed I created Spreadsheet 1 Get Column, Column Name Image. And also you have to create two global variables image and name

you can see here after last Spreadsheet got column I have added Custom ListView Create List and icons and subtitles will be empty and in images thumbnails will be visible and in titles Category names will be visible

this block will work when an user click on a Category and it will save startvalue as Category name and go to Book Screen

Book Screen

Design

Design will be same as Home screen, drag a Vertical Scroll Arrangement and set Height and Width as Fill Parent and here you have to drag 3 Airtable Spreadsheet because in this screen you have to show Price of the book also with Book name and Book Thumbnail and also drag a TinyDB. Also set Titles and Subtitles to 15 fonts and set Title height to 68. Now set API Key and Base Id of all Airtable and set empty Table names. To add book into a Category, first you have to create a new Table on Airtable as exactly same name as on Category, e.g. there is a Category Art and you want to add books to the Art category so you have to add new Table name as Art and then Add books as following

Here you can see I have created many Columns which will be used in Main Screen, in this screen we have to use only 3 columns that is Name, Image and Price, rest columns Cover (cover image of the book), Detail (about the book), File (pdf book’s url), S1 (screenshot 1) and S2 (screenshot 2) will be used in main screen to show details
Now see Design

Blocks

Here first you have to set all Spreadsheet’s Table name to startvalue and also store this start value to TinyDB because it is also required in next screen

call all spreadsheets and on last spreadsheet call Custom ListView Create List and here you have to add thumbnails to images, names to titles and prices to subtitles

at last in this screen you have to store position number to get datas by row number so create this block. Here I have added +1 with get position because this extension’s index start with 0(zero)

Detail Screen

Design

Here I have created two arrangements, one is for main arrangement where Book details, images, price, buy and download option will visible and another invisible arrangement is payment arrangement. When buy button will be clicked this arrangement will be visible to do payment. Also added Rating Bar but not added any block on Rating Bar.
Here drag total 7 airtable and fill with API Key and Base Id and don’t fill Table name. Also drag TinyDB, Notifier, Download and Image Utilities

In payment arrangement I have dragged a web viewer. I will use Instamojo as Payment Gateway so you have to create a Payment Gateway url and paste that url to Web Viewer url

Blocks

After I complete block part, I will show you how to create Payment Gateway url

when screen initialize you have to set Table name for all Airtable and also Get Cell by row number

after 1st spreadsheet go cell it will check if the book is already bought or not, if the book if bought then it will return with value 1 and it will visible Download button instead of Buy button but if it returns a value of 0 then it will invisible Download button and show Buy button

calling all airtable spreadsheet

when buy button click it will open a new payment url

after going to payment gateway it will check if payment is success or not, if payment is successful then it will go to https://thetechstudy.in/payment-success and then it will visible the Download book option

when back pressed it will happen

Payment Gateway Setup

First create an account at https://instamojo.com by clicking on the link. Then click on Create Payment Link —> Choose Smart Link —> Set Purpose of Payment (e.g. Purchasing PDF Book) —> Choose Flat Pricing and set Price (e.g. – 100) —>click Next —> click on Smart Action and select Add Webhook —> enter a url, when payment success it will redirect to following url (e.g. thetechstudy.in/payment-success) —> click Done and share that Payment Link

Download

Click here for Demo APK File

Video Tutorial