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
-
Click on create project.
-
Give your new project a name.
• Project names must start with a letter and can contain only letters, numbers, and underscores.
Click on “Next”.
-
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
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.
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
— 
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)
Viewer
Drag and Drop components to the screen
You can preview how it looks for other screen resolutions.
Components
Here you can manage components (including extensions)
Edit their names.
Delete components.
Component Properties
Here you can edit component properties.
App properties are included in Screen1 properties like App Name etc.
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.
Some events return properties, for example, the location changed event returns latitude and longitude, etc.
• Functions
There are 2 types of Functions, Do Function and Get Function.
- Do Function
- Do Function (With Parameters)
- Get Function
- Get Function (With Parameters)
• Properties
There are 2 types of Property blocks.
- Set Property
- Get Property
Usage
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.
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.
Delete Block(s)
Drag blocks to delete icon to delete blocks.
Click Backspace/Delete key to delete blocks.
Zoom
Click on plus/minus to zoom-in/zoom-out.
3 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)
2 Likes
Screens
You can add, copy and remove screens
Switch screens in the project.
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
Usage
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
This video is currently not available in youtube.com
Please don’t reply to the topic.
