Agenda

IS2023
MOBILE APPLICATIONS Intended Learning Outcomes:
• Group project collaboration techniques.
FOR BUSINESS • Describe various App Monetization Strategies.

(WEEK 6) • Exercise: UI & Wireframes.

Group project collaboration techniques

Monetizing Apps (Chap 15 [Iversen])
Tutorial Exercise: Wireframe

1 2

AIMerger Documentation AI2

• AI2 Project Merger Tool
• How it Works
• Merging Projects
• Universal Assets and Databases
PART I • Additional Features
Group project collaboration techniques
AI2 Project Merger Tool
Kodular screen export function https://appinventor.mit.edu/explore/resources/ai2-project-merger

https://docs.google.com/document/d/15cEkliGmGxLX2muxysEOrMbPJnjmmglMtMVhbDpLZFE/edit#he
ading=h.uqq1hmq6y3rx
3 4
How to copy a screen from 1 project to
another with ais file in Kodular?
• https://www.youtube.com/watch?v=c232uesMdnE

PART III
Monetizing Apps

Reference: Chap 15 [Iversen]

https://books.google.com.hk/books?id=cqNdAgAAQBAJ&pg=PA344&lpg=PA344&dq=Learning+Mobile+App+Development:+A+Hands-
on+Guide+to+Building+Apps+with+iOS+and+Android&source=bl&ots=YTb1yxb-F3&sig=5CZ9ZFjdfBzcfYF5Va2gv4aHtpM&hl=en&sa=X&ei=L0cCVcT_OJDm8AWT-
4KoCg&ved=0CEcQ6AEwBQ#v=onepage&q=Learning%20Mobile%20App%20Development%3A%20A%20Hands-
on%20Guide%20to%20Building%20Apps%20with%20iOS%20and%20Android&f=false

5 6

Introduction: Monetizing Apps

• The market for apps is big and getting bigger.
• In the first half of 2023, global in-app spending reached a record
US$67.5 billion, showing a 5.3% year-over-year growth.
• How do you get a piece of that pie?
1. What is the best way to do this?
2. What options do you have to make money from apps?
3. What do you have to do to start?

7 8
https://s3.amazonaws.com/files.appannie.com/reports/1805_Report_2022_Forecast_EN.pdf
Understanding the Economics of App Stores
• Often developers are surprised that they have to pay App Monetization Strategies
Google and Apple 15-3o% of any (digital) sales or
subscription made in the app stores (whether from
paid apps or in-app purchases), while they don’t need
to worry about:
• Making money from apps is possible but difficult.
• Set up an entirely new sales channel.
• Run and operate the store. • There are hundreds of thousands of apps available.
• Setting up a new infrastructure to handle sales of mobile apps.
• The revenue generated from an individual app is typically very small.
• Difficult to do apps business because of not having • The app stores take a 15-30% cut of all the revenue that your app generates.
15-3o% profit margins.
• Instead, you can set up your own website and infrastructure, like Amazon • More importantly, how can you get a lot of people to pay you to use the app
(e.g., Kindle app). so that the revenue generated is enough to fund further development or
• Apple is particularly strict about restrictions on the purchasing of content outside the expansion?
app store, so Amazon isn’t even allowed to have a link in its app that takes users to their
store where they can buy the books. 9 10

App Monetization Strategies: Free Apps App Monetization Strategies:

Free Apps (In-App Advertising)
• Free apps get downloaded at a much greater rate than any paid app.
• Banners Ads:
• A totally free app is hard to make money with. • Provide consistent revenue; these ads are placed within the app's layout.
• The most common approach to making money from a free app is to embed ads • Video Ads:
with the app screens (Therefore, plan to code the user interface with ads in mind). • Popular but potentially intrusive, they appear during transitions or offer rewards for
viewing.
• Setting up for supporting ads in your app mostly involves registering for the ads • Playable Ads:
(AdMob) with either Google or Apple (iAd), as well as submitting bank account • Allow users to experience a game before downloading, leading to high conversion rates.
information (so you can be paid) and a tax form (so you can pay taxes on your ad
• Offer Walls:
revenue). • They generate revenue through purchases of virtual content or features, maintaining user
experience.

• Notification Ads:
• Appear in the device's status bar for high visibility, but caution is needed to avoid overuse.

11 https://www.forbes.com/sites/steveolenski/2015/11/12/6-types-of-native-advertising-and-how-each-can-benefit-
12

your-business/#422568ab4455
Ad formats App Monetization Strategies: In-App Advertising

• Banner ad.
• Interstitial ad.
Advantages Disadvantages
• Rewarded video ad.
• Revenue generation. • User experience.
• No direct cost to users. • Ad blocking.
• Targeted advertising. • Privacy concerns.
• Flexibility in ad formats. • App performance.

13 14

Monetization guidelines [Kodular

Introducing: Kodular Premium!
Premium]
• Kodular will review apps for compliance with AdMob policies but will specifically reject apps that are:
• Inappropriate content that advertisers do not want to be associated with.
• E.g., Copyrighted, adult.
• E.g., You cannot monetize apps that relate to sensitive events. Such examples are the current COVID-
19 pandemic.
• Invalid activity that lowers the quality of traffic to advertisers.
• E.g., Ad placements that encourage clicks.
• Incomplete apps - apps that are still in their early stages and won't show how ads will be used in the app.
• Earning apps - apps that encourage users to clicks ads in exchange for some form of payment.
• Auto-impression apps - apps that repeatedly load banner ads in the background of apps.

https://community.kodular.io/t/kodular-premium/187508 15 16
 Demo: Banner Ad, Interstitial Ad and Rewarded
Demo: In-App Advertising (Kodular Premium)
Video Ad
• Support a wide range of Ads • Adding a banner ad, interstitial ad and
providers. reward video ad.
• Kodular will take a little percentage • Explore how to reward the users who
of your earnings if you use their ads watched a video ad.
component (5%-30%).
• You can use your own AdMob
account and AdUnitId.

17 18

Mobile Commerce (m- Checkout & Payment

commerce) Gateway
• Mobile Shopping Apps: 1. If you are selling physical goods in Hong Kong, you will need to use a
• Mobile applications designed for shopping and purchasing physical goods. payment gateway service to process your transactions.
• User-Friendly Interface: 2. Some top payment gateway services:
• These apps provide an intuitive interface for browsing products, making 1. PayPal, eWay, AsiaPay, Adyen, Braintree, 2Checkout, PaymentAsia
purchases, and managing orders.
3. These payment gateway services provide secure and convenient options
• Examples: for selling physical goods in Hong Kong.
• Popular mobile shopping apps include Amazon, eBay, and Etsy, HKTVmall,
Taobao. 4. It is important to consider factors such as transaction fees, customer
support, and integration options when choosing the right payment
• Mobile Payment Solutions: gateway for your business.
• Mobile commerce businesses offer convenient mobile payment options for
users to make purchases directly through their mobile devices.

19 20
 Example: eCommerce – Selling physical goods
Extensions: PayPal App Monetization Strategies: Freemium
• In the freemium business model, users pay nothing to download your app and are
offered optional in-app purchases for premium features, additional content, or
digital goods.
• Engaging both paying and non-paying users.
• Providing value for different types of paying users.

21 22
https://community.kodular.io/t/free-paypal-make-payments-in-your-app/74680

App Monetization Strategies:

