AppInventor: HOW TO: Turn your AI2 app into a Voice Activated App (Google Now)

Posted on May 7, 2018 by Metric Rat

Leading on from my initial enquiry here:

Using Google Now on your Android phone you can start several “Google” apps with voice commands.

It is possible to convert your AI2 app for the same thing. For the purposes of this howto:

The apk filename is MyVoiceApp.apk

The appname is “My Voice App” << what you see in the App Name on Screen 1 Designer

1. What you will need:

A PC
apktool (Windows/Linux) or AppToMarket (Windows)
Your apk file

2. Decode your apk using your preferred decoder/encoder

3. Browse to the res folder in the decoded apk and create a new folder called xml

4. Browse into the xml folder you have just created and create a new text file called searchable.xml

5. Open up searchable.xml and copy and paste this into it:

<?xml version="1.0" encoding="utf-8"?>
<searchable xmlns:android="http://schemas.android.com/apk/res/android"
    android:label="My Voice App" >
</searchable>

<?xml version="1.0" encoding="utf-8"?>

<searchable xmlns:android="http://schemas.android.com/apk/res/android"

android:label="My Voice App" >

</searchable>

whilst replacing “My Voice App” with the appname of your app

Save searchable.xml.

6. In the root folder of your expanded apk, find the file “AndroidManifest.xml” and open it with your preferred text editor.

It may look something like this: (the apkfilename and the appname should be correct in this file and match that of your apk)

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="appinventor.ai_XXXuserXXX.MyVoiceApp" platformBuildVersionCode="22" platformBuildVersionName="5.1.1-1819727">
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
    <application android:debuggable="false" android:icon="@drawable/ya" android:label="My Voice App" android:name="com.google.appinventor.components.runtime.multidex.MultiDexApplication">
        <activity android:configChanges="keyboard|keyboardHidden|orientation" android:name=".Screen1" android:windowSoftInputMode="stateHidden">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
    </application>
</manifest>

<?xml version="1.0" encoding="utf-8" standalone="no"?>

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

<uses-permission android:name="android.permission.INTERNET"/>

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

<intent-filter>

</intent-filter>

</activity>

</application>

</manifest>

7. You now need to add a new intent filter section and some configuration lines. Do this just above the <intent-filter> line

This is what you should add:

<intent-filter>
<action android:name="android.intent.action.SEARCH" />
            </intent-filter>
             <meta-data android:name="android.app.searchable"
             android:resource="@xml/searchable"/>

<intent-filter>

</intent-filter>

android:resource="@xml/searchable"/>

and your resultant AndroidManifest.xml file should then look like this:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="appinventor.ai_user.MyVoiceApp" platformBuildVersionCode="22" platformBuildVersionName="5.1.1-1819727">
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
    <application android:debuggable="false" android:icon="@drawable/ya" android:label="My Voice App" android:name="com.google.appinventor.components.runtime.multidex.MultiDexApplication">
        <activity android:configChanges="keyboard|keyboardHidden|orientation" android:name=".Screen1" android:windowSoftInputMode="stateHidden">
            <intent-filter>
<action android:name="android.intent.action.SEARCH" />
            </intent-filter>
             <meta-data android:name="android.app.searchable"
             android:resource="@xml/searchable"/>            
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
    </application>
</manifest>

<?xml version="1.0" encoding="utf-8" standalone="no"?>

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

<uses-permission android:name="android.permission.INTERNET"/>

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

<intent-filter>

</intent-filter>

android:resource="@xml/searchable"/>

<intent-filter>

</intent-filter>

</activity>

</application>

</manifest>

Once this is done, save AndroidManifest.xml, and your work on editing the apk is done!

8. Now re-encode your apk using your preferred encoder/decoder, deal with the signing and zip aligning of apk as needed.

Sideload you new apk onto your device

Get Google Now running and ask it to: “run ‘My Voice App'” or “start ‘My Voice App'” (both seem to work for different things???)

Your app should open up from closed or in the background.

If you need help with how to use apktool, just ask.

Tim

Credits due to the original poster on techrepublic here

AppInventor: HOWTO: Upload Image to Google Drive using base64 and Google Apps Script Web App

Posted on May 7, 2018 by Metric Rat

