IS2023

MOBILE APPLICATIONS
FOR BUSINESS
(WEEK 6)
Group project collaboration techniques
Monetizing Apps (Chap 15 [Iversen])
Tutorial Exercise: Wireframe

1
Agenda
Intended Learning Outcomes:
• Group project collaboration techniques.
• Describe various App Monetization Strategies.
• Exercise: UI & Wireframes.

2
PART I
Group project collaboration techniques
AI2 Project Merger Tool
Kodular screen export function

3
 AIMerger Documentation AI2
• AI2 Project Merger Tool
• How it Works
• Merging Projects
• Universal Assets and Databases
• Additional Features

https://appinventor.mit.edu/explore/resources/ai2-project-merger

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

5
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

6
7
 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?

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
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:
• Set up an entirely new sales channel.
• Run and operate the store.
• Setting up a new infrastructure to handle sales of mobile apps.

• Difficult to do apps business because of not having

15-3o% profit margins.
• Instead, you can set up your own website and infrastructure, like Amazon
(e.g., Kindle app).
• Apple is particularly strict about restrictions on the purchasing of content outside the
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
 H
App Monetization Strategies

• Making money from apps is possible but difficult.

• There are hundreds of thousands of apps available.
• The revenue generated from an individual app is typically very small.
• The app stores take a 15-30% cut of all the revenue that your app generates.
• More importantly, how can you get a lot of people to pay you to use the app
so that the revenue generated is enough to fund further development or
expansion?

10
App Monetization Strategies: Free Apps
• Free apps get downloaded at a much greater rate than any paid app.
• A totally free app is hard to make money with.
• The most common approach to making money from a free app is to embed ads
with the app screens (Therefore, plan to code the user interface with ads in mind).
• Setting up for supporting ads in your app mostly involves registering for the ads
(AdMob) with either Google or Apple (iAd), as well as submitting bank account
information (so you can be paid) and a tax form (so you can pay taxes on your ad
revenue).

11
 App Monetization Strategies:
Free Apps (In-App Advertising)
• Banners Ads:
• Provide consistent revenue; these ads are placed within the app's layout.

• Video Ads: T
• Popular but potentially intrusive, they appear during transitions or offer rewards for
viewing.

• Playable Ads:
• Allow users to experience a game before downloading, leading to high conversion rates.

• Offer Walls:
• 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.

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

• Banner ad.
• Interstitial ad.
• Rewarded video ad.

13
App Monetization Strategies: In-App Advertising

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

14
Introducing: Kodular Premium!