In-App Purchases/ In-App Billing (sale of digital goods) In-App Purchases
• Making enough money from ad-supported apps to support a
business is difficult
• You need a very popular app to generate a significant amount • In-app billing on the Google Play Store allows for the
of money. sale of digital content and subscriptions.
• Another popular approach is to release a free app that is • Google Play's billing system supports various types of
supported by in-app purchases (i.e., freemium business model) digital goods, services, subscriptions, and app
1. You generate downloads with the free app, functionality or content.
2. Get the users hooked.
3. Allow them to add features by advertising the feature in the
• Physical goods, personal services, and items requiring
app. physical delivery cannot be sold using in-app billing.
4. The sale is made during use of the app. • A Google Developer Account and a Google Merchant
Account are required to use in-app billing for selling
• It opens up the possibility of a regular revenue stream from the digital content.
same user, instead of relying on a single purchase up front.
• Example: Rosetta Stone: Offers in-app purchases for language
courses and additional content packs
23 24
 Example: In-App Purchases is for Digital Content
App Monetization Strategies: In-App Purchases
ONLY
• A non-visible component that lets the user purchase items, powered by Google''s
Advantages Disadvantages
In-App Purchases service.
• Can offer free download to the user • User might think this is a paid app • It requires a Google Developer Account and a Google Merchant Account.
i.e., freemium model. rather than a free app.
• More opportunities to generate • User might never use the in-app
substantial revenue. purchases to buy from your app.
• Incentive to create more depth and • Increase the app development time
quality work. and effort.

25 https://docs.kodular.io/components/monetization/general/in-app-billing/
26

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

App Monetization Strategies:

App Monetization Strategies: In-App Subscriptions
In-App Subscriptions
• This strategy has increased in popularity with the rise of
streaming apps such as Netflix, Pandora, and HBO NOW. Advantages Disadvantages
• It refers to unlocking gated or limited content or bypassing some
restrictions if the user signs up for a subscription. • Regular engagement. • Customer may be paying for too
• In addition to opening new ways for income, this gives you access much.
• Easier for consumers to budget.
to people’s email addresses which you can then use for additional • Easy to cancel.
marketing campaigns and customer engagement. • Easier for businesses to be
forward-looking. • Consistently providing new value
to the customer.
https://www.youtube.com/watch?v=5oG6TJpUHCw

27 28
App Monetization Strategies: Paid Apps App Monetization
Strategies: Paymium
• The simplest approach to monetizing an app is to charge for the download.
• In the Paymium business model, users pay to
• This app market is very price sensitive. The price of advertised in the app store and download your app and have the option to buy
the user decides, based on your description of the app, whether to buy it. additional features, content, or services through in-
• How to get enough customers to generate significant income? app purchases if they want to engage more deeply.
1. Raise the price of the app. However, Price increases > download decreases;
Lots of free apps; Advertising cost is high; Future updates are free. • Engaging both paying and non-paying users.
2. Add new app to charge again. • Providing value for different types of paying users.
• An up-and-coming approach to build apps for business use.
• Designed to solve a business problem > A business will be happy to pay the cost.
• It requires a business plan, and marketing - establishing a target market, and
directly contacting the market with information about your product.
• It also requires a potentially significant monetary investment.

29 30

App Monetization Strategies:

App Monetization Strategies: Data Monetization
Sponsorships and Partnerships
Advantages Disadvantages Advantages Disadvantages
• Increased Revenue. • Dependency on Partner. 1. Additional Revenue Stream. 1. Privacy Concerns.
2. Valuable Insights. 2. User Perception.
• Access to Resources. • Brand Alignment Challenges.
3. Personalized User Experience. 3. Data Security Risks.
• Enhanced Credibility and Trust. • Loss of Control. 4. Targeted Advertising. 4. Regulatory Compliance.

• Expanded User Base. • Competitive Landscape.

• Cross-Promotion Opportunities. • Legal and Contractual
Considerations.

31 32
Example: Pollfish (Kodular) Match App with Pricing Model

• A non-visible component that allows

publishers to incentivize/reward their app's
users for completing a survey.
• Rewarding users for completing surveys is a
great approach since it increases engagement
and retention in an app.
• Explore how to reward the users who finished
a survey.

33 http://www.xconomy.com/san-Francisco/2011/04/15/choosing-the-right-business-model-for-your-app/ 34

Mobile app wireframe design tools online

• Note: You can use any

Mockups/wireframe
PART III tools of your choice.

Tutorial Exercise: Wireframe

(More details on the tutorial guideline)

35 https://moqups.com 36
 Example: Creating a
Mobile App User Guide
• https://money.pro/guide/#budgets

EXAMPLE: MUSIC APP SPOTIFY

WIREFRAME
https://www.youtube.com/watch?v=r2T1E29xsh4 https://www.youtube.com/watch?v=HruA7TN8tMg
37 38

Summary: Monetizing Apps

IS2023
• Group project collaboration techniques. MOBILE APPLICATIONS
• App Monetization Strategies: FOR BUSINESS
• Understanding the Cost of App Stores.
• Demo: In-App Billing/Purchase.
(WEEK 7)
Generative AI & Machine Learning
• Demo: AdMob & Pollfish.
Mobile Commerce
• Tutorial: Wireframe Extension: Dynamic Component
Tutorial: mCommerce Catalog + Dynamic Component

39 1
 Intended Learning Outcomes:
• Introducing Generative AI (ChatBot, ImageBot) and
Machine Learning (Teachable Machine)
Agenda • Mobile Commerce
• Extension: Dynamic component.
• Exercise: mCommerce Catalog + Dynamic
PART I
component. Generative AI and Machine Learning
https://ai2.appinventor.mit.edu/reference/components/experimental.html#ChatBot
https://appinventor.mit.edu/explore/ai-with-mit-app-inventor

2 3

MIT AI2 Paid

Extensions
• https://community.appinventor.mit.edu/t
/paid-chatgpt-extension-to-create-
fantastic-conversations-with-
chatgpt/98465

MIT AI2 COME WITH CHATBOT

AND IMAGEBOT
https://community.appinventor.mit.edu/t/paid-chatgpt-extension-to-create-fantastic-
5
4
conversations-with-chatgpt/98465
 How Text Embeddings Will Help You in [FREE KODULAR] ChatGPT with all
Your App ? text/voice models and Dall-e 2 and 3 -
Openai API
1. Build a Smarter Search Engine
2. Create a Personalized Recommendation
System
3. Organize Content Effectively
4. Enhance Language Understanding

[PAID] ChatGPT extension to create fantastic

conversations with gpt models - Extensions - Kodular
Community
6
https://community.kodular.io/t/free-chatgpt-with-all-text-voice-models-and-dall-e-2-and-3-openai-
7
api/239432

[PAID] ChatGPT extension to create [PAID] Gemini Extension to interact with

fantastic conversations with gpt models the Gemini-pro model from Google
• Price: US$5.99
• No need for VPN for now
• https://community.appinventor.mit.
edu/t/paid-gemini-extension-to-
interact-with-the-gemini-pro-
model-from-google/102267

https://community.kodular.io/t/paid-chatgpt-extension-to-create-fantastic-conversations-with-gpt- 8 9
models/242328
 Teachable Machine

TEACHABLE MACHINE
Machine Learning

10 https://teachablemachine.withgoogle.com/ https://www.youtube.com/watch?v=T2qQGqZxkD0&t=3s
11

12 13
 14 15

https://mit-cml.github.io/extensions/ http://ai2.appinventor.mit.edu/?locale=en&repo=http://appinventor.mit.ed
16 u/yrtoolkit/AI/aiaFiles/imageClassification/WhatIsIt.asc 17
18 19

https://www.youtube.com/watch?v=iOeHqRdRSHA&t=1s
20 21
TMIC: App Inventor Extension for the
Deployment of Image Classification Models
Exported from Teachable Machine