This question was asked on the forum recently, and due to changes in google authentication has become more difficult to achieve. However, by using a “man in the middle” web app, it is possible to upload images to a private or public google drive folder, using base64 to convert the image to a string, and back again!

Credits must go to TANAIKE whose blog post on achieving this in several different ways, primarily using curl from a command line, lead me to a solution, and also to ghostfox for the base64 conversion extension over on thunkable.

I used the imagePicker to select files for upload, as this provides a full path to the file. It doesn’t have to be done this way. To upload image assets in your app for the base64 extension, one must first copy the image to the internal sdcard.

To wet your whistle, here is a video of a sample app in action:

https://www.youtube.com/watch?v=QFMaedwBceY

You are going to need three elements for all this to work (assuming you already have a google account in place!):

A google drive folder to upload your files to, along with the ID for that folder
A google apps script web app to handle the decoding of the base64 string
An AI2 app to select and upload the file from

Lets get started

1. Google Drive Folder

Create a google drive folder for your uploads.

Note the folder ID

Decide on sharing options for your folder

2. Google Apps Script Web App

Somewhere else in your google drive, create a new Google Apps Script and name it accordingly

In the already created code.gs add the following code, overwriting the default code

function doGet(e) {
return message("Error: no parameters in doGet");
   
}

function doPost(e) {
 if (!e.parameters.filename || !e.parameters.file || !e.parameters.imageformat) {
   return message("Error: Bad parameters in doPost");
 } else {
   var imgf = e.parameters.imageformat[0].toUpperCase();
   var mime =
       (imgf == 'BMP')  ? MimeType.BMP
     : (imgf == 'GIF')  ? MimeType.GIF
     : (imgf == 'JPEG') ? MimeType.JPEG
     : (imgf == 'JPG')  ? MimeType.JPEG
     : (imgf == 'PNG')  ? MimeType.PNG
     : (imgf == 'SVG')  ? MimeType.SVG
     : false;
   if (mime) {
     var data = Utilities.base64Decode(e.parameters.file, Utilities.Charset.UTF_8);
     var blob = Utilities.newBlob(data, mime, e.parameters.filename);
     DriveApp.getFolderById('FOLDER ID HERE').createFile(blob);
     return message("Success");
   } else {
     return message("Error: Bad image format");
   }
 }
}

function message(msg) {
 return ContentService.createTextOutput(JSON.stringify({Result: msg })).setMimeType(ContentService.MimeType.JSON);
}

function doGet(e) {

return message("Error: no parameters in doGet");

}

