Dynamic PDF Book App in Kodular / Thunkable / Appy Builder

Dynamic PDF Book App in Kodular / Thunkable / Appy Builder

Starting with the app demo, first there is a brief splash screen upon starting the app, and then it loads all the PDF’s. By clicking one of the books you can see all the available PDF books, upon clicking one of the PDF it loads it up, as you might have seen, it loaded all 300 pages of the book and there is a download option as well. You can also make it multi-category by following one of my previous videos. Let’s proceed to kodular on computer screen to see how the app is working.

                Now in the kodular on computer screen, on screen 1 I’ve taken a vertical arrangement, an image component and a clock component from the sensor which allows the timer to proceed to the next screen after 2 seconds. On screen 2 I have a vertical scroll arrangement and also have taken spreadsheet components, a Colin list tree extension was added and at the end there is a notifier. Looking at the spreadsheet database, I have only taken 1 table to work on in which we can see 3 categories i.e.  Title, image and block. In the title I have added the title of the PDF book, in the image there is the picture representing the book front cover and for the book there is a URL link which it takes the book from, the URL is linked to the PDFs uploaded in google drive and the image is taken from the cloud where I had previously saved it although you can save it in google drive as well. If you want to make multi-category, just add another table, name it and add same title and image similar to the first table.

                In the blocks section, we can see in the video that we have taken 3 variables which were taken according to the columns. Upon the screen initialization it turns on progress dialogue, get column value is taken from the title, when that value is taken I called the image value next, when that is taken I called the book value, then I informed the Collin tree list that this is a vertical scroll arrangement, then I took a block from initialize global and then have added create empty list block. In a Collin tree list first there is a title then a subtitle and further a block is added under it if you want to subtitle. When it takes all the values and shows the items, then the Collin tree list is made to set list. The list is then given to it and all the values that were called and was there is now shown as a list in a vertical arrangement. Now that I have all the data, in order to show that data, there is an element like an image which I am using, the second is the title and the third is an extra button icon. You can adjust the elements height with various adjustments as well as the icon height etc. Now in Collin tree view list, there are different commands for example what will happen when element is pressed, I have used this in element, extra button and icon as well so whenever one of these are clicked it will be shown. In element click I’ve added get cell and it calls the third spreadsheet in which we called book. Now in element index, whichever element index is clicked, it is taken from here and give it a column name, so it takes the index number from the book column, then I call get cell and when it gets the cell opens another screen which is screen 3, get value from the index and takes it to next screen and opens the PDF file.

                Now on screen 3 I took a vertical arrangement and a web create extension to which the link is provided. In the blocks I have only used two sections, In it a screen is simply being initialized and I’ve taken a create web view block, it has a layout which is the vertical arrangement that I took, and a URL is which takes the taken value, next I’ve specified the width and height of vertical arrangement, fit to screen and zoom are set to true if the user wants to zoom in.

Leave a Reply