PART II
M-Commerce
https://community.appinventor.mit.edu/t/tmic-app-
Reference: Chap 2,4 [Skeldon]
inventor-extension-for-the-deployment-of-image-
classification-models-exported-from-teachable-
machine/64411
22 23
https://mit-cml.github.io/extensions/

Understanding
mCommerce Mobile Optimization: Mobile Payment Systems:
Ensure websites and apps Provide fast, secure, and
• Mobile Phones as Shopping Tools: Leveraging smartphones for more
than calls and texts; they're a vital part of shopping. are user-friendly on mobile straightforward payment
devices for easy shopping options for hassle-free
• Definition of mCommerce: Using mobile devices like phones and experiences. transactions.
tablets to purchase and sell goods and services online.
mCommerce
• Importance of mCommerce: With the ubiquity of smartphones,
mCommerce is critical for businesses to connect with consumers. Essentials Mobile Marketing: Utilize
• Growth of mCommerce: Rapid expansion due to convenience and the Simplified Shopping:
targeted marketing
ability to shop anytime, anywhere. Emphasize the convenience
strategies to offer timely
and enjoyment of shopping
• Market Potential: The mCommerce sector is expansive and continues and irresistible deals to
to offer significant growth opportunities for businesses. with just a few taps.
consumers on the go.
• Lifestyle Impact: mCommerce is altering shopping habits and daily
life, signaling a shift in consumer behavior.

24 25
 The Future of mCommerce - A Vision of
Navigating mCommerce Challenges
Innovation
• Security as a Promise: Implement encryption and secure payment gateways to protect customer data. • Innovation Tapestry: mCommerce is evolving with new technology, changing consumer habits, and creative
innovation.
• Optimized User Experience:
• Prioritize app and website performance optimization. • AR Shopping: Seamlessly try products at home with AR, merging the physical and digital shopping
• Simplify navigation for a seamless journey from browsing to purchase.
experiences.
• AI at the Forefront: AI to revolutionize customer service with proactive assistance and personalized
• Case Study – Zappos / Etsy: shopping experiences.
• Addressed mobile platform issues with a redesign for better intuitiveness and faster load times.
• Resulted in higher customer retention and increased mobile engagement. • IoT Integration: Transform everyday items into smart shopping tools, automating purchases and offering
tailored suggestions.
• Resilience of mCommerce: Use challenges as catalysts for innovation and improved service. • Sustainability Focus: Align mCommerce with consumer values for ethical and sustainable shopping
practices.
• Adaptation is Key: Rapidly embrace and adapt to new technologies to enhance customer experience and
add value.

26 27

Mobile Strategy for Retailers - Key

Conclusion and Takeaways
Strategies
• Cornerstone of Connection: Mobile strategy is essential for • mCommerce Necessity: A crucial channel for modern retail, merging convenience, technology, and personalized shopping
consumer connection, not just a competitive advantage. experiences.

• Personalization: • Personalization: Leverage data for customized user experiences.

• Utilize data analytics for personalized experiences.
• Value:
• Differentiate with quality, convenience, • Engagement: Utilize interactive content and real-time communication for deeper consumer relationships.
• Offer AI-driven product recommendations.
and exclusivity. • Value: Offer quality, convenience, and exclusivity beyond just competitive pricing.
• Enable customizable product searches.
• Highlight product value with customer
• Provide personalized promotions based on user activity. • Future Trends: Embrace AR, AI, IoT, sustainability, and prioritize security.
reviews and ratings.
• Engagement: • Provide exclusive app-only deals and • Discussion Points:
early sale access. • Balancing personalization with privacy.
• Foster emotional connections beyond transactions.
• New engagement strategies for evolving consumer behaviors.
• Engage consumers with interactive mobile app content. • Streamline checkout with multiple
payment options. • mCommerce's role in sustainable and ethical retail.
• Use push notifications for timely engagement.
• Include AR, quizzes, and games for unique interactions.
• Offer live chat and customer service for real-time support.

28 29
 Mobile eCommerce Design
Includes:
1. Implement a login system, potentially using Firebase Authentication.

2. Develop a product database, possibly utilizing Firebase Database and dictionaries.

3. Consider constructing a web admin module.

4. Display products using ListView, GridView, CardView, or Dynamic Components.

PART III 5. Design a shopping cart checkout system, considering the inclusion of discounts and gamification elements, such as a
membership point redemption system.

6. Integrate a payment system using a payment gateway or in-app billing.

mCommerce App
7. Include a feature for product reviews or ratings.

8. Offer customer service support, which could be through online chat, a form, or email.

9. Additional: Consider tracking shipping, establishing a refund policy, generating invoices, and maintaining a purchase
history.

30 31

Mobile eCommerce Design: Example:

Product Catalog Product Catalog + Dynamic Component Extensions

Customer Account Product Catalog

Enable fast login using social accounts (i.e., Allow users to zoom in product images
Google account login) Provide full product options
Allow users to checkout as guest (i.e., no Show stock availability on product listings
registration is required)
Show product recommendations prior to
checkout
Show both regular/special price and percent
discount (i.e., as a norm)

https://www.simicart.com/blog/the-ultimate-guide-to-mobile-app-design-chapter-3-product-catalog-customer-account/ 32 33
 Dynamic Component Extension
• This is Not the Kodular build-in Dynamic Component!!!
• Warning! Managing this component can be challenging and requires patience and
practice.
• If you are using Kodular, you will have the ability to create all Kodular components.
PART IV • Similarly, if you are using App Inventor, you will have the capability to create all
App Inventor components.
Extension: Dynamic Component
• Additionally, extension components are also supported.

34 35

Making The Skeletal Structure Making The Skeletal Structure

• Step 3 – Count the Visual Components
Step 1 – Import Extension • Now Count the Total Number of Components in All
Components that were required to make your Design.
• Import Dynamic Component Extension by
@yusufcihan to your Project.

Step 2 – UI Design
• On the Designer Screen make your Desired Design
using Static Components. (e.g., Arrangements,
Labels, Buttons, Textbox, Images, etc.)
• Then Connect to Companion and Test that
Everything is Looking Good as Desired and make
Adjustments if any needed.

36 37
Making The Skeletal Making The Skeletal Structure
Structure • To give input in “in” and “id”, you can use the following:
• Step 4
• Dynamic design is made with blocks
• First, we will drag a Create block from the
Dynamic component extension to the
workspace.
• Create block is provided with 3 Inputs -
1. in
2. ComponentName
• A global variable called “componentID" is used to provide a unique ID to every
3. id component.
• Having a unique ID for each component is necessary to ensure proper
identification and differentiation between components.
38 39

Making The Skeletal Structure Making The Skeletal Structure

• Now duplicate the block created in the previous step "n“ number of times, where • Now, let’s create and fill the first “.Create” blocks”
"n" is the counting number obtained in the previous count, which in this case is 6.
• This one is slightly different from the other 5 “.Create”
• We can fill in the id block with the join text block. blocks.
1 • On the left-hand side of the Blocks screen, you will see all
the components that you used to create the static design.
1
2 • To fill in the input “in”, follow these steps:
2 1. Drag the last 'Light Green' block
3 “Vertical_Scroll_Arrangement1” to the “in” socket of the 1st
3 Create block.
4 4 1
5 5
41
40
Making The Skeletal Structure Making The Skeletal Structure
• Clicking on the Card View component and 1. To repeat the process for the 2nd to 2
dragging the last 'Light Green' block to the the last Create blocks, follow these
steps:
corresponding ComponentName of the a) Drag the last 'Light Green' block to
Create block. the corresponding componentName
of the Create block. 3
• Fill the id’s join textbox with the name of b) In the "id-join" empty string textbox,
the component, i.e., “Card_View1”. enter the text same as the
componentName.
• The special first “.Create” block is done. a) Make sure to use the exact same text,
including any numbers at the end of 4
1 the name.
b) For example, if the componentName
is Image1, enter "Image1" in the id-
join textbox.
c) Note that the id-join is case sensitive. 5

