App Inventor. Examples. Tutorials. Games. Codes Blocks
App Inventor. Examples. Tutorials. Games. Codes Blocks
Nuevo concurso para España, Argentina, Brasil, Chile, Colombia, Ecuador, México, Perú y Portugal.
App Inventor 2
Programming mobile phones with Andr
by App Inventor 2 - Juan Antonio Villalp
- Initiation Tutorial App Inventor 2 -
Tutorial index
____________________________
________________________________________________________
- Index tutorial:
1.- Presentation. Pythagoras. Two screens. Copy and paste blocks between screens.
We use our own cookies and third-party cookies on our websites to maintain the session and your preferences, customize your user experience and obtain website use
1A.- GAME: Guess the number. statistics.
Si continúa navegando consideramos que acepta su uso. OK Más información
1B.- GAME: Russian Roulette. Minesweeper.
1C.- GAME: Three equal.
39.- Capicúa.
We use our own cookies and third-party cookies on our websites to maintain the session and your preferences, customize your user experience and obtain website use
statistics.
Si continúa navegando consideramos que acepta su uso. OK Más información
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. Wind
103.- Moving files from your computer to mobile. Get the QR code. Remote Desktop Mobile. K
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
We use our own cookies and third-party cookies on our websites to maintain the session and your preferences, customize your user experience and obtain website use
statistics.
Si continúa navegando consideramos que acepta su uso. OK Más información
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 appl
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 th
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
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 Sandw
(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, S
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.
We use our own cookies and third-party cookies on our websites to maintain the session and your preferences, customize your user experience and obtain website use
3.- App inventor. It is an intuitive way to make programs conveniently
statistics.
positioning instructions like pieces of a puzzle. We use App Inventor for
connected Internet to use the App inventor.
Si continúa navegando consideramos que acepta su uso. OK Más información
- 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
- 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),
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.
The programs are made using blocks, which are a kind of puzzle pieces.
No written text source program.
We use our own cookies and third-party cookies on our websites to maintain the session and your preferences, customize your user experience and obtain website use
statistics.
Si continúa navegando consideramos que acepta su uso. OK Más información
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 ...
We use our own cookies and third-party cookies on our websites to maintain the session and your preferences, customize your user experience and obtain website use
statistics.
Si continúa navegando consideramos que acepta su uso. OK Más información
App Inventor 2 Offline
- To work with AI2 must be connected to Internet, it could somehow wo
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
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
without being connected to Internet. It has a new version of AI Starter. More details.
Attention, this form of installation what we are doing is creating a local web server with App i
computers on your local network can type in a local browser your IP, for example 192.168.1.2
your web server with App Inventor, [email protected] put any name and can enter.
Help.
kio4.com
Note: cathetys comes from the Latin cathetus, and this Greek katetos, means perpendicular.
kio4.com
_________________
Designer
We use our own cookies and third-party cookies on our websites to maintain the session and your preferences, customize your user experience and obtain website use
statistics.
Si continúa navegando consideramos que acepta su uso. OK Más información
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, ...
A Label (Label1)
A TexBox (TextBox1). NOTE: in their Properties mark "NumbersOnly". We delete information Hint.
Another TexBox (TextBox2). NOTE: in their Properties mark "NumbersOnly". We delete information Hint.
A Button (Button1)
kio4.com
We use our own cookies and third-party cookies on our websites to maintain the session and your preferences, customize your user experience and obtain website use
statistics.
Si continúa navegando consideramos que acepta su uso. OK Más información
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.
_________________
Blocks
Click on Block for write the code.
On the left side we have Code Blocks and controls we have put on the Screen1.
We will use 3 numeric variables: a cathetus, (x), another cathetus (y) and the hypotenuse (z). The variables that w
previously Declared.
- You can use copy and paste blocks (Ctrl-C and Ctrl V) and then adjust values.
The first, variables x and variable take the value of TextBox1 and TextBox2.
We need operations such as Square root, square (^), sum ... we get these blocks by pressing the block Mathematics.
- 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.
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
_______________________________________________________
_______________________________________________________
_______________________________________________________
_______________________________________________________
- 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.
- On your computer, click Connect and then AI And you will get a QR code.
Companion
We use our own cookies and third-party cookies on our websites to maintain the session and your preferences, customize your user experience and obtain website use
statistics.
Si continúa navegando consideramos que acepta su uso. OK Más información
- On your mobile will this screen.
- Write the above code or scan the QR.
- The program will be connected until sign- off (Connect / Reset Connection)
- In this way we can debug (debug) programs that perform to function properly.
_______________________________________
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 pe
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)
As in previous cases, if we change some of the Designer or Blocks, that change will happen to the Emulator.
We use our own cookies and third-party cookies on our websites to maintain the session and your preferences, customize your user experience and obtain website use
statistics.
Si continúa navegando consideramos que acepta su uso. OK Más información
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-devic
- 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 your computer and connect the USB aiStarter computer to mobile.
- Go to the program that you are doing and press Connect / USB
Your application will switch to mobile and will be operational.
- In this way we can debug (debug) programs that perform to function properly.
kio4.com
___________________________________
___________________________________
___________________________________
___________________________________
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
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 recommend
So the program would be refined, finished and ready for installation on any mobile ...
ip1_pitagoras.apk
We use our own cookies and third-party cookies on our websites to maintain the session and your preferences, customize your user experience and obtain website use
You can install on your mobile scanning this QR code: statistics.
Si continúa navegando consideramos que acepta su uso. OK Más información
kio4.com
Then the file obtained: p1_pitagoras.apk I have uploaded to my web server, namely:
http://kio4.com/appinventor/aplicaciones/p1_pitagoras.apk
___________________________________
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 fo
- 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 ...
_____________________________________
_____________________________________
We use our own cookies and third-party cookies on our websites to maintain the session and your preferences, customize your user experience and obtain website use
statistics.
Si continúa navegando consideramos que acepta su uso. OK Más información
_____________________________________
_____________________________________
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 use our own cookies and third-party cookies on our websites to maintain the session and your preferences, customize your user experience and obtain website use
statistics.
Si continúa navegando consideramos que acepta su uso. OK Más información
- 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.
Media / ImagePicker
To center the image we are going to Layout and we draw to the screen one
HorizontalArragement
Center.
We can center the controls horizontally, vertically or table, so that we can put several controls in each of tha
We use our own cookies and third-party cookies on our websites to maintain the session and your preferences, customize your user experience and obtain website use
statistics.
Si continúa navegando consideramos que acepta su uso. OK Más información
kio4.com
___________________________________________
- By Design we place one Label1, a TextBox1, another Label2, another TextBox2, a Button and another Label3
- We emulator program
We use our own cookies and third-party cookies on our websites to maintain the session and your preferences, customize your user experience and obtain website use
statistics.
Si continúa navegando consideramos que acepta su uso. OK Más información
- 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 use our own cookies and third-party cookies on our websites to maintain the session and your preferences, customize your user experience and obtain website use
statistics.
Si continúa navegando consideramos que acepta su uso. OK Más información
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 y
WeWecan
use test using
our own Connect,
cookies but sometimes
and third-party it our
cookies on does not work
websites this way
to maintain Emulators,
the session it is
and your advisablecustomize
preferences, to compile the
your program
user by and
experience passing
obtainitwebsite
to build
useand c
done by scanning the QR obtained. statistics.
Si continúa navegando consideramos que acepta su uso. OK Más información
kio4.com
___________________________________________
- 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.
- 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.
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.
_________________________________
- 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
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
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
- 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 Inve
- 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 use our own cookies and third-party cookies on our websites to maintain the session and your preferences, customize your user experience and obtain website use
We started AI2 Starter. App Inventor then click on: USB
statistics.
Si continúa navegando consideramos que acepta su uso. OK Más información
__________________________________
We use our own cookies and third-party cookies on our websites to maintain the session and your preferences, customize your user experience and obtain website use
statistics.
Si continúa navegando consideramos que acepta su uso. OK Más información