FACULTY OF COMPUTER SCIENCE AND

INFORMATION TECHNOLOGY

UNIVERSITY OF MALAYA

INDUSTRIAL TRAINING FINAL REPORT

SEMESTER 2021/2022 SEMESTER 2

MUHAMMAD ADIB HARIRI BIN ABDUL

HADI

17100026/1

SUPERVISOR: DR. SAAIDAL RAZALLI BIN

AZZUHRI

1
Table of Contents

ABSTRACT ................................................................................................................. 1

ACKNOWLEDGMENT .............................................................................................. 2

iii. List of Tables .......................................................................................................... 3

iv. List of Figures ......................................................................................................... 4

1. Overview of Company ............................................................................................. 5

a) History .................................................................................................................. 5

b) Vision ................................................................................................................... 5

c) Business ................................................................................................................ 5

d) Clients .................................................................................................................. 6

e) Organisation Structure.......................................................................................... 7

f) Brief Description .................................................................................................. 7

2. Work Experience ...................................................................................................... 8

a) Description of Tasks Undertaken ......................................................................... 8

b) Screen Captures .................................................................................................... 9

3. Skills Gained, Initiative Taken, Guidance from Organisation ............................... 25

Conclusion and Suggestion ........................................................................................ 27

Appendix .................................................................................................................... 29
 ABSTRACT

Facility management and maintenance are paper based. How can mobile apps
digitise workflow? Usually, the person who reported a malfunctioning device is not
updated about its progress. Should the developer use existing source code or start over
if app builder development hits a dead end? The paper examines how a no-code app
builder can aid app development. First, the facility maintenance app is created with a
no-code builder. Later, traditional mobile app development using code continues
because the builder cannot meet all app requirements. No-code app builders are
lagging behind open-source rivals. Design and functionality are limited when
developing through no-code app builders. QR scanning and functionality are code-
only, for example. No-code app builders are more limited than coding. Using a mobile
app framework through code provides more customization and flexibility than a no-
code app builder. Traditional mobile app development is preferable to no-code app
builders. It is better to develop the facility maintenance app through coding entirely.

1
 ACKNOWLEDGMENT

I express my most profound appreciation to the Managing Director of

Hezmedia, Mr. Mohd Hezri Amir bin Abdul Latiff and Chief-Technical-Officer-cum-
supervisor, Mr. Drafizan Drahman, who continues to provide support and
encouragement throughout my internship in this company. Since I am not a creative
person, I have received various feedback concerning aesthetics in developing a mobile
app in Hezmedia. I would also like to extend my deepest gratitude to my parents, who
continuously provide financial support to see their eldest child finish his bachelor’s
degree. Many thanks to my intern-mates, Shafiq, Zharif, Syahmi, Firdaus, Husna, and
Hilmi, for the great times, trips, and laughter. I want to extend my sincere thanks to
Dr. Saaidal, who provides constructive feedback during your visit to the company.

2
iii. List of Tables

3
 iv. List of Figures

Figure 0-1: The Dashboard of the iAMPRO Client. .................................................. 11

Figure 0-2: The CCTV Report Form of the iAMPRO Client. ................................... 12
Figure 0-3: The list of reports in the ‘Notifications’ tab of the iAMPRO Client. ..... 13
Figure 0-4: The Report Details of a report when tapped from the list in the
‘Notifications’ tab, from the iAMPRO Client............................................................ 14
Figure 0-5: The Progress tab of the iAMPRO Client................................................. 15
Figure 0-6: The report details of a report when tapped from the ‘Progress’ tab in the
iAMPRO Client.......................................................................................................... 16
Figure 0-7: The ‘User Profile’ tab of the iAMPRO Client consists of two sub-tabs: a)
Account Information. b) Subscribed Products ........................................................... 17
Figure 0-8: The products that the client subscribed to; the client can only lodge a
report based on the products they subscribe. ............................................................. 18
Figure 0-9: If the report status is “In Progress”, the manager will assign an engineer
from the drop down list. ............................................................................................. 19
Figure 0-10: If the engineer has attended to the report, the manager has the discretion
whether to approve the report. ................................................................................... 20
Figure 0-11: The list of the engineers; viewed from the iAMPRO Manager app...... 21
Figure 0-12: The list of the engineers; viewed from the iAMPRO Manager app...... 22
Figure 0-13: The engineer has to attach the proof of work (an image) to show to the
manager. ..................................................................................................................... 23
Figure 0-14: The slide used during the presentation for the IKMKK staff. The title of
the presentation is “Metaverse for Education”........................................................... 24