42 43

Load Properties Load Properties

• Since we are making components dynamically, we need to set the properties
for each “.Create” block.

44 45
Load Properties

LOAD PROPERTIES
Prepare a list of dictionary of Product data

46 47

Load Properties Load Properties

• Using a for each loop to load the product data.
• Insert the.Create and set property blocks into
the loop.

48 49
Load Properties
• To reset, remove all the created Dynamic Components.
• Reset the componentID back to zero.
• These two blocks function in the same way.
PART V
Tutorial Exercise:
eCommerce Catalog + Dynamic Component
(More details on the tutorial guideline)

50 51

Tutorial 7: Tutorial 7: mCommerce Catalog + Dynamic Component

mCommerce Catalog + Dynamic Component [Kodular]
Intended Learning Outcomes : • An ecommerce catalog is a crucial component of an online
store that showcases the products or services available for
Upon successful completion of this exercise, students should be able to: purchase. It serves as a digital representation of a physical
• Apply the use of dynamic components in practice. catalog, allowing customers to browse and select items
• Utilize dictionaries effectively. they wish to buy.
• Develop a product catalog for an eCommerce application.
• In this tutorial, you will use the extension dynamic
component to develop a product catalog.

52 53
 Overall Summary
IS2023
Generative AI & Machine Learning
MOBILE APPLICATIONS
FOR BUSINESS
Mobile Commerce
(WEEK 8)
How to build an eCommerce app Group Project Proposal Feedback
Keyword Search
Extension: Dynamic Component Insert, Update, Delete Records
Tutorial Exercise: Showing Previous and Next Product
Tutorial: eCommerce Catalog + Dynamic Component

Reference: [Wolber]: David Wolber, Hal Abelson, Ellen Spertus, and Liz Looney, 2014, App Inventor 2: Create your own Android Apps, O'Reilly Media, 332 Pages, ISBN-13:
978-1491906842. http://www.appinventor.org/book2 54 1

PART I

PART II
Keyword Search Function

Group Project Proposal Feedback

(The feedback slides are in another PPT)

2 3
Implementing Keyword Search in Kodular
Example: Keyword Search Result
Shopping Catalog
1. In this week, we will focus on implementing keyword search functionality in the Kodular Shopping Catalog
application.

2. This builds upon the foundational knowledge acquired in the previous tutorial exercise, T7_Dynamic_Comp_Ext
(Dynamic Components and Lists of Dictionaries).

3. The steps to be executed are as follows:

1. Integrate an Input Box where users can input the keyword to search for a product by its name.
2. Incorporate a Search Button to initiate the search functionality.
3. Initialize an empty list designated for storing the search results.
4. Formulate a procedure to clear existing dynamic components upon clicking the Search Button.
5. Elucidate the For-Each-Loop mechanism employed for keyword verification within the dictionaries.
6. Develop a procedure to render the search results on the dynamic components.

4 5

Convert Reset Button to Convert LoadShoppingItem Button to

a Reset Procedure LoadAndDisplayProduct Procedure

6 7
Create a TextBox on TextChanged Event
Handler
• Utilize a text box with an associated 'text
changed' event handler to facilitate the
search for products within a list.
• Employ a for-each loop to iterate through
all the products, comparing their names
against the text entered in the text box.
• To ensure case-insensitive comparison,
convert both the text from the text box and
the product names to uppercase.
PART III
• Should a match be identified, append the Response to Dynamic Component Click Event
corresponding result to a designated result
list.
• Conclude by displaying the search results in
a reusable CardView component.

8 9

Product Catalog to Product Detail/Profile Modify Screen1

• Integrate an additional label for the explicit purpose of
displaying the price.
From a list of products on
• Subsequently, modify the button text to accurately represent
Screen1. the SKU.

To an editable product detail • Ensure that all pertinent blocks are updated in accordance.
screen.

In next part, we create a new

screen named ScreenUpdateDB.

10 11
 Navigating Between Screens with SKU
Dynamic Component Click Event Handler
Values
• Send the starting value (SKU) from Screen1 to the ScreenUpdateDB.
• Dynamic Click Events in Kodular
• The button text contains the unique SKU value.
• Any component events are the most
complex form of an any component block. • When the product button on Screen1 is clicked, it will open the ScreenUpdateDB
• For any given event, the corresponding screen along with the value of the selected SKU.
any component event adds two more
parameters, component and
notAlreadyHandled, to the existing list of
event parameters, if any.
• The component parameter will be the component that triggered the event, such as Button.
• The notAlreadyHandled parameter is true if no other event block specifically handles the event for
component.

http://ai2.appinventor.mit.edu/reference/other/any-component-blocks.html
12 13

Insert a new product.

Actions on Products: Update a product.
Delete a product.

Synchronizing New Input Screen Design a screen

Product List (i.e., featuring an input form

tailored for managing

PART IV with Firebase

ScreenUpdateDB): records.

Integrating Firebase Database

This form is versatile—it
allows users to insert a
Form Flexibility: new record, update, or
even delete a record.

14 15
Create ScreenUpdateDB Reset/Restore the Firebase DB
• New Screen Creation: • Upload our default
• Initiate a fresh screen for updates.
product list to the
• UI Design: Firebase Database.
• Reference the provided diagram to craft the user
interface.
• Firebase Integration:
• Incorporate a Firebase database component.
• URL Customization:
• Update the default Firebase URL to match your
unique Firebase URL.
• Screen Initialization:
• Upon launching, display the product that the user
selected on Screen1.

16 17

Create a Procedure to Display a Product

Retrieve the latest Based on the SKU input
Product list from Firebase • Create a to-do
procedure named
• Ensure you activate the Reset button prior to
testing this function; otherwise, you'll find there “procDisplayARecord”,
are no retrievable records. which accepts two input
parameters,
“listFromFirebase” and
“SKU”.
• Then, “for-each” loop
will match the list
record by the SKU and
display the product
information.

18 19
 Button New
• Create a procedure named “procReset” to:
• Empty all the textboxes.
• Clear the image.
• Users can input new records.

PART V
Insert

20 21

Select Image by Activity Starter Componet Import 3 Extensions

• Cloudinary Extension
• https://community.appinventor.mit.edu/t/cloudinar
y-an-extension-to-upload-files-to-cloudinary/30237

• ReadMediaPermissions Extension
• https://community.niotron.com/t/read-media-permissions-on-
android-13/15830?u=taifun

• FileTools Extension
• https://community.kodular.io/t/filetools-some-tools-to-work-
with-files/40051

• You can also download them from our

Canvas Week 8 Folder

22 23
• During Initialize, we use the
ReadMediaPermissions to check
the device’s SDK version.
Setup ReadMediaPermissions
• And then ask for different
permissions accordingly. Extension
Setup Properties: Cloudinary Extension
• We also call for the Cloudinary
initialize function • Add a
Cloudinary
Extension
component.
• Fill in your API
keys.
• You may find
them from
Cloudinary
Dashboard
• https://cloudin
ary.com/

24 25

Upload an Image Input Text-Based Product Data