https://community.kodular.io/t/kodular-premium/187508 15
Monetization guidelines [Kodular
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. 1 TF
• 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.

16
Demo: In-App Advertising (Kodular Premium)

• Support a wide range of Ads

providers.
• Kodular will take a little percentage
of your earnings if you use their ads
component (5%-30%).
• You can use your own AdMob
account and AdUnitId.

17
 Demo: Banner Ad, Interstitial Ad and Rewarded
Video Ad
• Adding a banner ad, interstitial ad and
reward video ad.
• Explore how to reward the users who
watched a video ad.

18
Mobile Commerce (m-
commerce)
• Mobile Shopping Apps:
• Mobile applications designed for shopping and purchasing physical goods.

• User-Friendly Interface:
• These apps provide an intuitive interface for browsing products, making
purchases, and managing orders.

• Examples:
• Popular mobile shopping apps include Amazon, eBay, and Etsy, HKTVmall,
Taobao.

• Mobile Payment Solutions:

• Mobile commerce businesses offer convenient mobile payment options for
users to make purchases directly through their mobile devices.

19
Checkout & Payment
Gateway
1. If you are selling physical goods in Hong Kong, you will need to use a
payment gateway service to process your transactions.
2. Some top payment gateway services:
1. PayPal, eWay, AsiaPay, Adyen, Braintree, 2Checkout, PaymentAsia

3. These payment gateway services provide secure and convenient options

for selling physical goods in Hong Kong.
4. It is important to consider factors such as transaction fees, customer
support, and integration options when choosing the right payment
gateway for your business.

20
 Example: eCommerce – Selling physical goods
Extensions: PayPal

21
https://community.kodular.io/t/free-paypal-make-payments-in-your-app/74680
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.

22
App Monetization Strategies:
In-App Purchases/ In-App Billing (sale of digital goods)
• Making enough money from ad-supported apps to support a
business is difficult
• You need a very popular app to generate a significant amount
of money.
• Another popular approach is to release a free app that is
supported by in-app purchases (i.e., freemium business model)
1. You generate downloads with the free app,
2. Get the users hooked.
3. Allow them to add features by advertising the feature in the
app.
4. The sale is made during use of the app.

• It opens up the possibility of a regular revenue stream from the

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
In-App Purchases
• In-app billing on the Google Play Store allows for the
sale of digital content and subscriptions.
• Google Play's billing system supports various types of
digital goods, services, subscriptions, and app
functionality or content.
• Physical goods, personal services, and items requiring
physical delivery cannot be sold using in-app billing.
• A Google Developer Account and a Google Merchant
Account are required to use in-app billing for selling
digital content.

24
App Monetization Strategies: In-App Purchases

Advantages Disadvantages
• Can offer free download to the user • User might think this is a paid app
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
Example: In-App Purchases is for Digital Content
ONLY
• A non-visible component that lets the user purchase items, powered by Google''s
In-App Purchases service.
• It requires a Google Developer Account and a Google Merchant Account.

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

https://www.youtube.com/watch?v=XNtB_Dv8HEs
App Monetization Strategies:
In-App Subscriptions
• This strategy has increased in popularity with the rise of
streaming apps such as Netflix, Pandora, and HBO NOW.
• It refers to unlocking gated or limited content or bypassing some
restrictions if the user signs up for a subscription.
• In addition to opening new ways for income, this gives you access
to people’s email addresses which you can then use for additional
marketing campaigns and customer engagement.

https://www.youtube.com/watch?v=5oG6TJpUHCw

27
App Monetization Strategies: In-App Subscriptions

Advantages Disadvantages
• Regular engagement. • Customer may be paying for too
much.
• Easier for consumers to budget.
• Easy to cancel.
• Easier for businesses to be
forward-looking. • Consistently providing new value
to the customer.

28
App Monetization Strategies: Paid Apps
• The simplest approach to monetizing an app is to charge for the download.
• This app market is very price sensitive. The price of advertised in the app store and
the user decides, based on your description of the app, whether to buy it.
• How to get enough customers to generate significant income?
1. Raise the price of the app. However, Price increases > download decreases;
Lots of free apps; Advertising cost is high; Future updates are free.
2. Add new app to charge again.

• 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
App Monetization
Strategies: Paymium
• In the Paymium business model, users pay to
download your app and have the option to buy
additional features, content, or services through in-
app purchases if they want to engage more deeply.
• Engaging both paying and non-paying users.
• Providing value for different types of paying users.

30
App Monetization Strategies:
Sponsorships and Partnerships
Advantages Disadvantages
• Increased Revenue. • Dependency on Partner.
• Access to Resources. • Brand Alignment Challenges.
• Enhanced Credibility and Trust. • Loss of Control.
• Expanded User Base. • Competitive Landscape. A
• Cross-Promotion Opportunities. • Legal and Contractual
Considerations.

31
App Monetization Strategies: Data Monetization

Advantages Disadvantages
1. Additional Revenue Stream. 1. Privacy Concerns.
2. Valuable Insights. 2. User Perception.
3. Personalized User Experience. 3. Data Security Risks.
4. Targeted Advertising. 4. Regulatory Compliance.

32
Example: Pollfish (Kodular)

• 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
 Match App with Pricing Model

http://www.xconomy.com/san-Francisco/2011/04/15/choosing-the-right-business-model-for-your-app/ 34
PART III
Tutorial Exercise: Wireframe
(More details on the tutorial guideline)

35
Mobile app wireframe design tools online

• Note: You can use any

Mockups/wireframe
tools of your choice.

https://moqups.com 36
 EXAMPLE: MUSIC APP SPOTIFY
WIREFRAME
https://www.youtube.com/watch?v=r2T1E29xsh4 https://www.youtube.com/watch?v=HruA7TN8tMg
37
Example: Creating a
Mobile App User Guide
• https://money.pro/guide/#budgets

38
Summary: Monetizing Apps

• Group project collaboration techniques.

• App Monetization Strategies:
• Understanding the Cost of App Stores.
• Demo: In-App Billing/Purchase.
• Demo: AdMob & Pollfish.

• Tutorial: Wireframe

39
 IS2023
MOBILE APPLICATIONS
FOR BUSINESS
(WEEK 7)
Generative AI & Machine Learning
Mobile Commerce
Extension: Dynamic Component
Tutorial: mCommerce Catalog + Dynamic Component

1
 Intended Learning Outcomes:
• Introducing Generative AI (ChatBot, ImageBot) and
Machine Learning (Teachable Machine)
Agenda • Mobile Commerce
• Extension: Dynamic component.
• Exercise: mCommerce Catalog + Dynamic
component.

2
PART I
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

3
MIT AI2 COME WITH CHATBOT
AND IMAGEBOT
4
 MIT AI2 Paid
Extensions
• https://community.appinventor.mit.edu/t
/paid-chatgpt-extension-to-create-
fantastic-conversations-with-
chatgpt/98465

https://community.appinventor.mit.edu/t/paid-chatgpt-extension-to-create-fantastic-
5
conversations-with-chatgpt/98465
 How Text Embeddings Will Help You in
Your App ?

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
 [FREE KODULAR] ChatGPT with all
text/voice models and Dall-e 2 and 3 -
Openai API

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
fantastic conversations with gpt models

https://community.kodular.io/t/paid-chatgpt-extension-to-create-fantastic-conversations-with-gpt- 8
models/242328
[PAID] Gemini Extension to interact with
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

9
TEACHABLE MACHINE
Machine Learning

10
 Teachable Machine

https://teachablemachine.withgoogle.com/ https://www.youtube.com/watch?v=T2qQGqZxkD0&t=3s
11
12
13
14
15
https://mit-cml.github.io/extensions/
16
http://ai2.appinventor.mit.edu/?locale=en&repo=http://appinventor.mit.ed
u/yrtoolkit/AI/aiaFiles/imageClassification/WhatIsIt.asc 17
18
19
20
https://www.youtube.com/watch?v=iOeHqRdRSHA&t=1s
21
TMIC: App Inventor Extension for the
Deployment of Image Classification Models
Exported from Teachable Machine

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

23
Understanding
mCommerce & mobile

• Mobile Phones as Shopping Tools: Leveraging smartphones for more

than calls and texts; they're a vital part of shopping.
• Definition of mCommerce: Using mobile devices like phones and
tablets to purchase and sell goods and services online.
• Importance of mCommerce: With the ubiquity of smartphones,
mCommerce is critical for businesses to connect with consumers.
• Growth of mCommerce: Rapid expansion due to convenience and the
ability to shop anytime, anywhere.
• Market Potential: The mCommerce sector is expansive and continues
to offer significant growth opportunities for businesses.
• Lifestyle Impact: mCommerce is altering shopping habits and daily
life, signaling a shift in consumer behavior.

24
移动优化：
确保⽹站和应⽤程序在移动设备上的⽤户友好性，以获得轻松的购物体验。
移动⽀付系统：
提供快速、安全和直接的⽀付选项，实现无障碍交易。
移动营销： 利⽤有针对性的营销策略，及时提供和不可抗拒的优惠。
简化购物：强调和购物乐趣只需轻点⼏下。 Mobile Optimization: Mobile Payment Systems:
Ensure websites and apps Provide fast, secure, and
are user-friendly on mobile straightforward payment
devices for easy shopping options for hassle-free
experiences. transactions.
mCommerce
Essentials Mobile Marketing: Utilize
Simplified Shopping:
targeted marketing
Emphasize the convenience
strategies to offer timely
and enjoyment of shopping
and irresistible deals to
with just a few taps.
consumers on the go.

25
Navigating mCommerce Challenges
• Security as a Promise: Implement encryption and secure payment gateways to protect customer data.
• Optimized User Experience:
• Prioritize app and website performance optimization.
• Simplify navigation for a seamless journey from browsing to purchase.

• Case Study – Zappos / Etsy:

• Addressed mobile platform issues with a redesign for better intuitiveness and faster load times.
• Resulted in higher customer retention and increased mobile engagement.

• Resilience of mCommerce: Use challenges as catalysts for innovation and improved service.
驾驭移动电⼦商务的挑战
- 安全是承诺：实施加密和安全⽀付⽹关，保护客户数据。
- 优化⽤户体验：
- 优先优化应⽤程序和⽹站性能。
- 简化导航，实现从浏览到购买的无缝旅程。
- 案例研究 - Zappos / Etsy：
- 通过重新设计解决移动平台问题，提⾼直观性并缩短加载时间。
- 结果，客户留存率提⾼，移动参与度增加。
- 移动电⼦商务的复原⼒： 将挑战作为创新和改善服务的催化剂。
26
The Future of mCommerce - A Vision of
Innovation
• Innovation Tapestry: mCommerce is evolving with new technology, changing consumer habits, and creative
innovation.
• AR Shopping: Seamlessly try products at home with AR, merging the physical and digital shopping
experiences.
• AI at the Forefront: AI to revolutionize customer service with proactive assistance and personalized
shopping experiences.
• IoT Integration: Transform everyday items into smart shopping tools, automating purchases and offering
tailored suggestions.
• 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.

27
 FFt
Mobile Strategy for Retailers - Key
Strategies
n
• Cornerstone of Connection: Mobile strategy is essential for
consumer connection, not just a competitive advantage.
• Personalization:
• Utilize data analytics for personalized experiences.
• Value:
• Differentiate with quality, convenience,
• Offer AI-driven product recommendations.
and exclusivity.
• Enable customizable product searches.
• Highlight product value with customer
• Provide personalized promotions based on user activity.
reviews and ratings.
• Engagement: • Provide exclusive app-only deals and
• Foster emotional connections beyond transactions. early sale access.
• Engage consumers with interactive mobile app content. • Streamline checkout with multiple
• Use push notifications for timely engagement. payment options.
• Include AR, quizzes, and games for unique interactions.
• Offer live chat and customer service for real-time support.

28
Conclusion and Takeaways
• mCommerce Necessity: A crucial channel for modern retail, merging convenience, technology, and personalized shopping
experiences.

• Personalization: Leverage data for customized user experiences.

• Engagement: Utilize interactive content and real-time communication for deeper consumer relationships.

• Value: Offer quality, convenience, and exclusivity beyond just competitive pricing.

• Future Trends: Embrace AR, AI, IoT, sustainability, and prioritize security.

• Discussion Points:
• Balancing personalization with privacy.
• New engagement strategies for evolving consumer behaviors.
• mCommerce's role in sustainable and ethical retail.

29
PART III
mCommerce App

30
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.

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.

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.

31
Mobile eCommerce Design:
Product Catalog

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
Example:
Product Catalog + Dynamic Component Extensions

33
PART IV
Extension: Dynamic Component

34
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.
• Similarly, if you are using App Inventor, you will have the capability to create all
App Inventor components.
• Additionally, extension components are also supported.

35
Making The Skeletal Structure

Step 1 – Import Extension

• 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
Making The Skeletal Structure
• Step 3 – Count the Visual Components
• Now Count the Total Number of Components in All
Components that were required to make your Design.

37
Making The Skeletal
Structure
• 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
3. id

38
Making The Skeletal Structure
• To give input in “in” and “id”, you can use the following:

• A global variable called “componentID" is used to provide a unique ID to every

component.
• Having a unique ID for each component is necessary to ensure proper
identification and differentiation between components.
39
Making The Skeletal Structure
• Now duplicate the block created in the previous step "n“ number of times, where
"n" is the counting number obtained in the previous count, which in this case is 6.
• We can fill in the id block with the join text block.
1

1
2
2
3
3
4 4

5 5
40
Making The Skeletal Structure
• Now, let’s create and fill the first “.Create” blocks”
• This one is slightly different from the other 5 “.Create”
blocks.
• On the left-hand side of the Blocks screen, you will see all
the components that you used to create the static design.
• To fill in the input “in”, follow these steps:
1. Drag the last 'Light Green' block
“Vertical_Scroll_Arrangement1” to the “in” socket of the 1st
Create block.
1

41
Making The Skeletal Structure
• Clicking on the Card View component and
dragging the last 'Light Green' block to the
corresponding ComponentName of the
Create block.
• Fill the id’s join textbox with the name of
the component, i.e., “Card_View1”.
• The special first “.Create” block is done.
1

42
Making The Skeletal Structure
1. To repeat the process for the 2nd to 2
the last Create blocks, follow these
steps:
a) Drag the last 'Light Green' block to
the corresponding componentName
of the Create block. 3
b) In the "id-join" empty string textbox,
enter the text same as the
componentName.
a) Make sure to use the exact same text,
including any numbers at the end of 4
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

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

