IS2023 Mobile Application for Business

Tutorial 7 Kodular - mCommerce Catalog

Extension: Dynamic Component

In this tutorial, we will guide you through the process of creating an mCommerce catalog using
Kodular and the Dynamic Component extension. We will load product data from a list of
dictionaries and create a user interface design for the catalog. Then, we will build the necessary
blocks to make the catalog functional.

This tutorial will guide you through:

• Developing an mCommerce catalog.

• Implementing Dynamic Components in your application.

• Employing Dictionaries effectively within your project.

Activity 1: UI Design and Import Extension

1. No templates are provided.

2. Start by designing the user interface for your mCommerce catalog. You can use Kodular
Designer to create a visually appealing layout for your catalog.
3. Include components such as labels, images, buttons, and dynamic components to display
the product information.
4. Arrange the components in a way that is visually appealing and easy to navigate for the
users.
5. Retrieve the Dynamic Component extension from the Week 7 folder on Canvas.
6. Incorporate the "com.yusufcihan.DynamicComponents.ais" extension into your Kodular
project.
7. Insert the newly imported extension into your phone editor by dragging and dropping.

Department of Information Systems, City University of Hong Kong

IS2023 Mobile Application for Business

Based on the given diagram, try to duplicate all the visual and non-visual components.

Component type Palette group What you’ll name it Purpose

Label User Interface LabelDebug Display hidden data for debugging purpose
Horizontal Arrangement Layout>General Horizontal_Arrangement To group the following 2 buttons
1
Button User Interface ButtonLoadShoppingIte To load products from a list of dictionaries
m
Button User Interface ButtonReset To reset the Card View
Horizontal Arrangement Layout>General Horizontal_Arrangement To group the following 2 buttons
2
Button User Interface ButtonLoad To load 1 demo item
Button User Interface ButtonSetProperties To set property of the loaded item, i.e., text,
image
Vertical Scroll Arrangement Layout>General Vertical_Scroll_Arrange A place holder for displaying Card view
ment1 dynamically
Card View Layout>General Card_View1 A Card like holder for displaying product
information
Image User Interface Image1 Product image
Label User Interface Label1 Product name
Text Box User Interface Text_Box1 Stock
Button User Interface Button2 Price
Dynamic Component Extension DynamicComponents1 To generate different static components
dynamically

Department of Information Systems, City University of Hong Kong

IS2023 Mobile Application for Business

Activity 2: Constructing your blocks.

• Import the Dynamic Component Extension by @yusufcihan to your Kodular project.
• Use the Dynamic Component extension to create the necessary blocks for your
eCommerce catalog.

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

Department of Information Systems, City University of Hong Kong

IS2023 Mobile Application for Business

• Configure the properties of the dynamically generated components—like text, images,

and button actions—in accordance with the corresponding product data.

• You may download the “i1.png” from our Canvas Week 7 folder.

Department of Information Systems, City University of Hong Kong

IS2023 Mobile Application for Business

• The Reset button allows you to clear your CardView and start afresh.

• These two blocks function in the same way.

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

Subsequently, dynamically generate the requisite components.

Department of Information Systems, City University of Hong Kong

IS2023 Mobile Application for Business

• Image URLs are sourced from the web:

https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Blue_Tshirt.jpg/220px-Blue_Tshirt.jpg

https://cdn.thewirecutter.com/wp-content/media/2023/06/businesslaptops-2048px-
0943.jpg?auto=webp&quality=75&crop=1.91:1&width=1200

https://rukminim2.flixcart.com/image/850/1000/xif0q/mug/h/p/p/valentine-s-special-romantic-gift-
stylish-coffee-mug-for-your-original-imagmbf2ejzth7hq.jpeg?q=90

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

Department of Information Systems, City University of Hong Kong

IS2023 Mobile Application for Business

Department of Information Systems, City University of Hong Kong

IS2023 Mobile Application for Business

Activity 3. Test your app

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

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

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

Activity 4. Submit your work!

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

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

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

4. The deadline for submission is within one week.

Done!

Reference: https://community.kodular.io/t/how-to-create-any-design-using-dynamic-
components-extension/80262

Department of Information Systems, City University of Hong Kong