Explore MIT App Inventor - App Inventor 2

State Geography Quiz with Map Component

Karen — Wed, 13 Jun 2018 14:49:58 +0000

This tutorial uses the Map and FeatureCollection components to make a quiz about the New England states. Users click on the state when prompted with the state name or state capital. This is an example of using a GeoJSON file to add clickable polygon information to a map.

Here is the tutorial.

Source Code

If you'd like to see the completed project in App Inventor, download the source code to your computer, then open App Inventor, go to the My Projects page, and choose Project | Import project (.aia) from my computer.

GeoJson

If you would like to download and view the GeoJson file used in this tutorial, click on this link.

Tutorial Version:

App Inventor 2

Tutorial Difficulty:

Intermediate

Tutorial Type:

Firebase Authentication in App Inventor Using Javascript

Karen — Fri, 06 Oct 2017 16:54:53 +0000

This tutorial is written by MIT Master Trainer Rich Interdonato.

The Firebase component that is provided by App Inventor is super useful, especially when you need to update any number of apps with fresh data. In addition to using Firebase as a datastore, you can also leverage its website authentication in your apps to take care of your user management needs. This means, sign-up, email verification, and login. What is more, all the user information is stored and maintained on Firebase’s servers, so the most difficult problems of user authentication are solved for you.

Firebase provides the javascript code that handles all the necessary steps to setup, and then log in, new and existing users. Read more about the details here. This javascript code can be included in a static HTML file, which you can then add to the apps you create with App Inventor, so long as you also incorporate a WebViewer component to process it for you, AND you make a few simple modifications to it so App Inventor can “look inside” the running javascript. All of this will be explained in the sections that follow. But first you must set up a Firebase account and set it to allow users to authenticate using an email and their password.

Set Up Firebase to use Email/Password Authentication

Setting up a datastore is really easy once you have a Firebase account. Once you create one and log in, there are only 4 steps required to use Firebase authentication.

Step 1

The first thing you must do to use Firebase authentication is to create a project. This can be completed at https://console.firebase.google.com/. Simply click on the Add project button and you will be presented with the Create a project dialog. Complete the dialog’s fields and then click on the CREATE PROJECT button.

Step 2

Second, click on the Add Firebase to your web app button that is shown in the image below:

Step 3

The Add Firebase to your web app dialog shows you all the necessary information that you will need to use Firebase’s website security in your App Inventor apps. This information includes:

apiKey
databaseURL
storageBucket
messageSenderId

These values are presented as comma delimited, key:”value” pairs, surrounded by curly braces {}. You will use this information as the value for the firebaseCredentials variable in the App Inventor Blocks Editor.

PLEASE NOTE: you can delete the authDomain and projectId key value pairs if you like because they are optional. However, you must remember the surrounding curly braces and the quotes around all the keys and values, as shown below:

	{
		"apiKey":"YOUR_apiKey_HERE",
		"databaseURL":"YOUR_databaseURL_HERE",
		"storageBucket":"YOUR_storageBucket_HERE",
		"messagingSenderId":"YOUR_messagingSenderId_HERE"
	}

Note that all the key/value pairs must have quotes around them. If you copy/paste from the Firebase window, you may have to add quotes. All of this information can be compressed into a single line and it will work just fine:

Step 4

Lastly you must enable the Email/Password SIGN-IN METHOD on Firebase’s Authentication page. This simply involves selecting the Authentication menu option (on the left) and then clicking on the pencil icon at the end of the Email/Password row as shown below:

Doing so will display the Email/Password dialog as follows:

After enabling the Email/Password Authentication, click SAVE and Firebase will then allow your website – and your App Inventor apps that use the FirebaseAuthenticator.html page (below) – to make use of the features and power of Firebase’s own security. And that is pretty awesome!

More information about fine tuning Firebase’s authentication can be found here.

Edit the Firebase Website Authentication HTML file (FirebaseAuthenticator.html)

This example file is almost an exact copy of the original one that can be found here. The changes that have been made are highlighted in yellow below. The reason the changes are necessary is that the WebViewer component understands some special, App Inventor only javascript that allows it to communicate with the javascript as it runs inside web pages. By using Firebase’s website authentication inside a WebViewer, App Inventor apps can show users a login page as if the app were a real website, and once the user is logged in, the WebViewer can tell the app that the user has been authenticated (or not).



<html>
<head>
  <meta charset=utf-8 />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Email/Password Authentication Example</title>

  <!-- Material Design Theming -->
  <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.orange-indigo.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>

  <!-- Firebase -->