44
Load Properties

45
Load Properties

46
LOAD PROPERTIES
Prepare a list of dictionary of Product data

47
Load Properties

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

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.

50
 PART V
Tutorial Exercise:
eCommerce Catalog + Dynamic Component
(More details on the tutorial guideline)

51
Tutorial 7:
mCommerce Catalog + Dynamic Component
Intended Learning Outcomes :
Upon successful completion of this exercise, students should be able to:
• Apply the use of dynamic components in practice.
• Utilize dictionaries effectively.
• Develop a product catalog for an eCommerce application.

52
Tutorial 7: mCommerce Catalog + Dynamic Component
[Kodular]
• An ecommerce catalog is a crucial component of an online
store that showcases the products or services available for
purchase. It serves as a digital representation of a physical
catalog, allowing customers to browse and select items
they wish to buy.
• In this tutorial, you will use the extension dynamic
component to develop a product catalog.

53
 Overall Summary

Generative AI & Machine Learning

Mobile Commerce

How to build an eCommerce app

Extension: Dynamic Component

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
 IS2023
MOBILE APPLICATIONS
FOR BUSINESS
(WEEK 8)
Group Project Proposal Feedback
Keyword Search
Insert, Update, Delete Records
Tutorial Exercise: Showing Previous and Next Product