• After user clicks the “Upload • For example, input the following:
by Activity Starter” button, the
image is uploaded to the • SKU: MQ3128gb
Cloudinary Media database. • Product Name: Meta Quest 3
• FileTools Extension is used to • Quantity in Stock: 5
covert the file path format to
fit Cloudinary’s expectation. • Unit Price: 4000.00
• Once Cloudinary receives your
image, it will return a unique
URL for that image in a
Dictionary format.
• We extract and store this URL
in a variable and display the
web image on the Image
component.

26 27
Insert a New Product

PART VI
Delete

28 29

Delete a Product Delete a product

• Return to Screen1 to choose a product.
• Then click the Delete button.

30 31
 Update a Product

Return to screen1 to select a product.

You may choose to upload an image.

PART VII
Update Then update any text-based fields, i.e.,
SKU, Product Name, Units, and Price.

When done, click “Update”.

32 33

Auto-load the Real-Time Firebase Data in

Screen1
• Add the Firebase Database
UPDATE A component.
PRODUCT • Ensure the URL and Project Bucket
are the same as on ScreenUpdateDB

34 35
Final Review of Screen1
• T-shirt available stock has been updated
to 49.
•

•
The product "Laptop" has been removed.
A new product, Meta Quest 3, has been
added.
PART VIII
• Moving forward, we ought to conceal or Tutorial Exercise:
eliminate all four buttons as well as the Creating the ‘Show Previous Product’ and ‘Next Product’ buttons without any guidance
debug label.

(More details on the tutorial guideline)

36 37

Tutorial 8:
To-Do List:
Implement Previous and Next Product
Intended Learning Outcomes : • Heads up!
Upon successful completion of this exercise, students should be able to: • On the ScreenUpdateDB, we haven't yet added
the blocks for the 'Previous' and 'Next' buttons.
• Implementing real-time search functionality using dynamic components.
• The buttons should display either the preceding
• Effectively respond to button clicks. or subsequent product information, based on the
• Explore the procedures for saving and retrieving data via Firebase. current product's position. Be mindful of edge
cases, such as reaching the first or last record in
• You'll get the opportunity to flex your skills by implementing the "Show Previous the list.
Product" and "Next Product" buttons.
• That's gonna be your homework assignment.
• Sorry, no hand-holding on this one!

38 39
 Overall Summary
IS2023
Group Project Proposal Feedbacks
MOBILE APPLICATIONS
FOR BUSINESS
Keyword Search (WEEK 9)
Group Project Skills:

Insert, Update, Delete Record Shopping Cart

Leader Board & Dashboard
Tutorial Exercise: Bar Chart
Tutorial Exercise: Implement Previous and Next Product

Reference: [Wolber]: David Wolber, Hal Abelson, Ellen Spertus, and Liz Looney, 2014, App Inventor 2: Create your own Android Apps, O'Reilly Media, 332 Pages, ISBN-13:
978-1491906842. http://www.appinventor.org/book2 40 1

PART I To-Do List:

• Tutorial 8: Heads up!

• Sample Solution
On the ScreenUpdateDB, we haven't yet added the blocks for the
'Previous' and 'Next' buttons.

The buttons should display either the preceding or subsequent product

information, based on the current product's position. Be mindful of
edge cases, such as reaching the first or last record in the list.
That's gonna be your homework assignment.

Sorry, no hand-holding on this one!

2 3
 SHOW PREVIOUS PRODUCT SHOW NEXT PRODUCT BLOCKS
BLOCKS WITH GESTURE
4 5

PART II Shopping Cart Implementation

• Group Project Proposal • Modify Tutorial Exercise T8:
• When a user adds a product, save it to the cart list.
• Required Skill #1
• Upon clicking 'Check Out', redirect to the cart page and load the list using dynamic
• Shopping Cart Implementation components.
• Modify the CardView to support adding and removing items.
• Calculate the total amount of the items in the cart.
• Upon successful transaction, remove all products from the cart and log this action in the
order history.

6 7
Shopping Cart Assumptions
• Assumptions: • Design the User Interface Check Out

• This example does not include a • List Your Products

navigation menu. It's intended for • Products Details & Add to Cart
developers using Kodular Web UI to Product List Product Details Shopping Cart Order Details
Functionality
navigate between screens. & Add to Cart & Check out & Payment
• View Cart & Checkout Functionality
• User sign-in is not required.
• Order & Payment Integration
• Delivery service and tracking are not • Order History
provided. A real payment gateway is
not involved.
• No billing or invoice is provided.

Payment
View Records
8
Confirmation 9

Product List Product Details & Add to Cart

• Modify T8 tutorial exercise •Duplicate the ScreenUpdateDB screen.
Screen Duplication: •Rename the duplicated screen as ScreenProductDetail.
• Update Screen1 as follow:
•Navigate through all textboxes present on the ScreenProductDetail.
Textbox Adjustments: •Set the 'Read Only' property of each textbox to True.

•Add a new button and label it as ADD TO CART.

Button Additions: •Add another button, labeling it as Go To Shopping Cart.
•Finally, add a third button and name it Back

Notifier •Integrate a notifier component to the screen.

•Configure it to display the message: Successfully added to shopping cart. upon successful
Implementation: addition of a product to the cart.

•Utilize the TinyDB component for data storage.

Data Storage: •Save the product SKU(s) as a list in the TinyDB. This will ensure we maintain a record of
items added to the shopping cart.

10 11
Snapshot of Key Blocks Shopping Cart & Check out
It might not be possible to duplicate Screen1 directly, so let's create a
new screen that mirrors the layout of Screen1 and modify the blocks
to display the products added to the shopping cart.

We'll make use of labels to display the SKU, Product Name, Units in
Stock, and Price.

Additionally, we'll include a button to allow users to remove

products from the cart.

During the initialization process, we'll retrieve all the products from
TinyDB.

If a user clicks the 'Remove' button, the corresponding product will

be removed from TinyDB.

12 13

Snapshot of Key Blocks Order Details & Payment

In this newly created "ScreenOrderPayment", we utilize the ListView and
Image components to display all products in the cart in a list format.
Additionally, it will calculate the total amount of the items.

14 15
 Payment Confirmation View Order Records
You should make more than one purchase to be able
to view your complete purchase history.

Given that the payment is not actual, we can use a Notifier to prompt the user to confirm their preferred
payment method. Subsequently, we'll update the TinyDB records.
The "Cart" tag in TinyDB will be cleared! We'll add a new record to a new TinyDB tag called 16 17
"PurchaseHistory".

Developing a dashboard for a quiz mobile

app
• A general guide:
• Define Dashboard Requirements:
• Identify what key information users should be able to view from the dashboard.
• This might include their quiz scores, ranking, progress, number of quizzes taken, and so
forth.
PART III • Design the Dashboard:
Group Project Proposal: • Sketch or wireframe the dashboard layout.
• Ensure it is user-friendly and displays the most relevant information clearly.
Required Skill #2: • Remember to use a design tool to create mockups.
Dashboard Summary Development

18 19
 Input Screen for Quiz
Scores
• Assuming we already have several quiz screens
developed, for testing purposes, we'll create an
additional screen.
• This screen will allow developers to directly input
a user's quiz score.
• This way, we can thoroughly test the
functionality of our dashboard.

The first image is a wireframe of the quiz app's dashboard. It The second image is a mockup that brings the wireframe to
outlines the basic structure and elements of the app, from life with a more detailed and colorful design. It provides a
navigation to content areas. clearer vision of how the final app might look, incorporating
20 21
modern design elements, fonts, and icons.

Screen1 UI Design Entering scores for Alice, Bob, and Cathy