4
1. Overview of Company

a) History

Hezmedia Interactive Sdn Bhd was founded on June 8, 2009, by Mr. Mohd
Hezri Amir bin Abdul Latiff. Upon graduating from University Teknologi Petronas
(UTP), he secured a Malaysia Digital Economy Corporation (MDEC) grant, Pre-Seed
Grant amounting to RM 150,000 (RM191,046.28 in 2022 adjusted inflation) to build
the company.

The first-ever product of Hezmedia is Math Quest, an educational role-playing

game (RPG) software developed by Mr. Hezri as his final year project as a student.
The project won several awards, including being selected as the finalist of Intel-DST
Asia Pacific Challenge 2011, which secured the 1st Runner Up Award and Silver
Medal Award for Malaysia Technology Expo 2011.

Since then, Hezmedia has been developing various projects for big and small
companies. The most notable ones are Petronas Hazard Hunt, Desktop Computer
Assembly Guide, and EzySunnah for Petroliam Nasional Berhad (Petronas), Sulaiman
Mazlan, and Universiti Teknologi MARA (UiTM), respectively.

b) Vision

To deliver a positive impact on one billion people's lives through technology,

creativity, and innovation.

c) Business

Hezmedia, a technological start-up, specializes in developing mobile apps,

game development, mixed reality, and system development. Its clients range from
corporate sectors to government-linked companies (GLC).

An example of a mobile app developed by Hezmedia is Escape Labyrinth, a

free-to-play mobile game for Penang4u. It was developed using Adobe Photoshop,
Audacity Inkscape, and Unity 3D through C# programming. It was available for
Android and iOS.

5
Petronas Hazard Unit was developed in 3D and optimized for virtual reality. It was
developed using Autodesk Maya, Blender, Unreal Engine 4, and Allegorithmic
Substance Painter using C#.

The MyBackRelief app was developed for UTP. It serves as a guide, teaching
users exercises to relieve back pain. The app includes ten videos for each exercise,
complete with voice-over walking users through the steps required for each exercise.
The app also gives tips to avoid back pain in daily activity. It was developed using
Adobe Photoshop and Autodesk Maya using Java.

Hezmedia continues to provide technological solutions to small and large

companies, whether in mixed reality, mobile, or web applications.

d) Clients

Hezmedia clients are divided into primary, secondary, and tertiary.

Primary clients are Motiofixo Sdn Bhd, Nexagate Sdn Bhd, Petronas Bhd, SDP
Global (Malaysia) Sdn Bhd, and Telekom Malaysia (TM) Bhd.

Secondary clients are ACASIA Communications Sdn Bhd, Aziatek Group Sdn
Bhd, JStudio Design Sdn Bhd, Virtual Instrument & System Innovation Sdn Bhd
(VISI), and UTP.

Tertiary clients are Aime Healthcare Sdn Bhd, DiRECT Consulting & Services
Sdn Bhd, FGV Holdings Berhad, and United Overseas Bank (UOB).

Hezmedia is still and will be working for various corporations and startups.

6
e) Organisation Structure

Mohd Hezri Amir

(Managing Director)

Nadiah Isahak (Project

Manager)

Drafizan Drahman Haizat Zainal (Head of Mahfiz Mahmood

(Chief of Operation) Business Development) (Head of Creative)

f) Brief Description

Students seeking to gain internship experience at Hezmedia will be exposed to

various working fields. When applying for an internship at Hezmedia, students are
required to showcase their portfolios before being shortlisted for an interview.

Computer science students, either diploma or bachelor’s degree level, will be

given projects individually or in a team.

Students are required to have experience in Flutter. A mobile app development

project would be assigned either as a sole developer or development in a team. Another
work-in-progress is a virtual exhibition platform currently developing by a team,
capitalizing on game development and graphics designing. The tools require such as
Unity 3D and knowledge in C#.

However, other non-computer science-related courses students are welcome to

apply, such as Business Admin and Digital Marketing.

