How to build your first extension. A complete guide for the newbies

Ok, let’s do this: I’m going to try and make a Q&A with the extensions developers who can and want to answer super basic questions, just like “What is this?” :smile:
This is not just for me but for everyone who is not very knowledgeable in this subject. So even if I know something, I will ask it anyways to state it here and not skip anything for the ones who doesn’t know it. If you are willing to answer questions, please be prepared to explain in detail whatever you want to explain.

For an easier understanding, I will continue with the next questions after the current one is answered. So please if you have questions about something that is not being discussed yet, WAIT until we get there, so everyone is on the same page and has the same chance of learning.

The :appybuilder: Code Editor.

By @Ken’s advice, We will use the AppyBuilder Code Editor, which I understand is all I need to start coding, instead of using Eclipse or something else. I also understand this doesn’t require for me to download the App Inventor source code. Is that right?
Do we need to create an account or the same account for AppyBuilder will log me in?

13 Likes

As far as i remember it is a seperate registration process.

After you register and enter the code editor you get this.

6 Likes

There is a great help page for de Code Editor
https://help.appybuilder.com/code-editor

4 Likes

Excellent! so by posting that link, we don’t have to explain much more about the editor. Whoever is using this to learn from scratch, please take the time and go read it.

3 Likes

Wow really simplified start​:astonished:

4 Likes

It wouldn’t be useful if you updated the topic with the correct answer given to each question, so in the end all the Q&A will be in one place?

EDIT: Nice idea btw

5 Likes

Coding explained

After you create a new AIX project, you have the template loaded and these are the first lines of the code you will see:

/**  ~~~~~
* Created with the AppyBuilder Code Editor.
* This is a template for basic Extension.
* Modify this template to customize your extension.
*
* **** NOTE: DO NOT use a package name. 
* **** The package name will be created for you automatically.
* **** Adding a package name will cause a compile error
*/

This is just a comment and doesn’t do anything. It only documents the code for other people who opens it.
You can create comments by starting the line with /* and ending it with */. Everything in between those will be ignored by the compiler.
My question here is What does it mean with DO NOT USE A PACKAGE NAME?

3 Likes

I’ll do that. Thanks for that suggestion.

4 Likes

The packagename is automatically generated and it isn’t necessary to provide one.

2 Likes

What’s the difference between the package name mentioned in that comment and the name we give the project when we created it?

1 Like

Here are a number of topics on the AppyBuilder community about the code editor
https://community.appybuilder.com/search?q=code%20editor

3 Likes

I don’t see a packagename, what do you mean?

1 Like

First of all thank you for this great guide :heart:

The default package name should look like this:
com.appybuilder.Extension_Name
It is something like default package name in kodular for apps.

While if you use extension template or ai sources then you can use custom package name (for example in my case I use com.sunny.Extension_Name).
And this one is same as custom package name in kodular.

4 Likes

Adding to what @vknow360 said, one of the most common usages of package name is to prevent naming conflicts between different classes (for simpler understanding, think of classes to be extensions).
Imagine having two different extensions with the same name, say ‘MyExtension’. Now if you build your project containing both of these extensions, the build process will fail as the compiler won’t be able to resolve the conflicts that have been arisen because of the same name of the classes, or basically extensions. This is where package names help compilers distinguish between different classes having the same name.

Also, package names and the directory structure of your extensions’ source files are very closely related. For example, if your package name is com.company.myExtension (package names are usually written in the reverse domain name notation) then your directory structure must be like this:

src  // This is the main source directory.
└── com
    └── company
        └── myExtension
            └── MyExtension.java
5 Likes

No sooner have 2 days passed than I already have to give up my intention not to post anymore, because this topic is too interesting. Thanks for opening this. (I’m of course also a newbie.)

To create my first extension I used the Extension Template Respository (from Evan Patton).

The first line of my extension (quadraticEquation.java) is:
package de.BodyMindPower.quadraticEquation; // package name of the extension

8 Likes

Thank you all for your replies. So let me see if I understand: in other editors you need to specify the package name in the code, like the example @bodymindpower showed us, but when we use the Appybuilder editor, that package name is generated when we get the aix file. Is that right?

7 Likes

Since you understand and learn very quickly, as we all know, I am sure that you will soon be able to create even these two extensions (definitely sooner than me). :wink:

3 Likes

Next in the template project I see these lines:

import android.content.Context;
import android.util.Log;
import com.google.appinventor.components.annotations.*;
import com.google.appinventor.components.runtime.*;
import com.google.appinventor.components.common.ComponentCategory;

What are each one of these lines?
Where do you get these from? If anyone can explain this in detail, it would be awesome.

That is a VERY long shot :grin: but I hope I would at least be trying something like that soon. I also hope this Q&A will make a lot more people start trying too.

3 Likes

I think here:

3 Likes