• Assumption:
• For the
purpose of this
demonstration,
we have hard-
coded three
users: Alice,
Bob, and
Cathy.

22 23
 Leaderboard Extension – Sort Users
Snapshot of Score!
Key Blocks • After inputting quiz scores for Alice, Cathy, and Bob, we
can navigate to the Leaderboard to view their rankings.
• A FREE extension is used to sort the users based on their
scores.

24 https://community.kodular.io/t/free-v2-leaderboard-extension-sort-users-score 25

Snapshot of Key Blocks Dashboard Design

• A dashboard will display a summary of a
user's quiz activities, such as completed
quizzes, current leaderboard ranks, and
quiz scores.
• We can utilize the SimpleChart
extension for this purpose.

26 https://community.kodular.io/t/free-beta-simple-chart-extension-v2/99191 27
Snapshot of
Key Blocks
•

•
Retrieve quiz data
from Firebase.
Access the user's
PART IV
records using their Tutorial Exercise:
username.
• Visualize the user's Bar Chart
quiz performance
using a Pie Chart.
(More details on the tutorial guideline)

28 29

Tutorial 9: Create a Bar Chart Overall Summary

Download the project Integrate these

templates that have templates into your
been provided. Kodular project.

Develop a bar chart

Initiate and establish
on the Dashboard to
a connection to your
illustrate the user's
specific Firebase URL.
overall ranking.
Group Project Skills Tutorial Exercise: Bar Chart
Shopping Cart
Please note that no Leader Board & Dashboard
further instructions
have been provided.

Reference: [Wolber]: David Wolber, Hal Abelson, Ellen Spertus, and Liz Looney, 2014, App Inventor 2: Create your own Android Apps, O'Reilly Media, 332 Pages, ISBN-13:
30 978-1491906842. http://www.appinventor.org/book2 31
 Week 12 Team Number Week 13 Team Number
1 1
IS2023 2 2

MOBILE APPLICATIONS 3
4
3
4

FOR BUSINESS 5
6
5
6

(WEEK 10) 7
8
7
8

Sensors (Chap 23)

Required Skill #3 LUCKY DRAW PRESENTATION
Expandable List with a Map ORDER – S02
Exercise: AndoidWhere(Chap 7)

1 2

Week 12
1
Team Number Week 13
1
Team Number
Intended Learning
2 2 Outcomes:
3 3
4 4 Upon successful completion of this chapter, students
should be able to:
5 5
6 6 • Group Project Proposal Skills: Expandable List with a
7 7
Map.
8 8 • Describe the Sensors components.
• Describe the details of sensors: LocationSensor, Maps,
LUCKY DRAW PRESENTATION OrientationSensor, and AccelerometerSensor.

ORDER – S01
3 4
 Introduction: Sensors
All of apps below are possible because the mobile
devices we carry have high-tech sensors for detecting
our location, orientation, and acceleration:

PART I • Point your phone at the sky, and Google Sky Map tells
you which stars you’re looking at.
Sensors • Tilt your phone, and you can control the game you’re
playing.
Reference: Chap 23 [Wolber]
• Take your phone on your daily run, and an app records
http://www.appinventor.org/bookChapters/chapter23.pdf your route .

5 6

MIT AppInventor 2 Sensors Kodular Sensors https://creator.kodular.io/

• Accelerometer • Magnetic Field • Maps • Accelerometer • Magnetic Field • Map

Sensor
• Gyroscope • Location Sensor • Gyroscope • Near Field • Location
• Near Field
• Orientation • Orientation • Proximity
• BlueTooth Server
• Pedometer • Pedometer • Light sensor
• BlueTooth Client
• Gravity • Hygrometer
• Proximity
• Temperature
• Light Sensor
• Pressure
• Hygrometer
• Sound
• Thermometer
• Fingerprint
• Barometer

7 8
 The x, y and z axes of a
Accelerometer Sensor standard smartphone
Orientation Sensor
• Acceleration is the rate of change of velocity over time.
• xAccel (Positive when the device’s left side is raised, and negative • You can use the OrientationSensor for game-like apps in
when its right side is raised) . which the user controls the action by tilting the device.
• yAccel (Positive when the device’s bottom is raised, and negative when
its top is raised). • It can also be used as a compass to find out which direction
• zAccel (Positive when the device display is facing up, and negative (north/south, east/west) the phone is pointing.
when the display is facing down).
• The OrientationSensor has five properties:
• Responding to the Device Shaking • Roll (Left–Right) -90 to 90.
• E.g., Shaking event to make the kitty meow when • Pitch (Up–Back) -180 to 180.
the phone was shaken. • Azimuth (Compass) 0 to 360.
• Detecting Free Fall • Magnitude (how much the device is tilted) 0 to 1.
• If all the acceleration readings are near 0 (abs value • Angle (this sensor is reliable only when the roll angle is 0).
is less than 1), the device is free-falling to the ground.
• E.g., AccelerometerSensor.AccelerationChanged • Note that these angles work off of a different coordinate
event to detect when an elderly person has fallen and system than the one used in aviation (for yaw, pitch, and roll).
automatically send an SMS message out in response. 9 10
• These measurements assume that the device itself is not moving.

Pedometer Sound Sensor

• This component keeps count of steps using the • Physical world component that can
accelerometer. detect such data as: sound amplitude.
• Measurement of the degree of change
• A Component that acts like a Pedometer. [positive or negative] .
• It senses motion via the Accelerometer and attempts
to determine if a step has been taken.
• Using a configurable stride length, it can estimate
the distance travelled as well.

11 12
Fingerprint Sensor Location Sensor
• Reads fingerprints using the device's in- • Non-visible component providing location information,
built fingerprint scanner. including Latitude, Longitude, Altitude (if supported by the device), speed (if
supported by the device), and address.

• This can also perform “geocoding”, converting a given address (not

necessarily the current one) to a latitude (with
the LatitudeFromAddress method) and a longitude (with
the LongitudeFromAddress method).

• In order to function, the component must have its Enabled property set
to true, and the device must have location sensing enabled through wireless
networks or GPS satellites (if outdoors).

• Location information might not be immediately available when an app starts.

You’ll have to wait a short time for a location provider to be found and used or
wait for the LocationChanged event.

• The emulator does not emulate sensors on all devices. Code should be tested
on a physical device.

13 14

Sensing Location with App Inventor Creating Location-Aware AR Apps

• App Inventor provides the LocationSensor component For Augmented-Reality:
that has properties for Latitude, Longitude, and Altitude.
• These apps use your location and the phone’s
• It also communicates with Google Maps, so you can get a orientation to provide overlay information that
reading for your current street address. augments the natural setting.
• LocationSensor.LocationChanged is the key event • e.g., Point a phone at a building and see its price
handler for the LocationSensor. on the real-estate market.
• By programming the LocationSensor.LocationChanged • Walk near an exotic plant in a botanical garden
event handler in this way, you can always display the and an app can tell you, its species.
current location or record it in a database, with “unknown”
appearing until the first reading.

• You can also ask explicitly whether the sensor has a

reading by using the
LocationSensor.HasLongitudeLatitude block.

https://ar.appinventor.mit.edu/

15 16
 Web Viewer Component
Kodular Maps Component
with Google Maps
• A two-dimensional container that renders map tiles • Web Viewer Component embeds web content into
in the background and allows for apps, including Google Maps.
multiple Marker elements to identify points on the
map. • Google Maps integration simplifies map functionality
for basic tasks.
• Implementation involves setting the Web Viewer's URL
• The Map component provides three utilities for to desired location.
manipulating its boundaries with App Inventor.
• URL can show specific coordinates, searches, or
directions.
• The user can pan the Map to any location. • Methods in blocks section update map based on user
inputs or events.

