1. Mobile App Development Mobile App Development Tools Nic Shulver, FCES, Staffordshire University A discussion and demonstration of AppInventor2 and PHP.

2. Mobile App Development AppInventor2 and PHP Nic Shulver, FCES, Staffordshire University 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

3. Mobile App Development AppInventor2 and PHP Nic Shulver, FCES, Staffordshire University 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

4. Mobile App Development Designer Nic Shulver, FCES, Staffordshire University Note the “Url” field of the Web1 component Simple “form”- like page Just a one-page example

5. Mobile App Development Blocks Nic Shulver, FCES, Staffordshire University Just two blocks of code Click -> call the PHP with some parameters When the PHP replies (later…) we grab the response text

6. Mobile App Development AppInventor and PHP Nic Shulver, FCES, Staffordshire University 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! } ?>

7. Mobile App Development More complex demo Nic Shulver, FCES, Staffordshire University 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

8. Mobile App Development Colour Picker Demo Nic Shulver, FCES, Staffordshire University 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

9. Mobile App Development Search size Nic Shulver, FCES, Staffordshire University 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

10. Mobile App Development Worst case Nic Shulver, FCES, Staffordshire University 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!

11. Mobile App Development Colour data table Nic Shulver, FCES, Staffordshire University 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 idtcNametcRtcGtcB 4aliceblue240248255 5antiquewhite250235215 6aqua0255 7aquamarine127255212 8azure240255 9beige245 220 10bisque255228196 11black000 12blanchedalmond255235205 13blue00255 14blueviolet13843226 15brown16542 16burlywood222184135 17cadetblue95158160

12. Mobile App Development Colour Finder demo Nic Shulver, FCES, Staffordshire University 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

13. Mobile App Development Colour Finder demo Nic Shulver, FCES, Staffordshire University When the CSV data set arrives, we clear the canvas And draw grey stripes on the background

14. Mobile App Development Colour Finder demo Nic Shulver, FCES, Staffordshire University We make a row variable We convert the CSV into a list of lists We grab the 1 st item of a sublist (record) and print it

15. Mobile App Development Colour Finder demo Nic Shulver, FCES, Staffordshire University We use the r, g and b values to draw a block of colour Row by row…

16. Mobile App Development Colour Finder demo Nic Shulver, FCES, Staffordshire University <?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']; Our PHP is pretty simple and can be broken down into four sections. The first section gets the parameters sent by AppInventor2.

17. Mobile App Development Colour Finder demo Nic Shulver, FCES, Staffordshire University // 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.

18. Mobile App Development Colour Finder demo Nic Shulver, FCES, Staffordshire University $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"; A long but simple SQL statement – it does all the hard work for us!

19. Mobile App Development Colour Finder demo Nic Shulver, FCES, Staffordshire University 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']; echo "$name,$r,$g,$b\n"; } 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).

20. Mobile App Development Conclusion Nic Shulver, FCES, Staffordshire University 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

21. Mobile App Development Links App Inventor 2 - http://ai2.appinventor.mit.edu/ http://ai2.appinventor.mit.edu/ Named Colours - http://www.colors.commutercreative.com/grid/ http://www.colors.commutercreative.com/grid/ Named Colours - https://developer.mozilla.org/en-US/docs/Web/CSS/color_value https://developer.mozilla.org/en-US/docs/Web/CSS/color_value Nic Shulver, FCES, Staffordshire University