In conclusion, internship students involved in development projects would

hone their technical skills while the rest would polish their managerial and people
skills.

7
2. Work Experience

I undergo an internship spanning six months. Three projects were assigned to

me, including a mobile app development project.

a) Description of Tasks Undertaken

Throughout my internship, I was assigned a mobile app development project.

Apart from that, I also served as an assistant during a presentation with IKM Kota
Kinabalu (IKMKK) and contributed to the decentralized e-learning app proposal.

The project aims to deliver asset and facilities management solutions, which
carry the brand IAMPRO.

IAMPRO seeks to provide digitized and paperless solutions, from lodging

reports to closing them, catering to various users; clients, engineers, managers, and
admins. Usually, maintenance involves a massive amount of paperwork, which
iAMPRO aims to reduce, if not put an end to it.

The project is developed using Flutter, a mobile app framework, and the
wireframe is designed using Adobe XD by the Art Department.

Initially, the projects were carried out by three members, who were interns.
However, after one month, I am the sole developer of the project.

The project is developed throughout my internship period, which is ample for

me to learn the basics of Flutter before embarking on the said project. Alongside the
project development, I also receive feedback from my supervisor regarding interface
design and improvises upon it.

Initially, the project was developed using Flutterflow, an online no-code

platform. However, apart from being a drag-and-drop builder, Flutterflow is not
without its shortcomings.

First, when designing the checkbox list tile in the device report screens, the
Container widget is not scrollable, prompting the user to scroll to other parts of the
layout in the interface instead; which signifies that Flutterflow has limitations in terms
of customizing its widgets compared to its open-source counterpart, Flutter.

8
 In terms of functionality, the app would perform interactions from the front-
end and the back end, back and forth, with Firebase. However, many functionalities
are not possible in continuing development in Flutterflow. For example, when adding
a new user, the form automatically generates an ID sequentially based on the user type
(Client, Engineer, and Manager will have different IDs with a sequential numbering
scheme). However, such a method is only possible through code. Another feature to
be implemented is PDF generated based on the data in Firebase, which is not entirely
possible with Flutterflow.

In other words, developing projects in Flutterflow is only limited to basic

widgets and functionalities, and it is impossible to build slightly tailored, if not
complex, mobile apps.

For this reason, I initially downloaded the project’s source code from the
Flutterflow website to continue the development in Flutter through Visual Studio Code
(VS Code). However, after several iterations of developing my coding on top of the
existing Flutterflow’s generated code, I found the latter unnecessarily long and messy.
Continuing to code this way might lead to troublesome code debugging and
maintenance.

Finally, I have started building iAMPRO apps from scratch using Flutter in VS
Code. As of the time of writing, the development is more seamless and much more
maintainable. Instead of developing four iAMPRO apps for four different types of
users, all apps are consolidated into one. The user will be presented with different
interfaces and functionalities depending on the user type detected upon successful
login.

During the internship at Hezmedia, I can apply the knowledge gained while
learning the Mobile Application Development course. Additionally, my Flutter app
developed for the Academic Project course secured me to do an internship in
Hezmedia.

b) Screen Captures

The iAMPRO app will cater to four users: client, engineer, manager, and
administrator. Each type of user will have different roles in iAMPRO. Even though

9
developed as a single app, the user will be able to use the app depending on the user
assigned upon registration.

The client-side focuses on asset reporting. For example, if a device is damaged

or malfunctioning, such as a CCTV in the building where the client works, they will
scan the QR code tagged to the device. The app then retrieves the device ID of the
CCTV from the database (Firebase Cloud Firestore). The app then redirects the user
to the respective device reporting form. The form should identify the ID and name of
the said device correctly. Each form consists of a list of checkboxes tailored for various
device categories. The client either ticks the checkboxes which fit the description or
leaves a comment before hitting the ‘Submit Report’ button.

Next, the client might view the list of reports lodged by other clients in the
‘Notifications’ and ‘Progress’ tabs. Tapping on one of the Card widgets displaying the
gist of the report will redirect them to the detailed description of it.

The ‘Profile’ navigation consists of two separate tabs. The client can view and
update their details in the left tab, such as Profile Picture, Name, and Contact. Other
text fields are set as ‘read-only.’ In the right tab, the user might view the products the
client is subscribed to, which means they can only lodge a report in the app for those
subscribed products.

