[Free] Professional App Working Template to Test your Idea | Splash | Intro Onboard | Google Sign Up | Listviews | Followers | Shopping List

Hi Everyone

Reason for posting the professional looking template which is not just design but actually works on click events is going to help newbies to test the idea as fast as possible. I faced similar problem and it took me 7 days of work to make this draft template which can be customized to launch your idea in couple of hour.

I wish such type of template should be part of Kodular create where people not proficient in design and coding can immediately work upon it. Normally people give up if they stuck on simple thing. For example Google Signup is a very common but too much work require to make that screen working without bugs. So here is my little contribution and which is free for all. If you ever think this template helped you to launch your idea then feel free to sponsor me a beer :).

Professional App Working Template Design and Click Events to put your code:

  1. Splash screen with lotty
  2. Onboard or introduction flipper screen
  3. Google & Firebase sign up screen
  4. Cool Home Screen
  5. Cool Sub Screens
  6. List View Screens for Followers, Leaderboards, Shopping, Reward Points
  7. Cool Sidebar with procedure to copy on all screens

Screenshots:

  1. Splash screen with lotty
    Splash
  2. Onboard or introduction flipper screen
    [1]
    (Screenshot_2021-03-31-11-21-26-816_com.tester.jpg - Google Диск)
    2
    3
  3. Google Firebase Sign Up Screen
    Sign In
  4. Cool Home Screen
    Home
  5. Sidebar
    Menu
  6. Details Screen

details


7. Listviews
followers
Shopping cart

Video Recording of Screenshot
Youtube

SourceCode of Template .aia download.
GitHub - vinodkotiya/kodular_professional_app

Sample APK

No custom extension used.
Important point for your Google Signup to work.
Configure your firebase and get json file to upload on assets. So many youtube tutorials available. If don’t want to test with sign up simply delete the sign up screen from project and remaining screen will work perfectly for further customization. You can check sign up functionality in apk. Tou have to add google-services.json with ensuring following in your json file top section:
“project_info”: {
“project_number”: “123456789”,
“firebase_url”: “https://your-projekt-id.firebaseio.com”,
“project_id”: “your-projekt-id”,
“storage_bucket”: “your-projekt-id.appspot.com

This firebase_url line is missing if you download json from firebase and it wasted my time to figure it out. So you have to add it manually.

For any further help DM me and hope this free template will work for you. Cheers.

11 Likes

Nice explanation… keep making apps with kodular. Learning is good practice… :wave:

2 Likes

Thanks jus t trying to help the community. I wonder why templates are not there

Update: aia and apk available on github. GitHub - vinodkotiya/kodular_professional_app

to clone use https://github.com/vinodkotiya/kodular_professional_app.git

Update: Profile Screen Added

AIS Source code in github repository. kodular_professional_app/DiziKid1_userinfo.ais at main · vinodkotiya/kodular_professional_app · GitHub

Screenshot

1 Like

Followers Following Logic in Kodular using Firebase.

Hi Here is the code block. You need two firebase database named “Followers” and “Following”. On every follow/unfollow click you have to update both with true and false. Use firebase url to easily fetch the data and save the bandwidth.

Firebase Database

myID is current user loggedin. uid means user you want to follow or unfollow.

1 Like

How to save Bandwidth in Firebase by storing data in TinyDB

For your professional app you may have tags with many values (or List). Downside with firebase is it download all tags and values of bucket if you need to traverse it. One good option is optimise your code block to save values locally and later on save new tags as follows.
For example you have thousands of users with personal details in firebase like this:

If all your app user seek users bucket frequently then you bandwidth will finish in a week. Use following code block to save bandwidth and store locally.

First check the firebase tag is available locally or not
First check the firebase tag is available locally or not

If tag not available locally then fetch from firebase
If tag not available locally then fetch from firebase

If tag available locally don’t seek firebase but load from tinyDB

I hope this efficient logic will help you to save your tons of bandwidth in firebase. For sensitive user information you can replace the list item or use encryption before saving locally to users device.

Print certificate with image and text using canvas

You can add following feature in your professional app to generate invoice or certificate by following blocks.
AIS is uploaded on GIT Repository. You need Canvas, Image Editor and Image Sprite Component

  1. You need a background image.
  2. You also need a transparent image blank.png (Its here but you cant see)
    blank
    Now Use following code blocks.
    Note your canvas size and image sprite should be in pixel. (Not automatic/fill parent)
    Sprite1 will have main background certificate.
    Sprite 2 will have transparent image where we will draw dynamic text.

You can also share the image with this block:
blocks(5)

@Vinod_Kotiya I want to learn this follow and unfollow system.if you make a tutorial video on it. That will be my favorite and most search video for me.

1 Like

Sure. I am regularly updating new screens to professional app, Let me get some time to make videos if people will be interested. Right now I don’t find any one is interested here.

Message cum Chat Screen in Professional App.

Hi I have added the chat screen in github. Uou can download it.
Users can send message to each other via firebase. To restrict bandwidth I am overwriting single message and not putting timestamps.
Screenshot:

Firebase structure is similar to follow/unfollow:
firebase
Simply save sender message under the recipient tag. It’s very easy to retrieve using url of unique ID.

Download screen for free kodular_professional_app/DiziKid1_msg.ais at main · vinodkotiya/kodular_professional_app · GitHub

1 Like

Online Dual Random Quiz with circular results in Your Professional App

Here is a working demo of quiz screen updated in github to download for free.
This quit is dual random. Means question will apear randomly. Also options will appear randomly.
Simply import the screen and connect the quiz list with firebase or airtable.

Here is how results will be shown:

Here is some code blocks. Questions , Options and Answer List.
blocks(6) blocks(8) blocks(7)

Initialise:
blocks(9)

Randomise Question Sequence:

Show Questions with Randomise Options:

Saving Answers:

Show Results with Circular Progress Extension.

I put clock interval 10.

Structure to save quiz in firebase (for beginners):

I recommend save questions as list to easily download with less code.

Here is the code block to download questions and answers.
blocks(16)
blocks(17)

Download ais file from (dosen’t include firebase logic) kodular_professional_app/DiziKid1_quiz.ais at main · vinodkotiya/kodular_professional_app · GitHub

Thanks

1 Like

@Vinod_Kotiya
I hope that beginners to take advantage of this opportunity that you are offering.
Great Work and Idea!
:+1:
:clap:

@Rogerio_Rios Thanks, I will club all the ais in single aia if people are really interested in this project.

1 Like