1
 PART I

Group Project Proposal Feedback

(The feedback slides are in another PPT)

2
PART II
Keyword Search Function

3
Implementing Keyword Search in Kodular
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
Example: Keyword Search Result

5
Convert Reset Button to
a Reset Procedure

6
Convert LoadShoppingItem Button to
LoadAndDisplayProduct Procedure

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.
• Should a match be identified, append the
corresponding result to a designated result
list.
• Conclude by displaying the search results in
a reusable CardView component.

8
PART III
Response to Dynamic Component Click Event

9
Product Catalog to Product Detail/Profile

From a list of products on

Screen1.

To an editable product detail

screen.

In next part, we create a new

screen named ScreenUpdateDB.

10
Modify Screen1
• Integrate an additional label for the explicit purpose of
displaying the price.
• Subsequently, modify the button text to accurately represent
the SKU.
• Ensure that all pertinent blocks are updated in accordance.

11
Dynamic Component Click Event Handler

• Dynamic Click Events in Kodular

• Any component events are the most
complex form of an any component block.
• For any given event, the corresponding
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
Navigating Between Screens with SKU
Values
• Send the starting value (SKU) from Screen1 to the ScreenUpdateDB.
• The button text contains the unique SKU value.
• When the product button on Screen1 is clicked, it will open the ScreenUpdateDB
screen along with the value of the selected SKU.

13
PART IV
Integrating Firebase Database

14
 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
ScreenUpdateDB): records.
with Firebase
This form is versatile—it
allows users to insert a
Form Flexibility: new record, update, or
even delete a record.

15
Create ScreenUpdateDB
• New Screen Creation:
• Initiate a fresh screen for updates.
• UI Design:
• 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
Reset/Restore the Firebase DB
• Upload our default
product list to the
Firebase Database.

17
Retrieve the latest
Product list from Firebase
• Ensure you activate the Reset button prior to
testing this function; otherwise, you'll find there
are no retrievable records.

18
Create a Procedure to Display a Product
Based on the SKU input
• Create a to-do
procedure named
“procDisplayARecord”,
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.

19
PART V
Insert

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

21
Select Image by Activity Starter Componet

22
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

23
• During Initialize, we use the
ReadMediaPermissions to check

•
the device’s SDK version.
And then ask for different
Setup ReadMediaPermissions
permissions accordingly. Extension
• We also call for the Cloudinary
initialize function