For the manager-facing the iAMPRO app, the managers view the list of reports
by the clients and assign an engineer based on their specializations for each report.
When the engineer has attended to the report by submitting the proof of work in the
form of an image, the manager has the discretion to approve or reject it. If it is the
latter, the engineer has to re-attend and re-submit the update to the report.

During my internship at Hezmedia, I did not only involve in the programming

project. I also involved in an event with the IKM Kota Kinabalu (IKMKK) staff. I
assisted my co-worker on the first day of the event in which he presented about
Metaverse.

During the hands-on session, initially, there were some technical difficulties in
setting up the virtual reality (VR) headset tethered to the smart television (TV).
However, it went smoothly. The participants were able to experience playing with the

10
VR gear. One of the VR applications they experienced was Car Mechanic Simulator
VR.

Another project I was involved on is developing a proposal regarding a

decentralized e-learning platform for Infinite Worldwide Group Berhad (IWG). A
representative from the client suggested Solana as an alternative to Ethereum as the
project’s back end in the proposal. The reason is that Ethereum imposes higher gas
fees, and Solana is much faster.

Besides being involved in a mobile app project, I was also involved in a

presentational event and developing a proposal for a client.

IAMPRO Client

Figure 0-1: The Dashboard of the iAMPRO Client.

11
Figure 0-2: The CCTV Report Form of the iAMPRO Client.

12
Figure 0-3: The list of reports in the ‘Notifications’ tab of the iAMPRO Client.

13
Figure 0-4: The Report Details of a report when tapped from the list in the ‘Notifications’ tab, from
the iAMPRO Client.

14
Figure 0-5: The Progress tab of the iAMPRO Client.

15
Figure 0-6: The report details of a report when tapped from the ‘Progress’ tab in the iAMPRO Client.

16
Figure 0-7: The ‘User Profile’ tab of the iAMPRO Client consists of two sub-tabs: a) Account
Information. b) Subscribed Products

17
Figure 0-8: The products that the client subscribed to; the client can only lodge a report based on the
products they subscribe.

18
 IAMPRO Manager

Figure 0-9: If the report status is “In Progress”, the manager will assign an engineer from the drop
down list.

19
Figure 0-10: If the engineer has attended to the report, the manager has the discretion whether to
approve the report.

20
Figure 0-11: The list of the engineers; viewed from the iAMPRO Manager app.

21
Figure 0-12: The list of the engineers; viewed from the iAMPRO Manager app.

22
 IAMPRO Engineer

Figure 0-13: The engineer has to attach the proof of work (an image) to show to the manager.

23
Figure 0-14: The slide used during the presentation for the IKMKK staff. The title of the presentation is “Metaverse for Education”

24
3. Skills Gained, Initiative Taken, Guidance from Organisation

Six months of a startup internship has equipped me with the skills needed to
compete in the technological industry. People skills and problem-solving skills should
go hand-in-hand with technical skills should go hand in hand to be relevant in the
competitive technological industry.

One of the primary skills that I learned is communication skills. Besides honing
my technical skills, I also need to liaise with the Art Department, as they are also
responsible for designing the mockups for iAMPRO. Even though the Director would
approve the final design, I, the developer, would have to decide whether the layout
design was feasible for development.

As stated by my faculty supervisor during the meeting, I have to agree that I

have exceptional developmental, if not technical, skills. The skill that I benefit from
the most is technical skills. I get the chance to learn Flutter from scratch and apply it
throughout the project. As a result, I deploy agile design methodology, enabling me to
discover various design solutions using Flutter. Developing the iAMPRO app trained
me to be creative, as every iteration results in various aesthetic solutions based on the
feedback received.

Being a programmer is not without critical thinking and problem-solving skills.

Being a developer requires me to debug every problem throughout the project and
develop workarounds for them. In the long run, it enables me not to miss any details
while focusing on the development; even the tiny ones might provide some context.

During my internship, our organization held a weekly meeting in which every

team member across every department reported their update on their progress. Every
feedback received, usually from my supervisor, is crucial to improvise the project as
per requirements. The three-minute limit per person has made me more concise while
showcasing my updates.