<script src="https://www.gstatic.com/firebasejs/3.7.2/firebase.js"></script>
<script>
  // Initialize Firebase
  
  // Get the Firebase configuration from App Inventor via the WebViewer.WebViewString property
  var config = JSON.parse(window.AppInventor.getWebViewString());
  
  firebase.initializeApp(config);
</script>

  <script type="text/javascript">
    function tellAppInventor(message) {
        try {
            window.AppInventor.setWebViewString( message );
        } catch(e) {
            console.log("App Inventor Communication Error",e)
        }
    }
    
    /**
     * Handles the sign in button press.
     */
    function toggleSignIn() {
      if (firebase.auth().currentUser) {
        // [START signout]
        firebase.auth().signOut();
        // [END signout]
      } else {
        var email = document.getElementById('email').value;
        var password = document.getElementById('password').value;
        if (email.length < 4) {
          tellAppInventor('Please enter an email address.');
          return;
        }
        if (password.length < 4) {
          tellAppInventor('Please enter a password.');
          return;
        }
        // Sign in with email and pass.
        // [START authwithemail]
        firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
          // Handle Errors here.
          var errorCode = error.code;
          var errorMessage = error.message;
          // [START_EXCLUDE]
          if (errorCode === 'auth/wrong-password') {
            tellAppInventor('Wrong password.');
          } else {
            tellAppInventor(errorMessage);
          }
          console.log(error);
          document.getElementById('quickstart-sign-in').disabled = false;
          // [END_EXCLUDE]
        });
        // [END authwithemail]
      }
      document.getElementById('quickstart-sign-in').disabled = true;
    }
    /**
     * Handles the sign up button press.
     */
    function handleSignUp() {
      var email = document.getElementById('email').value;
      var password = document.getElementById('password').value;
      if (email.length < 4) {
        tellAppInventor('Please enter an email address.');
        return;
      }
      if (password.length < 4) {
        tellAppInventor('Please enter a password of 4 or more characters.');
        return;
      }
      // Sign in with email and pass.
      // [START createwithemail]
      firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        // [START_EXCLUDE]
        if (errorCode == 'auth/weak-password') {
          tellAppInventor('The password is too weak.');
        } else {
          tellAppInventor(errorMessage);
        }
        console.log(error);
        // [END_EXCLUDE]
      });
      // [END createwithemail]
    }
    /**
     * Sends an email verification to the user.
     */
    function sendEmailVerification() {
      // [START sendemailverification]
      firebase.auth().currentUser.sendEmailVerification().then(function() {
        // Email Verification sent!
        // [START_EXCLUDE]
        tellAppInventor('Email Verification Sent!');
        // [END_EXCLUDE]
      });
      // [END sendemailverification]
    }
    function sendPasswordReset() {
      var email = document.getElementById('email').value;
      // [START sendpasswordemail]
      firebase.auth().sendPasswordResetEmail(email).then(function() {
        // Password Reset Email Sent!
        // [START_EXCLUDE]
        tellAppInventor('Password Reset Email Sent!');
        // [END_EXCLUDE]
      }).catch(function(error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        // [START_EXCLUDE]
        if (errorCode == 'auth/invalid-email') {
          tellAppInventor(errorMessage);
        } else if (errorCode == 'auth/user-not-found') {
          tellAppInventor(errorMessage);
        }
        console.log(error);
        // [END_EXCLUDE]
      });
      // [END sendpasswordemail];
    }
    /**
     * initApp handles setting up UI event listeners and registering Firebase auth listeners:
     *  - firebase.auth().onAuthStateChanged: This listener is called when the user is signed in or
     *    out, and that is where we update the UI.
     */
    function initApp() {
      // Listening for auth state changes.
      // [START authstatelistener]
      firebase.auth().onAuthStateChanged(function(user) {
        // [START_EXCLUDE silent]
        document.getElementById('quickstart-verify-email').disabled = true;
        // [END_EXCLUDE]
        if (user) {
          // User is signed in.
          var displayName = user.displayName;
          var email = user.email;
          var emailVerified = user.emailVerified;
          var photoURL = user.photoURL;
          var isAnonymous = user.isAnonymous;
          var uid = user.uid;
          var providerData = user.providerData;

          if (emailVerified && !isAnonymous) {
                tellAppInventor( uid + ',' + email + ',' + displayName + ',' + photoURL );
            } else if (!emailVerified) {
                tellAppInventor( 'Please click the Send Email Verification button to confirm your account.' );
            }
          
          // [START_EXCLUDE]
//          document.getElementById('quickstart-sign-in-status').textContent = 'Signed in';
//          document.getElementById('quickstart-sign-in').textContent = 'Sign out';
//          document.getElementById('quickstart-account-details').textContent = JSON.stringify(user, null, '  ');
          if (!emailVerified) {
            document.getElementById('quickstart-verify-email').disabled = false;
          }
          // [END_EXCLUDE]
        } else {
          // User is signed out.
          // [START_EXCLUDE]
//          document.getElementById('quickstart-sign-in-status').textContent = 'Signed out';
//          document.getElementById('quickstart-sign-in').textContent = 'Sign in';
//          document.getElementById('quickstart-account-details').textContent = 'null';
          // [END_EXCLUDE]
        }
        // [START_EXCLUDE silent]
        document.getElementById('quickstart-sign-in').disabled = false;
        // [END_EXCLUDE]
      });
      // [END authstatelistener]
      document.getElementById('quickstart-sign-in').addEventListener('click', toggleSignIn, false);
      document.getElementById('quickstart-sign-up').addEventListener('click', handleSignUp, false);
      document.getElementById('quickstart-verify-email').addEventListener('click', sendEmailVerification, false);
      document.getElementById('quickstart-password-reset').addEventListener('click', sendPasswordReset, false);
    }
    window.onload = function() {
      initApp();
    };
  </script>
