App Inventor was originally  a sub-project from Google Lab, initiated by Google engineers and courageous users. It’s a completed  online Android programming environment, which uses the Blocks-based coding programs instead of complex codes. On January 1, 2012, Google Lab transfer this project to MIT Center for Mobile Learning for maintenance, and keep it free and open source.  


It’s quite intuitive and convenient to develop a program from web browser via App Inventor. First, users need to design the UI/UX, and then to set the behavior, which is as easy as playing LEGO bricks blocks. Finally, as long as your phone is connected to the computer, the newly program will be displayed on the phone screen.

It’s easy, intuitive, convenient that even then elementary students can use APP Inventor to develop application. Therefore, App Inventor is sometimes applied in education field. In Taiwan, there are quite a few App Inventor courses. Take CAVEDU as example, it holds at least 30 to 40 workshops in a year. Due to lots of workshop, CAVEDU found some problems and needs, which is the main reason this article would like to teach how to setup App Inventor private server on QNAP.  

 

 

 

Why do we need to setup APP Inventor private server on QNAP?

 

In the process of promoting App Inventor,  CAVEDU found that when using App Inventor, The internet bandwidth of classroom  can not afford the excessive needs. Therefore, the consequence is that everyone can't connect to the Internet.

Besides, since the server of MIT Center for Mobile Learning is not public, it is unable to know what App Inventor users are doing, which components are commonly used on the class. If we setup a APP Inventor server on QNAP by ourself, we can not only get the answer to the above question, but also master the user behavior data to analyze it.


The reason why to setup App Inventor server on QNAP, is that educational institutions such as schools often face challenges in managing information technology and a large number of teachers and students. It is often necessary to build a storage platform with limited budget to implement files. Therefore, QNAP provides a good solution for Sharing files and more streamlined management.


 Now, we will demonstrate how to setup App Inventor private on QNAP. Besides, we will use the developing tools, QDK.  More information about QDK, please watch this video:

 

 

Compile MIT App Inventor server

 

 

Work to prepare

The project needs two important tools. One is the source code from git; the other is Apache Ant to build automation. We confirm that the environment is installed.

 

 

apt-get install ant git  # Debian/Ubuntu

 

 

pacman -S apache-ant git # Arch Linux

 

 

dnf install ant git   # RHEL/Fedora

Besides, executing server requires Google App Engine for Java, please go to the download page to get the latest version. The version number now is 1.9.63.

 

 

# Move to home list

 

 

cd ~/

 

 

# Use the instruction to download the file example, please modify the version number by yourself.

 

 

wget ‘https://storage.googleapis.com/appengine-sdks/featured/appengine-java-sdk-x.y.zz.zip’

 

 

# Extract the file

 

 

unzip appengine-java-sdk-x.y.zz.zip

 

 

 

 

 

Build the server

 

 

Get the source code

The MIT AppInventor project is on GitHub. Every participant must submit the code via git. We also use git to download all the source code.

 

 

# Get the source code

 

 

git clone https://github.com/mit-cml/appinventor-sources.git

 

 

# enter the project list

 

 

cd appinventor-sources/appinventor

 

 

# download the submodule

 

 

git submodule init

 

 

git submodule update

The instructions of git submodule are not necessary in some projects. Since the source code of App Inventor refers to other projects, we must download the referenced projects through these instructions.

GitHub is not just a space for storing source code. It is also a friendly working environment for developers. Developers can report bugs in the forum and discuss new features. In addition, the Pull request is provided, for reporting the project to yourself. After project manager reviews, the modification will be incorporated into the source code.

 

 

 

 

 

Execute Compilation

Only need to execute the ant command. Due to the size of the project, all compilation processes take at least three minutes until the word“BUILD SUCCESSFUL”shows. And then, the compilation is successful.

 

 

ant

If you unfortunately fail to compile and finally run out of BUILD FAILED, it is recommended to go back to the previous steps and confirm that there are any omissions. Before you recompile, execute ant clean to clean up the garbage from the previous build and then execute it again.

 

 

Execute server

Reminder: App Inventor is not a single program. We will open two different server, one is App Engine for web server, the other is for packaging apk.The program we write on the App Inventor web page must be compiled into an apk file via the packaging server.

 

 

Start web server

If you have already downloaded the tool according to the previous steps, we can use it to start the local server.

 

 

~/appengine-java-sdk-x.y.zz/bin/dev_appserver.sh –address=127.0.0.1 –port=8888 appengine/build/war

After start it, open the browser to http://127.0.0.1:8888/ to check login page.

–address=127.0.0.1 Server location Binding The special IP address 127.0.0.1 on behalf of this machine can only be used in this machine. To allow external connection, consider changing to –address=0.0.0.0.

–port=8888 means that the server uses the 8888 port to provide services, you can also change to other numbers.

 

 

Start apk packaging server

We will start another terminal, to start packaging server by ant command.

 

 

# enter the project list

 

 

cd ~/appinventor-sources/appinventor/

 

 

# start the packaging server

 

 

ant RunLocalBuildServer

 

 

 

 

 

 

 

 

Execute MIT App Inventor on QNAP NAS

 

 

Work to prepare

 

 

compile App Inventor

First, we have to confirm that Google App Engine has been downloaded, and App Inventor has been compiled. For the operation, please refer to the article "Compiling MIT App Inventor Server". In the following section we assume that several configured directories are as follows:

 

 

•  

  ~/appinventor-sources/ Include the compiled App Inventor program。



•  

  ~/Appengine-java-sdk-x.yy.zz is the unzipped Google App Engine SDK for Java, please fill in the version number .




 
