IS2023 Mobile Application for Business IS2023 Mobile Application for Business

Tutorial 1 HelloPurr  Click the [Link] file, click "Open,” and then click "OK.”

Gentle try on MIT App Inventor 2

Part I: Getting started on the first app -- HelloPurr

Step 1: Start Chrome or Firefox

Step 2: On Chrome, go to the website: [Link]

 Sign in with your Google account.

 If you don’t have a google account, please apply one.

Step 3: Follow the instructions for the Terms of Agreement.

Step 4: Download the two files: [Link] and meow.mp3.

 Go to IS2023 on Canvas in Week 1 to download the two files to desktop.

Step 5: At the upper left of your Chrome page, click “New Project,” enter the project name “HelloPurr” (with
 Change the Button's Text property: Delete "Text for Button1", leaving the Button's text property blank
no spaces), then click OK.
so that there is no writing over the kitty's face. Your Designer should look like this:
Step 6: App Design - Adding the components:

 Adding the cat:

 In Palette, drag and drop Button as (#1) to the Viewer.

 (If the entire kitty picture is not showing up, you can fix this by setting the Height and Width
properties of the button to "Fill Parent.” To do this, click on the Button component, go to the right-
hand Properties pane, scroll down to the very bottom to where it says Width and click on the word
"Automatic..." to activate the drop-down list. Choose "Fill Parent.” Do the same for the Height
property.)

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

o Under the Properties pane.

 Change the Text property of Label1 to read "Pet the Kitty" (#2). You'll see the text change in
the Designer and on your device.
 Change the FontSize of Label1 to 30 (#3).
 To make the button have an image of a cat, in the Properties pane, under Image,
 Change the BackgroundColor of Label1 (#4), you can change it to any color you like.
 Click on the text "None..." and click "Upload New…”. A window will pop up to let you choose the  Change the TextColor of Label1 (#5) to any color you like. Here, the background color is set
image file. to blue, and the text color is set to yellow.
 Click "Browse" and then navigate to the location of the [Link] file you downloaded earlier.

Department of Information System, City University of Hong Kong pg. 1 Department of Information System, City University of Hong Kong pg. 2

IS2023 Mobile Application for Business IS2023 Mobile Application for Business

PART II: MAKING THE SOUND PLAY

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

 Adding sound
 From the Media palette, drag and drop the Sound component to the Viewer (#1), it will appear
Step 2. Click the Sound1 drawer and drag the [Link] block and connect it to the "do" section of the
in the non-visible components.
when [Link] block. The blocks connect together like puzzle pieces, and you can hear a clicking sound
 In the Properties window, add Source file 1.mp3 to Sound1. 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. Your blocks should look
like this at this point:

Try It! When you click Kitty on Emulator/Phone, you should hear the kitty meow. Congratulations, your first
app is running!

Department of Information System, City University of Hong Kong pg. 3 Department of Information System, City University of Hong Kong pg. 4
IS2023 Mobile Application for Business IS2023 Mobile Application for Business

PART III. CHALLENGE! MAKE THE CAT PURR

The challenge is to have the cat purr when the button is clicked. Go to the Blocks Editor and open the
Sound1 drawer and drag the [Link] block and place it under the [Link] block.

Part IV: How to Test Your App Using MIT App Inventor 2

YouTube Video: [Link]

Testing your app is an essential part of the development process in MIT App Inventor 2. It allows you to ensure
that your app is functioning correctly before packaging and sharing it. Here's how to get started.

Step 1: Open Your Project in MIT App Inventor 2

First, make sure you have your project open in MIT App Inventor 2. If you haven't already, go to the MIT App
Inventor website and log in to access your project.

Step 2: Choose Your Testing Method

You have several options for testing your app:
1. Connect with AI Companion: Test your app in real-time on a connected device.
The [Link] block has an open slot, which means you need to plug something into it to specify 2. Emulator: Test your app on a computer with an Android emulator.
more about how the behavior should work. Here, we want to specify the length of the vibration. Numbers
are calculated in thousandths of a second (milliseconds): to make the phone vibrate for half a second, we
need to plug in a value of 500 milliseconds. Step 3: Using the AI Companion
1. To test your app on a real device using the AI Companion:
In the Built-In palette, go to the Math drawer, drag the number block and place it at the socket of 2. Install the MIT AI2 Companion App: On your Android device, go to the Google Play Store and
the [Link] . download the "MIT AI2 Companion" app.
3. Connect Your Device: In MIT App Inventor, click on the "Connect" menu and select "AI Companion".
4. Enter the Code or Scan QR: A barcode and a six-character code will appear on your screen. On your
device, open the MIT AI2 Companion app, and either:
i. Enter the six-character code manually, or
ii. Use the "Scan QR code" button to scan the barcode on your screen.
iii. Your app should now appear on your device.

Step 4: Using the Emulator

To test your app using the emulator:
1. Start the Emulator: In MIT App Inventor, click on the "Connect" menu and select "Emulator". It may
take a couple of minutes for the emulator to start.
2. Wait for Connection: Once started, the emulator will connect automatically to MIT App Inventor, and
After you place the number block, click the number "0". It highlights the number in black: type "500" with your app will load.
your keyboard.

Note: the vibrate function will not do anything on an emulator or on a tablet! It ONLY works on a physical
phone.

Department of Information System, City University of Hong Kong pg. 5 Department of Information System, City University of Hong Kong pg. 6

IS2023 Mobile Application for Business IS2023 Mobile Application for Business

Step 5: Interact with Your App Part V. Installing Android Studio and Running the Emulator
Once your app is running via any of the methods above:
YouTube: [Link]
 Interact with your app as if it was installed on your device.
 Test all features and inputs to ensure they respond correctly. Android Studio is the official Integrated Development Environment (IDE) for Android app
 Make note of any issues or bugs to address back in the App Inventor workspace. development, based on IntelliJ IDEA. Below is a guide to help you install Android Studio and run
the Android Emulator.
Step 6: Make Adjustments and Re-test
If you find any issues: Step 1: Download Android Studio
 Disconnect your testing session. i. Go to the Android Studio download page.
 Make the necessary changes to your blocks or components in MIT App Inventor. ii. Click on the "Download Android Studio" button.
 Reconnect and test again to confirm that your changes had the desired effect. iii. Accept the Terms and Conditions and then click on the "Download Android Studio"
button again.
Step 7: Package Your App for Deployment iv. Save the installer file to your computer.
Once you're satisfied with your app's performance:
 Use the "Build" menu to package your app. Step 2: Install Android Studio
 Select "App (provide QR code for .apk)" to download the installable APK file.
i. Locate the downloaded installer file (e.g., [Link] for
Windows).
ii. Run the installer.
iii. Follow the installation prompts:
1. Choose an installation location for Android Studio or use the default suggested.
2. When asked to choose components to install, make sure "Android Virtual Device"
is checked.
3. Complete the installation.

Step 3: Run Android Studio

i. Open Android Studio.

ii. If this is your first-time running Android Studio, the setup wizard will guide you through
the installation of the Android SDK, any necessary SDK tools, and the creation of an
Android emulator.

Step 4: Configure Android SDK

i. When the welcome screen appears, go to "Configure" and select "SDK Manager".
ii. In the SDK Platforms tab, select the Android versions you'd like to develop for (the latest
version is recommended).
iii. Switch to the SDK Tools tab and ensure that you have the latest tools installed, including
the Android Emulator, Android SDK Platform-Tools, and Android SDK Build-Tools.
iv. Click "Apply" to download and install any updates or selected components.

Step 5: Create an Android Virtual Device (AVD)

i. Close the SDK Manager.

ii. Go to "Configure" again and select "AVD Manager".
iii. Click on "Create Virtual Device".
iv. Choose a device definition from the list (e.g., Pixel 4) and click "Next".

Department of Information System, City University of Hong Kong pg. 7 Department of Information System, City University of Hong Kong pg. 8
IS2023 Mobile Application for Business IS2023 Mobile Application for Business

v. Select a system image (e.g., the latest API level) and click "Next". If you haven't Part VI: Submit Your Work.
downloaded the system image, click "Download" next to the system image.
vi. Configure the AVD settings (e.g., RAM, VM heap, internal storage) as desired and click  Go to Build – App (Save .apk to my computer), the file will be saved automatically to Computer –
"Finish". Downloads.
 Go to Project – Export selected project (.aia) to my computer.
Step 6: Run the Emulator

i. In the AVD Manager, find the virtual device you just created and click on the green "Play"
button to launch the emulator.
ii. It may take a few moments for the emulator to start and boot up.

Step 7: Install Apps or Run Your Projects

i. With the emulator running, you can now install apps or run projects directly from Android
Studio by clicking the "Run" button in the toolbar and selecting the running emulator as
the deployment target.

Additional Tips

ii. Make sure you have enabled "Hardware Acceleration" for the emulator to run smoothly.
Instructions can be found on the Android Studio website or during the emulator creation
process.  Please submit the required files as follows:
iii. Always keep your Android Studio and SDK tools updated for the best performance and o Through the Canvas platform, locate the "Tutorial 1 Submission" assignment.
the latest features. o The deadline for submission is 23:59, one week after class. Be aware that any late submissions
will incur a penalty of 50% per day.
o Submit your source code in the .aia format, with the file named [Link].
o Include screenshots of the designer view and block’s view. These should be named
HelloPurr_DesignerView.jpg and HelloPurr_BlocksView.jpg, respectively.
o Ensure that your Student ID is clearly visible in both images.

Done!

Source:
[Link]
[Link]

Department of Information System, City University of Hong Kong pg. 9 Department of Information System, City University of Hong Kong pg. 10

IS2023 Mobile Application for Business IS2023 Mobile Application for Business

Tutorial 2 DrawSomething App  From the Palette's Layout category, drag out a HorizontalArrangement component and
place it under the buttons. Change the name of this component from
If you did not attend the session in Week 1, you will need to start with "Tutorial 1: "HorizontalArrangement1" to "ThreeButtons.”
HelloPurr" before attempting this tutorial.  In the Properties panel, change the Width of ThreeButtons to "Fill Parent..." so that it
fills the entire width of the screen.
Part I: Getting started on the second app -- DrawSomething
 Move the three buttons side by side into the HorizontalArrangement component. Hint:
Step 1: Download [Link] or [Link] file from Canvas and save the file to Desktop. You'll see a blue vertical line that shows where the piece you're dragging will go.

Step 2: Go to Firefox/Chrome Browser.

Step 3: On Firefox/Chrome, go to the website: [Link]

 Sign in with your Google account

 Go to Project to start a new project
 At the upper left of the page, click “New Project,” enter the project name
“DrawSomething” (with no spaces), then click OK.

Part II: Designer View

Step 1: Adding the color buttons:

 Drag a Button component onto the Viewer and change the button's Text attribute to Step 3: Adding the Canvas and wipe buttons:
"Red" and make its BackgroundColor red.
 Click on Button1 in the components list in the Viewer to highlight it (it might already be 1. From the Palette's Drawing and Animation category drag a Canvas component onto the
highlighted) and use the Rename... button to change its name from "Button1" to Viewer. Change its name to "DrawingCanvas". Set its Width to "Fill Parent" and set its
"ButtonRed.” Height to 300 pixels.

 Similarly, make two more buttons for blue and green, named "ButtonBlue" and 2. Add a Background Image to the Canvas. Click on the field containing "None..." next to
"ButtonGreen,” placing them vertically under the red button. BackgroundImage in the canvas's Properties panel. You can use the same [Link] file,
or you can use another image at your preference.

Here's how this should look in the designer, 3. From the Palette, drag the final button onto the screen, placing it under the canvas.
Rename this button component to "ButtonWipe" and change its Text attribute to
"Wipe".

You've now completed the steps to set the appearance of your app. Here's how this
should look in the Designer. Next, you'll define how the components behave.

Step 2: Line the buttons up horizontally by using a HorizontalArrangement component.

1|P a g e 2|P a g e
IS2023 Mobile Application for Business IS2023 Mobile Application for Business

Part III: Add Button Event Handlers create a number block with a value of 5. Here's how the touch event handler should
look:
Step 1. In the Blocks Editor,

1. Open the drawer for ButtonRed and drag out the when [Link] block.
2. Open the DrawingCanvas drawer. Drag out the set [Link] to block
(remember that the set block of components is a dropdown, so PaintColor is a selection
in the dropdown) and place it in the do section of when [Link].

3. Open the Colors drawer and drag out the block for the color Red and put it into set
[Link] to. (Clicking on a color block after it's been placed will display
a table of colors that you can select from.) Try out what you have so far on the Emulator or the phone. Click/Touch a color button. Now
click/touch the canvas on your, and your click/touch should leave a spot at each place you touch.
4. Repeat steps 2-4 for the blue and green buttons. Touching the Wipe button should clear your drawing.
5. The final button to set up is the Wipe button. Make a click event handler for ButtonWipe
by dragging when [Link] from the ButtonWipe drawer. From the Step 3. Add Drag Events
DrawingCanvas drawer, drag call [Link] and place it in the do area of the
[Link] block. [Link]
1. From the DrawingCanvas drawer, drag the when [Link] block to
the workspace.
The blocks for the buttons should look like this:
2. Also, from the DrawingCanvas drawer, drag the call [Link] block into
the do slot of the when [Link] block.
3. Drag a get prevX block to the open x1 slot in when [Link]. Do the
same for the other spaces: y1 should be get prevY, x2 should be get currentX, and y2
should be get currentY.

Here's the result:

Step 2. Add Touch-event Handlers

 In the Blocks Editor, open the canvas drawer and drag the when [Link]
block to the workspace. You may notice three argument names (highlighted in orange)
located at the top of the block x, y, and touchedSprite. These arguments are also known Test your work by trying it on the Emulator or Phone: drag your mouse around on the screen to
as local variables and can get accessed by using the get or set block found in the draw lines and curves. Touch the screen to make spots. Use the Wipe button to clear the screen.

Variables drawer and then selecting the proper variable in the drop drown menu.
Step 4. Creating Variables
 For this touch event, make the canvas draw a small circle at the point with coordinates
(x, y). Drag out a call [Link] command from the canvas drawer and Next, we will try to control the size of the dots drawn on the canvas is determined in the when
place it in the do section of when [Link]. [Link] event handler where call [Link] is called with r, the radius
of the circle, equal to 5. To change the thickness, all we need to do is use different values for r.
Use r = 2 for small dots and r = 8 for large dots.
 Move your cursor over the x variable (highlighted in orange). Find the get x block and
drag it into the corresponding x socket in the when [Link] block.
Start by creating names for these values:
 Do the same for the y variable.
 In the Blocks Editor, open the Variables drawer. Drag out an initialize global name to
 You'll also need to specify the radius of the circle to draw. 5 (pixels) is a good value for
block. Change the text that reads "name" to read "small.” A yellow warning exclamation
this app. Click in a blank area of the screen and type the number 5 followed by return to mark might appear on the block.
3|P a g e 4|P a g e

IS2023 Mobile Application for Business IS2023 Mobile Application for Business

 You need to fill in the socket with a number block that specifies the value for "small" -- 5. In the Blocks Editor, create a when ... Clicked event handler for ButtonSmall that changes
use 2 as the value. dotsize to be the value of small. To change dotsize use the set global dotsize to block
from the MyDefinitions drawer and plug in the global small block.
o To create the number block, type the number 2. A menu will appear, showing
you all the possible blocks that include "2" in their name. Click on the first one,
6. Make a similar event handler for ButtonBig. The two click event handlers should look like
which is the number 2 itself, and a number block with the value 2 should appear.
this:
Plug that into the initialize global small to block. The yellow warning mark will
disappear because the empty socket has been filled. (The second value listed in
the menu is the math block atan2 which you won't use here.)

 Similarly define variables big with radius 8, dotsize with radius 5.

Here's the finished program in the Designer:

and the Blocks Editor:

Step 5. Using Variables

Now go back to the touch event handler you set up in Part 1 and change the call to
DrawCircle block so that it uses the value of dotsize rather than always using 5.

In the Blocks Editor, open the Variables drawer. Pull out a get block and click on the
dropdown. You should see three new variables in the dropdown: small, big, and dotsize

 Go to the when [Link] event handler and replaced the number 5 block in
call DrawCircle with the get dotsize block from the Variables drawer.

Step 6. Change the values of Variables

1. In the Designer, drag a HorizontalArrangement component into the Viewer pane below
the DrawingCanvas component. Name the component "BottomButtons.”
2. Drag the existing ButtonWipe into BottomButtons.
3. Drag two more button components from the Palette into BottomButtons, placing them
next to ButtonWipe.
4. Name the buttons "ButtonBig" and "ButtonSmall", and set their Text to read "Big dots"
and "Small dots", respectively.
5|P a g e 6|P a g e
IS2023 Mobile Application for Business

Part IV: Submit Your Work. IS2023 Mobile Application for Business

 Use the snipping tool to capture the component’s view of your work. Please ensure
that your student ID and full name are clearly visible in the screenshot. Save the file
Tutorial 3 Kodular - Navigation Menu
as DrawSomething_ComponentsView_YourStudentID_YourFullName.jpg.

This tutorial will create an android app bottom navigation with Kodular and navigate between pages
 Use the snipping tool to capture the blocks' view of your work. Again, make sure your
with cool animation transitions.
student ID and full name are clearly visible in the screenshot. Save the file as
DrawSomething_BlocksView_YourStudentID_YourFullName.jpg.
This tutorial introduces:
 Submit both screenshots (Components View and Blocks View) to Canvas under the  Kodular [Link]
"Tutorial 2 Submission Link". Ensure that your files are labelled correctly with your  Space Component [Link]
student ID and full name to receive proper credit.  Vertical Scroll Arrangement
[Link]
 Deadline: You have one week from today to submit your work. Please be aware that  New Screens [Link]
late submissions will incur a penalty, deducting 50% of the total marks per day.  Icons [Link]
 Bottom Navigation [Link]
navigation/
 Animation Utilities [Link]

Done! Part I: Setting up App testing environment:

 Sign up/Login to Kodular website [Link]

Source: [Link]  Connect with your Android device with Kodular Companion App
[Link] [Link] , which
you downloaded from Google Play Store
 If you do not have an Android device, please refer to our Android Studio and emulator setup guide.

Part II: Input a project template.

Step 1: Download T3_template.aia file from the Canvas week 3 folder and save the file to Desktop.

Step 2: On Chrome/Firefox, go to the website: [Link]

 Sign in with your Google account.
 Import T3_template.aia project.

1|P a g e

7|P a g e

IS2023 Mobile Application for Business IS2023 Mobile Application for Business

Part III: Designer View  We can set up the Bottom menu using the blocks editor later, and we must find some
suitable icons for the Bottom menu. For example, create three menu items, List, Info, and
Next Screen.
Add Screen and Layout components. (You can find the icon from this website
[Link] and then download the
icon and upload it to the assets in Kodular)
 After importing the project .aia file, you will see the login screen. Let's add a new screen. Click
add new screen, name it as "Home". Later, we will add another screen called “Screen3.”  From Palette>Utilities, drag the Animation Utilities component; we will use this component
to make transition animation.

 Uncheck the Visible option for Vertical_Arrangement2 to make it invisible.

 From Palette>Layout>General, drag 2 Vertical Arrangement components.

 From Palette>Layout>Navigation, drag a Bottom Navigation component.

2|P a g e 3|P a g e
IS2023 Mobile Application for Business IS2023 Mobile Application for Business

Part IV: Blocks and Event Handlers  Create a variable list or array to store the vertical container.

Step 1 . In the Blocks Editor

 For initializing the block, we will set up the Bottom navigation menu. This block adds the item
for Bottom navigation, and you need to put the id, title, and image for the icon.
 When a user clicks on the Bottom Navigation Menu, first, set all the containers (Vertical
Arrangement) visible to false.

Icon image are in the Assets Manager under the Settings.

4|P a g e 5|P a g e

IS2023 Mobile Application for Business IS2023 Mobile Application for Business

 Then continue to extend this block, if user click of the 3rd menu item, it will open the  When we navigate back to this home screen from Screen3, we need to update the tab
other screen named Screen3, if the user clicked on the 1st or 2nd menu item, the blocks position to the state that the user requested on Screen3. That would be based on the result
will display the Red/Blue vertical arrangement accordingly, plus a little animated effect. variable from Screen3.

 Overshoot Horizontal: [Link]

utilities/
 Start a horizontal overshoot animation. If 'tension' is set to 0, you will not see an
overshoot animation. Then you will see just a simple deceleration animation. The
duration is set in millisecond. For example, 1 second = '1000'.

6|P a g e 7|P a g e
IS2023 Mobile Application for Business IS2023 Mobile Application for Business

 Add a new screen. Click add a new screen, name it as "Screen3.”  For initialize block, we will retrieve the value pass from the home screen. And we will set up
the Bottom navigation menu. This block adds the item for Bottom navigation. You need to
put the id, title, and image for the menu item.

 Add a Vertical Arrangement.

 Add a Label and put it inside the vertical arrangement, modify its Text property to "Please add
a new function of your own choice to this screen. You only need to design the UI components
— no need to implement its blocks."

 Set the Label’s Height and Width to Fill parent.

 As mentioned, you can freely customize this screen.

 Add Bottom Navigation

 When the user clicks on the Bottom navigation menu and selects item 1 or item 2, we will
close this Screen3 and return the selected Menu ID of the selected menu item.

8|P a g e 9|P a g e

IS2023 Mobile Application for Business IS2023 Mobile Application for Business

 Test run and debug your app! Tutorial 4 Kodular – Google Firebase Authentication
1. Navigate back to Sceen1, connect with your Android phone or an emulator.
2. Click the Login region at the bottom.
3. Input the username: Amy. This tutorial will explain the use of the "Firebase Authentication" component in your apps and its
4. Input the password: password. utilities.
5. Click the Login button.
6. Click OK to close the popup dialog box. This Tutorial Introduces:
7. Test your 3 bottom navigation menus.
 Firebase Authentication is a Google Firebase service that allows users to log in and sign
up for your app. You can have a login service for free with this component/service.
 Video: [Link]
Part V: Submit your work [Individual]
 Submit your snipped screenshots i.e., the component's view and block's view for all your Part I: Setting up App Testing Environment:
screens to Canvas "Tutorial 3 Submission Link".
 Include your student ID and Full Name on your design view’s screenshot. 1. To test this exercise on an emulator or on your Android device, you must first install
 Deadline: 1-week time the .apk file.
2. This can be done by dragging and dropping the .apk file directly into the emulator window.
Done! 3. Once the file is dropped, the emulator should automatically proceed with the installation.
4. Alternatively, scan the Kodular-generated QR code to download the .apk file to your
physical Android device.

Reference:
1. [Link]
2. [Link]

10 | P a g e 1|P a g e
IS2023 Mobile Application for Business IS2023 Mobile Application for Business

Part II: Input the Project Template: Part III: Firebase Configurations:

Download T4_sign_up_template.aia file from the Canvas week 4 folder, save the file to
Desktop. Add your Kodular APP to Firebase Console:

On Chrome/Firefox, go to the website: [Link] 1. First, go to your Firebase console . ([Link] )

1. Sign in with your Google account.
2. Import T4_sign_up_template.aia project. 2. Login / Signup with Google / Gmail account.
3. Please note that Screen1 contains both visible and hidden components, click on the eye
3. If you are a new user, click “Create a project” button.
icon to reveal the hidden components.

2|P a g e 3|P a g e

IS2023 Mobile Application for Business IS2023 Mobile Application for Business

If you are a returning user and have no existing projects, click 'Add project' button. If you have For new user:
existing projects, select one to continue working on it.
Create a project (Step 1 of 3).

Input a name for your new project, i.e., is2023.

Check the terms checkboxes and click the “Continue” button.

Example screenshot illustrating the reuse of an existing project.

4|P a g e 5|P a g e
IS2023 Mobile Application for Business IS2023 Mobile Application for Business

Note: If you've reached the project limit, please go back to choose one of your existing projects. Remember NOT to enable Google Analytics!

6|P a g e 7|P a g e

IS2023 Mobile Application for Business IS2023 Mobile Application for Business

You are now in your Firebase Project dashboard. On “Your apps” section, click the “Android icon” to select the Android platform.

Click on the Project Overview “settings” icon and select “Project settings.”

8|P a g e 9|P a g e
IS2023 Mobile Application for Business IS2023 Mobile Application for Business

We need to find the name of the Android package from our Kodular project. Paste it back to Google Firebase Console's “Android package name.”

Click the “Register app” button to move on to the next step.

Click the “Download [Link]” button (it contains keys and identifiers), then click the
Go back to Kodular, click on the setting icon, choose the Project settings>Publishing. “Next” button.

Give a name for the Package and then Copy that Package Name. i.e., [Link]

10 | P a g e 11 | P a g e

IS2023 Mobile Application for Business IS2023 Mobile Application for Business

Click “Continue to Console” button.

Then simply scroll down and click another “Next” button.

Now you are back to the “Project Settings” page with an “Android apps” created under “Your
apps” section.

12 | P a g e 13 | P a g e
IS2023 Mobile Application for Business IS2023 Mobile Application for Business

Import/Upload the [Link] to the Kodular Assets Manager folder. Enable login methods.

Note: The file name much be exactly as “[Link]”, no more no less! Back to the Firebase project, expand the Build menu, click Authentication, and click the “Get
started” button. (Or click the Sign-in method if you are a returning user.)

Under the “Sign-in method” tab, click the “Email/Password” methods.

14 | P a g e 15 | P a g e

IS2023 Mobile Application for Business IS2023 Mobile Application for Business

We will enable the Email/Password sign-in method. And then click the Save button. Back to Kodular to complete your Login system.

Check out the Users tab, and you have no registered users yet.

16 | P a g e 17 | P a g e
IS2023 Mobile Application for Business IS2023 Mobile Application for Business

Create the blocks for the btnSignUp event handler, NOT the btnLogin blocks. They may be These two blocks will handle the case where the sign-up process either succeeds or fails. If
hidden! successful, the user is redirected to another screen named 'Screen2'. Otherwise, a label and a
notification are used to inform the user that the sign-up has failed.

18 | P a g e 19 | P a g e

IS2023 Mobile Application for Business IS2023 Mobile Application for Business

Manually add a Screen2. Click Create Account to open the Create Account layout.
Email: should have the @ symbol and .com
Password: should have at least 6 chars.

You can now perform a live test of the sign-up process.

Export the Android App (.apk) file.

After successfully testing the sign-up feature on your phone/emulator, return to the Firebase
Project Console to check your Users' records. You should see a new user added.

20 | P a g e 21 | P a g e
IS2023 Mobile Application for Business IS2023 Mobile Application for Business

Now create the three blocks related to the login process. When the login button is clicked, the blocks will check whether the username and password input
fields are empty.
Look for the btnLogin component and open it’s drawer, to drag out the [Link] event handler.
If they are filled, the Firebase Authentication 'EmailPassword Login' block will be asked to verify
the credentials.

If the credentials are correct, the user is forwarded to 'Screen2' with a start value that includes
the user's email address.

If the login fails, an error message will be displayed using both a label and a notification.

22 | P a g e 23 | P a g e

IS2023 Mobile Application for Business IS2023 Mobile Application for Business

Live Test: Part IV: Submitting your work.

To submit your work for Tutorial 4, please adhere to the following instructions:
Fill the text boxes with your previously registered user email and password, then click the
'Login' button. 1. Capture screenshots of the following elements:

To fully test the authentication features, you should also try using an incorrect  The block's view on Screen1, ensuring that your name and student ID are clearly
email/password combination. visible.

 The Publishing tab in the Kodular project settings.

 The [Link] file content.

2. Proceed to the designated location on Canvas, specifically the "Tutorial 4 Submission

Link."

3. Upload the snipped screenshots to the provided location.

4. The deadline for submission is one week from today.

Done!

Reference:

[Link]

24 | P a g e 25 | P a g e
IS2023 Mobile Application for Business IS2023 Mobile Application for Business

Tutorial 5 – Simple Chat App [Kodular] Part II: Firebase Database Setup and Configurations.

This tutorial will explain using the Firebase Database, and ChatView components in your apps Step 2.1. Login to the Firebase console.
and their utilities. First, go to your Firebase console . ([Link] )

This tutorial introduces:

 The Firebase Realtime Database lets you store and sync data between your users in real
time. This makes it easy for your users to access their data from any device: web or mobile,
and it helps them collaborate. Whenever you update data in the Realtime Database, it
stores it in the cloud and simultaneously notifies all interested devices in milliseconds.
 Video: [Link]

Part I: Input a project template.

Step 1.1: Download the T5_SimpleChat_template.aia file from the Canvas week 5 folder and
save the file to Desktop. It is a Kodula project file.

Step 1.2: On Chrome/Firefox, go to the website: [Link]

 Sign in with your Google account.
 Import T5_SimpleChat_template.aia project.
 Try to explore all the screens (i.e., ScreeChat) and their components.
Select the existing APP project that you created in tutorial 4. (If you don't have it, create one.
Remember NOT to enable Google Analytics.)

1|P a g e 2|P a g e

IS2023 Mobile Application for Business IS2023 Mobile Application for Business

Note: If you've reached the project limit, please go back to choose one of your existing projects. Remember NOT to enable Google Analytics.

To create your APP, click on Add Project button, and complete ALL THE STEPS.

3|P a g e 4|P a g e
IS2023 Mobile Application for Business IS2023 Mobile Application for Business

Click on Realtime Database. Select Start in test mode. And click Enable.

Then click the Create Database button.

Highly recommended: If you want to further the testing for a more extended period, you may
edit the rules as follows.

Click Next.

Click on Publish to confirm the changes.

Now Firebase will allow users

To Store or Append – write.
Retrieve – Read.

5|P a g e 6|P a g e

IS2023 Mobile Application for Business IS2023 Mobile Application for Business

Click on the Data tab and copy the address of your Realtime Database. Part III. Connect your Cloudinary cloud to Kodular.

Step 3.1. Create a free Cloudinary account ([Link] ).

Step 2.2 Go back to Kodular, look for all the Firebase_Database components on ScreenChat and
then paste the copied URL to the Firebase URL field.

To connect your Cloudinary cloud to Kodular, retrieve the following fields from the Cloudinary
dashboard: Cloud name, API key, and API secret.

Fig. Screen1

7|P a g e 8|P a g e
IS2023 Mobile Application for Business IS2023 Mobile Application for Business

Step 3.2. Copy and paste the 3 items to ScreenChat’s Cloudinary component properties.

Fig 3.4. Through your app, a selected image will be uploaded to your Cloudinary account’s
Media folder.

Step 3.4 Live Test: Let’s chat.

Step 3.3. Review how the Cloudinary block for media management and the Firebase Database
block for data storage function together.
 To perform the test, please make sure to have at least two devices available. Both
installed the same .apk file.
 Please note that unlike Firebase Authentication, Firebase Database does work on Kodular
Companion.
 To test the messaging functionality, you will need to have two or three user accounts and
send messages between them.

To test this app, join our live demo! A comprehensive walkthrough of all the Blocks will be
provided.

9|P a g e 10 | P a g e

IS2023 Mobile Application for Business IS2023 Mobile Application for Business

For example, let’s consider a simple customer journey:

1. Amy, a new user who enjoys trying out new social apps, eagerly signs up for an account.
2. Initially, she discovers that there are no other users listed on the app. This leaves her
feeling a bit disappointed. [emotionally down ☹]
3. Amy decides to close the app temporarily and plans to give it another try later, hoping
that more users will join in the meantime.
4. When she logs in again at a later time, Amy notices that more users have signed up. This
brings a smile to her face.
5. Excited about the increased user base, Amy happily starts sending chat messages to make
new friends. [😊]

This customer journey illustrates Amy's initial experience, the minor setback she encounters,
and her subsequent positive reaction when she sees more users joining the app.
This Simple Chat app is an early prototype, but it covered all the MUST have requirements, and
Part IV. Firebase Database Management for the next development phase, we can target the SHOULD have and COULD have
After successful sign-up and chatting with your friends, you can go to your Firebase Project requirements:
Console to check your latest records.
1. Push notification/ in-app notification for new users’ invitations and new incoming
messages.
2. Double ticks to indicate read message.
3. Send a photo or send a video.
4. Add friends from phone contacts.
5. And many more…

We also provided some in-app reset buttons for you to easily reset different database records.

11 | P a g e 12 | P a g e
 IS2023 Mobile Applications for Business IS2023 Mobile Applications for Business

Tutorial 6 (1%)
Mobile App Wireframe

Intended Learning Outcomes:

Upon successful completion of this tutorial, students should be able to:

 Understand the mobile business ecosystems and mobile platforms for business innovations.
 Acquire knowledge and skills for designing mobile applications in various business sectors.

Overview

In this tutorial, we will explore the use of wireframes to design mobile applications. We will focus on one use
case and create a wireframe diagram to illustrate the mobile app solution.

List of available Mobile app wireframe design tools online:

1. WireGen – AI GPT wireframe generation:
[Link]
wireframe-generation

2. [From Video 1] Figma: A collaborative interface design tool that allows you to create and
share wireframes, designs, and prototypes.
[Link]
={partner_key}&link=homepage

Page | 1 Page | 2

IS2023 Mobile Applications for Business IS2023 Mobile Applications for Business
Use Case & Wireframe:
3. [From Video 2] Canva [Link]
4. Moqups: An online design and collaboration tool that allows you to create wireframes, mock- For this tutorial, you are required to use a storytelling style to present a use case and create UI
ups, and prototypes. [Link] wireframes to illustrate your mobile app solution. There is no page limitation for this part. The use
5. Axure: A design and prototyping tool that allows you to create wireframes, user flows, and case and wireframe should demonstrate how your suggested mobile app solution addresses the
interactive prototypes for web and mobile apps. [Link] identified pain point(s).
6. Sketch: A vector-based design tool that lets you create wireframes, designs, and prototypes
for web, mobile, and other digital interfaces. [Link] Example:
7. Adobe XD: A powerful design tool that allows you to create wireframes, designs, and
interactive prototypes for websites, mobile apps, and more.  Use Case: Amy, a new user who loves trying new social apps, signs up for an account on the
8. InVision: A digital product design platform that offers features for prototyping, collaboration, mobile app.
and design management.
9. Balsamiq: A user interface design tool that lets you create low-fidelity wireframes quickly and Wireframe:
easily.
10. UXPin: A design and prototyping platform that lets you create wireframes, designs, and  Screen 1: Welcome screen with a sign-up button.
interactive prototypes for web and mobile apps.  Screen 2: Sign-up form with fields for name, email, and password.
11. [Link]: A web-based platform that allows you to create high-fidelity wireframes and  Screen 3: Confirmation screen after successful sign-up.
prototypes for web and mobile apps.  Screen 4: Home screen with a friend list showing no friends.
12. Justinmind: A design and prototyping tool that lets you create wireframes, designs, and  Screen 5: Empty state screen with a message indicating no friends is available.
interactive prototypes for web and mobile apps.  Screen 6: Home screen after some time has passed, showing multiple users in the friend list.
 Screen 7: Chat screen where Amy can send a chat message to another user.

Submit your work [Individual]

 Submit your written report to Canvas "Tutorial 6 Submission Link."
 Deadline: 1 week time.

Page | 3 Page | 4
 IS2023 Mobile Applications for Business
Sample (Hand sketch is acceptable): IS2023 Mobile Application for Business

Part V: Questions about User Testing.

1. For the Simple Chat app, when conducting app testing, what would be the ideal test
environment settings? Specifically, how many devices or emulators are required to fully
test the app's functionality? Can I utilize Kodular Companion (connected to Companion)
and an Android Studio Emulator (with the installed .apk) to exchange chat messages
between them?
2. Should we separate the login and sign-up processes into two screens, namely Screen1
(Login) and ScreenSignUp? What are the advantages and disadvantages of this
approach?
3. Where can I locate the database record(s)?
4. If we want to implement a group chat function, could you please explain how it can be
done? This includes discussing the assumptions made, the components used, event
handling, logical steps, and any other relevant details.
5. During user testing, what types of bugs do you typically encounter?
6. After completing the user testing, what improvements would you suggest for this app?
Consider the following suggestions:
a. Can the app support sending messages to multiple friends?
b. Is it possible to create a group chat feature?
c. Can users send media files through the app?

Part VI: Submit your work.

 Answer the Canvas> Tutorial 5 Submission (Short Questions)
 Deadline: 1-week time

You are done!

Reference:

[Link]
[Link]

13 | P a g e

Page | 5

IS2023 Mobile Application for Business IS2023 Mobile Application for Business

Tutorial 7 Kodular - mCommerce Catalog Based on the given diagram, try to duplicate all the visual and non-visual components.

Extension: Dynamic Component Component type Palette group What you’ll name it Purpose
Label User Interface LabelDebug Display hidden data for debugging purpose
Horizontal Arrangement Layout>General Horizontal_Arrangement To group the following 2 buttons
In this tutorial, we will guide you through the process of creating an mCommerce catalog using 1
Kodular and the Dynamic Component extension. We will load product data from a list of Button User Interface ButtonLoadShoppingIte To load products from a list of dictionaries
dictionaries and create a user interface design for the catalog. Then, we will build the necessary m
blocks to make the catalog functional. Button User Interface ButtonReset To reset the Card View
Horizontal Arrangement Layout>General Horizontal_Arrangement To group the following 2 buttons
2
This tutorial will guide you through: Button User Interface ButtonLoad To load 1 demo item
Button User Interface ButtonSetProperties To set property of the loaded item, i.e., text,
• Developing an mCommerce catalog.
image
Vertical Scroll Arrangement Layout>General Vertical_Scroll_Arrange A place holder for displaying Card view
• Implementing Dynamic Components in your application. ment1 dynamically
Card View Layout>General Card_View1 A Card like holder for displaying product
• Employing Dictionaries effectively within your project. information
Image User Interface Image1 Product image
Activity 1: UI Design and Import Extension Label User Interface Label1 Product name
Text Box User Interface Text_Box1 Stock
1. No templates are provided. Button User Interface Button2 Price
2. Start by designing the user interface for your mCommerce catalog. You can use Kodular Dynamic Component Extension DynamicComponents1 To generate different static components
Designer to create a visually appealing layout for your catalog. dynamically
3. Include components such as labels, images, buttons, and dynamic components to display
the product information.
4. Arrange the components in a way that is visually appealing and easy to navigate for the
users.
5. Retrieve the Dynamic Component extension from the Week 7 folder on Canvas.
6. Incorporate the "[Link]" extension into your Kodular
project.
7. Insert the newly imported extension into your phone editor by dragging and dropping.

Department of Information Systems, City University of Hong Kong Department of Information Systems, City University of Hong Kong
IS2023 Mobile Application for Business IS2023 Mobile Application for Business

Activity 2: Constructing your blocks.  Configure the properties of the dynamically generated components—like text, images,
and button actions—in accordance with the corresponding product data.
 Import the Dynamic Component Extension by @yusufcihan to your Kodular project.
 Use the Dynamic Component extension to create the necessary blocks for your
eCommerce catalog.

 Implement the "Create" block from the Dynamic Component extension to generate
components dynamically, guided by the product data.

 You may download the “[Link]” from our Canvas Week 7 folder.

Department of Information Systems, City University of Hong Kong Department of Information Systems, City University of Hong Kong

IS2023 Mobile Application for Business IS2023 Mobile Application for Business

 The Reset button allows you to clear your CardView and start afresh. • Image URLs are sourced from the web:

 These two blocks function in the same way. [Link]

[Link]
[Link]?auto=webp&quality=75&crop=1.91:1&width=1200

[Link]
[Link]?q=90

 A 'for-each' loop is deployed to produce all the required CardView components derived
from the provided list of product data.

 Construct a list comprising dictionaries that encapsulate the product data.

Subsequently, dynamically generate the requisite components.

Department of Information Systems, City University of Hong Kong Department of Information Systems, City University of Hong Kong
IS2023 Mobile Application for Business IS2023 Mobile Application for Business

Activity 3. Test your app

 Before submitting your application, it's crucial to ensure that it's functioning as expected.
In this activity, we'll walk through some steps for testing your app.

1. Initial Run: Start by running your app on your preferred device. Check that it launches
successfully and that the initial screen appears as expected.
2. Interface Check: Make sure all buttons, images, and text are displayed correctly and
are legible.
3. Functionality Test: Try out all the features of your eCommerce catalog, try load and
set property, try load from a list and reset the cardview. Make sure all these actions
work as intended.
4. Dynamic Components Test: Ensure that the dynamic components are working
correctly. Check that the right data is displayed and that actions related to these
components work as expected.

 After you've thoroughly tested your app and you're confident that everything is working
as expected, you can proceed to submit it. Remember, it's better to discover and fix
bugs now than to have them found later by your users or during the evaluation process.
Good luck!

Activity 4. Submit your work!

1. Take screenshots of your component view and block view for all the screens in your
mCommerce catalog.

2. Submit the screenshots to the designated Canvas "Tutorial 7 Submission Link".

3. Make sure to include your student ID and full name on the design view's screenshot.

4. The deadline for submission is within one week.

Done!

Reference: [Link]
components-extension/80262

Department of Information Systems, City University of Hong Kong Department of Information Systems, City University of Hong Kong

IS2023 Mobile Application for Business IS2023 Mobile Application for Business

Tutorial 8 Kodular - mCommerce Search Activity 3. Test your app

Before submitting your application, it's crucial to ensure that it's functioning as expected.
This tutorial builds on the previous one, where we created an mCommerce catalog. In this In this activity, we'll walk through some steps for testing your app.
tutorial, we will add a keyword search feature, as well as the ability to insert, update and delete
products. We will also create previous and next buttons to allow users to navigate between You can watch a video named T8_demo that shows you an example of how to test your
products. invention.

In this tutorial, you will learn how to: After you've thoroughly tested your app and you're confident that everything is working
as expected, you can proceed to submit it. Remember, it's better to discover and fix bugs
• Implement a keyword search feature for your mCommerce catalog. now than to have them found later by your users or during the evaluation process. Good
luck!
• Add, edit, and remove Firebase records from your app.

• Create buttons to switch between the previous and next products. Activity 4. Submit your work!

1. Take screenshots of your component view and block view for all the screens in your
mCommerce search app.

Activity 1: Set up the project template and explore the app functionality. 2. Submit the screenshots to the designated Canvas "Tutorial 8 Submission Link".

1. You are provided with a complete app template named T8_Search_Template.aia. 3. Make sure to include your student ID and full name on the design view's screenshot.
2. On Screen1 and ScreenUpdateDB, please insert your Firebase URL, and Cloudinary API
4. The deadline for submission is within one week.
keys.
3. The app has two screens that you can switch between.
4. Test the app thoroughly and examine its blocks.
5. To learn more about the blocks, please check the slides for lecture 8.

Done!
Activity 2: Create buttons to switch between the previous and next products.
• You need to create two buttons that can show the next product and the previous Reference: [Link]
product. components-extension/80262
• You have to handle the situation when the user reaches the end or the beginning of the
product list.
• No more hints will be provided.

Department of Information Systems, City University of Hong Kong Department of Information Systems, City University of Hong Kong
IS2023 Mobile Application for Business IS2023 Mobile Application for Business

Tutorial 9 Kodular – Bar Chart Activity 3. Test your app

 Before submitting your application, it's crucial to ensure that it's functioning as expected.
In this activity, we'll walk through some steps for testing your app.
In this session, we'll be focusing on a critical visual feature of any data-driven application: Bar
Charts. Bar charts provide a simple yet efficient way to represent data in a visual format that is  You can watch a video named T9_BarChart_demo that shows you an example of how to
easy for users to understand. They can effectively illustrate comparisons among categories, and test your invention.
in our case, display the user's overall ranking in our quiz app.
 After you've thoroughly tested your app and you're confident that everything is working
In this tutorial, you will learn how to: as expected, you can proceed to submit it. Remember, it's better to discover and fix bugs
now than to have them found later by your users or during the evaluation process. Good
 Establish a connection to your specific Firebase URL, luck!

 Develop a bar chart on your Quiz App's dashboard.

Activity 4. Submit your work!
Activity 1: Set up the project template and explore the app functionality.
1. Take screenshots of your component view and block view for all the screens in your
Dashboard app.
1. Download and import project named T9_Dashboard_Template.aia.
2. On Screen1 and ScreenDashBoard, please insert your Firebase URL. 2. Submit the screenshots to the designated Canvas "Tutorial 9 Submission Link".
3. The app has three screens, but you can ignore the ScreenLeaderBoard.
4. Test the app thoroughly and examine its blocks. 3. Make sure to include your student ID and full name on the design view's screenshot.
5. To learn more about the blocks, please check the slides for lecture 9.
4. The deadline for submission is within one week.

Activity 2: Create a Bar Chart on the ScreenDashBoard.

• Develop a bar chart on the Dashboard to illustrate
the user's overall ranking.
Done!
• No more hints will be provided.

Department of Information Systems, City University of Hong Kong Department of Information Systems, City University of Hong Kong

IS2023 Mobile Application for Business IS2023 Mobile Application for Business

Interface
Tutorial 10 Sensors
MIT AI2: Android, where is my car? Display dynamic data: the current
label User CurrentAddressDataLabel address. Set its text to be
(Location sensor, Map, and Pedometer) Interface “Unknown.”

HorizontalArran Layout HorizontalArrangement2 Arrange the GPS info.

This tutorial introduces: gement
 Determining the location of the Android device by using the LocationSensor
Label User GPSLabel Display the text “GPS.”
component. Interface
 Personalizing and persistently recording data in a database directly on the device by Display dynamic data: the current
using TinyDB. Label User CurrentLatLabel latitude. Set its text to be “0.0”
Interface
 Using the WebViewer + Google Map / Maps component to show
Label User CommaLabel Display the text “,”
directions from one location to another. Interface

Display dynamic data: the

Getting started – Android where is my car. Label User CurrentLongLabel current longitude. Set its text to
Interface be “Unknown”
 Note: when you test this app, it is best that you install your app onto your physical
Button User RememberButton Click to record the current
Android device, make sure the GPS is turned on, and then walk outside to 2 different Interface location.
locations.
 Or Label User RememberedAddressLabe Display the text “Remembered
Interface l Place”
 you can use the given template “T10_AI2_And_Where_Template.aia”, it has 2 pink
color buttons that can help you to set up 2 different locations. Layout HorizontalArrangement3 Arrange the Remembered Address
HorizontalArrange info.
Activity 1. Guide users back to their car. ment
Step 1: Click on Screen1, in its properties, change its title to be “Android, Where’s My Label User RememberedAddressLabe Display the text “Remembered
Car?” Interface l Place”
Display dynamic data: the
Step 2: In Component view, add the following components listed below. Label User RememberedAddressData current latitude. Set its text to
Interface Label
be “Unknown”

Component Palette group What you’ll name it Purpose HorizontalArrange Layout HorizontalArrangement4 Arrange the Remembered GPS
Type ment info.
Display the header, set its Label User RememberedGPSLabel Display the text “GPS”
Label User CurrentHeaderLabel text to “Your current Interface
Interface
location:” Display dynamic data: the
Label User RememberedLatLabel remembered latitude. Set its text
HorizontalArran Layout HorizontalArrangement1 Arrange the address info. Interface
to be “0.0”
gement
Label User Comma2Label Display the text “,”
Label User CurrentAddressLabel Display the text “Address:” Interface

1|Page 2|Page
IS2023 Mobile Application for Business IS2023 Mobile Application for Business

Display dynamic data: the

Label User RememberedLongLabel remembered longitude. Set its
Interface
text to be “0.0”
This is from the
Button User DirectionsButton Click to show the map given template.
Interface With 2 testing
Uesr Set Text to “Choose a different buttons
ListPicker Interface ListPicker1 provider”

LocationSensor Sensors LocationSensor1 Store the remembered location

persistently

TinyDB Storage TinyDB1 Store the remembered location

persistently

WebViewer User WebViewer1 Show directions

Interface

Set the properties of the components in the following way:

 Set the Text property for the labels with fixed text as specified in the above Table.
 Uncheck the Enabled property of the RememberButton and DirectionsButton.
Step 3. Add behaviors to the Components (In the Blocks Editor)
 Check the [Link] property, so that the WebViewer will fit on the screen.
 Get Current Address from GPS sensor:
The overall component’s view is as follows:

This is the
original
design.

*****************************************************
Test your app Stage 1:
 Android device: If you use an Android device when you run the app, you
should see some GPS data appear. If you don’t get a reading, check your
Android settings for Location & Security and try going outside. You will

3|Page 4|Page

IS2023 Mobile Application for Business IS2023 Mobile Application for Business

have to walk out of the room to see if there’s any change with your GPS Activity 2. Store the car location permanently on the user’s mobile device by using TinyDB.
reading.
Step 1: In Block’s view, modify RememberButton to be like follows:
 The initial reading may take more than a few minutes.

***********************************************************

Step 4. Record the current location.

*******************************************************************
Test your app Stage 2:
Step 2: Add behaviors when a user opens the app, the remembered information will be
When the user (both Android and Emulator) clicks the
retrieved:
RememberButton, the current readings for the location sensor are
copied into the “remembered”labels.
********************************************************************

Step 5. Add directions:

*******************************************************************
Test your app Stage 3:
click the Show Directions from current to remembered button, a
Google Map route should be shown on the WebViewer.
********************************************************************

5|Page 6|Page
IS2023 Mobile Application for Business IS2023 Mobile Application for Business

******************************************************************* Activity 3. You may use the Maps and Navigation components to replace the use of
Test your app Stage 4: WebViewer.

 Use an Android Device:

o Download the new version of the app to your phone.
o You are required to give permission to our app to access the device’s
location service.
o Walk out of the room and click on the RememberButton, make sure
the readings are recorded.
o Come back to the room.
o Close the app and reopen it to check if the remembered data appears.
**********************************************************************

The Map properties are shown below:

7|Page 8|Page

IS2023 Mobile Application for Business IS2023 Mobile Application for Business

For the use of the Navigation component, you must apply for your API Key: We add a LineString on the map so that we can show a route to guide the user.
Don’t worry about the values in PointsFromString, we will deal with it in the block editor.
[Link]
[Link]

For your testing, you may use my API key for your exercise.
API key: 5b3ce3597851110001cf6248731df57a8db547efa1f36b3d0156febd

[Link]
It will zoom the map to the user’s
current location.
It will then set the start location and
the end location for the Navigation
component, and call the
[Link] to
show a route.

9|Page 10 | P a g
e
IS2023 Mobile Application for Business IS2023 Mobile Application for Business

Activity 4. Challenge yourself.

 Implement a Pedometer to count the number of steps and show them on the screen.
 Convert the number of steps to calories burned.

Activity 5. Submit your work!

1. Take screenshots of your component view and block view for all the screens
in your app.
2. Submit the screenshots to the designated Canvas "Tutorial 10 Submission
Link".
3. Make sure to include your student ID and full name on the design view's
screenshot.
4. The deadline for submission is within one week.

[Link] event handler will show the distance between 2 locations.

We will use a Web component’s jsonObjectEncode block to convert the received set of
points into the correct formats that LineStrings component required.

Then we Pan the Map to a suitable Zoom level, i.e., 17.

11 | P a g 12 | P a g
e e

IS2023 Mobile Application for Business IS2023 Mobile Application for Business

The following is the overall view of the blocks. Please read the book chapter7 for more detailed
explanations.

13 | P a g 14 | P a g
e e
IS2023 Mobile Application for Business
IS2023 Mobile Application for Business

Tutorial 11 Google Play Store ASO

Keyword Research & Icons
This tutorial introduces:

How to prepare your ASO elements for your Group Project mobile application

Part I: Implementing ASO for Your Google Play Store Listing

When talking about implementing an App Store Optimization strategy for Google Play, we should keep
in mind two factors: on-metadata and off-metadata:

On-metadata are the factors or elements that are 100% under the control of the developer: title,
developer name, short and long description, icon, screenshots.
Off-metadata factors are not controlled completely by a developer, but can be influenced, for
example installs volume, ratings, and user reviews.

Optimizing a listing for Google Play Store can improve rankings in search, conversion rate to install and
drive more organic downloads – so if you haven’t done it already, now is a great time to start.

Done!

o Reference:
[Link]
[Link]

Having an ASO-optimized Google Play Store listing can help you not only to boost visibility in the store,
but also in Google Web Search and App Packs.

Add keywords in the title (30 char), short description (80 char), description (4,000 char). Google indexes
almost all text that appears in the store listing. Google Play, when it comes to Search, is much more
similar to SEO.

Department of Information Systems, City University of Hong Kong

15 | P a g
e

IS2023 Mobile Application for Business IS2023 Mobile Application for Business

Title Short Description

Title is the first and one of the most important ASO on-metadata factors, because it influences both A short description on Google Play Store affects search and conversion rate.
search results and conversion rate to install. You can include up to 80 characters in the short description field, and it is very important to keep the
Since June 2017, Google permits to include up to 50 characters in the Title (while Apple has shortened balance and provide a clear description, including some of your main keywords that you want to rank
the App Name, instead, from 50 to 30 characters). To maximize the use of this space for your for.
optimization and improve keywords rankings, add some of your most powerful ones to your A well-composed short description provides a highlight about the virtues or a purpose of your app,
Title alongside brand name. clearly delivers a message about its value and catches attention so the user can expand it and go to see
Keep your brand name short, clear, and easy to spell for your potential users, and try to add emoji to the full description. Just like it is true for the Title, adding some emoji to Short Description will help
instantly grab users’ attention when they are browsing on the Google Play Store.

A few examples of an optimized Title:

Brand name – Keyword(s)

Brand name: Keyword(s)
Keyword(s) – Brand name
Keyword(s): Brand name

Don’t ignore localizing your store listing – you can add one Title for each language where you wish to
localize your app. Mobile world is global, and having a localized app can help you understand where the
demand for your product is coming from (and the results can surprise you)

Below you can find a few examples of a great, ASO optimized Titles:

Department of Information Systems, City University of Hong Kong Department of Information Systems, City University of Hong Kong
IS2023 Mobile Application for Business IS2023 Mobile Application for Business

Description Tips for a great and optimized description on Google Play:

Use as much space provided for a Long Description as possible (at least 3000-3500
characters).
Description is an extremely important factor, affecting both Search and Conversion. Localize your description to all possible languages. Preferably, use the help of a
Google’s search engine is crawling through the descriptions and uses the keywords that it has found professional instead of a blind translation.
(mainly in the first and last 5 lines of text). This is why, your Long Description, should, first, be Describe the virtues and all the best features of your app – it is okay to brag.
searchable. Find mid and long-tail keywords (keyword combinations) to add to your description.
You have up to 4.000 characters (use as much as possible) to include as many keywords and keyword Use bullet points or Unicode symbols like (get them here) for a clear and visual
combinations as possible. Use your most important ones a few times, especially in the first and the last organization.
lines of text, but please – no keyword stuffing. It is not only penalized by Google, but will also have a Don’t overload your description with a lot of text – write in short paragraphs.
negative effect on the users and discourage them from trying your app. Include emoji or use HTML and Rich Formatting (read our guide for more tips on
that.).
Secondly, the description must be organized and well-structured, containing clearly all the information Mention your awards or contests to encourage your users to give it a shot.
valuable for the user and convincing him to install (convert into your user) with a powerful call-to-action, Include a powerful call-to-action, containing a sense of urgency (e.g., “Download and
so your Long Description must be actionable. start saving money today”)
Here is a great example of a nicely structured and ASO optimized Long Description for Android app: Mention your social media profiles or user communities.
Check Google requirements and learn what NOT to do

Department of Information Systems, City University of Hong Kong Department of Information Systems, City University of Hong Kong

IS2023 Mobile Application for Business IS2023 Mobile Application for Business

Icon Video

Icon is the first visual element that the users see when they come across it in the search results page or You can also create a YouTube video about your Android app or game. In this case the video preview
Top Charts. Therefore, an icon plays directly affects click-through rate (how many users visit your listing thumbnail will become a feature graphic. This is how it looks like on the listing and in search results:
after seeing a preview in Search / Top Charts), and of course, conversion rate (how many users will
download the application after visiting listing).
There is no doubt that the icon is an element that has the most influence on user decision whether to
look and install or not. So, icon is an on-metadata factor responsible for Conversion.
Here you can see the view that the users get in the Google Play Top Charts and search results. A striking,
distinctive icon is what can really influence the users to try out your product.
For publishing a store listing on Google Play Store, you need a high-resolution image for your icon. These
are Google’s requirements for icon:

32-bit PNG (with alpha)

Dimensions: 512px by 512px
Maximum file size: 1024KB

A few tips on how to optimize your icon: Video is a very simple to use, yet very powerful tool. To add a video, just paste the YouTube URL in the
Make sure your icon is clearly reflecting the main purpose of your app – don’t confuse “Promo video” field on your Google Play Store listing. Keep in mind these requirements:
the users unless you already have a strong brand.
Find your “style” – colors, typography, etc. – and stick to it, so your icon goes in alliance
Make sure to use an individual video’s YouTube URL, not a YouTube playlist or channel
with the other elements of your app.
URL.
Look at your competitors and do something different.
Don’t use an age-restricted video as your promo video.
Use vibrant and harmonizing colors and clear shapes, don’t overload your icon with too
many elements.
You can localize your video in all the languages that your app is available for. Upload one video for
Avoid having text in your icon.
each language, or just use transcripts in different languages, which Google will automatically show
Try adding borders to the icon to make it more eye-catching.
depending on user location or device settings.
Innovate and follow the design trends – remember when everyone got crazy about flat
One of the coolest things about adding a video to your store listing is that the views from Play Store
design?
count as YouTube views. This gives you higher YouTube rankings, and therefore, higher positions in
Don’t try to guess what icon your users will choose – use A/B testing tools to know Google web search results.
exactly what icon performs best.

Department of Information Systems, City University of Hong Kong Department of Information Systems, City University of Hong Kong
IS2023 Mobile Application for Business IS2023 Mobile Application for Business

Screenshots Part IV: Submit your work [Group submission]

You can use your group project mobile app to complete and submit the
Like other graphic elements of listing, screenshots are the on-metadata elements that are responsible following table to Canvas under “Tutorial 11 Submission Link”. (Deadline: 1
for Conversion Rate. They don’t have such a huge visibility on Google Play (comparing with App Store), week time)
because the user must scroll through listing to get to see them. But still, the screenshots remain to be
essential for the users to see how the app looks like from inside.
Listing Tools you may use / hints Your Student
Just taking a glance at the screenshots, users will already decide if they want to try the application or elements Input in
not, so it is extremely important to make a great first impression on the users. Make sure you showcase charge
your best features on the first two screenshots. 20 Keywords: [Link]
On Google Play Store you can add up to 8 screenshots, with a minimum of 2 (but never stop on 2 App title: [Link]
screenshots) and has the following requirements: name-generator-ideas/

[Link]
JPEG or 24-bit PNG (no alpha)
Category: [Link]
Minimum dimension: 320px
android-app-categories/
Maximum dimension: 3840px
Short About this app and its main features
The maximum dimension of your screenshot can’t be more than twice as long as the
description:
minimum dimension.
(80 characters)
Description: The app description needs to bring a message.
(4000 The keywords placed on top will have more relevance for
characters) Google than the ones placed at the bottom.
You have to repeat the keywords throughout your short and
long description so that Google understands that it is a
keyword. The keywords should be used at least 3 times to be
seen as a keyword.
You shouldn’t repeat a keyword more than 8 times.
Don’t be shorter than 800 characters.
Icon: [Link]
(32-bit PNG with Alpha) 512px x 512px, file size: 1024KB
TWO [Link]
Screenshots:
[Link]
(JPEG or 24-bit PNG, no alpha) 320px-3840px
Video: [Link]
(YouTube How to create a Mobile App Demo Video - Wideo
video URL) And many others…
Follow these tips to rock your screenshots:
Put your best features or the most important messages into the first 2 screenshot slots.
Use all available screenshot slots, don’t stop on the 2 minimum required ones.
Use text to explain the information on the images to the users.
Follow your app’s general style and theme, experiment with creating storylines.
Provide a challenging copy to encourage users to install.
Show special offers or discounts to give them more visibility.
Done!
Localize screenshots
And never forget to A/B test them to find the best ones for your product.
Reference:

Department of Information Systems, City University of Hong Kong Department of Information Systems, City University of Hong Kong

IS2023 Mobile Application for Business

[Link]

Department of Information Systems, City University of Hong Kong