How to extension dev

what guide you can get in this post?

in this post you will understand how to make extension from start to end step by step clearly

step 1:

download note pad++
it won't be in your PC usually download form needed to edit code

step 2:

download git bash (mingw)
it is for cloning,java to aix compiling

step 3:

download: Ant 1.10.1 (Binary Distributions)-( apache-ant-1.10.1-bin.zip)
this is old version but required version

like this


(scroll down to find this)

step 4:

download java develepment kit jdk for 64 bit
download java develepment kit jdk for 32 bit
note: 32 bit website is fine working but not official website i say it only because the official website is having some issues

step 5:

Unzip Apache Ant . When it unzips it must be like:
C: \ AppInventorExtensionex \ apache-ant-1.10.1-bin * then those files

step 6:

install git bash with default settings,
install the Java SE Development Kit . You may get errors, restart your computer and try to install it again.

step 7:

this is a bit complicated part do carefully
first

now

l.JPG

use only these two buttons not any other buttons at the following commands bellow

new--> _JAVA_OPTIONS put Value -Xmx1024m

new--> ANT_HOME put Value C: \ AppInventorExtensiones \ apache-ant-1.10.1-bin
[that is, the folder where we have unzipped apache-ant ]

new--> ANT_OPTS put Value -Xmx256M

new--> JAVA_HOME put Value C: \ Program Files \ Java \PUT THE FOLDER NAME HERE LIKE jdk1.8.0_131
in my case value is C:\Program Files\Java\jdk1.8.0_271
note- [If it had another previous Variable, modify it with edit button and modify. Note that it is jdk NOT jdr ]

new--> CLASSPATH put Value % ANT_HOME% \ lib;% JAVA_HOME% \ lib

edit--> In PATH we add
;% ANT_HOME% \ bin;% JAVA_HOME% \ bin** [Note that it begins with a semicolon; to add to those that already were.] in my case there i edit the path
m.JPG
i added ; at end and put the variables then gave ok finally it will be like
n.JPG


now give ok and come out
o.JPG

p.JPG




done the hard work great job clap for you :clap: :clap:

now open git bash

we need git bash always for the extension development

thus having the black UI will not be fine
thus change it
right click in the top bar
select option change theme
r
i like mintty a lot :leafy_green: :leafy_green: :leaves: :joy:
save the theme

now
write the following command
git clone https://github.com/mit-cml/appinventor-sources.git
copy this and don't paste easily it wont work for Ctrl+v
to paste or copy from here right click somewhere to get options now paste

and click enter within some time (15-30 min) it will be ready and show a message like
s.JPG
at the end

now in C: \ Users \ YOUR PC NAME\ appinventor-sources you find what you cloned that's it you are ready to code :clap::clap:

step 7:

C:\Users\YOUR PC NAME\appinventor-sources\appinventor\components\src

  1. here create a folder named edu
  2. create a folder with your name or company name (no spaces)
  3. create a folder with your first extension name(no spaces)
  4. create a java file(no spaces)
    now open note pad++ -->create a new file (java file)
    as shown bellow

step 8:

edit the file you created with a java code

its time to learn java android :man_student: :woman_student: :eyeglasses:

so you can learn some from

https://developer.android.com/reference/packages

http://kio4.com/appinventor/125_extensiones_crear.htm

Search results for 'open source #extensions' - Kodular Community
Guide for beginner Extension Developers - Resources - Kodular Community

and google :eye:

to create a block of colour(property get,set,function ,return..)
use these links

step 9:

go to C:\Users\YOUR NAME\appinventor-sources\appinventor right click on open spaces and choose git bash here

and write the following command ant extensions
within a minute if your code is correct it will show success and your aix file will be in

C:\Users\YOUR NAME\appinventor-sources\appinventor\components\build\extensions

step 10:

open app inventor
create a project-->import extension then choose the extension file in C:\Users\YOUR NAME\appinventor-sources\appinventor\components\build\extensions

now enjoy :star_struck: :smiley: :star_struck:

if you need any help PM me or create a topic here Extension Development - MIT App Inventor Community

thanks,

9 Likes

To follow this guide this implies we have to be running a Kodular account and be able to open projects in Kodular?

I also note that your guide is aimed at Microsoft Windows users only?

1 Like

But Kodular still uses the Support lib, while AI2 (since the nb184 release) uses the AndroidX libs.

So some extensions that use these libs have to be created for Kodular in a different development environment (I use the β†’ Extension Template for this (as of before nb184) or β†’ AppyBuilder code editor).

Do extension developers still use ai sources to compile extensions?

2 Likes

Yes. Including me.

Even when you have something better and fast i.e. Extension Template.

1 Like

(added to FAQ)

2 Likes

I dont know about e template, but when i also compile large extension, it hardly takes 26-30 secs.

i do with that link only to create extension but only for once it takes 30 min then no need to do that always for compiling so no issues

really sorry i forgot to change ,i have only windows so i don't have rights to say for linux,mac because i may say wrong

i don't understand give me what should i change in this post

what do you mean by that i don't know it

thanks to do that

Those who will not be able to use the New and Edit buttons in Environment variables window, follow this guide. It worked for me.

Click me for the guide!

Good tutorial! I was successfully able to build my extension, but, why can't I use 'ant extensions', I can only use 'F:/apache-ant-1.10.1/bin/ant extensions'. How do I fix this?

It looks like you forgot to set ANT_HOME, see step 7
Taifun

I added it.

but still didn't work :frowning:

I forgot to mention, that you have to add its bin subdirectory also into the path

Taifun

It still doesn't work.

After doing a change in the settings reopen the terminal window...
Also rather than only saying "it does not work", what about showing us what you tried?

Taifun

1 Like