Fullscreen HTML5Med Res (??MB)HTML4

Making Android Apps with App Inventor The Android logo is Copyright Google Inc. App Inventor is a free, cloud-based tool that lets you make your own Android apps. It’s maintained by MIT and is run through most standard web browsers. Roderick Wall shows you how it can be used to make a simple TDR (time domain reflectometry) calculator for your phone, which can help with testing electrical cables for faults. By Roderick Wall T he Massachusetts Institute of Technology (MIT) in the USA has released a free “App Inventor”. This allows you to use blocks to design applications that run on Android phones and tablets. I used it to create a TDR (time domain reflectometry) calculator, which calculates the distance to a fault in a transmission line, as in the TDR Dongle project from December 2014 (siliconchip.com.au/Article/8121). You can download my Silicon Chip TDR Android calculator app from siliconchip.com.au/Shop/6/5733 – see the end of this article for hints on how to install it on a phone or tablet. Building an App I used the following steps to design and create the TDR application. You can use a similar procedure to make your own custom Android application. App Inventor is a cloud-based tool, which means you can build applications right in your web browser. The website offers all the support you need to learn and how to develop basic applications. Start by opening the following link in your browser: https://appinventor.mit.edu/explore/ get-started MIT also has an App Inventor Community forum where you can ask ques- tions about your project. See https:// appinventor.mit.edu/explore/library While designing your project, if you run into a problem, try doing a Google search like “App Inventor How to X” (where X is replaced with your query) for quick answers to your questions. There is lots of information on how to use App Inventor on the internet. Fig.1 shows the first window of the MIT App Inventor. To start a new project, click “My Projects” and select “Start new project”. Note that you can download a source code file for the project (with a .aia file extension) that can be shared with your friends. It is a good idea to use this method to View your projects Start new project Provides a .aia file of your current project which can be shared Fig.1: starting a new project in App Inventor is quite simple and the interface isn’t as complex as most programming IDEs. 74 Silicon Chip Australia’s electronics magazine siliconchip.com.au Adds another screen Change screens in the Designer window Components Select the device the application will run on Generate Blocks code Design and move components onto the phone screen Fig.2: the App Inventor main window is where most of the work happens. It is important to familiarise yourself with the Palette panel at the far left. save your project often, in case something goes wrong. Be careful with the delete button. If you delete a control in the Designer window, it will also delete the code blocks that were attached to it in the Blocks window. There is no way to undo or redo in App Inventor. After you provide details of the device your application is optimised for, look at the two buttons at the top right of the window (see Fig.2). The “Designer” button goes to the screen where you can move and drag components onto the phone screen. The “Blocks” button goes to a screen where you can generate the code blocks for the project. Fig.3 shows the components that are used to design the TDR Calculator application. This was done by dragging components from the left side of the Designer window onto the phone screen. You can add a component later by dragging it into a space between two components which are already on the screen. There is a list of the components and their properties on the right side of the Designer window. You can edit the properties of each component as required for your project, including customising their names. As I have selected Screen1 here, the properties for components on Screen1 are displayed. For the TextBox components for RefTime, VelocityFactor, Result1 and Result2, I have set the “NumbersOnly” property so that only numbers can be entered in those fields. Tips and tricks: • Enter the screen title into the Screen Property Title box, not in the About Screen box. Button Label Invisible labels that are used in the Blocks code Set Set Notifier Set Invisible spacer TextBox App icon Load files from PC Fig.3: in the Designer window, elements are dragged & dropped from the User Interface (UI) box at left onto the screen/ viewer. Placed objects are then listed under the Components/Media panel at right. siliconchip.com.au Australia’s electronics magazine February 2021  75 Select Media Drag onto screen Sound1 is selected Fig.4: selecting the Media sub-panel at left lets you add your own sound/video files etc to your application. • The two non-visible Notifier components are used to notify that the entered Reflection time and/or Velocity Factor data was not valid. • Three invisible labels (Result1, Result2 and LabelFLAG_T_F) are used by the Blocks code to store calculation results and status. Do not select the property “Visible” setting for these three components. However, they can be made visible while troubleshooting your code to see what the results are. Sounds After selecting “Media” components (see Fig.4), drag the two non-visible sound components onto the screen. Select the Sound1 component, and in the property window, select the BlopMark.mp3 sound file after uploading it from your computer. Do the same for the Sound2 component, but this time select SoundStart.mp3. Making the block code Fig.5 shows some of the code blocks used to build the app, not yet put together. You drag the generic blocks on the lefthand side of the window into the main part of the window to add them. Fig.6 shows the blocks once they have been put together to form the code needed to drive Screen1 in the TDR App. When the Calculate button is pressed, first the LabelFLAG_T_F status flag is set to “F” (false). Both the Reflection Time and Velocity Factor inputs are checked to ensure that they have been entered and are within the valid ranges. If there is an error, the “LabelFLAG_T_F” is set to “T” (true) and a notification is sent to the user. It then checks to see if LabelFLAG_T_F is “F”, indicating that there was no error. It then divides Reflection Time (RefTime) by 1,000,000,000 (one billion) to convert nanoseconds 2 Control Empty space 3 Logic 1 2 3 All these smaller blocks are combined together to form the larger block below (not all are labelled). The dashed lines indicate what block fits where. 4 4 VelocityFactor 1 BtnCalculate This is then updated with some math blocks. Fig.5: in the Blocks window, built-in procedures like logic, math, variables etc are selected from the left-most menu and dragged onto the Viewer. These pieces can then be combined into more complex nodes performing multiple functions. Blocks are combined based on their shapes and what open space they have. 76 Silicon Chip Australia’s electronics magazine siliconchip.com.au Fig.6: part of the Blocks screen for the TDR (time domain reflectometer) calculator. Most of the program is made from conditionals, and some basic programming knowledge can help to understand it, but it is not required. Main program Check if the velocity factor is equal to 0, less than 1 or greater than 100, if so display and set an error (“Invalid Data”) otherwise continue the program. Error flag (initially set to false) Check if the reflection time is equal to 0, less than 1 or greater than 10 digits long, if so display and set an error otherwise continue the program. Play Sound1 (1) Convert reflection time from nanoseconds to seconds (2) Convert velocity factor from percentage to decimal value. This is then multiplied by the reflection time and the speed of light which gives us the distance to the reflection point and back (3) Divide the result by two to get the distance to the reflection point (in metres) (4) If there’s an error clear the final result into seconds. The Velocity Factor is divided by 100 to convert it from a percentage to a decimal, eg, 75% becomes 0.75. To calculate the distance to the reflection point and back, the Velocity Factor is multiplied by the Reflection Time and the speed of light (C). Result2 is divided by two to obtain the distance to the reflection point in the transmission line where the fault has been located (see Fig.6). You can also add and view comments in the code. Right-click on the background and select “Show All Comments” to see them. To add a comment, click on the question mark (?) and then on the block, and write a comment for it (see Fig.7). Right click on the Viewer background to open this menu Click the “?” to add comments Show and hide all comments Fig.7: comments can be added to sections of a program by clicking the question mark (?) symbol on blocks. Generally, comments are useful if you need to come back to the program months later or for describing complex functions. siliconchip.com.au Australia’s electronics magazine February 2021  77 Button Image Invisible labels acting as spacers Objects can be made visible or invisible Fig.8: Labels can be set to invisible and then used to help separate other interface elements. Fig.8 shows the second screen (Screen2) in this application. To add a screen, click the “Add Screen” button at the top left of the window (see Fig.2). Click “OK” to accept the “Screen2” name, or give the screen a name and click OK. Add the required components for Screen2 as shown, and edit their properties as required. Next, select “Connectivity” components and move (drag) the ActivityStarter components onto the phone screen (Fig.9). These will be shown as non-visible components. ActivityStarter components are used in Screen2 Blocks code to go to the Silicon Chip website. Fig.10 shows the Blocks code for Screen2 and what it does. Note that there is a build problem with the website address being swapped, but works correctly when set up as shown. When the application has been tested in App Inventor and is complete, the project .apk file can be built and downloaded onto your computer or Android phone. As shown in Fig.11, click “Build” and select “App (store .apk to my computer)” to download onto your computer. Or select “App (provide QR code for .apk)” to get the download address to paste into the phone browser. Instead of using the QR code to download the application onto an Android phone, you can copy the download address that is under the QR code into your phone browser and download it. Before you can install the app, go to phone settings and then under Security, set the phone to allow the applications to be installed from Unknown Sources. Then use a File Manager to open the .apk file to install the application. Once the application has been installed, do not forget to go back and disable installation from Unknown Sources. Uploading your app to the Google Play Store After having finished developing Fig.9: the ActivityStarters are used, in this case, to go to a website. ActivityStarter Located in the Connectivity dropdown menu 78 Silicon Chip Australia’s electronics magazine siliconchip.com.au your application, you need a way for other people to use it. The best way to do this is to publish your application on Google Play Store. This is quite an extensive task, involving many steps. But once you submit your application to Play Store, it will be easy for other people to install it. The following web page describes the steps to upload your application to the Play Store: https://techzillo. com/publish-android-app-googleplay-store/ As listed on that page, the main steps are: 1. Sign up for Play Publisher 2. Add information about your app 3. Upload your app’s APK file 4. Set a content rating for your app 5. Add pricing and distribution information 6. Publish your app Each of these steps has up to a dozen sub-steps. But the overall, the procedure is straightforward. Google Play Publisher is used to publish the application onto Play Store. You can sign up for this at https://play.google.com/ apps/publish/signup/ It costs around US $25. Search in the App Inventor community Forum for “Play Store” and “bundle” for more information, as you will not be using Android Studio to create your application. You can find dozens of tutorials on other features of MIT App Inventor at https://appinventor.mit.edu/explore/ SC ai2/tutorials Fig.10: this is the code for ActivityStarter shown in Fig.9; it simply goes to the listed website when one of the buttons are pressed. You also have a back button to return to the original screen. Generate a QR code to download the APK from, or you can go directly to the provided hyperlink Or you can generate the APK directly. Fig.11: once you’ve built the app then you can generate the APK file which is used to install it. siliconchip.com.au Australia’s electronics magazine February 2021  79