Being a sole developer for the mobile app project has trained me to set realistic
standards in deciding the timeframe required to complete the project. Should any
problems arise, many aspects need to be considered when developing an app, such as
testing and debugging the code.

25
 During the event with the IKMKK staff, I need to improve my presentation and
project management skills. Even though I served as an assistant, the input from the
sole presenter was not enough, especially for technical topics like Blockchain,
Metaverse, and NFT, which for non-technical people may not join the hype.

While preparing the proposal about a decentralized e-learning platform for

IWG, I took the initiative to jot down every requirement specified in the recorded
meeting. Besides coming up with possible solutions in learning management systems
(LMS) and blockchain architecture, I took the initiative to learn how decentralized
apps (dApps) work. Besides that, I learned that the world would be transitioning
towards Web 3, which in the Internet will be based on blockchain technology.

In conclusion, my internship taught me to hone non-technical skills as a sole

developer in the mobile app development project. I also learned to improve my
presentational skills and provide solutions based on consultations with the client.
Effective communication, developmental skills, problem-solving skills, and taking
responsibility is all I need to make this project materialize.

26
Conclusion and Suggestion

Six months of a startup internship has equipped me with the skills needed to
compete in the technological industry. People skills and problem-solving skills should
go hand-in-hand with technical skills should go hand in hand to be relevant in the
competitive technological industry.
One of the primary skills that I learned is communication skills. Besides honing
my technical skills, I also need to liaise with the Art Department, as they are also
responsible for designing the mockups for iAMPRO. Even though the Director would
approve the final design, I, the developer, would have to decide whether the layout
design was feasible for development.
As stated by my faculty supervisor during the meeting, I have to agree that I
have exceptional developmental, if not technical, skills. The skill that I benefit from
the most is technical skills. I get the chance to learn Flutter from scratch and apply it
throughout the project. As a result, I deploy agile design methodology, enabling me to
discover various design solutions using Flutter. Developing the iAMPRO app trained
me to be creative, as every iteration results in various aesthetic solutions based on the
feedback received.
Being a programmer is not without critical thinking and problem-solving skills.
Being a developer requires me to debug every problem throughout the project and
develop workarounds for them. In the long run, it enables me not to miss any details
while focusing on the development; even the tiny ones might provide some context.
During my internship, our organization held a weekly meeting in which every
team member across every department reported their update on their progress. Every
feedback received, usually from my supervisor, is crucial to improvise the project as
per requirements. The three-minute limit per person has made me more concise while
showcasing my updates.
Being a sole developer for the mobile app project has trained me to set realistic
standards in deciding the timeframe required to complete the project. Should any
problems arise, many aspects need to be considered when developing an app, such as
testing and debugging the code.
During the event with the IKMKK staff, I need to improve my presentation and
project management skills. Even though I served as an assistant, the input from the

27
sole presenter was not enough, especially for technical topics like Blockchain,
Metaverse, and NFT, which for non-technical people may not join the hype.
While preparing the proposal about a decentralized e-learning platform for
IWG, I took the initiative to jot down every requirement specified in the recorded
meeting. Besides coming up with possible solutions in learning management systems
(LMS) and blockchain architecture, I took the initiative to learn how decentralized
apps (dApps) work. Besides that, I learned that the world would be transitioning
towards Web 3, which in the Internet will be based on blockchain technology.
In conclusion, my internship taught me to hone non-technical skills as a sole
developer in the mobile app development project. I also learned to improve my
presentational skills and provide solutions based on consultations with the client.
Effective communication, developmental skills, problem-solving skills, and taking
responsibility is all I need to make this project materialize.

28
Appendix

Appendix 1: Math Quest, the first product by Hezmedia.

29
Appendix 2: Mr Hezri (L) was standing next to his lecturer. Math Quest won Gold Medal Award in
ITEX 2012.

30
Appendix 3: Mr Hezri was featured in the tech section of the Melaka Hari Ini newspaper on January
31, 2013.

31
Appendix 4: The iAMPRO logo used in the iAMPRO mobile app.

Appendix 5: The landing page for the Iampro; iAMPRO.com.my.

32
Appendix 6: The iAMPRO app development using Flutterflow; a no-code mobile app builder based
on the mobile app framework, Flutter.

Appendix 7: A snapshot of the iAMPRO source code in Visual Studio Code.

33