22.appinventor-tutorial 18-game Timer_clock Examples-part
Nuevo concurso para España, Argentina, Brasil, Chile, Colombia, Ecuador, México, Perú y Portugal.
App Inventor 2
Programming mobile phones with Android
by App Inventor 2 – Juan Antonio Villalpando
– Initiation Tutorial App Inventor 2 –
Pelajaran 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.-
Ki aib 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 – 2022.
201.-
Competition October – 2022.
202.- Competition December – 2022.
203.- Competition February – 2022.
——————————————————–
__________________________________
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 computercan 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:
Pelajaran 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. Youneed is tobe connected Internet to use the App inventor.
– App Inventor appeared onJuly 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 2022
Google announced that itno longer keep this application, but that would make open source for education.
–
A week later
theMassachusetts Institute of Technology(MIT), a private higher education institution located in Cambridge, Massachusetts (USA),announced it would take adv lewat the project.
See web
.
– On 31 dicembre 2022 Google App Inventor stopped working.
– On
March 4, 2022
, the Massachusetts Institute of Technology (MIT) again put the project on the Internet.
– OnDecember 2022, MIT AI 2 shows, a new version of App Inventor:
http://ai2.appinventor.mit.edu
– OnNovember 2022 off the language option, which we can see most of the items in Spanish.
– On
July 15, 2022
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 2022 created a backpack on the part of blocks to copy and paste.
– On December 2022 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 derita?
The App inventoris titinada a program you have to go down to thecomputer and install. It Works incloud computing, the programa 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
. Thisinstalls 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 typehttp://localhost:8888
.gif)
Attention,
this form of installation what we are doing is creating a local web server with App inventor, so thatother computers on your
localnetwork 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 Latincathetus, and this Greekkatetos, means
perpendicular
.
– We clickProjects /Mulai 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’sdrag from Palette to Screen1 :
A
Etiket
(Label1)
A
TexBox
(TextBox1).
NOTE:
in their Properties mark“NumbersOnly”. We delete informationHint.
Another
Logo
(Label2)
Another
TexBox
(TextBox2).
NOTE:
in their Properties mark“NumbersOnly”. We delete informationHint.
A
Button
(Button1)
Another
etiket
(Etiqueta3)
kio4.com
Look to the right, are theProperties of each element …
Marks
Label1
, on the right you can put it inBold, change theFont size, the text you want to appear on the Etiket (Text)
With
Button1
, you can put your match screen width.Width: Adjust the container
If you click on
Screen1,
using theProperties can change the
Title
screen, you willPythagoras.
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 morey elevated two
, and assign it to that result to
z
– Then
join
Label3.Texto
“The hiponenusa worth …”
and the value ofz.
The pieces of mathematical operations we takeIntegrated.
The
TextBox,
Label, Button
and set variables we take fromScreen1
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 onthe 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 udara murni
ut.:
_______________________________________
– 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 youhave installed on your mobile.
|
|
|
|
|
– On your mobile will this screen.
– If we change something in the Designer or Blocks
|
_______________________________________
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 titinada 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 programa on Linux, but is somewhat more complicated)
– Menginjak 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 acara 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.
– Mulai 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.
|
|
– If we change something in the Designer or Blocks
|
___________________________________
___________________________________
___________________________________
___________________________________
Install the program on our mobile, ready to use
(Compilation)
– To load the programs already compiled on your mobile,
itis desirable that it has a
QR code scanner
, if your phone does titinada have itdownload and install it for example:
ZXing BarCode Scanner
We have seen 3 ways to
Debug
programa.
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 programa 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.berpenyakitan/
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 …
Sarana / Upload File …
Then we get to the screen of our application …
|
|
Center.
|
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 kewedanan 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 informationHint.
– 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 acara 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 2022 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.seser/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 peladen. 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
__________________________________
Source: http://kio4.com/appinventori/