24
Setup Properties: Cloudinary Extension
• Add a
Cloudinary
Extension
component.
• Fill in your API
keys.
• You may find
them from
Cloudinary
Dashboard
• https://cloudin
ary.com/

25
Upload an Image
• After user clicks the “Upload
by Activity Starter” button, the
image is uploaded to the
Cloudinary Media database.
• FileTools Extension is used to
covert the file path format to
fit Cloudinary’s expectation.
• 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
Input Text-Based Product Data
• For example, input the following:
• SKU: MQ3128gb
• Product Name: Meta Quest 3
• Quantity in Stock: 5
• Unit Price: 4000.00

27
Insert a New Product

28
PART VI
Delete

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

30
Delete a product

31
PART VII
Update

32
Update a Product

Return to screen1 to select a product.

You may choose to upload an image.

Then update any text-based fields, i.e.,

SKU, Product Name, Units, and Price.

When done, click “Update”.

33
UPDATE A
PRODUCT

34
Auto-load the Real-Time Firebase Data in
Screen1
• Add the Firebase Database
component.
• Ensure the URL and Project Bucket
are the same as on ScreenUpdateDB

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.
• Moving forward, we ought to conceal or
eliminate all four buttons as well as the
debug label.

36
 PART VIII
Tutorial Exercise:
Creating the ‘Show Previous Product’ and ‘Next Product’ buttons without any guidance

(More details on the tutorial guideline)

37
Tutorial 8:
Implement Previous and Next Product
Intended Learning Outcomes :
Upon successful completion of this exercise, students should be able to:
• Implementing real-time search functionality using dynamic components.
• Effectively respond to button clicks.
• Explore the procedures for saving and retrieving data via Firebase.
• You'll get the opportunity to flex your skills by implementing the "Show Previous
Product" and "Next Product" buttons.

38
To-Do List:
• Heads up!
• 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!

39
 Overall Summary

Group Project Proposal Feedbacks

Keyword Search

Insert, Update, Delete Record

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
 IS2023
MOBILE APPLICATIONS
FOR BUSINESS
(WEEK 9)
Group Project Skills:
Shopping Cart
Leader Board & Dashboard
Tutorial Exercise: Bar Chart

1
PART I
• Tutorial 8:
• Sample Solution

2
To-Do List:
Heads up!

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!

3
SHOW PREVIOUS PRODUCT
BLOCKS
4
SHOW NEXT PRODUCT BLOCKS
WITH GESTURE
5
PART II
• Group Project Proposal
• Required Skill #1
• Shopping Cart Implementation

6
Shopping Cart Implementation
• Modify Tutorial Exercise T8:
• When a user adds a product, save it to the cart list.
• Upon clicking 'Check Out', redirect to the cart page and load the list using dynamic
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.

7
Shopping Cart Assumptions
• Assumptions: • Design the User Interface
• 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 Functionality
navigate between screens.
• 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.

8
 Check Out

Product List Product Details Shopping Cart Order Details

& Add to Cart & Check out & Payment

Payment
View Records
Confirmation 9
Product List
• Modify T8 tutorial exercise
• Update Screen1 as follow:

10
Product Details & Add to Cart
•Duplicate the ScreenUpdateDB screen.
Screen Duplication: •Rename the duplicated screen as ScreenProductDetail.

•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.

11
Snapshot of Key Blocks

12
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.

13
Snapshot of Key Blocks

14
 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.

15
 Payment Confirmation

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
"PurchaseHistory".
 View Order Records
You should make more than one purchase to be able
to view your complete purchase history.

17
PART III
Group Project Proposal:
Required Skill #2:
Dashboard Summary Development

18
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.

• Design the Dashboard:

• Sketch or wireframe the dashboard layout.
• Ensure it is user-friendly and displays the most relevant information clearly.
• Remember to use a design tool to create mockups.

19
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
modern design elements, fonts, and icons.
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.

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

22
Entering scores for Alice, Bob, and Cathy

23
Snapshot of
Key Blocks

24
Leaderboard Extension – Sort Users
Score!
• 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.

https://community.kodular.io/t/free-v2-leaderboard-extension-sort-users-score 25
Snapshot of Key Blocks

26
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.

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
records using their
username.
• Visualize the user's
quiz performance
using a Pie Chart.

28
 PART IV
Tutorial Exercise:
Bar Chart
(More details on the tutorial guideline)

29
Tutorial 9: Create a Bar Chart
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.

Please note that no

further instructions
have been provided.

30
 Overall Summary

Group Project Skills Tutorial Exercise: Bar Chart

Shopping Cart
Leader Board & Dashboard

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 31
 IS2023
MOBILE APPLICATIONS
FOR BUSINESS
(WEEK 10)
Sensors (Chap 23)
Required Skill #3
Expandable List with a Map
Exercise: AndoidWhere(Chap 7)

1
Week 12 Team Number Week 13 Team Number
1 1
2 2
3 3
4 4
5 5
6 6
7 7
8 8

LUCKY DRAW PRESENTATION

ORDER – S02
2
Week 12 Team Number Week 13 Team Number
1 1
2 2
3 3
4 4
5 5
6 6
7 7
8 8

LUCKY DRAW PRESENTATION