</head>
<body>
<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-header">

  <!-- Header section containing title 
  <header class="mdl-layout__header mdl-color-text--white mdl-color--light-blue-700">
    <div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid">
      <div class="mdl-layout__header-row mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--8-col-desktop">
        <a href="/"><h3>Firebase Authentication</h3></a>
      </div>
    </div>
  </header>
  -->

  <main class="mdl-layout__content mdl-color--grey-100">
    <div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid">

      <!-- Container for the demo -->
      <div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-desktop">
        <div class="mdl-card__title mdl-color--light-blue-600 mdl-color-text--white">
          <h2 class="mdl-card__title-text">Sign In or Sign Up</h2>
        </div>
        <div class="mdl-card__supporting-text mdl-color-text--grey-600">
          <p>Enter an email and password below and either sign in to an existing account or sign up</p>

          <input class="mdl-textfield__input" style="display:inline;width:auto;" type="text" id="email" name="email" placeholder="Email"/>
          <p/><p/>
          <input class="mdl-textfield__input" style="display:inline;width:auto;" type="password" id="password" name="password" placeholder="Password"/>
          <p/>
          <button disabled class="mdl-button mdl-js-button mdl-button--raised" id="quickstart-sign-in" name="signin">Sign In</button>
             
          <button class="mdl-button mdl-js-button mdl-button--raised" id="quickstart-sign-up" name="signup">Sign Up</button>
          <p/>
          <button class="mdl-button mdl-js-button mdl-button--raised" disabled id="quickstart-verify-email" name="verify-email">Send Email Verification</button>
          <p/>
          <button class="mdl-button mdl-js-button mdl-button--raised" id="quickstart-password-reset" name="verify-email">Send Password Reset Email</button>
          <p/>

          <!-- Container where we'll display the user details -->
          <div class="quickstart-user-details-container" style="display:none">
            Sign-in status: <span id="quickstart-sign-in-status">Unknown</span>
            <div>Authorization <code>currentUser</code> object value:</div>
            <pre><code id="quickstart-account-details">null</code></pre>
          </div>
        </div>
      </div>

    </div>
  </main>
</div>
</body>
</html>

Create an App Inventor App to Use Firebase Website Authentication

Designer

The Designer is really quite simple. There are only three components on Screen1: a WebViewer, a Notifier, and a Clock. There is also an included asset file, FirebaseAuthenticator.html.

WebViewer – loads the FirebaseAuthenticator.html file, and uses the javascript it contains to access Firebase’s website authentication system.
Notifier – displays alert messages to the user about the status of the login process, and reports when the user is successfully logged in.
Clock – periodically checks the status of the WebViewer’s javascript that handles logging in to Firebase.

You may notice that there are no Buttons or other components needed to start the login process from our App Inventor app. This is because the web page (FirebaseAuthenticator.html) has its own buttons to do that as part of Firebase’s ready-made login screen!

Blocks Overview