17 18

Discussion Questions PART II

• Group Project Proposal
• Required Skill #3

Which type of sensor is most beneficial for business • Expandable List with a Map
applications, and why?

Can you provide a few examples of apps that utilize these

sensors?

19 20
A Static Approach vs. Dynamic
Components
• This approach we're demonstrating is static.
• While a dynamic approach could also be employed, given that the number of
districts is finite, the static method serves as a fitting demonstration.
PART III
Tutorial Exercise:
Android, Where is My Car?
Reference: Chap 7 [Wolber]
http://www.appinventor.org/bookChapters/chapter7.pdf

(More details on the tutorial guideline)

21 22

Tutorial 10: Android, Where

AndroidWhere App:
is My Car?
Intended Learning Outcomes : • This is MIT AI2 exercise!
Upon successful completion of this exercise, students • When the user parks the car, click the button to
should be able to: remember the current location to the device.
• Determine the location of the Android device by using the
LocationSensor component.
• Record data persistently in a database directly on the • When it is time to go home, click the direction button to
device by using TinyDB. find directions from the current location to the
• Using the WebViewer component to open Google Maps remembered place.
from your app and show directions from one location to
another.
• Implement a Pedometer. • Count the walk steps and walk distance.

23 24
Creating Location-Aware Apps
Overall Summary
For Private Use:
• e.g., The Android, Where’s My Car? app (Chapter 7) .
• Let you remember a previous location so that you can
get back to it at a later time.
• Your location information is stored only in your device’s
database.

For Group Use:

Sensors (Chap 23) Required Skill #3 Apps Exercise: AndroidWhere (Chap 7)
• e.g., a group of hikers might want to keep track of one
Expandable List with a Map
another’s whereabouts in the wilderness, stored the
location information in a Clould database.
• A group of business associates might want to find one
another at a large conference (or a bar). Reference: [Wolber]: David Wolber, Hal Abelson, Ellen Spertus, and Liz Looney, 2014, App Inventor 2: Create your
• Some people use such “check-in” apps everyday. own Android Apps, O'Reilly Media, 332 Pages, ISBN-13: 978-1491906842. http://www.appinventor.org/book2
25 26

-
/

Gyroscope Sensor Z
-

- 0

• The gyroscope is capable of measuring how quickly the

phone is being turned
• It measures the rate of rotation of the phone and returns
values in radians per second about the x axis, the y axis and
the z axis.
APPENDIX • This rate of rotation is also known as the Angular Velocity, so
This topic is not covered in the exam. the gyroscope can tell us the speed of rotation of the phone.
• By extension, if the speed of rotation is any number greater
than 0, we can infer that the phone is being turned. The x, y and z axes of a
• The device must have a gyroscope sensor. standard smartphone

27 28
 Magnetic Field Sensor / Magnetometer
Gravity Sensor
• The magnetometer is used to measure magnetic flux
density or measure the ambient geomagnetic field.
• A non-visible component that measures the force
of gravity that is applied to a device on all three • This is the total magnetic field passing through a given area,
physical axes.
per metre squared, .
• Note: All readings are in SI units.
• The sensor will returns values with units of microtesla μT
for each of the three coordinate axes; x, y and, z.
• The magnetic flux density is quite similar to magnetic field
strength.

29 30

Bluetooth Server + Bluetooth Low Energy (BLE)

Bluetooth Client • Bluetooth Low Energy, or BLE, is used to wirelessly
connect two devices to one another.
• Use the BluetoothServer component to turn your
device into a server that receive connections • The BLE component allows you to find and connect to
from other apps that use
the BluetoothClient component. BLE devices and to communicate directly with them.
• Use BluetoothClient to connect your device to • BLE functionality can't be tested with the Thunkable Live
other devices using Bluetooth. This component app on iOS. To test the BLE functionality in your app on
uses the Serial Port Profile (SPP) for iOS, please download your app.
communication.

31 32
Near Field Communication Proximity Sensor
• Non-visible component to provide NFC capabilities. • A sensor component that can measure the proximity of
For now this component supports the reading and an object (in cm) relative to the view screen of a device.
writing of text tags only (if supported by the device).
• This sensor is typically used to determine whether a
• In order to read and write text tags, the component handset is being held up to a persons ear; i.e. lets you
must have its ReadMode property set
determine how far away an object is from a device.
to true or false respectively.
• Note: This component will only work on Screen1 of • Many devices return the absolute distance, in cm, but
any App Inventor/Kudular app. some return only near and far values. In this case, the
sensor usually reports its maximum range value in the
far state and a lesser value in the near state.

33 34

Thermometer /
Light Sensor
Temperature Sensor
• Physical world component that can measure the light/ illuminance level around • Physical world component that can measure the
the device in units of lux. ambient air temperature if supported by the
hardware.
• This sensor implementation varies across devices.

35 36
Barometer / Pressure
Sensor Hygrometer / humidity
• Physical world component that can measure the sensor
ambient air pressure if supported by the hardware.
• A sensor component that can measure the
• In units of hPa or mbar relative ambient air humidity.
• Most Android devices do not have this sensor.

37 38

The Global Positioning Location Information Providers:

System GPS, A-GPS (WiFi, and Cell ID), Repeater
• GPS data is generated via a series of geosynchronous satellites • An Android device can determine its own location in a number of ways:
maintained by the United States government. 1. The most accurate method is through the GPS satellites. You won’t
get a reading, however, if you’re inside or there are skyscrapers or
• As long as you have an unobstructed sight line to at least three other obstructions around you; you need a clear path to at least three
satellites in the system, your phone can get a reading. satellites in the system.
2. The device can obtain its position through a wireless network. You
• A GPS reading consists of your latitude, longitude, and altitude. must be near a WiFi router, of course, and the position reading you’ll
• Latitude (range is –90 to 90) is how far north or south you are get is the latitude/longitude of that WiFi station
relative to the equator, with values for north being positive and 3. Cell ID provides a location for the phone based on the strength of
south being negative. signals from nearby cell phone towers. It is generally not very
accurate unless you have numerous cell towers near you. However, it
• Longitude (range from –180 to 180) is how far east or west you
does use the least amount of battery power compared to GPS or WiFi
are of the Prime Meridian (Greenwich, London) where its connectivity.
longitude of 0.0.

39 40
Google Maps [Kodular]
IS2023
• You need to provide your Google Map API!. MOBILE APPLICATIONS
• A visible component that shows a map on the screen
powered by Google’s Maps service. FOR BUSINESS
• Palette>Google>Maps (WEEK 11)
• Many Events, Methods, and properties available Publishing Apps (Chap 16 [Iversen])
App Store Optimization (ASO)
Exercise: Prepare your Play store listing elements

41 1

Date: 20 Dec 2024 (Fri)

Time: 14:00 – 16:00

Upon successful
Venue: The exam will take place in LT-17/LT-18/B5-211, YEUNG Building

Intended completion of this chapter,

Final Exam Duration: The exam will last for 2 hours.

students should be able to:

Format: This is an open book exam. You are allowed to bring any printed materials, such as lecture slides,
tutorial exercises, and your own notes. Approved Calculator. Learning
Information Coverage: The exam will cover materials from Week 1 to Week 11, including lectures and tutorials.

Question Types: The exam will consist of 20% multiple-choice questions and 80% short essay type questions.
Outcomes: • Discuss process to publish your
Answer Format: Answers should be written in pen and pencil on paper. Please use a pencil for filling out the
app
multiple-choice bubble sheet.

