1. How to install the smart phone Emulator on NUC There are two ways to check whether the first smartphone app that we made works well. First is to directly connect the smart phone to the AI2, and second is to use the Emulator on NUC. For those of you who don’t have a smart phone like me, let’s first install the Emulator on NUC.
Download and install the file “Appinventor_Setup_Installer_v_2_2.exe” from the homepage. Then you will see the “aiStarter” icon created on your desktop. You must remember to start “aiStarter” before using the Emulator.
Now, we are back on the AI2 screen that has our first project. In the menu placed on the top of the screen,
find and click ‘Connect’, then select ‘Emulator’. Four emulator screens
are supposed to appear in order.
But this time, you might be stopped at the third screen, which has the message “out of date”. Click “OK”. The next step is to click “Got it” on a small window titled ‘Software Update.’
Then “Duplicate application” sign will appear on the Emulator. Click “OK” and then click “Install.” After the installation, make sure to press “Done”.
So far, the Emulator screen is not what we want. Close both the “aiStarter” and AI2 and then open them again. Go to the “connect” menu and when you click “Emulator” you can see the fourth screen of the Emulator.
2. Adding text to speech function Let’s check if the emulator works well. Press the buttons on the Emulator. Previously, there was no reaction when we clicked buttons in the Viewer of ‘Designer’ screen. Now it has become more convenient.
One step further, we are going to add a function that changes message into voice. Bring the “Button” component, set “Text” at ‘Properties’ area into “Text to speech” and name the button as “Talk”. In the ‘Media’ category of the ‘Palette’ section, bring the ‘TextToSpeech’ component. This function is available but not visible on the smart phone, so it will be placed in “Non-visible components” at the bottom. Now, go to the “Blocks” screen
Click “Talk” component and bring the “when Talk.Click do” block. To fill the block, click the “TextToSpeech1” component and select the “call TextToSpeech1.Speak” block.
Fill the empty socket on the right of the block with the ‘a text string’ block of the ‘Text’ component in ‘Built-in’. Then type ‘English only, at the moment!’. Connect NUC with a speaker or headset and operate the Emulator.
When you add Korean, you can see that only the English part is translated into voice. You can solve this problem if you connect directly to the smartphone without using the Emulator. But before you do so, close the Emulator by selecting ‘Reset Connection’ in the ‘Connect’ menu.
3. Using WiFi to connect IA2 to the smart phone. I use the wireless router to connect it to NUC with an Ethernet cable and to the smartphone with WiFi. AI2 can’t be connected to Apple phones. First, check your WiFi connection using the smartphone, and download the “mit ai2 companion” app in the smartphone’s ‘Play Store’. Check if the “companion” icon is created on the smartphone screen and go to AI2.
Click the “Connect” menu on the AI2 screen of NUC, and then select “Al Companion”. A QR code will appear on the AI2 screen. Next, touch the “companion” icon on your smartphone. Under the newly created screen, touch the “scan QR code” bar and approximate the smartphone that has changed into photography mode to the QR code of the AI2 screen. Then, you will see the creation
of
6
letters
on
your
smartphone. When you touch the “connect with code” bar, an app will appear on your phone like the Emulator.
Press each button and check if it works well. When you press the “Text in Speech” button, Korean and English are both switched into voice. Is there a way to develop an app using AI2 when the Internet connection is unavailable? If you establish an Off-line setting, it is possible. But before that, remember to save the app you have created in the on-line setting on NUC.
4. AI2를 Off-line 환경으로 구축하기 Let’s get ready to make AI2 function on only the NUC without connecting to the server. First you need to install the JDK (Java Development Kit). During the scratch, it was 32bit version. Therefore, you can find the JDK installed under the ‘Program Files(x86)’ directory of the C: drive.
Press the ‘Window’ and ‘Pause’ keys at the same time. I use the 64bit OS, so I downloaded and installed the JDK for Windows 64bit use on the homepage. Therefore, the JDK is installed in the ‘Program Files’ directory that only has 64bit files.
Next, go to the ‘Advanced system settings’ in the ‘Control Panel’. At the small widow of ‘System Properties’, click the ‘Environment Variables’. Then, select ‘New’ and type “JAVA_HOME” at ‘Variable name’. In the ‘Variable value’, type the location of JDK such as “C:\Program Files\Java\jdk1.8.0_05”.
Finally, download the folder “Ai2LiveComplete” in the homepage and double-click the file “WinStartAIServer”. You can find out the off-line server URL that appears on the DOS screen. Use the Chrome browser and enter the URL of http://localhost:8888 . When you enter the name of “New Project” or import your project, you can find “Designer” which is one of the two development screens of AI2.
If you started with On-line environment, there are 2 directories of ‘.android’ and ‘.appinventor’ under the “C:＼Users＼Your PC Name＼” directory as you can see below. If you began Off-line mode first in any reason, you could not find those 2 folders until you brought up
the
Emulator
from
the
‘Connect’
menu.
When you encounter an ‘Emulator version mismatch’ message at Off-line environment, you should do differently than On-line mode. Delete the existing ‘emulator’ folder in ‘.appinventor” directory and copy the ‘emulator’ folder from Homepage into the same directory.