Kodular Beginner's Guide (Basics)

This topic is only for the guide.
:warning: Please don’t reply to the topic.
You can reply about the guide in this topic. :point_down:
Discuss: Kodular Beginner's Guide

Index

About Kodular
Kodular Community
Sign Up

Creator’s Home Page

• Create Project
• Import Project
• Sort Project
• Save AIA
• Delete Project

Understanding App Programming In Kodular

• Screen
• Designer
• Blocks
• Assets
• Extensions

Designer

• Palette
• Viewer
• Components
• Component Properties

Blocks

• Built-In Blocks
• Types of components blocks

  1. Events
  2. Methods
  3. Properties

• Usage
• More

  1. Warnings and errors
  2. BackPack
  3. Delete Blocks
  4. Zoom

Sample App

Screens

• Switch screens
• Add Screen
• Copy Screens
• Remove Screen

Blocks for switching screens

• Usage

App Properties

4 Likes

About Kodular

Kodular is a drag and drop app builder based on the MIT App Inventor.
You don’t need to learn coding to build apps with Kodular.
Kodular has great features, you can customize apps as you like.

Kodular Community

You can share your doubts, projects, or suggestions related to Kodular.
The Community is very active, so you can get quick responses to your doubts.

Sign Up

Sign Up / Sign In to
https://creator.kodular.io
You have 4 sign-up methods
• Account with email and password
(You will receive a confirmation email)
• Google
• Github
• Twitter

This means you are creating a Kodular account with these sign-up methods.
You can use the same account to login to the Kodular Community.

1 Like

Creator’s Home Page

You can see all your projects on the Home Page.
Click on a project to open.

Create Project

  1. Click on create project.
    Create1

  2. Give your new project a name.
    • Project names must start with a letter and can contain only letters, numbers, and underscores.
    Click on “Next”.

  3. Configure your project.
    This configuration is optional. You can change these settings later.
    Click on “Finish”.

Import Project
You can import a project file from your computer to the Creator.
The project file format is the AIA file. (.aia)

Sort Projects
You can sort projects for convenience.

Save AIA
You can save the project file to your computer (AIA file)
Click on save icon
Save Delete

Delete Project
Click on the delete icon and enter the project name for confirmation and click on delete.

1 Like

Understanding App Programming In Kodular

Screen
Apps will have screens, so you can switch to different screens.
Screen1 is the base screen that opens when the app is opened.
You can create screens.
For example, Sign Up screen and Home screen, etc.

Capture3
Screens have Designer part and Blocks Part.

Designer
Here you design the User Interface (UI)
Drag and Drop components you need like Button and Label to the screen.
And you can edit component properties. For example, setting Button color to blue.

Blocks
Drag and drop blocks and join them.
When something happens, do something
For example:
When Button1 Click
Set Label Text “Hello, this is my first app

You can say design is the body and the blocks-part is the brain.

Assets
You can upload and use files in the app like images.

Extensions
You can import extensions.
For example, a Flashlight extension to turn the flashlight on/off.

2 Likes

Designer


---------------

Palette
Capture5Capture6
Drag and Drop components from the Palette.
You can use the search feature to find components quickly.
Components are categorized.

You can also import extensions from your computer.
Go to the last category “Extensions” to import extensions.
You can find extensions here (Free/Paid)
https://community.kodular.io/c/extensions/5/l/latest
Extensions Directory, (By @Taifun)

Capture7

Viewer
Drag and Drop components to the screen

You can preview how it looks for other screen resolutions.
Capture9

Components
Here you can manage components (including extensions)
Edit their names.
Delete components.
Capture10

Component Properties
Here you can edit component properties.
App properties are included in Screen1 properties like App Name etc.
Capture11

2 Likes

Blocks

Drag blocks to the blocks editor


---------------
Built-In Blocks
Documentation for built-in blocks.


-----
Documentation for all components.

Types of component blocks
There are mainly 3 types of component blocks. (also for extensions)
They are Events, Methods, and Properties.
Events
You can make something happens when an event occurs.
component_event (1)

Some events return properties, for example, the location changed event returns latitude and longitude, etc.
component_event (2)

Functions
There are 2 types of Functions, Do Function and Get Function.

  • Do Function
    component_method (7)
  • Do Function (With Parameters)
    component_method (8)
  • Get Function
    component_method (5)
  • Get Function (With Parameters)
    component_method (9)

Properties
There are 2 types of Property blocks.

  • Set Property
    component_set_get (1)
  • Get Property
    component_set_get (2)

Usage

blocks (49)

More

Warnings and Errors
Here you can see the number of warnings and errors in your blocks.
You can navigate to blocks with warnings or errors by clicking on the arrows.
Capture13

Backpack
You can add blocks to Backpack.
Right-click on a block and select the “Add to Backpack” option.
You can access blocks added to BackPack even in other projects.
Capture14

Delete Block(s)
Drag blocks to delete icon to delete blocks.
Click Backspace/Delete key to delete blocks.
Capture15

Zoom
Click on plus/minus to zoom-in/zoom-out.

2 Likes

Sample App

You can download this project file (AIA) and import it to the Kodular Creator.
Speech2Text.aia (1.7 KB)

You can download this APK file and install the app on your mobile.
Speech2Text.apk (5.2 MB)

blocks (51)

2 Likes

Screens

You can add, copy and remove screens
Capture16

Switch screens in the project.
Capture17

Add Screen
Click on “Add Screen” and enter the name for the new screen.
Click on Create.

Copy Screen
You can copy the current screen.
Duplicating the current screen.
Give a name for the screen.
Click on “Copy”

Remove Screen
Click on Remove screen.
Enter the name of the screen for confirmation.

Blocks for switching screens

blocks (52)

Usage
blocks (53)

App Properties

App properties are included in Screen1 properties
Like: App Name, App Icon, etc.

5 Likes

Guys, I’m not advertising you anything; I just want to share what I’ve learned about building apps using Kodular. So, in order for you to continue learning more, I created a video for absolute beginners to understand the basics (components) of kodular.
If you want to learn Kodular, you can watch this video: Kodular tutorial for beginners in English | Full tutorial by Ajmal - YouTube