Professional Dynamic News App in Kodular / Thunkable / Appy Builder

Professional Dynamic News App in Kodular / Thunkable / Appy Builder

This is a total custom news app, starting with the demo. Upon opening there’s a splash screen then it starts loading the news, here is a recent news tab where your recent news will be added.  You can see the title of the news below is the day, date and time to specify the occurrence of the news. When you click on one of the news title you can see it opens the news in a separate tab, it show a sleek professional look of the news, there’s an image relevant to the news, below it is date & time and the whole news article below in detail, the length of the news can be as lengthy as required. Going back there is a category tab where you can add different types of news according to its category. When you click on one of the category you can see all the news in that tab will only be related to the clicked category. There’s also a side menu for a professional look, upon opening it you can see there’s a logo, news name and you can add whatever you want here, for example your e-mail and contacts, recent news, privacy policy and contact us option too. Let’s proceed to kodular on computer screen to see how the app is working.

                Now in the kodular on computer screen, you can see there’s a splash screen and a vertical arrangement, I have placed it in center alignment and I have taken an image which will show up on the splash screen. All of the work is being done on 1 screen, there’s a 2nd screen too which I will tell about later. After the splash screen there is a main screen in which there is a horizontal arrangement on top, there are 2 buttons, one for recent and one for category, its height and width has been set to fill parent so that both are equal, below it a vertical screen arrangement which shows all the recent news that has been added and named it recent news. In category screen I have taken vertical arrangement and have added 2 cards to it and have also placed 6 categories in it, you can make more categories as needed and adjust its height and width as per your liking. I have configured the category’s placement as fill parent and have added 2 percent space across all distances so that all of them are equidistance from each other for better and professional look. You can add more cards according to the number of categories you want to add. When the news is clicked it takes you to the news article screen, lets proceed to that screen, here you can see I have taken a vertical arrangement, at the top I took an image whose height is set to automatic and set width to fill parent so it fills the screen perfectly, next there is an horizontal arrangement and have taken a title label on it which shows the news title, next is another horizontal arrangement and have added material icons set (which I will provide to you) which you can add to any label by selecting from the drop down selection box. Then a date label is –placed which shows you the date and below it is a news screen which shows the news article, and here is a vertical scroll arrangement so however lengthy the news is, it will not disturb the arrangement and gives a professional look to it. Next I have taken a Collin tree list extension which I have uploaded and directed it, then there is a side menu and clock and I have taken four components from the spreadsheet, and a notifier is added.

Proceeding to the table base data, we can see on table one which is the recent news table. First there is a title then date then an image which I have uploaded from cloud, you can link it from any side and at the last is the news tab, you have seen the news was shown in paragraphs and properly spaced, for this whatever text you are copying you have to double click on the news and paste it as it was from where it was copied. Next is a news category which I have a table for including sports, tech, travel, health etc. You can add your own categories simply by duplicate the existing category and change all the data according to the category.

In the block section of screen 2 which is for the recent news section, in this I have a vertical scroll arrangement, when it is clicked the news feed will show up. Looking at the block part, in this we are calling data, first looking at the buttons i.e. recent and category. When recent button is clicked the color of both buttons are changed, it turns the category button to visible false, and set recent category to true. Here I am calling data to show it up on the list, which has title, date and image. When clicked we have a crop timer for when the screen is started the splash screen is turned false and main screen is turned true. Then it calls spreadsheet_1 get column data, it will get title column the value it takes will save on global value, then it takes the next column data and saves on global value and same with the third column value by saving it on global value. Then I have taken Collin tree list view and given it arrangement which is a vertical scroll arrangement. When the icon is clicked, in order to take data from spreadsheet, it turns main screen to false and turns the news screen to visible, then in columns I have given the get cell value, from get cell I have given row number on which element it is clicked and it takes value from that specified element. Then we have category, when the button is clicked it goes with the start value to next screen which is screen 2, and start value of news the card view was being clicked, it takes news value to news and sport value to sport. On the block part, whichever value is being taken from the sheet I have taken a spreadsheet table block for it of get start value, from wherever the value is being called before it I have given a spreadsheet table name, so it takes value and when it clicks it recalls the cell, and takes the value from the table whichever value is required for it if its picture, title, date etc..

Leave a Reply