As you can see, the blocks for this app are also quite simple. There are only 3 variables, 2 event handlers, and 1 procedure needed to incorporate Firebase’s website authentication into an App Inventor app. Each will be explained in individual sections below.

Variable

The variables needed by the app are as follows:

firebaseCredentials – contains the information needed to connect to your Firebase database. Firebase expects these credentials to be submitted as a JSON string composed of your apiKey, authDomain, databaseURL, projectId, storageBucket, and messagingSenderId (see comment in the image above). All of these values can be found here on Firebase’s website, and the authDomain and projectId values are technically optional, but it doesn’t hurt to include them as well.
debugMode – used to set the location of the HTML file that is used by the WebViewer because App Inventor apps use different directories for development and running apps.
LIST_userId_email_name_photoUrl – holds the user credentials obtained after a user successfully logs in via the WebViewer component.
firstTime – used to test if the Clock timer is firing for the first time, to allow for a time lag when displaying the WebViewer on app start.

Screen1.Initialize

As soon as the app opens, the Screen1.Initialize event is triggered and the following occurs, in order:

The Clock1.TimerInterval property is set to 5000 milliseconds. This causes the Clock1.Timer event to fire every 5 seconds. This value can be adjusted based on your own needs and experience with the app, but the Firebase authentication process seems to work with this setting.
Based on the value of the debugMode variable, the directory that the app looks for the FirebaseAuthenticator.html is set so the app will work in both debug and run modes.
WebViewer1.WebViewString is set to the value of the firebaseCredentials variable, so that the WebViewer will have the necessary configuration to work with your Firebase instance. This information includes your apiKey, databaseURL, storageBucket, and messagingSenderId.
The WebViewer is instructed to go to its home page, which means load the FirebaseAuthenticator.html file.
The Clock1.TimerEnabled property is set to true, which starts the Clock1.Timer event firing.

Clock1.Timer

The first time the Clock timer goes off, we want to call WebViewer.GoHome to run the javascript code. Due to time lag, we can’t count on Screen1.Initalize to do this, so the 5 second time lag is enough to load the code. We only want this to happen the first time, so we’ll set firstTime to false and continue.

This event is where App Inventor repeatedly checks the state of the javascript code that is running in the WebViewer component. Each time the event is triggered, it checks to see if the WebViewer1.WebViewString is not empty and that it is different from the text in the firebaseCredentials variable. If so, then it checks to see if the text is “Email Verification Sent!”. If it is, then the app knows that the user is setting up an account and Firebase is waiting for the user to confirm their email address, so the app tells the WebViewer component to GoHome, where the rest of the login process can occur.

If the WebViewer1.WebViewString contains an “@” symbol, then this means that the login was successful, so the WebViewer.Visible and Clock1.TimerEnabled properties are set to false. Also, as soon as the user is authenticated by Firebase, the WebViewer1.WebViewString property contains a comma separated value list of the user’s userId, email address, user name, and photo URL, and this text is stored in the variable LIST_userId_email_name_photoUrl. Since the user has been authenticated, another procedure is called: AuthenticatedInitialize, and this is where you insert the code you want your app to run immediately after a user logs in. In short, your app really should START with the AuthenticatedInitialize event.

If the WebViewer1.WebViewString does not contain an “@” symbol, then this means that some other message has been sent from the javascript inside the FirebaseAuthenticator.html file, and it should be shown to the user. These messages are usually about incorrect passwords or user names.

Finally, if the WebViewer1.WebViewString was not empty and did not match the text in the firebaseCredentials variable when the Clock1.Timer event was triggered, it is reset to an empty string ("") so that the next time the Clock1.Timer event is triggered, it will only take action if the javascript running inside the FirebaseAuthenticator.html file has set it to some non-empty value.

AuthenticatedInitialize Procedure

The AuthenticatedInitialize procedure is where the App Inventor app really begins, once a user has been authenticated by Firebase. In our example, this means that the app changes the Screen1.Title property to "AUTHENTICATED USER" to remind you that the user’s credentials have been authenticated. It also displays a reminder to you in a Notification dialog, so that you remember to add your own blocks.

Conclusion

With 3 components, 2 events, and 1 procedure, we have been able to leverage Firebase’s website security infrastructure for an Android app created with App Inventor. This is enormously powerful, secure, and useful. Thank you Firebase for doing all the “heavy lifting” for us with your website authentication javascript, and thank you App Inventor for providing the WebViewer component with the ability to “look inside” any javascript that is running on an HTML page!

