App Inventor 2
Programming mobile phones with Android 
by App Inventor 2 - Juan Antonio Villalpando

- Initiation Tutorial App Inventor 2 -

Tutorial index

____________________________

________________________________________________________

- Index tutorial:

1.- Presentation. Pythagoras. Two screens. Copy and paste blocks between screens. 

1A.- GAME: Guess the number.

1B.- GAME: Russian Roulette. Minesweeper.

1C.- GAME: Three equal. 

2.- Properties. Button. Events. Label.

2B.- CheckBox. Spinner. ListPicker. ListView.

3.- TimePicker. DatePicker. Slider. Speed ​​of light.

4.- Camera. Notifier. TextToSpeech. Sound. Player. VideoPlayer. SoundRecorder. SpeechRecognizer. YandexTranslate.

5.- AccelerometerSensor. BarcodeScanner. WebViewer. OrientationSensor. Canvas. ImageSprite. Compass. NFC. Near Field Communication. ProximitySensor.

6.- Clock. Semaphore. GIFs.

7.-  Canvas. Drawing lines. ImageSprite. Drawing functions. Paddle tennis. Ball and ImageSprite.

8.- Save and upload files. File. TinyDB and TinyWebDB.

8A.- Read file and load  on a list. Capitals countries.

8B.-  FirebaseDB.  Database with change notifier.

8C.-  Chat with FirebaseDB.

8D.-  FirebaseDB with various data.

8E.-  FirebaseDB Google maps. 'Here I am !!! 

8F.-  FirebaseDB Google maps. 'Over here I go !!! 

9.- Bluetooth and Arduino. Bluetooth. Chat.

9B.- Bluetooth and Arduino. Stroller project.

10.- App Inventor 2 and Robot. LEGO Mindstorms.

11.- Send email.

11B.- PhoneCalls. PhoneNumberPicker.

12.- Notifier.

13.- Here I am. Incomplete code. (You can download  from Google Play)

14.- Graphics API. Google char.

15.- Procedures. (I)

15B.- Procedures Do. (II). Operations.

15C.- Procedures Result (III). Distance between two points in the plane.

15D.- Procedures Result (IV). Distance between two points on earth. Haversine.

16.- Countdown.

17.- Multiplication Table.

18.- GAME: Par or odd.

19.- Activy Starter. Read pdf files.

20.- Additive color mixing.

21.- GAME: Rock, paper, scissors.

22.- Resized. Responsive design.

23.- Passing data between screens.

23B.- Passing data between screens. Another method.

24.- Vector.

25.- Clock vector.

26.- GAME: Pairs or nones.

27.- Power Tax. Tax mechanical traction.

28.- Separate characters.

29.- Encode a text.

30. Lists. ListView. Two screens.

31.- 7segments Display. Timer.

32.- Social. Share message, file and camera.

33.- Vectorscope.

34.- Body Mass Index.

35.- Mobile pauses when no button pulse. Screen turns off. Solution. Background. Service.

36.- Calculation of power factor in an electrical circuit. 

37.- Rename screens.

37B.- Multitouch.  Press two keys at once. 

38.- GAME: Mastermind deduces the number. 

39.- Capicúa. 

40.- Any component I. Separate chain.

40B.- Any component II.

45.- Conditions. If ... Then ...

46.- Satellite NMEA, data to Google Maps. Separate chains and pass it to list.

Basic
-----------------------------------------------------------------------

56.- Variables 1. Initial Methodology.

57.- Variables_2. Initial Methodology.

58.- Variables_3. Initial Methodology.

59.- Pressing the button adds or subtracts one. Very basic.

60.- Change the button text. up, down. Basic.

61. Set limits. Basic.TouchUp. TouchDown.

62.- Accumulate. Basic.

63.- Lamp. Button and Clock. Basic.

64.- GAME: Now!  Basic.

65.-  Notifier. Basic.

66.-  Clock. Hours and days. Basic.

66B.-  Clock. Time difference. Basic.

67.-  Press and release button. Basic.

68.-  Separate parts of a string. Basic.

---------------------------------------------------------------------

58.- Works with chains. 
59.- Tracklist
60.- Choice questions. 
79.- Pause. Automatic account.

80.- Problem of physics and mathematics. Constant and linear speed. Scope.

81.- Ohm's  Law.

82.- Resistors in parallel.

83.- Force of friction on an inclined plane. Beware subtractions.

