Transcript Example AI2 lecture - Staffordshire University

Mobile App Development
Mobile App
Development Tools
A discussion and demonstration of AppInventor2 and PHP.
Nic Shulver, FCES, Staffordshire University
Mobile App Development
AppInventor2 and PHP
• AppInventor2 has the a couple of ways to access server-side
scripts
• One is the Connectivity / Web component (another is the
User Interface / WebViewer)
• We set the URL field of a Web component to the address of a
PHP script
• When we do “Call Web1.PostText” in our code blocks, it calls
the PHP
Nic Shulver, FCES, Staffordshire University
Mobile App Development
AppInventor2 and PHP
• The best part of using “Web.PostText” is that the PHP
script sees the request in exactly the same format as
for an HTTP Form
• So if you can write PHP and call it from a form on a
web page, you can use it with AppInventor2
• It’s a good idea to debug your PHP via a web form
before connecting it to AppInventor2
Nic Shulver, FCES, Staffordshire University
Mobile App Development
Designer
• Note the “Url”
field of the
Web1
component
• Simple “form”like page
• Just a one-page
example
Nic Shulver, FCES, Staffordshire University
Mobile App Development
Blocks
• Just two blocks
of code
• Click -> call the
PHP with some
parameters
• When the PHP
replies (later…)
we grab the
response text
Nic Shulver, FCES, Staffordshire University
Mobile App Development
AppInventor and PHP
• Simplest test PHP ever?
<?php
// for the server connection demo using an Android app
if(isset($_REQUEST["p1"]))
{
$p1 = $_REQUEST["p1"];
$p2 = $_REQUEST["p2"];
echo "Testing!: $p1, $p2";
// just reflects back what we put in!
}
?>
Nic Shulver, FCES, Staffordshire University
Mobile App Development
More complex demo
• The second example has these features:
•
•
•
•
•
•
•
PHP script with multiple inputs
PHP script with database access
PHP script with “Comma Separated Value” (CSV) output
AI2 Web, Slider and Spinner control usage
AI2 output to a Canvas
AI2 parsing a CSV formatted record set
AI2 blocks: Lists and Procedures
Nic Shulver, FCES, Staffordshire University
Mobile App Development
Colour Picker Demo
• The demo application uses three
sliders to choose a colour (RGB)
• The colour data is matched by a
SQL statement and any similar
named colours are reported
• The “named colours” are the 147
individually named colours
available in CSS, JS, X-Windows
Nic Shulver, FCES, Staffordshire University
Mobile App Development
Search size
• The “search size” specifies the size of the
cube in RGB colour-space that will be
searched by the SQL query
• It looks for red, green and blue values that
are +/- the search size from the specified
colour
• So if red is 200 and search size is 8, it allows
matches to red values in the 192-208 range
Nic Shulver, FCES, Staffordshire University
Mobile App Development
Worst case
• There are a lot of similar colours in
one part of the colour space!
• The app works in real time
• Although it works well it’s not
finished
• It would be nice to see the RGB
value as well as the name
• And not clip off the longest names!
Nic Shulver, FCES, Staffordshire University
Mobile App Development
Colour data table
• The database: just a
table called tblColour
• Fields holding the
name and the red,
green and blue
values for that colour
• There are 141
colours in this table
id
tcName
tcR
tcG
tcB
4 aliceblue
240
248
255
5 antiquewhite
250
235
215
0
255
255
7 aquamarine
127
255
212
8 azure
240
255
255
9 beige
245
245
220
10 bisque
255
228
196
0
0
0
255
235
205
0
0
255
14 blueviolet
138
43
226
15 brown
165
42
42
16 burlywood
222
184
135
17 cadetblue
95
158
160
6 aqua
11 black
12 blanchedalmond
13 blue
Nic Shulver, FCES, Staffordshire University
Mobile App Development
Colour Finder demo
• When the sliders or the search
size spinner are used, we
query the database
• The PHP script is given the red,
green, blue and size numbers
Nic Shulver, FCES, Staffordshire University
Mobile App Development
Colour Finder demo
• When the CSV
data set
arrives, we
clear the
canvas
• And draw grey
stripes on the
background
Nic Shulver, FCES, Staffordshire University
Mobile App Development
Colour Finder demo
• We make a row variable
• We convert the CSV into a
list of lists
• We grab the 1st item of a
sublist (record) and print it
Nic Shulver, FCES, Staffordshire University
Mobile App Development
Colour Finder demo
• We use the r, g and b values
to draw a block of colour
• Row by row…
Nic Shulver, FCES, Staffordshire University
Mobile App Development
Colour Finder demo
<?php
if(isset($_REQUEST['red']))
{ // gets the data from the form
$red = intval(0 + $_REQUEST['red'], 10);
$grn = intval(0 + $_REQUEST['green'], 10);
$blu = intval(0 + $_REQUEST['blue'], 10);
$nStep = $_REQUEST['step'];
Nic Shulver, FCES, Staffordshire University
Our PHP is pretty
simple and can be
broken down into
four sections.
The first section gets
the parameters sent
by AppInventor2.
Mobile App Development
Colour Finder demo
// builds ranges for SQL range test (so we can get approximate matches)
$r0 = $red-$nStep;
$r1 = $red+$nStep;
$g0 = $grn-$nStep;
$g1 = $grn+$nStep;
$b0 = $blu-$nStep;
$b1 = $blu+$nStep;
We are building
some +/- values for
the search to match
non-exact colours.
Nic Shulver, FCES, Staffordshire University
Mobile App Development
Colour Finder demo
$id = "dsa"; // connects to the database as DSA
$mysqli = new mysqli("web.fcet.staffs.ac.uk", $id, $id, $id) or die ("It's dead,
Jim");
// looks for similar colours
$sql = "SELECT tcName, tcR, tcG, tcB from tblColour WHERE
tcR BETWEEN $r0 AND $r1 AND
tcG BETWEEN $g0 AND $g1 AND
tcB BETWEEN $b0 AND $b1
order by tcName ASC";
Nic Shulver, FCES, Staffordshire University
A long but simple
SQL statement – it
does all the hard
work for us!
Mobile App Development
Colour Finder demo
echo "Search,$red,$grn,$blu\n";
$rs = $mysqli->query($sql);
while($row = $rs->fetch_assoc())
{ $name = $row['tcName'];
$r = $row['tcR'];
$g = $row['tcG'];
$b = $row['tcB'];
Reports back the search
colour as the first record, so
there is always at least one
record returned.
Then formats up any matches
and outputs them too.
Note the simple, natural
comma-separated format
(CSV).
echo "$name,$r,$g,$b\n";
}
Nic Shulver, FCES, Staffordshire University
Mobile App Development
Conclusion
• That’s about it!
• We have seen the user interface, blocks code and PHP for a
non-trivial example
• The example uses multiple controls, graphical output and CSV
parsing
• The PHP is simple but effective, the hard work is done by the
SQL statement
Nic Shulver, FCES, Staffordshire University
Mobile App Development
Links
• App Inventor 2 - http://ai2.appinventor.mit.edu/
• Named Colours - http://www.colors.commutercreative.com/grid/
• Named Colours - https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
Nic Shulver, FCES, Staffordshire University