*One last pro-tip for all you App Inventors out there: make sure you set the debugMode variable correctly. While you are developing your app using App Inventor, it should be set to true. When you build your apk file, it should be set to false. If you set it incorrectly the app will display an error message about how the FirebaseAuthenticator.html file cannot be found – and nobody likes that. :)

Tutorial Version:

App Inventor 2

Tutorial Difficulty:

Advanced

Tutorial Type:

WebViewer

WebView Javascript Processor for App Inventor

Karen — Thu, 05 Oct 2017 19:56:34 +0000

This tutorial is written by Rich Interdonato, MIT Master Trainer.

App Inventor allows users to write powerful programs using blocks instead of “traditional” programming languages. It also allows advanced users to include traditional Java code in their apps by means of its new Extensions feature. What you might not know is that there is another, even older way for you to incorporate “traditional” programming into your apps. The technique involves using the WebViewer component as a javascript processor, and this blog post will show you how it can be done using a simple example. In it, an HTML file is sent input text from an App Inventor program, it reverses the text using javascript, and then it sends the result back to the App Inventor program as output that the app can use (show to the user in a Message Dialog).

Our example requires an HTML file that includes javascript that can reverse text. The file is included below, and the javascript command that reverses the text is highlighted in yellow. The javascript in this file is like the other javascript you might find on the Web, except in one way. It includes two special App Inventor Only functions, window.AppInventor.getWebViewString() and window.AppInventor.setWebViewString(). It is these two, App Inventor Only functions that allow your apps to communicate with the javascript that runs inside the WebViewer component. By using them creatively, you can leverage the vast number of javascript programs that are freely available on the Web, and some of them can be really useful.

For now, let’s keep things simple and create a file called javascriptWebViewProcessor.html. The complete text of the file follows:

HTML file (included as media/asset: javascriptWebViewProcessor.html)

<!doctype html>
<head>
<title>WebView Javascript Processor</title>
</head>

<body onload="processJavascript();">
<b>This page includes a javascript function that reverses text.</b>
<p>The javascript function incorporates a special App Inventor feature called <i>window.AppInventor.getWebViewString()</i>, which allows App Inventor apps to communicate with the WebViewer component's internal processing of javascript.
<p>This simple example shows how to use the <i>window.AppInventor.getWebViewString()</i> function to pass data to and from the WebViewer component, and thereby an App Inventor app.