ORDER – S01
3
Intended Learning
Outcomes:
Upon successful completion of this chapter, students
should be able to:
• Group Project Proposal Skills: Expandable List with a
Map.
• Describe the Sensors components.
• Describe the details of sensors: LocationSensor, Maps,
OrientationSensor, and AccelerometerSensor.

4
 PART I
Sensors
Reference: Chap 23 [Wolber]
http://www.appinventor.org/bookChapters/chapter23.pdf

5
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:

• Point your phone at the sky, and Google Sky Map tells
you which stars you’re looking at.
• Tilt your phone, and you can control the game you’re
playing.
• Take your phone on your daily run, and an app records
your route .

6
MIT AppInventor 2 Sensors
• Accelerometer • Magnetic Field • Maps
Sensor
• Gyroscope • Location Sensor
• Near Field
• Orientation
• BlueTooth Server
• Pedometer
• BlueTooth Client
• Proximity
• Light Sensor
• Hygrometer
• Thermometer
• Barometer

7
Kodular Sensors https://creator.kodular.io/

• Accelerometer • Magnetic Field • Map

• Gyroscope • Near Field • Location
• Orientation • Proximity
• Pedometer • Light sensor
• Gravity • Hygrometer
• Temperature
• Pressure
• Sound
• Fingerprint

8
 The x, y and z axes of a
Accelerometer Sensor ↑ D standard smartphone

• Acceleration is the rate of change of velocity over time.

• xAccel (Positive when the device’s left side is raised, and negative
when its right side is raised) .
• yAccel (Positive when the device’s bottom is raised, and negative when
its top is raised).
• zAccel (Positive when the device display is facing up, and negative
when the display is facing down).
• Responding to the Device Shaking
• E.g., Shaking event to make the kitty meow when
the phone was shaken.

• Detecting Free Fall

• If all the acceleration readings are near 0 (abs value
is less than 1), the device is free-falling to the ground.
• E.g., AccelerometerSensor.AccelerationChanged
event to detect when an elderly person has fallen and
automatically send an SMS message out in response. 9
 Orientation Sensor E

• You can use the OrientationSensor for game-like apps in

which the user controls the action by tilting the device.
• It can also be used as a compass to find out which direction
(north/south, east/west) the phone is pointing.
• The OrientationSensor has five properties:
• Roll (Left–Right) -90 to 90.
• Pitch (Up–Back) -180 to 180.
• Azimuth (Compass) 0 to 360.
• Magnitude (how much the device is tilted) 0 to 1.
• Angle (this sensor is reliable only when the roll angle is 0).

• Note that these angles work off of a different coordinate

system than the one used in aviation (for yaw, pitch, and roll).
10
• These measurements assume that the device itself is not moving.
Pedometer st

• This component keeps count of steps using the

accelerometer.
• A Component that acts like a Pedometer.
• 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
Sound Sensor
• Physical world component that can
detect such data as: sound amplitude.
• Measurement of the degree of change
[positive or negative] .

12
Fingerprint Sensor
• Reads fingerprints using the device's in-
built fingerprint scanner.

13
Location Sensor
• Non-visible component providing location information,
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.

14
Sensing Location with App Inventor
• App Inventor provides the LocationSensor component
that has properties for Latitude, Longitude, and Altitude.

• It also communicates with Google Maps, so you can get a

reading for your current street address.

• LocationSensor.LocationChanged is the key event

handler for the LocationSensor.

• By programming the LocationSensor.LocationChanged

event handler in this way, you can always display the
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.

15
Creating Location-Aware AR Apps
For Augmented-Reality:
• These apps use your location and the phone’s
orientation to provide overlay information that
augments the natural setting.
• e.g., Point a phone at a building and see its price
on the real-estate market.
• Walk near an exotic plant in a botanical garden
and an app can tell you, its species.

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

16
Kodular Maps Component
• A two-dimensional container that renders map tiles
in the background and allows for
multiple Marker elements to identify points on the
map.

• The Map component provides three utilities for

manipulating its boundaries with App Inventor.

• The user can pan the Map to any location.

17
Web Viewer Component
with Google Maps
• Web Viewer Component embeds web content into
apps, including Google Maps.
• Google Maps integration simplifies map functionality
for basic tasks.
• Implementation involves setting the Web Viewer's URL
to desired location.
• URL can show specific coordinates, searches, or
directions.
• Methods in blocks section update map based on user
inputs or events.

18
Discussion Questions

Which type of sensor is most beneficial for business

applications, and why?

Can you provide a few examples of apps that utilize these

sensors?

19
PART II
• Group Project Proposal
• Required Skill #3
• Expandable List with a Map

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.

21
 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)

22
Tutorial 10: Android, Where
is My Car?
Intended Learning Outcomes :
Upon successful completion of this exercise, students
should be able to:
• Determine the location of the Android device by using the
LocationSensor component.
• Record data persistently in a database directly on the
device by using TinyDB.
• Using the WebViewer component to open Google Maps
from your app and show directions from one location to
another.
• Implement a Pedometer.

23
AndroidWhere App:
• This is MIT AI2 exercise!
• When the user parks the car, click the button to
remember the current location to the device.

• When it is time to go home, click the direction button to

find directions from the current location to the
remembered place.

• Count the walk steps and walk distance.