84.- Quadratic equation.

--------------------------------------------------------------------------------------

101.- Proposals.

102.- Stick HDMI. The Android on your TV. The screen of your mobile phone on your TV. Windows 8 on your TV.

103.- Moving files from your computer to mobile. Get the QR code. Remote Desktop Mobile. Kahoot to perform test. Install .apk files on your computer. The Android on your computer. Emulator.

103B.-  Connect the phone to a USB flash drive. Cable OTG.

104.- Links to examples. Game rockets. Books.

105.-  Update Emulator. I cannt update the emulator.

106.-  Java Bridge. Adaptation to Java. -------> Soon.

120.-  Extensions. Creating new components with Java.

------------------------------------------- Competitions

200.- Competition August - 2015.

201.- Competition October - 2015.

202.- Competition December - 2015.

203.- Competition February - 2016.

--------------------------------------------------------

__________________________________

Important files:

- Emulator for Windows. This emulator works only on Windows. It is used to emulate our applications directly on your computer without being necessary  install  on your mobile. Is slow.

- MIT AI2 Companion App. Program is loaded on the phone to use it as  emulator. Install on the mobile from Google Play via QR code. 
- MIT AI Companion 2.23 
(If the emulator does not come with version 2.23, the low of this page you going to  Windows Command Prompt, you enter C:\AI2U\ Emulator, write adb shell and install the file you just downloaded.

______________________________________________

Presentation

- What is Android?

Android is a free operating system that uses many modern mobile phones (smartphones), is based on LINUX. Android belongs to Google.

Every so often new versions appear: 1.5 (Cupcake), 1.6 (Donut), 2.0 (Eclair), 2.2 (Froyo), 2.3 (Gingerbread), 3.2 (Honeycomb), 4.0 (Ice Cream Sandwich), 4.1 (Jelly Bean), 4.2 Jelly Bean (Gummy Bear), 4.3 (Jelly Bean), 4.4 (KitKat), 4.5 (kit kat), 5.0 (Lollipop) ...

There are also other operating systems for phones like Apple's iOS (20%) and Microsoft Windows Phone (2%), Android (78%). 
(See statistical graph Android )

The Android you can easily program and perform mathematical formulas programs, games, location on Google maps, moving a robot via Bluetooth, SMS auto-reply, ...

Find out more about Android on Wikipedia.

- To learn how to program the Android I need to have a mobile phone with Android?

Not. You only need a computer and Internet connection. In the computer can do the programs and test them in an emulator installed on the same computer. 
If you have a mobile phone or tablet with Android you can move the programs carried mobile to see how they work and use them.

- What program is used to program the Android?

Three forms widely used programming:

1.- With Android Studio and Java. writing programs in Java code are made. It's how they use good programmers.

2.- By an application fee (50 € approximately) call (B4A) BASIC4Android, for programs similar manner as it is done with Visual Basic 
IMPORTANT: If you are interested in this to make Android simple programs to see this tutorial learning and initiation I have done:

Tutorial BASIC4Android.

3.-  App inventor. It is an intuitive way to make programs conveniently positioning instructions like pieces of a puzzle. We use App Inventor for our programs. You need is to be connected Internet to use the App inventor.

- App Inventor appeared on July 12, 2010, and opened to the public on December 15, 2010. 
- Hal Abelson developed between MIT and Google engineers Ellen Spertus and Liz Looney, along with David Wolber USFCA teacher and popularizer of the application. 
- August 2011 Google announced that it no longer keep this application, but that would make open source for education. 
- A week later the Massachusetts Institute of Technology (MIT), a private higher education institution located in Cambridge, Massachusetts (USA), announced it would take over the project. 
See web . 
- On 31 dicembre 2011 Google App Inventor stopped working. 
- On March 4, 2012 , the Massachusetts Institute of Technology (MIT) again put the project on the Internet. 

- On December 2013, MIT AI 2 shows, a new version of App Inventor: http://ai2.appinventor.mit.edu 
- On November 2014 off the language option, which we can see most of the items in Spanish.
- On July 15, 2015 disappears App inventor (the old). There is a web application to pass the .zip projects to .aia App App inventor inventor 2. Online application . 
- On July 2015 created a backpack on the part of blocks to copy and paste. 
- On December 2015 the FirebaseDB component is created.

- How is the code?

- Blocky ...

The programs are made ​​using blocks, which are a kind of puzzle pieces. 
No written text source program.

- Where under the App inventor me?

The App inventor is not a program you have to go down to the computer and install. It Works in cloud computing, the program works by connecting to the Internet, you work with the program server connected directly to the App inventor. It's like a web page and perform operations on it. You only need a gmail account. 
NOTE: There are versions so they can be installed on the computer and work without being connected to the Internet (offline).

You need JAVA installed. You also need a Google Gmail account.

http://appinventor.googlelabs.com

_________________________

- What direction I go to program?

You go this URL and authenticates with your e-mail Gmail ...

  http://ai2.appinventor.mit.edu

http://beta.appinventor.mit.edu(old version)

_________________________

Interface

- We can work in  English, Spanish, French, Portuguese, Italian ...

App Inventor 2 Offline

- To work with AI2 must be connected to Internet, it could somehow work offline, ie without being connected?

- Yes, a different MIT team has created a AI2 Ultimate with Personal Server. This installs the AI2 on your computer, using JAVA. Then we write in a browser http://localhost: 8888 and we can work directly with our computer without being connected to the Internet. 
Version ai2u 2.3 

- App Inventor 2 Ultimate with Personal Server. Install this package on your computer to work with AI Offline, ie without being connected to Internet. It has a new version of AI Starter. More details.

Start the Server, we go to a browser and type http://localhost:8888

Attention, this form of installation what we are doing is creating a local web server with App inventor, so that other computers on your local network can type in a local browser your IP, for example 192.168.1.2:8888 and connect with your web server with App Inventor, juanantonio@example.com put any name and can enter.

Help.

- There is also the option Portable without installation.

- There is another version called offline AILiveComplete (installation)

- At this time App Inventor 2 Online, only allows up to 5MB codes instead use the offline method if you can make them much larger.

____________________________________________________________ 
____________________________________________________________ 
____________________________________________________________ 
____________________________________________________________ 
____________________________________________________________

BEGIN HERE ... 
_________________

1.- Our first project. Pythagoras theorem.

- Let's create a project.

In our case it will be the Pythagorean theorem. We introduce the two cathetus, press a button and get the hypotenuse.

Note: cathetys comes from the Latin cathetus, and this Greek katetos, means perpendicular.

- We click Projects / Start new project ... 
- We put as name: pythagorean

kio4.com

_________________ 
Designer

Screen1 is the screen of your mobile.

In Palette are the elements or components that we put on the screen of our mobile. Buttons, boxes, images, labels, ...

Let's drag from Palette to Screen1 :

A Label (Label1)

A TexBox (TextBox1). NOTE: in their Properties mark "NumbersOnly". We delete information Hint.

Another Label (Label2)

Another TexBox (TextBox2). NOTE: in their Properties mark "NumbersOnly". We delete information Hint.

A Button (Button1)

Another label (Etiqueta3)

kio4.com

Look to the right, are the Properties of each element ...

Marks Label1, on the right you can put it in Bold, change the Font size, the text you want to appear on the Label (Text)

With Button1, you can put your match screen width. Width: Adjust the container

If you click on Screen1, using the Properties can change the Title screen, you will Pythagoras. 
Also put in Screen1,  ScreenOrientation: Vertical, to maintain this position.

Project / Save Project to save the changes you go making ... 
(Although the fact the project is saved automatically, no need to save it "manually".) 

Designer and Blocks.

To Design our controls press Designer. 
To put Code press  Blocks.

_________________ 
Blocks

Click on Block for write the code.

When... Botón1.Click

- TextBox1.Text content a number and assign it to the variable x 
- Take the contents of TextBox2.Text and assign it to the variable y

- Then make the Square root of x elevated 2 more y elevated two, and assign it to that result to  z

- Then join Label3.Texto "The hiponenusa worth ..." and the value of z.

The pieces of mathematical operations we take Integrated. 
The TextBox, Label, Button and set variables we take from Screen1

IMPORTANT: AI2 some mathematical functions are a little hidden,  log, e^, are deployed in the block neg 
The acos, grab, tie ... are pressing the arrow on the block.

kio4.com 
_______________________________________________________ 
_______________________________________________________ 
_______________________________________________________ 
_______________________________________________________ 

INSTALLATION ON MOBILE for testing and debugging (Debug).

We have it, let's see if it works, there are 3 ways to find out.: 
_______________________________________ 
- FIRST FORM:

1.- Pass the code to your phone via WiFi and MIT AI2 Companion App application. 
(This is the recommended way).

- Connect your Phone to the same WiFi network that has the computer on which you are working. 
- Installs on your mobile MIT AI2 Companion: http://appinventor.mit.edu/explore/ai2/setup-device-wifi

- Start the MIT AI2 Companion software you have installed on your mobile.

_______________________________________ 
SECOND COMING FORM:

2. Install an Emulator on your computer with Windows (this also applies to Linux emulator although it is more difficult to install), so you can do performance testing in the emulator and computer work properly when you pass the mobile. 
In this case it does not make us mobile or Wifi needed to test our application. 
( http://explore.appinventor.mit.edu/ai2/setup-emulator )

- Install Windows on your computer with the App Inventor and aiStarter. 
http://explore.appinventor.mit.edu/ai2/windows (100 MB) 
(You can also install this program on Linux, but is somewhat more complicated)

- Start on your computer the aiStarter.

- In our program click on Connect / Emulator

NOTE: If you want the emulator is placed horizontally, press the Ctrl F11

NOTE: The emulator is slow and needs a good computer to run well.

kio4.com

___________________________________ 
THIRD FORM:

3. If you do not have WiFi, connect our program from the computer to the mobile via USB cable. (http://appinventor.mit.edu/explore/ai2/setup-device-usb.html)

- Install Windows on your computer with the App Inventor and aiStarter. 
http://explore.appinventor.mit.edu/ai2/windows (100 MB) ) 
(You can also install this program on Linux, but is somewhat more complicated)

- Installs on your mobile MIT AI2 Companion: http://appinventor.mit.edu/explore/ai2/setup-device-wifi

- Start your computer and connect the USB aiStarter computer to mobile.

- Start the MIT A2 Companion on mobile. 

- Test if they are running the connection: http://appinventor.mit.edu/test/

- Go to the program that you are doing and press Connect / USB 
Your application will switch to mobile and will be operational.

___________________________________ 
___________________________________ 
___________________________________ 
___________________________________

Install the program on our mobile, ready to use (Compilation)

- To load the programs already compiled on your mobile, it is desirable that it has a QR code scanner, if your phone does not have it download and install it for example: ZXing BarCode Scanner

We have seen 3 ways to Debug  program. 
If we have finished our program we can pass it to your computer and cell phone.

One thing is for debug (debug) we do it using Connect and we make the creation process, error correction and testing of the application. 
When we have fully completed application for use and distribution, compile what we do, this is pitagoras.apk generate a file type that contains the application ready for installation.

In this case copy it to your computer and the pitagoras.apk file from your computer by USB so we can move to mobile.

Another way would be to get on your computer the QR code of our program, and then scanning the QR with mobile pass to it. This is the recommended way.

These two ways we can make by ... Build

So the program would be refined, finished and ready for installation on any mobile ...

 ip1_pitagoras.apk

You can install on your mobile scanning this QR code:

kio4.com

How I created this QR code?

I pressed on App (Save .apk to my computer)

Then the file obtained: p1_pitagoras.apk I have uploaded to my web server, namely:

http://kio4.com/appinventor/aplicaciones/p1_pitagoras.apk

I entered this website: http://goqr.me/

I wrote the address in the box where my file is: http://kio4.com/appinventor/aplicaciones/p1_pitagoras.apk

It has created a QR code and have downloaded (DOWNLOAD)

___________________________________

Save the program

- As we have seen, we can create our program and get a file from the pythagoras.apk way you can save to your computer and install on the phone for operation. 
- The file is named pythagoras.apk compiled program that is ready to install and operate.

- But if we want to save the source to improve it later or to share program, we must press on ...

My Projects / Export select project (.aia)to my computer. 
Pythagoras.aia we get the file we can share. 
The pythagoras.aia file would be the source code, ie can see the way it is done.

_____________________________________ 
_____________________________________ 
_____________________________________ 
_____________________________________

2.- IMPROVEMENTS.

- Colors, Focus, Image

 ip1_pythagoras2 (multiple Screens )

We will continue with our project pitagoras improve it.

First let's save our project with another name for a backup, for this go to My Project / Save Project As ... 
and we put name pitagoras2

We continue with this copy called pitagoras2.

- By Properties, Color Background= Yellow and TextColor= Red

- In the TextBox, delete the text of the Hint, this text appears as background box.

- In the TextBox, mark NumbersOnly, to leave the keypad only with numbers.

- Let's put a picture in our project. Download this image:

We Upload this image to our project by ...

Media / Upload File ... 

Then we get to the screen of our application ...

kio4.com

___________________________________________

3.- Multiple Screens

 ip1_pitagoras2 (multiple Screen)

We continue with our project of Pythagoras, that is the same pythagoras2.aia we are doing. 
Let's create another form on another screen, in this case we will perform the calculation of the area of the triangle.

- We added a new screen: Add Screen.
- Name: Screen2 

- By Design we place one Label1, a TextBox1, another Label2, another TextBox2, a Button and another Label3

- NOTE: Properties in TextBox mark "NumberOnly". Delete information Hint.

- By Block we created this disposition.

- We emulator program

- Screen Menu

We create another Screen, in this case Screen3, with a menu.

We added a ListView1. 
We can add items to ListView1 by  ElementsFromString property, separating the name of the elements by coma.

We write: One, Two, Three

Let's Blocks

Although earlier in the Design we have put several items in the ListView1, we will put other elements but in code.

To do this use two tables, a figure the name of two elements ListView1 (Pythagoras, Area Triangle) 
in another table I set the name of two screens (Screen_1 and Screen_2).

When Screen3 is displayed, is loaded into the ListView1 the elements of the first table.

When you click on an item, we take the index of that element and show the screen regarding that element as in pairing in the two tables.

For once in one of the screens we can return the menu, we will create in Screen1 and Screen2 Button2_Click two separate buttons so that when you press will return to the  Screen3.

We can test using Connect, but sometimes it does not work this way Emulators, it is advisable to compile the program by passing it to build and compiled mobile. It can be done by scanning the QR obtained.

kio4.com

___________________________________________

4.- Copy and paste blocks between two screens. Backpack.

- In July 2015 leaves the possibility of copying and pasting blocks between screens and between projects.

- A  "Backpack" appears on the part of Blocks.

- Clicking the right mouse button on a block will block the possibility of adding to the backpack.

- Once the blocks in the bag, we can go to another screen and remove them from the pack.

- It can also be used to copy and paste blocks of different projects.

- Backpack.

___________________________________ 
______________________________________________

Installation Summary.

- We can work online and offline.

Online with Internet connection is the "official" way, we create an email account, for example gmail and create the code by connecting to a website. 
We can see the result of our code in an emulator installed on your computer, mobile / tablet via Wi - Fi or mobile / tablet via USB cable.

To enter this website we will ... http://ai2.appinventor.mit.edu/

Offline, is installed on your computer the "program" App Inventor 2 and work with it without being connected to the Internet. 
We can see the result of our code in an emulator installed on your computer, mobile / tablet via Wi - Fi or mobile / tablet via USB cable.

To download the "program" App Inventor 2 We will ... http://sourceforge.net/projects/ai2u/files/

- There is another version called AiLiveComplete offline!: http://sourceforge.net/projects/ailivecomplete/files/ 
https://amerkashi.wordpress.com/page/3/ 
Then we hit WinStartBuildServer.cmd and then write in a browser localhost:8888

Portable, we put it in a directory or on a USB and work without it installed.

_________________________________

- Implementation of our code.

Whether you are working offline and online, there are several ways to check how it is working our code:

- Installing on mobile / tablet a fall application of Google Play, call: MIT AI2 Companion, then we need the network where we work have access. That is, the mobile has Wifi (if you have one ) and your computer is connected to the same wireless network. (It is NOT necessary that the computer is connected to wireless, cable can be connected to the network, what I mean is that both the mobile and the computer are connected to the same network and it has wireless). 
Press in App Inventor Companion AI. We will get on the computer screen a QR code. MIT AI2 we started on our mobile and scan the QR to load the application we have done.

- Installing on our computer Emulator, ie a kind of mobile phone to act as our mobile. To do this down: 
http://explore.appinventor.mit.edu/ai2/windows. We installed Windows, you will leave us a Ai2 Starter icon. Press the icon to start this server. App Inventor then click on: Emulator.

- Connect the phone to your computer via USB cable. We installed on your computer corresponding to our model mobile driver. 
After install http://appinventor.mit.edu/explore/ai2/setup-device-usb.html 
We started AI2 Starter. App Inventor then click on: USB

__________________________________