<script>
    var result = new Date().toString();
    var appInventorInput = window.AppInventor.getWebViewString();
        function processJavascript() {
        if (appInventorInput.length > 0) {
            document.write( "WebView InputString received FROM app:
" + appInventorInput );
            result = appInventorInput.split("").reverse().join("");
            document.write( "<p/>WebView InputString sending BACK TO app:<br/>" +
            result );
        } else {
            document.write( "No WebView InputString set by app at: <br/>" + result );
        }
        window.AppInventor.setWebViewString( result );
    }
</script>

</body>
</html>

Designer

Once the javascriptWebViewProcessor.html has been created, make a new App Inventor app called SimpleWebviewerJavascriptProcessor, and upload the HTML file as an app media asset. Add a HorizontalArrangement with a:

TextBox named StringToBeProcessedByJavascriptFile
Button named btnProcess

Also, using the default names and properties for each, add a:

WebViewer component
Notifier component
Clock component

Blocks Overview

As you can see, the blocks for this app are quite simple. There are 4 variables and 3 event handlers. Each will be explained in individual sections.

Variables

processingIntervalMillis: sets the frequency of calls to the WebViewer component from the App Inventor app
debugMode: used to specify the location of the HTML file that is used by the WebViewer because App Inventor apps use different directories for development and running apps
currentProcessingDurationMillis: tracks the amount of time (in milliseconds) that the WebViewer has been working as it processes the javascript in the HTML file
maximumProcessingDurationMillis: controls the number of milliseconds that the app will wait for a reply from the WebViewer component before determining that it is unresponsive

Screen1.Initialize

This block sets the WebViewer1.HomeUrl property to either file:///mnt/sdcard/AppInventor/assets/javascriptWebViewProcessor.html (when debugMode is TRUE), or file:///android_asset/javascriptWebViewProcessor.html (when debugMode is FALSE). It then sets the Clock1.TimerInterval property to the value of processingIntervalMillis (50ms), and disables the Clock1 component so it does not start triggering events as soon as the app starts.

btnProcess.Click

The javascriptWebViewProcessor.html file processing begins once the user activates the app. This activation is captured by the btnProcess.Click event handler block, which sets the WebViewer1.WebViewString component to the value of the StringToBeProceesedByJavascriptFile.Text. Then the WebViewer1.GoHome procedure is called, which causes the WebViewer to load the javascriptWebViewProcessor.html page, thereby starting the javascript processing. Once the javascript processing has begun, the app needs to monitor progress, and so the Clock1.TimerEnabled property is set to TRUE.

Clock1.Timer

As soon as the Clock1.TimerEnabled property is set to TRUE, the Clock1.Timer event begins to fire at an interval set by the processingIntervalMillis value in the Screen1.Initialize event. Each time the Clock1.Timer event is triggered, the app first checks to see if the value of the WebViewer1.WebViewString is the same as the StringToBeProcessedByJavascriptFile.Text. If they are the same, this means that the WebViewer component is still processing the javascript, and it increments the currentProcessingDurationMillis by the processingIntervalMillis and then checks to see if the new currentProcessingDurationMillis value is greater than or equal to the maximumProcessingDurationMillis value. If it is, the app changes to value of the WebViewer1.WebViewString property (by concatenating adds the text “ TIMEOUT” to the current value of StringToBeProcessedByJavascriptFile.Text to make it different from the value of the StringToBeProcessedByJavascriptFile.Text, and thereby ensure that the next time the Clock1.Timer event is triggered, the first check will fail.

As soon as the first check fails (i.e. WebViewer1.WebViewString differs from StringToBeProcessedByJavascriptFile.Text), the app will reset the StringToBeProcessedByJavascriptFile.Text to an empty string (“”), set Clock1.TimerEnabled to FALSE, and then display a message to the user in a Message Dialog that includes the result of the javascript processing, as well as how long it took to do it. The output of the processing is available to the app in the WebViewer1.WebViewString property, which is set inside the javascript processing file. As a final “cleanup” action, the currentProcessingDurationMillis is reset to 0, so the next time the user clicks on btnProcess, the app will properly calculate the processing duration.

Conclusion

In this article, we have explored how the WebViewer component can be used to process javascript in your App Inventor apps. Our example was simple, but it demonstrated the fact that App Inventor can communicate with running javascript, and this provides you with a foundation for more advanced and useful javascript processing. There is a LOT of javascript code available on the web, and some of it can be used immediately by you to implement advanced features in your apps. In my next blog post, I will explore an advanced application of WebView javascript processing that you can use right away to freely make your apps much more secure. Until then, keep inventing!

Tutorial Version:

App Inventor 2

Tutorial Difficulty:

Advanced

Tutorial Type:

WebViewer

Hello Codi!

Karen — Tue, 12 Sep 2017 18:45:51 +0000

Building your first app: HelloCodi

Now that you've set up your computer and device, and you've learned how the Designer and the Blocks Editor work, you are ready to build the HelloCodi app. At this point, you should have the Designer or Blocks Editor open in your browser, and either an Android device or an Android emulator connected to the Blocks Editor. (See Setup Instructions for App Inventor 2 if you do not have these things running.) Choose “Start a New Project” from the Projects menu and name it HelloCodi.

HelloCodi: tap the bee, hear the bee buzz!

HelloCodi is a simple app that you can build in a very short time. You create a button that has a picture of Codi the bee on it, and then program the button so that when it is clicked the phone will make a buzzing sound.

To build HelloCodi, you'll need an image file of Codi the bee. Download these files to your computer by clicking the following links. To download: after clicking a link, right click on the image and select "Save As." Save the file onto your desktop or downloads folder, or anywhere that you can easily find it later.

Codi picture: codi.jpg (Right-click and Save)
Bee sound: Bee-Sound.mp3 (Right-click and Save)

Select components to design your app

The App Inventor Components are located on the left hand side of the Designer Window under the title Palette. Components are the basic elements you use to make apps on the Android phone. They're like the ingredients in a recipe. Some components are very simple, like a Label component, which just shows text on the screen, or a Button component (#1 left) that you tap to initiate an action.

Other components are more elaborate: a drawing Canvas that can hold still images or animations, an Accelerometer sensor that works like a Wii controller and detects when you move or shake the phone, components that send text messages, components that play music and video, components that get information from Web sites, and so on.

To use a component in your app, you need to click and drag it onto the viewer in the middle of the Designer. When you add a component to the Viewer (#1 below), it will also appear in the components list on the right hand side of the Viewer.

Components (#2 below) have adjustable properties. These properties change the way the component appears or behaves within the app. To view and change the Properties of a component (#3 below), you must first select the desired component in your list of components.

Steps for selecting components and setting properties

HelloCodi will have a Button component that displays the image of the bee you downloaded earlier. To accomplish this:

Step 1a. From the User Interface palette, drag and drop the Button component to Screen1 (#1).

Step 1b.To give the button the image of the bee, in the Properties pane, under Image, click on the text "None..." and click "Upload File..." (#2). A window will pop up to let you choose the image file. Click "Browse" and then navigate to the location of the codi.jpg file you downloaded earlier (#3). Click the codi.jpg file, click "Open", and then click "OK".

Step 2. Change the Button's Text property:
Delete "Text for Button1", leaving the Button's text property blank so that there is no writing over the bee image.

Step 3. From the User Interface palette, drag and drop the Label component to the Viewer (#1), placing it below the picture of the bee. It will appear under your list of components as Label1.

Under the Properties pane, change the

(2) Text property of Label1 to read "Touch the Bee". You'll see the text change in the Designer and on your device.
(3) FontSize to 30.
(4) BackgroundColor of Label1 by clicking on the box. You can change it to any color you like.
(5) TextColor to any color you like. (Note: if BackgroundColor and TextColor are the same, you will not be able to read your text!)

Here, the background color is set to aqua and the text color is set blue.

Step 4. Under Palette, click on the Media drawer and drag out a Sound component and place it in the Viewer (#1). Wherever you drop it, it will appear in the area at the bottom of the Viewer marked Non-visible components. Under the Media pane, Click Upload File... (#2) Browse to the location of the Bee-Sound.mp3 file that you downloaded earlier and upload it to this project (#3). Under the Properties pane, see that the Source property currently says None.... Click the word None... to change the Sound1 component's Source to Bee-Sound.mp3 (#4).

Programming with the Blocks Editor

So far you have been arranging your app's screen and components in the Designer, which is in a web browser window. To start programming the behavior of the app, you need to go to the Blocks Editor. Click the Blocks button in the upper right of your screen to go to the Blocks Editor.

Once you have the Blocks Editor in front of you, continue to the next step to start programming your app with blocks.

Playing the Sound

Step 1. On the left side of the Blocks Editor, click the Button1 drawer to open it. Drag and drop the Button1.Click block in the work area (the open area on the right).

Those mustard yellow blocks are called event handler blocks. The event handler blocks specifiy how the phone should respond to certain events: a button has been pressed, the phone is being shaken, the user is dragging her finger over a canvas, etc. when Button1.Click is an event handler.

Step 2a. Click the Sound1 drawer and drag the Sound1.Play block and connect it to the "do" section of the when Button1.Click block. The blocks connect together like puzzle pieces and you can hear a clicking sound when they connect.

The purple blocks are called command blocks, which are placed in the body of event handlers. When an event handler is executed, it runs the sequence of commands in its body. A command is a block that specifies an action to be performed (e.g., playing sound) when the event (e.g., pressing Button1) is triggered.

Your blocks should look like this at this point:

Now you can see that the command block is in the event handler. This set of blocks means; "when Button1 is clicked, Sound1 will play." The event handler is like a category of action (e.g., a button is being clicked), and the command specifies the type of action and the details of the action (e.g., playing a sound).

You can read more about the blocks and how they work here: Understanding Blocks in App Inventor 2.

Try It! When you click the button you should hear Codi buzz. Congratulations, your first app is running!

Note: there is a known issue with the Sound component on some devices. If you see an "OS Error" and the sound does not play - or is very delayed in playing, go back into the Designer and try using a Player component (found under Media) instead of the Sound component.

Packaging your app

While your device (emulator or phone/tablet) has been connected to App Inventor, your app has been running in real time on your device. If you disconnect the emulator/phone/tablet from the Blocks Editor, the app will vanish. You can always make it return by reconnecting the device. To have an app running without being connected to App Inventor, you must "package" the app to produce an application package (apk file).

To "package" the app to your phone or to send to someone else, click the Build tab at the top of the screen. Under Build, here are two options available for you to choose from:

1. App (provide QR code): You can generate a Barcode (a QR Code), which you can use to install the app on a phone or tablet that has a camera, with the aid of a barcode scanner, like the ZXing barcode scanner (freely available in Google Play).

Note: this barcode works only for your own device because it is associated with your Google account. If you want to share your app with others via barcode, you'll need to download the .apk file to your computer and use a third-party software to convert the file into a barcode. More information can be found here.

2. App (save to my computer): You can download the app to your computer as an apk file, which you can distribute and share as you like by manually installing it on other devices. (sometimes called "side loading".

Review

Here are the key ideas covered so far:

You build apps by selecting components (ingredients) and then telling them what to do and when to do it.
You use the Designer to select components and set each component's properties. Some components are visible and some aren't.
You can add media (sounds and images) to apps by uploading them from your computer.
You use the Blocks Editor to assemble blocks that define the components' behavior
when ... do ... blocks define event handlers, that tell components what to do when something happens.
call ... blocks tell components to do things.

Scan the Sample App to your Phone

Scan the following barcode onto your phone to install and run the sample app.

Or download the apk

Download Source Code

If you'd like to work with this sample in App Inventor, download the source code to your computer, then open App Inventor, click Projects, choose Import project (.aia) from my computer..., and select the source code you just downloaded.

Next steps

Now that you know the basics of how App Inventor works we recommend you:

Complete additional Tutorials.
Review the User Guide for App Inventor 2.
Join the User Discussion Forum.
Read the guide to Understanding Blocks .
Or, if you've been using the emulator and want to start using your phone, you can set up your Android device to build apps.

Something not working right? Visit the troubleshooting page, or check the App Inventor User Forum for help.

Tutorial Version:

App Inventor 2

Tutorial Difficulty:

Basic

LEGO EV3 Color Search

Karen — Tue, 07 Mar 2017 01:04:15 +0000

This tutorial shows you how to build a mobile app that instructs an EV3 LEGO robot to search for a certain color on a white surface bordered by black. The user can pick one color out of red, green, blue, or yellow for the robot to search. The robot will search across the white surface and turn around if it gets to the black border. Here is a demonstration video.

Go to tutorial.

Tutorial Version:

App Inventor 2

Tutorial Difficulty:

Intermediate

Tutorial Type:

LEGO® EV3

Lego EV3 Pet Robot

Karen — Tue, 07 Mar 2017 00:59:58 +0000

This tutorial helps you to build an app that allows the user to instruct an EV3 LEGO robot to do certain maneuvers and actions through voice commands. The user can pick one of several commands: forward, backward (reverse), stop, forward slow, forward fast, disconnect, circles, right turn (turn right), left turn (turn left). The robot will follow the user’s voice commands and perform the action for half a second before prompting the user for another command. If the user provides no commands, the previous command will be executed until another command is registered.

Go to tutorial.

Tutorial Version:

App Inventor 2

Tutorial Difficulty:

Intermediate

Tutorial Type:

LEGO® EV3

LEGO ® EV3 Tilt-to-Drive Tutorial

Karen — Fri, 17 Jun 2016 15:13:19 +0000

This tutorial lets you make an app that drives around an EV3 LEGO robot by tilting a phone or tablet. Tilting forward makes the bot go forward, back --> back, right --> right, left -->left. A steeper pitch will make the robot drive faster… etc.

Go to tutorial.

Tutorial Version:

App Inventor 2

Tutorial Difficulty:

Intermediate

Tutorial Type:

LEGO® EV3

Photo Booth App

hal — Fri, 01 May 2015 02:28:06 +0000

This tutorial demonstrates how to develop a Photo Booth app. You’ll build an app that let’s you take pictures, assign pictures to canvases and share pictures via email.

Go to Photo Booth app

Tutorial Version:

App Inventor 2

Tutorial Difficulty:

Intermediate

Tutorial Type:

Camera

Oh My Spikes

hal — Sat, 06 Sep 2014 16:38:08 +0000

This tutorial by Saj Dutta shows how to create a complete game from scratch. The game is variant of the popular spikes games and uses App Inventor sprites.

Go to tutorial

Tutorial Version:

App Inventor 2

Tutorial Difficulty:

Advanced

Tutorial Type:

Game

Sharing Component: send files and text with the app of your choice

shay — Tue, 22 Apr 2014 16:02:53 +0000

In this 3-minute video, App Inventor Developer José Dominguez shows you how to use the File Sharing component to share text and/or files from your App Inventor app to any capable service on your device (e.g. Gmail, Twitter, G+, WhatsApp, Messaging, etc.).

Tutorial Version:

App Inventor 2

Tutorial Difficulty:

Intermediate

Tutorial Type:

File Sharing