•  

 

 

Download QPKG tools

Generaliy, package QPKG must follow the QPKG development manual by QNAP, and use the QDK development tools. In this part we have provided the code on git, please download from it.

 

 

cd ~/

 

 

git clone https://github.com/jerry73204/appinventor-qpkg.git

There are two list in the setting environment：

 

 

• package-source/ The file structure is configured according to the content of the QPKG development manual, where the files to be packaged into the QPKG suite are placed.


• Qnap-chroot/ is a reference to someone else's chroot environment, which can help us complete QPKG packaging on host without QNAP NAS.



 
•  

Ths list structure is as following, other instruction can be referred to  QPKG development manual。

 

 

appinventor-qpkg/

 

 

├── package-source/

 

 

│   ├── package_routines/

 

 

│   ├── qpkg.cfg              # setting file

 

 

│   ├── icons/                # App icons

 

 

│   │ ├── appinventor_80.gif

 

 

│   │ ├── appinventor.gif

 

 

│   │ └── appinventor_gray.gif

 

 

│   └── shared/               # file list installed on NAS

 

 

│   ├── appinventor.sh    # Service control script can order  AppInventor

 

 

│   ├── run_appinventor.py   # Start Server-side scripting of AppInventor

 

 

│   └── run_buildserver.py   # Start Server-side scripting of apk

 

 

└── qnap-chroot/

 

 

 

 

 

Prepare QPKG

 

 

 

 

 

Get into Google App Engine for Java

Considering that Google App Engine is not preloaded on QNAP NAS, it must be packaged together in the suite.

 

 

cd ~/appinventor-qpkg/shared/

 

 

cp -rv ~/appengine-java-sdk-x.y.zz/ appengine-java-sdk/

 

 

 

 

 

Get into compiled AppInventor

The compiled AppInventor file is quite large, we only need two directories that contain the web server and the package server.

 

 

# Prepare AppInventor list

 

 

cd ~/appinventor-qpkg/shared/

 

 

mkdir appinventor-bin/

 

 

cd appinventor-bin/

 

 

# Copy the web server of AppInventor

 

 

mkdir -p appengine/build/

 

 

cp -rv ~/appinventor-sources/appinventor/

 

 

appengine/build/war appengine/build/war/

 

 

# Copy the packaging server of  apk

 

 

mkdir -p buildserver/build

 

 

cp -rv ~/appinventor-sources/appinventor/

 

 

buildserver/build/run buildserver/build/run/

 

 

 

 

 

Finish the preparation

Before finishing, check whether the suite list is configured as following.

 

 

package-source/

 

 

├── appengine-java-sdk/

 

 

├── appinventor-bin/

 

 

│   ├── appengine/build/war/

 

 

│   └── buildserver/build/run/

 

 

├── appinventor.sh

 

 

├── run_appinventor.py

 

 

└── run_buildserver.py

 

 

 

 

 

Compile QPKG

 

 

起手式

According to the QPKG development manual, we must install the QDK development tool on the NAS and transfer our package working directory package-source to the NAS before it can be packaged. However, authors often have trouble with NAS machines at hand. This article introduces chroot tricks. You can create an environment that simulates QNAP NAS on host (here chroot is not a virtual machine), we package QPKG suite in this environment.

Thanks to plexinc for this part. This greatly provides the qnap-chroot tool on GitHub, which saves us a lot of effort to set up the chroot environment. We also refer to the qnap-chroot directory.

 

 

 

 

 

 

 

 

 

Prepare to enter the chroot environment

To prepare for the work, we need to do two things. One is to mount devtmpfs to the /dev directory, and the other is to copy the completed package-source directory to the chroot environment.

 

 

cd ~/appinventor-qpkg/

 

 

# Mount devtmpfs

 

 

mkdir -p qnap-chroot/dev

 

 

sudo mount –bind /dev qnap-chroot/dev

 

 

# Copy the suite list

 

 

cp -rv package-source/ qnap-chroot/package-source/

Enter the chroot environment after the preparation hroot

 

 

sudo chroot –userspec=$(id -un):$(id -gn) qnap-chroot/

 

 

 

 

 

Package QPKG

This step may take some time, please be patient.

 

 

# change PATH environment variable

 

 

export PATH=/bin:/usr/bin:/sbin

 

 

# Package the suite

 

 

cd package-source/qbuild

Once packaged successfully, the qbuild command will generate a build directory to place our qpkg package and leave the chroot environment when it is finished.

 

 

ls build/  # get the file name appinventor_2.0.0.qpkg

 

 

exit

 

 

 

 

 

Clean up chroot environment

After finishing the work, you have to clean up the chroot environment.

 

 

# Remove the QPKG kit

 

 

mv qnap-chroot/package-source/build/appinventor_2.0.0.qpkg .

 

 

# Clean up the file

 

 

rm -rf qnap-chroot/package-source/

 

 

# uninstall devtmpfs

 

 

sudo umount qnap-chroot/dev

 

 

 

 

 

Install QPKG suite on NAS

 

 

Open App Center

First, enter the interface of NAS, open App Center.

 

 

 

 

 

 

 

 

Install JRE suite

 

 

This suite is dependent on the Java program. Click the Developer Tools on the left menu, then choose JRE and install it.

 

 

 

 

 

Manually install the App Inventor suite

Click the icon on the upper right corner of the App Center to install it manually.

Click on the QPKG file on the small window, then click it to Install. This step will take some time, please be patient.

After installation, we can find App Inventor in App Center. Click it to enter the App Inventor interface.