24
Creating Location-Aware Apps
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:

• e.g., a group of hikers might want to keep track of one
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).
• Some people use such “check-in” apps everyday.
25
 Overall Summary

Sensors (Chap 23) Required Skill #3 Apps Exercise: AndroidWhere (Chap 7)

Expandable List with a Map

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
26
APPENDIX
This topic is not covered in the exam.

27
 陀螺仪传感器
- 陀螺仪能够测量⼿机转动的速度。
⼿机转动的速度
B Ex - 它可以测量⼿机的旋转速度，并返回
弧度/秒的数值。

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.
• This rate of rotation is also known as the Angular Velocity, so
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

28
 *

Gravity Sensor
• A non-visible component that measures the force
of gravity that is applied to a device on all three
physical axes.
• Note: All readings are in SI units.

29
 M is t

Magnetic Field Sensor / Magnetometer

• The magnetometer is used to measure magnetic flux
density or measure the ambient geomagnetic field.
• This is the total magnetic field passing through a given area,
per metre squared, .
• 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.

30
Bluetooth Server +
Bluetooth Client
• Use the BluetoothServer component to turn your
device into a server that receive connections
from other apps that use
the BluetoothClient component.
• Use BluetoothClient to connect your device to
other devices using Bluetooth. This component
uses the Serial Port Profile (SPP) for
communication.

31
Bluetooth Low Energy (BLE)
• Bluetooth Low Energy, or BLE, is used to wirelessly
connect two devices to one another.
• The BLE component allows you to find and connect to
BLE devices and to communicate directly with them.
• BLE functionality can't be tested with the Thunkable Live
app on iOS. To test the BLE functionality in your app on
iOS, please download your app.

32
NFS

Near Field Communication

• Non-visible component to provide NFC capabilities.
For now this component supports the reading and
writing of text tags only (if supported by the device).
• In order to read and write text tags, the component
must have its ReadMode property set
to true or false respectively.
• Note: This component will only work on Screen1 of
any App Inventor/Kudular app.

33
 f
Proximity Sensor
• A sensor component that can measure the proximity of
an object (in cm) relative to the view screen of a device.
• This sensor is typically used to determine whether a
handset is being held up to a persons ear; i.e. lets you
determine how far away an object is from a device.
• Many devices return the absolute distance, in cm, but
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.

34
Light Sensor
• Physical world component that can measure the light/ illuminance level around
the device in units of lux.

35
Thermometer /
Temperature Sensor
• Physical world component that can measure the
ambient air temperature if supported by the
hardware.
• This sensor implementation varies across devices.

36
Barometer / Pressure
Sensor To
• Physical world component that can measure the
ambient air pressure if supported by the hardware.
• In units of hPa or mbar

37
 TT
Hygrometer / humidity
sensor
• A sensor component that can measure the
relative ambient air humidity.
• Most Android devices do not have this sensor.

38
 The Global Positioning
System
• GPS data is generated via a series of geosynchronous satellites
maintained by the United States government.
• As long as you have an unobstructed sight line to at least three
satellites in the system, your phone can get a reading.
/
• A GPS reading consists of your latitude, longitude, and altitude.
Y • Latitude (range is –90 to 90) is how far north or south you are
relative to the equator, with values for north being positive and
south being negative.
• Longitude (range from –180 to 180) is how far east or west you
are of the Prime Meridian (Greenwich, London) where its
longitude of 0.0.

39
Location Information Providers:
GPS, A-GPS (WiFi, and Cell ID), Repeater
• An Android device can determine its own location in a number of ways:
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
other obstructions around you; you need a clear path to at least three
satellites in the system.
2. The device can obtain its position through a wireless network. You
must be near a WiFi router, of course, and the position reading you’ll
get is the latitude/longitude of that WiFi station
3. Cell ID provides a location for the phone based on the strength of
signals from nearby cell phone towers. It is generally not very
accurate unless you have numerous cell towers near you. However, it
does use the least amount of battery power compared to GPS or WiFi
connectivity.

40
Google Maps [Kodular]
• You need to provide your Google Map API!.
• A visible component that shows a map on the screen
powered by Google’s Maps service.
• Palette>Google>Maps
• Many Events, Methods, and properties available

41
 IS2023
MOBILE APPLICATIONS
FOR BUSINESS
(WEEK 11)
Publishing Apps (Chap 16 [Iversen])
App Store Optimization (ASO)
Exercise: Prepare your Play store listing elements

1
 Date: 20 Dec 2024 (Fri)

Time: 14:00 – 16:00

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

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

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.

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.

Answer Format: Answers should be written in pen and pencil on paper. Please use a pencil for filling out the
multiple-choice bubble sheet.

Final Words: Please ensure your handwriting is legible and do not leave any question unanswered. Good luck!

2
 Upon successful
Intended completion of this chapter,
Learning students should be able to:
Outcomes: • Discuss process to publish your
app
• Discuss how to prepare for ASO

3
PART I
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
 Publishing Apps
Intended Learning Outcomes:
Upon successful completion of this chapter, students should be
able to:
• Describe basics of publishing apps for both consumer and
enterprise audiences and both platforms

https://developer.android.com/distribute/best-practices/launch/launch-checklist 5
 Developer Program Policies
