Appinventor Development Environment Construction

write in front

This tutorial uses the development package is AppInventor2.0 offline version, if there are small partners need to be able to pay attention to the public "cloud micro-course", and give the forest message, the first time the forest will be the development package to share to you, do not accept the blog message booking, please forgive me!

three easy steps to open Appinventor tour

STEP1: Unpacking the development package

Figure 1-Development Package

?

Figure 2-content in a compressed package

After unlocking the package, double-click AI2CN (as the name implies AppInventor2.0 Chinese version) This blue icon, the popup interface is as follows:?

Figure 3-ai2 Offline version of the interface

STEP2: Start an offline server with one click ?

Click on the icon "one click to start", this time will pop up three black window, note Do not close these three windows, below I will be generous saliva will be the function of these three windows respectively introduced.

Figure 4-Registering environment variables

Children who have studied Java and Android will remember to register environment variables when installing the JDK, which is what this window does.

Figure 5-Starting the server

We want to simulate the virtual development environment, the server is certainly essential, learned javaweb development of the small partners should also remember the Apache server.

Figure 6-Port monitoring

This window specifies the project path and performs the function of the window listener.

Saliva wasted so much, do not know whether the small partners understand it? Do not understand also have no relationship, remember the development process, do not close on OK! Next, open the browser (with Google kernel browser, other browsers may not support), in the Address bar type: 127.0.0.1:8888, press ENTER, wait for the miracle, haha! Duang~duang~ Two, you can see the truth!?

Figure 7-Development environment Landing Interface

Click Login, enter the interface, wow, there is no very chicken frozen bright?

Figure 8-appinventor Development Interface

At this point, the development environment is ready! What, write so much, just write to the second step????

STEP3: Mobile phone emulation ?

Open the Development Package folder, find a named "MIT AI2 companion.apk" East, a look at the suffix everyone knows this is the mobile phone installation program, yes, install it on your phone, whether you use QQ transmission or data cable, in short, it will be transmitted to your mobile phone, remember to install.?

Figure 9-Install it on your phone

Connect your phone to your computer with a USB cable, and you'll need to find the developer options in the Settings tab of your phone and turn on USB debugging. At this point click on the Appinventor development interface in the Connect USB (read the text please see the figure below)?

Figure 10-turn on USB in Contect

Wait a little while-you'll find that the MIT AI2 Companion 2.12 in your phone is up and looking at your development environment interface and your phone's display sync? Is there any excitement at this moment? At this point, our pre-development preparation has been fully completed (pack apk, we will explain next time)?

Warm NOTE: If you look at the English interface is not used to, click on the development interface of the top right corner of the small map, click on the "Simplified Chinese" can be switched to the Chinese interface!?

Figure 12-language version switching

All right! This is the course! Next lesson, we began to learn the development of the first app--hello, Kitten! Small partners can get the material for the next lesson by focusing on the public's "cloud Mini-Class".

Appinventor Development Environment Construction