Final Words: Please ensure your handwriting is legible and do not leave any question unanswered. Good luck!
• Discuss how to prepare for ASO

2 3
 Publishing Apps
Intended Learning Outcomes:
Upon successful completion of this chapter, students should be
able to:
PART I • Describe basics of publishing apps for both consumer and
enterprise audiences and both platforms
Publishing Apps

Reference: Chap 16 [Iversen]

https://books.google.com.hk/books?id=cqNdAgAAQBAJ&pg=PA344&lpg=PA344&dq=Learning+Mobile+App+Development:+A+Hands-
on+Guide+to+Building+Apps+with+iOS+and+Android&source=bl&ots=YTb1yxb-F3&sig=5CZ9ZFjdfBzcfYF5Va2gv4aHtpM&hl=en&sa=X&ei=L0cCVcT_OJDm8AWT-
4KoCg&ved=0CEcQ6AEwBQ#v=onepage&q=Learning%20Mobile%20App%20Development%3A%20A%20Hands-
on%20Guide%20to%20Building%20Apps%20with%20iOS%20and%20Android&f=false

4 https://developer.android.com/distribute/best-practices/launch/launch-checklist 5

Developer Program Policies Introduction: Publishing Apps

• Restricted Content • The finished app has to be available to complete the publishing
• People from all over the world use Google Play to process
access apps and games every day. Before submitting
an app, ask yourself if your app is appropriate for • Apps are made available to their audience by publishing them
Google Play and compliant with local laws.
• Child Endangerment • The manner of publication is dependent on the target audience
• Inappropriate Content and the platform
• Financial Services
• Gambling • The two primary audiences are typically:
• Illegal Activities 1. The employees of an organization (Enterprise) for which the app was
• User Generated Content developed
• Unapproved Substances 2. The public
6 7
https://play.google.com/about/restricted-content/child-endangerment/
App Distribution Android Play Store
• Publishing apps has both similarities and differences in Android and iOS
Publishing
• They both require the same type of information to be entered for the app • An Android app is published through the Developer
that is to be sold Console (https://play.google.com/apps/publish/)
• To publish apps, you need to sign up as a Google developer.
• However, the exact procedure is different
• The cost is a one-time fee of US$25, which must be paid
• Prior to publication of an app, thorough testing is required from a Google Wallet account.
• An app that crashed frequently or does not do what it says it does will not
pass the Apple review process • If you are going to sell your apps, you will need this account
https://www.youtube.com for payments
• An Android app that has the same problems may be allowed to be
published, but it will get bad reviews and may be eventually removed by /watch?list=PLl- • The account can be set up through the console.
Google K7zZEsYLmOF_07IayrTnt • After you have set up all your accounts, you are ready to
• Firebase App Distribution can distribute pre-release versions of your app evxtbUxDL&time_continu publish
to your trusted testers e=21&v=SiPOaV-5j9o

https://firebase.google.com/products/app-distribution 8 9

Keeping Up with the

iOS App Store Publishing
Platform
• An iOS app is published through the iTunes Connect • Both Apple and Google make changes to their respective operating systems (OS)
(https://itunesconnect.apple.com) on a regular basis
• To publish apps, you need to set up your Distribution Certificate • Updates to the operating system can, and although infrequently, do disrupt
apps that previously ran fine
and Distribution Provisioning Profile.
• The next step is to set up an entry for your app in iTunes Connect • At a minimum, as soon as the new OS is released, you should recompile your app to
• You will have to use your developer ID to sign in include the new version as a target
• But you also need to test the new version of your app on a device running an
• iTunes Connect is the website that is used to manage many aspects older version of the OS
of your app, including seeing reports on how the app is performing • When you are satisfied that your app works, release an upgrade to the app
• In iTunes Connect you provide information about the app, pricing, through the appropriate app store
and screenshots prior to being able to upload the app
• Because most users update their devices very quickly after the public release, it’s
very important that you have tested your app thoroughly before the release

10 11
 App Store Optimization
What is App Store Optimization (ASO)?

App Store Optimization (ASO) is the process of optimizing mobile apps for the
purpose of achieving a higher rank in the app store search results and top
charts rankings. This way, more people can find your app and download it.

PART II Due to its similarities to search engine optimization (SEO) for websites, app
store optimization is also referred to as App Store SEO, App Search
Optimization, and Mobile App SEO.
App Store Optimization (ASO)
The basic principle of ASO, besides high rankings in the app store, is the focus
on click-through rate (CTR). This means you have to convince people. You can https://appradar.com/academy/wh
do so by optimizing your App Name, Title, Logo, Screenshots and App Rating.
at-is-app-store-optimization/

More downloads mean more users and more users mean more revenue.

12 13

How is App Store Optimization done? Checklist for your app title
First things first: Establish a Clear ASO strategy

Pick the Right Name for your App

Relevant to your app
Know how to do Keyword Research for your Mobile App (AI can help with Keyword Research)
Easy to read
Write your App Description

Get the right App Icon by A/B testing

Unique
Prepare App Screenshots & Videos
50 characters long on Google Play
App Listing and Localization

App Ratings and Reviews 30 characters long the Apple App Store
https://appradar.com/academy/what-is-app-store-optimization/ 14 15
When doing your keyword research
Checklist for your app description
consider the following questions
What are the main features of your app?
Informative
What are the synonyms describing the features?
Easy to understand

What are similar apps called? Clearly structured (bullet points, emojis)

What is your app’s category? Includes keywords (especially with Google Play)

Which terms do people commonly use in this category? Up to 4000 characters long
https://ahrefs.com/blog/google-keyword-planner/
16 17

Checklist for App A/B testing Checklist for your Screenshots & Videos
Analysis & Brainstorming

Creating Variations

Running the Experiment

1 2 3 4
Evaluating Results Illustrate how Highlight its Tell a visual Pay attention
your app looks main features story to layout & size
Implementing Changes
like requirements

Starting Follow-up Experiments

https://www.youtube.com/watch?v=OxMQORNh2E4&t=2s 18 19
ASO tools Discussion Questions

To start, try and come up with at least 50 app store keywords. What is the best way to avoid bad reviews by app users
when keeping up new app versions in the platform?
ASO tools will provide you many keywords to consider. Guarantee quality
More testing and testers.
.
Set the user’s expectations right
Now with your initial set of app store keywords, it’s imperative you develop a strategy to filter and If you set the right expectations upfront, users will give you a leeway in the event of a bad service.
select the best keywords for your app. ASO tools can help you with this optimization process.
Make it easy for the user to rate your app
Ask user review within app. Editors Note: Apple has been removing apps that give users incentives to review apps.
These tools provide the popularities (or search traffic) as well as difficulties (or chances) of your app
store keywords. Exceptional customer service: provide direct support to users
Include Feedback button; Include users instant communication, reply instantly to a negative review.

In general, carefully select around 25 app store keywords for the next release of your app.

20 21

Exercise: Prepare your Play store listing

elements
Intended Learning Outcomes :
Upon successful completion of this exercise, students should be able to:

PART III • Optimize an Android apps and get more downloads & revenue with ASO

Tutorial Exercise:
Prepare your Play store listing elements
(More details on the tutorial guideline)

22 23
Google Play Store
Publishing Apps (Chap 16 [Iversen])
listing elements
•

•
Keyword research
Category
Overall
• Title Summary & App Store Optimization (ASO)
•

•
Short description
Description
Reference
• Icon design Exercise: Prepare your Play store
• Screenshots listing elements
• Video

24 25