This article is reproduced from CAVEDU education blog with permission.
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
# Use the instruction to download the file example, please modify the version number by yourself.
# Extract the file
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
# 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.
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.
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.
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
# start the packaging server
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.
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。
│ ├── 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
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.
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
# Copy the web server of AppInventor
mkdir -p appengine/build/
cp -rv ~/appinventor-sources/appinventor/
# Copy the packaging server of apk
mkdir -p buildserver/build
cp -rv ~/appinventor-sources/appinventor/
Finish the preparation
Before finishing, check whether the suite list is configured as following.
│ ├── appengine/build/war/
│ └── buildserver/build/run/
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.
# 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/
This step may take some time, please be patient.
# change PATH environment variable
# Package the suite
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
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.