• Restricted Content
• People from all over the world use Google Play to
access apps and games every day. Before submitting
an app, ask yourself if your app is appropriate for
Google Play and compliant with local laws.
• Child Endangerment
• Inappropriate Content
• Financial Services
• Gambling
• Illegal Activities
• User Generated Content
• Unapproved Substances

6
https://play.google.com/about/restricted-content/child-endangerment/
Introduction: Publishing Apps

• The finished app has to be available to complete the publishing

process
• Apps are made available to their audience by publishing them
• The manner of publication is dependent on the target audience
and the platform
• The two primary audiences are typically:
1. The employees of an organization (Enterprise) for which the app was
developed
2. The public
7
App Distribution
• Publishing apps has both similarities and differences in Android and iOS
• They both require the same type of information to be entered for the app
that is to be sold
• However, the exact procedure is different
• Prior to publication of an app, thorough testing is required
• An app that crashed frequently or does not do what it says it does will not
pass the Apple review process
• An Android app that has the same problems may be allowed to be https://www.youtube.com
published, but it will get bad reviews and may be eventually removed by /watch?list=PLl-
Google K7zZEsYLmOF_07IayrTnt
• Firebase App Distribution can distribute pre-release versions of your app evxtbUxDL&time_continu
to your trusted testers e=21&v=SiPOaV-5j9o

https://firebase.google.com/products/app-distribution 8
Android Play Store
Publishing
• An Android app is published through the Developer
Console (https://play.google.com/apps/publish/)
• To publish apps, you need to sign up as a Google developer.
• The cost is a one-time fee of US$25, which must be paid
from a Google Wallet account.
• If you are going to sell your apps, you will need this account
for payments
• The account can be set up through the console.
• After you have set up all your accounts, you are ready to
publish

9
iOS App Store Publishing
• An iOS app is published through the iTunes Connect
(https://itunesconnect.apple.com)
• To publish apps, you need to set up your Distribution Certificate
and Distribution Provisioning Profile.
• The next step is to set up an entry for your app in iTunes Connect
• You will have to use your developer ID to sign in
• iTunes Connect is the website that is used to manage many aspects
of your app, including seeing reports on how the app is performing
• In iTunes Connect you provide information about the app, pricing,
and screenshots prior to being able to upload the app

10
Keeping Up with the
Platform
• Both Apple and Google make changes to their respective operating systems (OS)
on a regular basis
• Updates to the operating system can, and although infrequently, do disrupt
apps that previously ran fine

• At a minimum, as soon as the new OS is released, you should recompile your app to
include the new version as a target
• But you also need to test the new version of your app on a device running an
older version of the OS
• When you are satisfied that your app works, release an upgrade to the app
through the appropriate app store

• 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

11
PART II
App Store Optimization (ASO)

12
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.

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.

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.

13
 How is App Store Optimization done?
First things first: Establish a Clear ASO strategy

Pick the Right Name for your App

Know how to do Keyword Research for your Mobile App (AI can help with Keyword Research)

Write your App Description

Get the right App Icon by A/B testing

Prepare App Screenshots & Videos

App Listing and Localization

App Ratings and Reviews

https://appradar.com/academy/what-is-app-store-optimization/ 14
Checklist for your app title

Relevant to your app

Easy to read

Unique

50 characters long on Google Play

30 characters long the Apple App Store

15
When doing your keyword research
consider the following questions
What are the main features of your app?

What are the synonyms describing the features?

What are similar apps called?

What is your app’s category?

Which terms do people commonly use in this category?

https://ahrefs.com/blog/google-keyword-planner/
16
Checklist for your app description

Informative

Easy to understand

Clearly structured (bullet points, emojis)

Includes keywords (especially with Google Play)

Up to 4000 characters long

17
Checklist for App A/B testing
Analysis & Brainstorming

Creating Variations

Running the Experiment

Evaluating Results

Implementing Changes

Starting Follow-up Experiments

https://www.youtube.com/watch?v=OxMQORNh2E4&t=2s 18
Checklist for your Screenshots & Videos

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

19
ASO tools

To start, try and come up with at least 50 app store keywords.

ASO tools will provide you many keywords to consider.

Now with your initial set of app store keywords, it’s imperative you develop a strategy to filter and
select the best keywords for your app. ASO tools can help you with this optimization process.

These tools provide the popularities (or search traffic) as well as difficulties (or chances) of your app
store keywords.

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

20
Discussion Questions

What is the best way to avoid bad reviews by app users

when keeping up new app versions in the platform?
Guarantee quality
More testing and testers.
.
Set the user’s expectations right
If you set the right expectations upfront, users will give you a leeway in the event of a bad service.

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.

Exceptional customer service: provide direct support to users

Include Feedback button; Include users instant communication, reply instantly to a negative review.

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

22
Exercise: Prepare your Play store listing
elements
Intended Learning Outcomes :
Upon successful completion of this exercise, students should be able to:
• Optimize an Android apps and get more downloads & revenue with ASO

23
Google Play Store
listing elements
• Keyword research
• Category
• Title
• Short description
• Description
• Icon design
• Screenshots
• Video

24
 Publishing Apps (Chap 16 [Iversen])

Overall
Summary & App Store Optimization (ASO)

Reference
Exercise: Prepare your Play store
listing elements

25