function doPost(e) {

if (!e.parameters.filename || !e.parameters.file || !e.parameters.imageformat) {

return message("Error: Bad parameters in doPost");

} else {

var imgf = e.parameters.imageformat[0].toUpperCase();

var mime =

(imgf == 'BMP') ? MimeType.BMP

: (imgf == 'GIF') ? MimeType.GIF

: (imgf == 'JPEG') ? MimeType.JPEG

: (imgf == 'JPG') ? MimeType.JPEG

: (imgf == 'PNG') ? MimeType.PNG

: (imgf == 'SVG') ? MimeType.SVG

: false;

if (mime) {

var data = Utilities.base64Decode(e.parameters.file, Utilities.Charset.UTF_8);

var blob = Utilities.newBlob(data, mime, e.parameters.filename);

DriveApp.getFolderById('FOLDER ID HERE').createFile(blob);

return message("Success");

} else {

return message("Error: Bad image format");

}

function message(msg) {

return ContentService.createTextOutput(JSON.stringify({Result: msg })).setMimeType(ContentService.MimeType.JSON);

}

Replace FOLDER ID HERE with your chosen folder ID

Save the project and the publish as a web app, running the app as you, and available to anyone.

You should be asked to authorise permissions, do so. If you are not asked then select the doGet() function and run this to get permissions sorted

You will also get a popup telling you the url to your published app (the one in the box). Note this down as you will need this for your AI2 app.

The web app requires three parameters: a filename, a file type, and the file itself ( in this case the base64 string )

3. AI2 App

These are the blocks used in the sample app from the video.

The only item you need to edit for it to work is the value for Web1.Url in the Button.click event. This is the url to the web app created earlier.

NOTE: after writing this howto, I discovered that some devices, or devices in some locales will convert jpeg extensions to jpg, and others from jpg extensions to jpeg

If when your image is selected by the listpicker and comes through as jpeg please change your ImagePicker1.AfterPicking blocks to the following: (and additional if statement to account for the jpeg extension

You should now have everything you need to upload files to google drive

aia attached uploadImage2GoogleDrive

AppInventor: HOWTO: Dynamic Scrolling Image List with Titles using webviewer (with select)

Posted on May 7, 2018 by Metric Rat

Been working on this for a while, time to share the fruits of my labours!

There are many different ways to achieve much the same thing, but I wanted to have a go at building things up from scratch, just use pure javascript, and provide some user functionality in the process.

Youtube video to start things off:

https://youtu.be/YkYJKxrszh4

How it works:

The Ai2 blocks feed the html file with all the data: image files, file locations, titles and subtitles, shape of image (square/circle), colour scheme.

The html file pulls all this information in through the webviewstring, and then by creating arrays from the webviewstring, dynamically builds a “card” for each image.

Note the use of classes from the w3.css and w3mobile.css to assist with the cards layout

A click on the image returns the file to the AI2 app and displays it.

Developers can choose to set all the variables to their liking, or can also provide a settings area for the user to do likewise (further demo hopefully coming on this!)

A couple of Taifun’s wonderful extensions used.

BLOCKS

HTML

<DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1, user-scalable=0">
<title>mobile | img and txt</title>
<link rel="stylesheet" href="w3mobile.css">
<link id="theme_css" rel="stylesheet" href="w3-theme-blue.css">

</head>
<body>
<header class="w3-top w3-bar w3-theme">
         <h1 class="w3-bar-item" id="header">Header</h1>
</header>
<div class="w3-container" style="margin-top:90px">
<hr>
<div id="carddisplay"></div>
</div>
<br><br><br>
<footer class="w3-container w3-bottom w3-theme w3-margin-top">
   <h3 id="footer">Footer</h3>
</footer>
<script type="text/javascript">
makePage();
function makePage() {
var raw = window.AppInventor.getWebViewString().split(',');
var data1 = raw.slice(2,5);
var data2 = raw.slice(0,1);
var data3 = raw.slice(1,2);
var data4 = raw.slice(5);
var data5 = [], size = 3;
while (data4.length > 0)
    data5.push(data4.splice(0, size));
var myLength = data5.length;
//get header and footer
var newHeader = data1[0];
var header = document.getElementById('header');
header.innerHTML = newHeader;
var newFooter = data1[1];
var footer = document.getElementById('footer');
footer.innerHTML = newFooter;
//get colour theme
document.getElementById('theme_css').href = data1[2]; ;
var htmlTemplate =  
'<div class="w3-cell-row">\
<div class="w3-cell" style="width:30%">\
<img src="{W}{X}.png" style="width:100%" class="{V} w3-hover-opacity" onclick="onClick(this)">\
</div>\
<div class="w3-cell w3-container" style="display:flex;align-items:center">\
<div>\
<h1>{Y}</h1>\
<h4>{U}</h4>\
</div>\
</div>\
</div>\
<hr>\
';
var newHtml = '';
var xcontainer;
var tempContainer;
   for (var i = 0; i < myLength; i++) {
//                            image shape             image path           image name (without extn)        title                       subtitle
newHtml = htmlTemplate.replace('{V}', data3[0]).replace('{W}', data2[0]).replace('{X}', data5[i][0]).replace('{Y}', data5[i][1]).replace('{U}', data5[i][2]);
tempContainer = document.createElement('div');
tempContainer.innerHTML = newHtml;
xcontainer = document.getElementById('carddisplay');
xcontainer.appendChild(tempContainer);
}
}
function onClick(element) {
  window.AppInventor.setWebViewString(element.src);
}
</script>
</body>
</html>

<html>

<head>

<title>mobile | img and txt</title>

</head>

<body>

<h1 class="w3-bar-item" id="header">Header</h1>

</header>

<hr>

</div>

<h3 id="footer">Footer</h3>

</footer>

makePage();

function makePage() {

var raw = window.AppInventor.getWebViewString().split(',');

var data1 = raw.slice(2,5);

var data2 = raw.slice(0,1);

var data3 = raw.slice(1,2);

var data4 = raw.slice(5);

var data5 = [], size = 3;

while (data4.length > 0)

data5.push(data4.splice(0, size));

var myLength = data5.length;

//get header and footer

var newHeader = data1[0];

var header = document.getElementById('header');

header.innerHTML = newHeader;

var newFooter = data1[1];

var footer = document.getElementById('footer');

footer.innerHTML = newFooter;

//get colour theme

document.getElementById('theme_css').href = data1[2]; ;

var htmlTemplate =

'<div class="w3-cell-row">\

<div class="w3-cell" style="width:30%">\

<img src="{W}{X}.png" style="width:100%" class="{V} w3-hover-opacity" onclick="onClick(this)">\

</div>\

<div class="w3-cell w3-container" style="display:flex;align-items:center">\

<div>\

<h1>{Y}</h1>\

<h4>{U}</h4>\

</div>\

<hr>\

var newHtml = '';

var xcontainer;

var tempContainer;

for (var i = 0; i < myLength; i++) {

// image shape image path image name (without extn) title subtitle

newHtml = htmlTemplate.replace('{V}', data3[0]).replace('{W}', data2[0]).replace('{X}', data5[i][0]).replace('{Y}', data5[i][1]).replace('{U}', data5[i][2]);

tempContainer = document.createElement('div');

tempContainer.innerHTML = newHtml;

xcontainer = document.getElementById('carddisplay');

xcontainer.appendChild(tempContainer);

}

function onClick(element) {

window.AppInventor.setWebViewString(element.src);

}

</script>

</body>

</html>

aia attached

ImagePicker2

AppInventor: HOWTO: Capitalise letters, and remove spaces in textbox as you type

Posted on May 7, 2018 by Metric Rat

Little routine to capitalise letters as you type in a textbox, along with removal of spaces if typed

Uses Taifun’s Textbox extension

aia attached Capitalise

AppInventor: HOWTO: Test If Image Exists on Device (no extension required)

Posted on May 6, 2018 by Metric Rat

This one has been bugging me for a few days, and despite the wonderfulness of the File extension from Taifun, I have been searching for a way to test for the existence of an image file using just AI2 blocks and components.

Why do you need this? (for whatever reason you don’t want to use an extension

You may have a situation where you download image files to the app when the user visits a particular part of the app.

Once downloaded, it makes more sense to use the image on the device, as opposed to downloading it again.

My solution was to use a little bit of javascript, a webviewer with webviewstring, a clock and some logic.

Works with webviewer not visible as well

I also used the file component to install the html file needed to the sdcard

Default location is file:///mnt.sdcard, but subdirectories work too, if the additional path is added

My example simply check for an image file, and if it exists displays it, along with a message.

If the file doesn’t exist, displays a different “Sorry” image in the app, and a message.

Developers will be able to apply their own logic, so that if the file is not on the device, it

can be downloaded from online resources.

Most of the components used are likely to already be in an app whilst developing, so often simply a matter of reuse

BLOCKS

Please note, in production, for the filepath for the initial webviewstring and for the “else” setting of Image1.Picture

you may not need to include “file:///mnt/sdcard”.

Also you can create a specific directory on the sdcard when you create the html file in Screen Initialise.

HTML

<!DOCTYPE html >
<html>

<head>
<title>Test Image Exists</title>
</head>
<!--https://stackoverflow.com/questions/18837735/check-if-image-exists-on-server-using-javascript-->
<body>
<script>
 
function checkImage(imageSrc, good, bad) {
    var img = new Image();
    img.onload = good; 
    img.onerror = bad;
    img.src = imageSrc;
}

checkImage(window.AppInventor.getWebViewString(), 
function(){ window.AppInventor.setWebViewString("File exists"); }, 
function(){ window.AppInventor.setWebViewString("File doesn't exist"); } );


</script>
</body>

</html>

<!DOCTYPE html >

<html>

<head>

<title>Test Image Exists</title>

</head>

<body>

function checkImage(imageSrc, good, bad) {

var img = new Image();

img.onload = good;

img.onerror = bad;

img.src = imageSrc;

}

checkImage(window.AppInventor.getWebViewString(),

function(){ window.AppInventor.setWebViewString("File exists"); },

function(){ window.AppInventor.setWebViewString("File doesn't exist"); } );

</script>

</body>

</html>

Credits: in html

aia attached TestForFile

Enjoy!

ApInventor: HOWTO: Get Data from Private Google Sheet with A Google WebApp

Posted on May 6, 2018 by Metric Rat

I have done this before in another HOWTO: Download Google Sheet as CSV

but this one uses an intermediary Google Apps Script Web App to grab the data

This example uses a google sheet set as accessible only to me and the standalone

google apps script is set similarly. The script runs as me, but can be used by anyone

The app calls the script using the web component, then the script returns the specified

data to the app, which can then be used as a master list, and manipulated thereon

The example shows all the data retrieved, and then offers a spinner to choose a name

from the master list, and shows the email associated with the name

I used the obsfuscated text block for the script link.

Benefits:

protects your spreadsheet itself
allows anyone to access the data needed for the app, while not storing it on the app
easy data manipulation using the lists facility in the app
provides a pseudo api solution for other platforms and variants (e.g. Thunkable X at the time of writing)
impress your friends 😉

SPREADSHEET

note: I grabbed some dummy data from Mockaroo useful for this sort of thing

SCRIPT

I won’t go into detail about how to create a google apps script web app, well enough covered elsewhere

function doGet() {
var ss = SpreadsheetApp.openById('ENTER YOUR SPREADSHEET ID HERE');
var sh = ss.getSheets()[0]; //if you keep your sheet tabs in the same place, you can select any sheet tab
var rg = sh.getDataRange().getValues(); //fetches all the data values on the sheet tab

var outString = '';
  for(var row=0 ; row<rg.length ; ++row){
    outString += rg[row].join(',') + ';\n';  //this section adds line returns to the rows in your data
  }
return ContentService.createTextOutput(outString).setMimeType(ContentService.MimeType.TEXT);  //returns the data to the app
}

function doGet() {

var ss = SpreadsheetApp.openById('ENTER YOUR SPREADSHEET ID HERE');

var sh = ss.getSheets()[0]; //if you keep your sheet tabs in the same place, you can select any sheet tab

var rg = sh.getDataRange().getValues(); //fetches all the data values on the sheet tab

var outString = '';

for(var row=0 ; row<rg.length ; ++row){

outString += rg[row].join(',') + ';\n'; //this section adds line returns to the rows in your data

}

return ContentService.createTextOutput(outString).setMimeType(ContentService.MimeType.TEXT); //returns the data to the app

}

BLOCKS

Note the work done with the spinner. In the Web.gottext block I replace the first item in the list with the “header” text i want for the spinner.

I use Jorg Kowalski’s development of my spin on resetting the spinner

SCREENSHOT

aia attached – should work using the spreadsheet and script I have set up, or create your own

Ai2GoogleSheetWebApp

AppInventor – Create Dynamic First List for Listpicker

Posted on October 1, 2017 by Metric Rat

Following on from my recent post on Dynamic Lists for Listpickers, I ventured a bit further.

Well I now have a rough version (and it is ugly!) that creates a dynamic list for the first list in a nested listpicker. This assumes a list of names or words in the master list, and that these are sorted alphabetically. The issue with creating such a thing is that, say for names, there are 26 letters that names could start with, but that the distribution of names is very uneven. In my sample list 3 letters took over 30% of the entire list. My aim was to present nested lists that could all be viewed without scrolling (between 10 and 12 items), but because of the above this is just not possible all the time. I only have the blocks here that create the first list for the listpicker, the A-D,E-H,etc. as the blocks probably need some optimisation before writing the whole thing out. But here goes: Continue reading →

AppInventor – Post Data to Google Sheet

Posted on October 1, 2017 by Metric Rat

Thought I would write this one up on here, can’t take any credit for it, as original idea posted on youtube (credits below), but if I have it here it is easier to grab and use when I need it.

I have previously worked up a solution using a Google Form to submit data to a google sheet from an AppInventor app, but this method uses a standalone google apps script to do the same, but without the baggage of the google form. We will need to: