Report Final Project

UNIVERSITI KUALA LUMMPUR
MALAYSIAN INSTITUTE OF INFORMATION TECHNOLOGY
FINAL YEAR PROJECT
WPD39806
KITNAC CATALOGUE APP
MILLENUMIA STUDIO
1
TEAM MEMBERS
NO NAME STUDENT ID
1. MUHAMMAD AMRI BIN MOHD AMIN 52102217025
2. MUHAMMAD AFIQ BIN AZLI 52102217149
TABLE OF CONTENTS
1. CHAPTER 1.0: INTRODUCTION 1

1.1 Introduction of Project 1
1.2 Project Background 1
2
1.3 Purposes of the Project 1
1.4 Aim of Project 1
1.5 Objectives of the Project 2
1.6 Problem Statement 2
1.7 Important of Project 2
1.8 Scope of Project 3
1.9 Conclusion 3
2. CHAPTER 2.0: LITERATURE REVIEW 4

2.1 Introduction 4
2.2 Guidelines for Developing Good Courseware 4
2.3 Description of Project 5
2.4 Case Study of Existing Application 6
3. CHAPTER 3.0: METHODOLOGY 9

3.1 Introduction 9
3.2 Research Methodology Structure 10
3.2.1 Phase 1: Planning 10
3.2.2 Phase 2: Analysis 11
3.2.3 Phase 3: Design 12
3.2.4 Phase 4: Development 14
3.2.5 Phase 5: Implement 15
3.2.6 Phase 6: Evaluation 17
4. CHAPTER 4.0: PROTOTYPE/PRODUCT DEVELOPMENT 18

4.1 Introduction 18
4.2 Site Map 19
4.3 Prototype 20
5. CHAPTER 5.0: INTEGRATION AND TESTING 28

5.1 Introduction 28
5.2 Integration 28
5.3 Testing 28
5.3.1 Method of testing 28
3
5.3.2 Highlight Results 29
6. CONCLUSION AND RECOMMENDATION 30

6.1 Introduction 30
6.2 Conclusion 30
6.2.1 Review of objective 30
6.2.2 Advantages and disadvantages of product 31
6.2.3 Limitation of the product 31
6.3 Recommendations 32
7. APPENDIX 33
7.1 APPENDIX A 33
7.1.1 Gantt chart ……………………………………………………................. 33
7.2 APPENDIX B 34
7.2.1 Storyboard Design ……...……………………………………………….. 34
7.3 APPENDIX C 35
7.3.1 Final Costing …………………………………………………………….. 35
7.4 APPENDIX D 37
7.4.1 Memo Meeting …………………………………………………………....37
7.5 APPENDIX E 40
7.5.1
Minute Meeting …………………………………………………………...40
7.6 APPENDIX F 46
7.6.1 Program writing .…………………………………………………………..46
4
CHAPTER 1: INTRODUCTION
1.1 wrong format!!
Introduction of Project
KITNAC Catalogue App is an online store enable for user to select and browse
products until proceed to check-out and delivery.
Please explain details
1.2
Project Background
KITNAC Enterprise is a retail-based local company focusing on unisex print tops
and men’s kurta. The company includes printing service on t-shirt in varying types of
materials. Millenumia Studios is proposing an Android app for KITNAC specifically
for displaying and purchasing ready-stock items.
Describe details
1.3
Purposes of Project
The purpose of the project is the implementation of the approved project by
Millenumia Studios that is to be funded by KITNAC Enterprise through the clients’
initiative.
1.4
Aim of Project
To develop an Android-based software for KITNAC Enterprise.
1.5
Objectives of Project
● To develop a software as per the project subject.
● To achieving company requirements. What of requirement
● To increase potential customers.
1.6
Problem Statement
The company state the problem to determine the stock availability. Thus, this project
will controlling stock flow and elevate company incomes. The upcoming prototype
will solve this problem.
1.7
Important of Project
This is the example of UNIQLO App in iOS showing from home page to collection
page.
Figure 1.7.1 UNIQLO App – New arrivals page

Graphic Adobe Photoshop CC
Adobe Illustrator CC
Authoring Adobe Animate CC
Adobe XD CC
Programming Android Studio
Figure 1.7.2 Software use in project

1.8
Scope of Project
The scope of the project is to implementing project purposes and client requirements
to the app. The limitations is the boundaries or areas that out of the project scope.
What do you mean ?? what your project limit? It will become your project scope
1.9
Conclusion
The product is targeting youthful users below 30 years. Top wear are available on
both genders and kurta only available for men. Most dense area of location are users
in Klang Valley. Extensively users’ linguistics are set to English. Large part of users’
ethnicities are Malaysians. User navigation and interface is linked to minimal design
language thus interpreting native Android operating system.
Conclude what you get from chapter 1.

CHAPTER 2.0: LITERATURE REVIEW check Format
2.1 check format
Introduction
This project is based on Android mobile apps. The definition of mobile apps is used
in small devices or as known as smartphones and tablets. Is it known with pre-
installed operating system consisting Google Android, Microsoft Windows and
Apple iOS. It is also being develop by original equipment manufacturer (OEM) by
Google Company as well as Apple.
Justify paragraph
2.2
Guidelines for Developing Good Mobile Apps wrong

font size
● Good interpersonal skill of the team members
The assembly of team members that requires interpersonal communication will
provide the knowledge in completing the task.
● Task allocation
The task will distributed to each of team members through the process of design and
development
● Focusing a segment of task

Break down and sort the task in smaller parts and follow-up the schedule
● Embrace simplicity
Decide the basic key features needed to complete the project and limit the number of
app pages to work.
2.3
Description of Project Area check all your

format , size , font, etc…
KITNAC Catalogue App is the collection of KITNAC line-ups with all kinds of top
wear specially made for men. The catalogue will make the customer easier to shop
and also customers will be able to know the material information and descriptions of
the items as well as the choosing a range of colours that made available for some
products.
The intention of the app is to sort the types of clothing and promote the best-selling
items for the customer. The users will use the app when to shop online at KITNAC
Store through social media and online retailers. It is easier to navigate the catalogue
so the customer will choose the right products and they can proceed to booked online
through social media.
Order through
Home page Item category Item colour Back to Home
social media
Figure 2.3.1 App Flow Diagram

Space why ???
2.4
Case Study
Figure 2.4.1.1 Screenshot of UNIQLO App
ADVANTAGES DISADVANTAGES
Colourful interface Overall colour usage is less minimal
Comfy and spacious layout Less information in a page
Intuitive navigation (easy size and colour Load time took a bit longer
selection)
Figure 2.4.2.1 Case study of UNIQLO App
ZALORA
Figure 2.4.1.2 Zalora App
Minimal color interface Monochromic palette appears less attractive
Large image in category page More scrolling
Fast load time and navigation Item color selection not included, need to
navigate back to items page
Figure 2.4.2.2 Case study of Zalora App
ZARA APP
Figure 2.4.1.3 Zara App
Selling item are presented with whole outfit Materials of an item are not stated
Easy and fast navigation Too simple design
Includes several styling recommendation Some image glitch due to clothing pattern
according to an item – need to zoom in
Figure 2.4.3.2 Case study of Zara App
The team are decide to choose the ZARA apps as the main guideline for KITNAC
Catalogue App. For the design, we are inspired by ZARA monochromatic blends and
the image layout design. We are also include flash animation for Featured Items page
which the team decides to include 360° image panning of best-selling products. We
also include detailed material information from client and care label to ensure
longevity of a product.
CHAPTER 3: METHODOLOGY
3.1
Introduction
A methodology is the systematic analysis applied to a field of study. In order to
achieve the plans and results with budget needed for a project. It is crucial to
understand the theory of developing an app. The app uses ADDIE model, consisting
five steps of completing a project.
3.2.1
Research Methodology Structure

Figure 3.2.1.1 ADDIE Model
ADDIE Model is a step-by-step framework used by instructional designer, developer

and trainers to focusing problems in a structural way to effectively utilize timeframe
and cost.
3.2.1
Phase 1: Planning
Planning is a first and foremost step. A project always start with a vision. Then, a
vision will interpret to goals, timeframe and finding teams that can deliver best
outcomes of a project. A successful app requires careful planning. A project is
thought to be a crucial contributor to ahead for the next phase. A well written project
plan gives guidance for obtaining resources, financing and required materials. The
project plan gives the team direction for producing quality outputs, handling risk,
creating acceptance, interpersonal skills to connect with clients and managing
project. The project plan also prepares teams for the possible outcomes to encounter
throughout the flow of projects. Thus, elevate understanding the cost, scope and
timings of the project.
In the planning phase, teams are formed according to the project requirements,
assigning each of the team members the scope and roles based on their forte. The
development team must understand and specify the scope of the work to be done, the
required resources, the risks attached, the task to be granted, the energy or the cost to
be expected and the schedule to be followed. The formed team will set up a Gantt
chart, to monitor the activities, and to make sure the project is finished not beyond
the deadline.
After a Gantt chart is done be set up, the team discuss related to the cost
management and cost estimation for the project. Cost is one of those consideration
that project management needs to enhancing control. Cost management includes the
processes required to ensure the project is completed within the approved budget. It
revamps the task such as resources planning, cost and budget utilization.
3.2.2
Phase 2: Analysis
After doing a careful planning, development of multimedia courseware begins with
the analysis phase. Analysis is the process of defining what is to be learned by the
students in a course in a given environment. There are four different types of analysis
that be carried out: need analysis, learner analysis, content analysis and environment
analysis as show in Figure 3.2.2.
Need Content
Analysis Analysis
Requirement
Analysis
Learner Environment
Analysis Analysis
Figure 3.2.2.1 Types of analysis
The first step in the systemic design of app start with analyze project needs and
problems in instructional design. Need analysis will analyzing what is necessary
steps to deal with problems related to present the clothes that are exact to the idea of
creating the app. Typically, the data is accumulated from the real situation and
resolve the issue that can be make use when problems arise. The need analysis help
to determine the shortcoming skills and ability in the students and addressed it to the
app. This can be done by surveillance from students and scholars.
3.2.3
Phase 3: Design
To point out how the items are to be sell and presented is to know the process of
course design. The system is examine carefully to design a clothing store app to be
distributed that will establish the easiness to navigate the catalogue and shopping is a
breeze. In a development of KITNAC Catalogue App, the catalogue is may vary
from all types of clothing and texture. The content have to be properly defined and
presented effectively.
Figure 3.2.3.1 Content Design Activities
In design phase, the team conduct research on case study on KITNAC Catalogue
App and 3 application that is related with clothing store app. As a result, the
development has started, followed by the design. For instance, the design will plan
the suitable feature to be included in the application with intuitive navigation for the
user.
Thus, the site map is produced for the application. Site map is how the app workflow
is presented, showing how the user interacts with the app. This design is used for
instructional design and development. The site map is the results of implementing
and concept. The site map visualizes the interaction of the app organized in
hierarchical diagram. The site map plays a crucial part to develop a stable and
intuitive system.
The team creates a storyboard for the app. A member will draw the storyboard of
each page and buttons to interact with another page. Then, the storyboard is
submitted to the lecturer and the client to check if there is any fixes to be made. After
the submission is approved, the team start to design the app.
For the interface design, the team uses Adobe XD to design on a spreadsheet that
utilize the ratio and resolution of common Android phones. The page layout and
navigation structure is design in the software will be preview and will be shown to
the lecturers and client to make amendments on the fixes that can be done. From the
amendments given, the preview design can be update and fixed so that the expected
deadline will be met.
3.2.4
Phase 4: Development
The development phase is followed by the analysis and design that has been made.
The process of authoring and creating the app material is the part of development
process. To ensure the app has been build according to the specification, the app will
be test. Then, the team will proceed to the task given referring to analysis and design
phase. The most crucial part for this phase may be authoring the app content. During
this phase, the resources which are obtained and developed from the images, buttons,
contents and animation will be integrated as a fully developed app.
So, it is important to choose the right software and hardware as it is necessarily for
the development to run smoothly. The lists of software that has been used in the
development is presented below.
Development area Software

Graphic editing Adobe Illustrator CC
Adobe Photoshop CC
Authoring Adobe XD CC
Programming Android Studio
Animations Adobe Animate CC
Figure 3.2.4.1 Software in developing the app

3.2.5
Phase 5: Implement
The app can be distributed to the user once the apps is compiled and tested. The
implementation of the development has been made during this phase. Phones and
emulators are setting up by team members to get ready for distribution. The installer
files are distributed and installed. The product will be delivered to the targeted end-
users to use the application. The prototype is tested with active Internet connection to
open the links in the app.
A brief navigation from team members to the user is introduced. User feedback is
required in an active manner to manage the system. The improvements of issue and
flawless interface is the result from the continuous feedback.
It is needed to properly evaluate the courseware as this phase of implementation is so

important. The lecturers will inform the progress that the team members need to
know. Since present, a lot of lecturers’ feedback is gained from team members as
well as the feedback between the team members that can make use as a reference for
the app. To ensure the positive outcomes, the required modification has been made.
Specification Laptops
Model Lenovo Yoga 530 & Acer Nitro 5
Processor Intel Core i5-8300 (2.3 GHz)
Memory 8GB RAM 128 SSD/1TB HDD
System type 64-bit
Graphics card Intel UHD Graphics & NVIDIA GeForce
Figure 3.2.4.2 Hardware specs used in two laptops

Furthermore, the delivery of the app is thru APK installation to the clients’ Android.
Other than Android system is not compatible for the app to run. For the user that do
not have an Android system in their phones but need to run the app, they can
download an emulator to test run the software.
For the testing phase is the considerably most important steps which can begin as
new as first stage at the making of individual segments is finished. The app need to
be tested using multiple integration testing ways once all the segments are combined.
It is possible during this phase to check whether the app is successfully build or
should have any amendments to be made so testing and debugging is required. It
could save time on fixing the errors by doing so. The team will tested the app and
help to find potential problems overlooked during the development of the app and
avoid any issue arise in the present times. Amendments will be made during this
phase. Moreover, any spelling errors and sketchy sentences need to be checked
during this phase. Lastly, a team meeting with lecturers is set up in schedule. The app
is inspected and adjusted.
3.2.6
Phase 6: Evaluation
The last stage of the method is evaluation. The app need to carefully check within
this phase. The app ready to be utilize once the process of evaluate is completed.
During this phase, the product is evaluated by lecturers and presented by the team
members. A submission of report to the lecturers has been made. For improving the
app, the comments and recommendation will be given. Along with the observation of
the successful app and also the delivery of the app to the user. It is helpful to offer
any recommendations to elevate the quality of the app, for future development
purposes.
Should be noting that the app has achieved the goals or not during the evaluation
phase. The product has reached for instructional enhancements after the evaluation
has been ended.
CHAPTER 4: PRODUCT DEVELOPMENT
4.1
Introduction
Product means any marketable thing with some utility in it, produce either by a labor
or through series of automated process. Development is an act of making or
achieving a continuous progress in something by someone. Progress transit from an
earlier policy (traditional approach) to an advanced policy (modern approach).
Product development is a specialized activity. It is does to improve the existing
product or to introduce a new product in the market. It is also done to improve the
earlier features or techniques or systems. Generally, it means a newly-product
development. Newly-product development means to introduce a brand new product
in the market. It means to add a fresh product to an existing line of products. In this
chapter, it will explain the development of prototype of KITNAC app.
4.2
Site Map
Figure 4.2.1 Site map
A site map is a visual organized model of a KITNAC catalogue app that allows the
users to navigate the app by just only using a mobile to get through about the content
of KITNAC catalogue, to know the materials of our product, to know the category of
our brand, to make sure the product is still in stock and available, to know the sizes
and the colors of the product that you want, to get update with our promotions and
our new arrival product and as we know if all the step that we mention before are
ready then for sure the customers will make a surveillance without go to the boutique
and also with a simple operation. This app can be used everywhere and anytime
without a limitation. Just make your finger dance on your mobile phone screen.
4.3
Prototype
1. Home page
Figure 4.3.1 Home page
Figure 4.3.1 shows a home page of KITNAC Catalogue App. The page consists of 4
buttons.
2. Category page
Figure 4.3.2 Category page
This page has 4 buttons assigning the types of clothes respectively. Back to home
button will navigate user to go back to the home page.
3. Longline & Long Sleeves
Figure 4.3.3 Items scroll page
The page has a button links to the name of the clothes which brings user to the color
selection. Back to category button navigate users to go back to the category page.
4. Color selection
Figure 4.3.4 Item description page
The page enables user to scroll the color available.

5. Featured items
Figure 4.3.5 Featured items
Users will navigate the featured items in a detailed, all side view. View button will
brought user to the item panning page.
6. Item panning
Figure 4.3.6 Item panning page
This page enables user to animated image of item panning.

7. Care Label
Figure 4.3.7 Care label and composition
Users can see the clothes material information and the label guide to care the clothes
properly.
8. Contact page
Figure 4.3.8 Contact page
This page contains 3 social media links to the official KITNAC Facebook, Instagram
and Twitter account. Below the buttons are the screenshot of the KITNAC office
location map.
CHAPTER 5: INTEGRATION AND TESTING
5.1
Introduction
In this chapter, we will handle the integration and testing of the application which is
the type of testing which includes in the software development process.
5.2
Integration
Before system testing comes with the integration testing in the application. Then, the
application testing will be done. The integration works by grouping the individual
modules and integrate after the testing phase of each modules. For example, the
elimination of the bugs and errors within the process of integration. Integration deals
with the process in the system instead of, the whole system of the integration.
5.3
Testing
System testing is a test of a whole system, it gets all the integrated modules of the
components from integration testing phase and combines all parts to a whole
software which is then tested.
5.3.1
Method of testing
Types of testing Description
Usability testing User can access the application features and how in
ease the application interacts with the user.
GUI testing (Graphics User Interface) To check graphically how the programs looks and
works as intended
Reliability testing To check the application works for long period and
does not crashing
Figure 5.3.1.1 Method of testing

5.3.2
Highlight Results
Based on the review of integration testing, the data will be collect by how the testing
is in process. According to the test, the application with latest build will be test on
the usability, user interface and reliability, of total average in 10 times. Figure shows
the summary of the test. 7 out of 10 times pass the testing on the usability and
reliability of the application. 9 out of 10 times is pass with the familiarity of user
interface.
Test steps: Usability Result Test steps: GUI Result Test steps: Reliability Result
Open app Pass Navigation between Pass Category sorting Pass
layout
Open category page Pass Button responsiveness Pass Name sorting Pass
Select category Pass Text button Pass Color selection Pass
Image slide Pass: Scroll to view Pass Price Pass
1 error
Icons (Image or Pass: Indicator Pass Availability Pass
button) 2
errors
Open care label page Pass Color Pass Item size Fail: no
clickabl
e
Open featured page Pass Description text Pass Contact page Pass
Open contact page Pass Image load Pass Care label page Pass
Map Pass Layout Pass Panning Pass
Social media button Pass Density per inch Pass Map Pass
support
Figure 5.3.2.1 Summary of integration test

CHAPTER 6: CONCLUSION AND RECOMMENDATION
6.1
Introduction
For this project, we get more suggestions from client, the client gave a lot of
suggestions what we need to do for next semester. Thanks to our lecturer for gave us
some help too for the suggestion.
6.2
Conclusion
The time management during the project, we managed well and it make the
presentation go well but still yet have some problems and we managed to fix that.
We glad because we having two modules reviewed by the lectures during the
presentation and we might be take the ideas for making better on the next progress
for the next semester that we have to facing soon.
However, we discussed each other and agreed that the mobile app can improve and
modified into a better mobile app, as there is some suggestion for more
improvements.
6.2.1
Review of objective
Throughout the development of probing and instill the idea to the software has open
new methods to develop new features. Hence, our company has opportunity to attract
more projects of software designing.
6.2.2
Advantages & disadvantages of product

The figure shows the advantages and disadvantages of the product.
Advantages Disadvantages
Colorful interface Overall color usage is less minimal
Comfy and spacious layout Less information in a page
Intuitive navigation Load time took a bit longer
Figure 6.2.2.1 Advantages and disadvantages of product
6.2.3
Limitation of the product

1. Considerations concerning stock availability
In development phase, the team has identify new ways to include key features.
Up to the recent build will solely provide the list of inventory then the user will
browse items that available only on the application. New arrivals and archive
items will exclude up to an extent of the upcoming build which comprises direct
stock flow.
2. Considerations concerning early build

New features will involve the general knowledge of program writing. Therefore,
based on the case study throughout the development, the established sources are
essential to provide additional modules on the project.
6.3
Future recommendation or suggestion

For the future, with the success of the project and when the number of user has
spread to a large number of client, we look forward to bringing in more new features
and upgrades to the project. For examples of new features and upgrades are:
● Add to cart
● Zoom in clothes material
● Improve navigation speed
● Make app available for any platforms (Android and iOS)
Through this KITNAC catalogue app, we hope that this mobile app will facilitate
users to use it with an upright feedback.
Gantt chart
Storyboard Design
Final Costing
1.1 Product Development Min. Max
System Design @ 1 - 3 weeks, 1 – 2 people RM2,000 RM6,000
Interface Design and Build @ 2 - 4 weeks, 2
- 4 people RM1,500 RM3,000
Site Integration @ 2 - 4 weeks, 2 - 4 people RM250 RM750
Site Testing @ 2 - 4 weeks, 2 - 4 people RM250 RM750
Delivery/Installation @ 2 - 4 weeks, 2 - 4
people RM150 RM450
Estimated Cost of Development RM7,150 to RM19,950
1.2 3rd Party License Costs

Adobe Photoshop - 2 licences @ RM99
each RM198
Estimated Cost of Licenses RM198
1.3 Maintenance & Support
User Manual RM250

Online Support RM2,000
Updates/Patches RM2,000
Estimated Cost of Maintenance RM4,250

1.4 Overhead
Phone Bills RM200
Broadband/Internet Connection RM600
Electricity RM300
Travelling RM300
Stationery RM50
Misc RM50
Estimated Cost of Overhead RM1,500
1.5 Total Estimated Cost of

Project
Min Max
Estimated Cost of Development RM13,098 RM19,950
Estimated Cost of Licenses RM198
Estimated Cost of Maintenance RM4,250
Estimated Cost of Overhead RM1,500
Grand Total RM13,098 to RM25,898
Prepared By Approved By
(Muhammad Afiq bin Azli) (Muhammad Amri bin Mohd Amin)
Designer Project Manager

Memorandum
To: Jessifa Joanna binti Mohd Sufian

From: Muhammad Amri bin Mohd Amin & Muhammad Afiq bin Azli
Date: 18 / 7 / 18
Meeting date: 19 / 7 / 18
Time: 10.00 a.m.

Location: UniKL MIIT
Attendance: Amri & Afiq
Subject: Company Discussion
Memorandum

Date: 4 / 9 / 18
Time: 2.30 p.m.

Subject: App Interface Design Check
Memorandum

Date: 21 / 10 / 18
Time: 10.00 am
Subject: Final Prototype Build
UNIVERSITI KUALA LUMPUR
FINAL YEAR PROJECT 2018

MINUTE MEETING 1.0
Date : 19th July 2018

Time : 10.00 a.m.
Venue : UniKL MIIT
PRESENT
NO. NAME ROLES
1 Muhammad Amri bin Mohd Amin Project Manager
2 Muhammad Afiq bin Azli Designer
No Agenda Action
1.0 WELCOME REMARKS BY PROJECT MANAGER
The Project Manager (Amri) welcomed all members to the meeting.
2.0 AGENDA 2 – Company Name

2.1 Company Name All members
The Project Manager has stated about naming of the

company.
2.1.1. Project Manager gives 3 name and finalize with a

name.
2.1.2. Our team decided Millenumia Studio as the company

name
2.1.3. Project Manager asks the team to suggest company

tagline that will be featured in Company Profile.
2.1.4. The team suggests the tagline
2.1.5. Project Manager adjust the sentence and finalize with

“New Age Versatility”
3.0 AGENDA 3 – Assigned Roles to Members
3.1 The roles are assigned between the members All members
3.1.1. Once agreed, the Project Manager gives the scopes to

the Designer
Project Manager: Muhammad Amri bin Mohd Amin
Designer: Muhammad Afiq bin Azli

.
AGENDA 4 – Logo Design, Business card and

4.0
Letterhead.
4.1 To give an identity to the company, Project Manager has

stated and asks Designer to create Letterhead.
All members
4.1.1. Project Manager designed Company Logo and

Business Card
4.1.2. Meanwhile, proposal paper work will be doing by

Project Manager. Amri
5.0 Adjournment of Meeting
The meeting was adjourned at 11.00 a.m.
Prepared by: Approved by:

……………………………. …………………………...
Muhammad Afiq bin Azli Muhammad Amri bin Mohd Amin
UNIVERSITI KUALA LUMPUR
FINAL YEAR PROJECT 2018

MINUTE MEETING 2.0
Date : 5th September 2018

Time : 2.30 p.m.
Venue : UniKL MIIT
PRESENT
NO. NAME ROLES
1 Muhammad Amri bin Mohd Amin Project Manager
2 Muhammad Afiq bin Azli Designer
No Agenda Action
1.0 WELCOME REMARKS BY PROJECT MANAGER
The Project Manager (Amri) welcomed all members to the meeting.
2.0 AGENDA 2 – Interface Design

2.1
Company Name All members
The Project Manager has stated about interface design.
2.1.1. Project Manager asks Designer the storyboard for the

interface
Storyboard
2.1.2. Designer presented the interface storyboard to the

Project Manager
2.1.3. Project Manager will assist by making further

research for resources
2.1.4. Project Manager accept the storyboard and will

proposed to the client.
3.0 AGENDA 3 – Client Meet-up
3.1 Project Manager asks the team free time to meet the client All members
for signoff
3.1.1. The team addressed the date and Project Manager

agrees to set up a meeting with client at 7th September
4.0 AGENDA 4 – Proposal and Final Costing
4.1 Project Manager shows the Final Costing and paper work to
the team. The team finalize the proposal without changes
Amri
been made.
5.0 Adjournment of Meeting
The meeting was adjourned at 4.00 p.m.
Prepared by: Approved by:

……………………………. …………………………...
Muhammad Afiq bin Azli Muhammad Amri bin Mohd
Amin
Program writing
package com.example.lenovo.kitnachome2;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
public class CareLabelActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_care_label);
}
}
import android.support.design.widget.TabLayout;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.widget.ImageView;
import com.github.chrisbanes.photoview.PhotoView;
import com.github.chrisbanes.photoview.PhotoViewAttacher;
public class Cat1BasicLS extends AppCompatActivity {

ViewPager viewPager;
PagerAdapter adapter;
TabLayout indicator;
int[] image;
@Override
setContentView(R.layout.cat1_basic_ls);
image = new int[] {

R.drawable.basic_long_sleeve_red,
R.drawable.basic_long_sleeve_grey,
R.drawable.basic_long_sleeve_blue,
R.drawable.basic_long_sleeve_black_normal
};
viewPager = (ViewPager) findViewById(R.id.pager);

adapter = new ViewPagerAdapter(Cat1BasicLS.this, image);
indicator=(TabLayout)findViewById(R.id.indicator);
indicator.setupWithViewPager(viewPager, true);
viewPager.setAdapter(adapter);
}
}
import android.widget.ImageButton;
public class Category1Activity extends AppCompatActivity {
@Override
setContentView(R.layout.activity_category1);
ImageButton basicls = (ImageButton) findViewById(R.id.button9);
ImageButton intcameols = (ImageButton) findViewById(R.id.button19);
ImageButton cameoss = (ImageButton)
findViewById(R.id.button19_css);
ImageButton ltj = (ImageButton) findViewById(R.id.button19_ltj);
Button back2category = (Button) findViewById(R.id.button25);
((ImageButton) basicls).setOnClickListener(new
View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intbasicls = new Intent(Category1Activity.this,
Cat1BasicLS.class);
startActivity(intbasicls);
}
});
((ImageButton) intcameols).setOnClickListener(new
@Override
Intent intcameols = new Intent(Category1Activity.this,
Cat1CameoLS.class);
startActivity(intcameols);
}
});
((ImageButton) cameoss).setOnClickListener(new
@Override
Intent intcss = new Intent(Category1Activity.this,
Cat1CameoSS.class);
startActivity(intcss);
}
});
((ImageButton) ltj).setOnClickListener(new View.OnClickListener() {

@Override
Intent intltj = new Intent(Category1Activity.this,
Cat1LongJersey.class);
startActivity(intltj);
}
});
((Button) back2category).setOnClickListener(new
@Override
Intent intb2cat = new Intent(Category1Activity.this,
CategoryActivity.class);
startActivity(intb2cat);
}
});
}
}
import android.net.Uri;
public class ContactActivity extends AppCompatActivity {
@Override
setContentView(R.layout.activity_contact);
ImageButton map = (ImageButton) findViewById(R.id.imageView66);
((ImageButton) map).setOnClickListener(new View.OnClickListener() {

@Override
Intent intmap = new Intent(ContactActivity.this,
MapsActivity.class);
startActivity(intmap);
}
});
}
public void browser1(View view){
Intent browserIntent = new
Intent(Intent.ACTION_VIEW,Uri.parse("http://www.instagram.com/kitnac"));
startActivity(browserIntent);
}
public void browser2 (View view){
Intent browserIntent2 = new
Intent(Intent.ACTION_VIEW,Uri.parse("http://www.facebook.com/profile.php?
id=100004385418853"));
startActivity(browserIntent2);
}
public void browser3 (View view){
Intent browserIntent3 = new
Intent(Intent.ACTION_VIEW,Uri.parse("http://www.twitter.com/kitnacteam?
lang=en"));
startActivity(browserIntent3);
}
}
import android.support.annotation.Nullable;
import pl.droidsonroids.gif.GifImageView;
import com.bumptech.glide.Glide;
public class FeaturedActivity extends AppCompatActivity {

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
setContentView(R.layout.activity_featured);
Button back2home = (Button) findViewById(R.id.button11);
((Button) back2home).setOnClickListener(new View.OnClickListener()

{
@Override
Intent b2h = new Intent(FeaturedActivity.this,
MainActivity.class);
startActivity(b2h);
}
});
}
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
@Override
setContentView(R.layout.activity_main);
Button toast;
toast = (Button) findViewById(R.id.imageView25);
toast.setOnClickListener(new View.OnClickListener() {
@Override
Toast.makeText(MainActivity.this,"Coming
soon!",Toast.LENGTH_LONG).show();
}
});
ImageButton mainbtn1 = (ImageButton) findViewById(R.id.button);

ImageButton mainbtn2 = (ImageButton) findViewById(R.id.button2);
((ImageButton) mainbtn1).setOnClickListener(new
@Override
Intent mainint1 = new Intent(MainActivity.this,
CategoryActivity.class);
startActivity(mainint1);
}
});
@Override
FeaturedActivity.class);
}
});
@Override
CareLabelActivity.class);
}
});
@Override
ContactActivity.class);
}
});
}
}
import android.support.v4.app.FragmentActivity;
import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MarkerOptions;
public class MapsActivity extends FragmentActivity implements

OnMapReadyCallback {
private GoogleMap mMap;
@Override
setContentView(R.layout.activity_maps);
SupportMapFragment mapFragment = (SupportMapFragment)
getSupportFragmentManager()
.findFragmentById(R.id.map);
mapFragment.getMapAsync(this);
}
@Override
public void onMapReady(GoogleMap googleMap) {
mMap = googleMap;
LatLng sydney = new LatLng(2.9826336450901096,101.66735708713531);

mMap.addMarker(new MarkerOptions().position(sydney).title("Marker
in KITNAC Main Office"));
mMap.moveCamera(CameraUpdateFactory.newLatLng(sydney));
mMap.getMaxZoomLevel();
}
}
import android.content.Context;
import android.support.annotation.Nullable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.ViewGroup;
import android.widget.RelativeLayout;
public class ViewPagerAdapter extends PagerAdapter {

private Context context;
private int[] image;
private LayoutInflater inflater;
public ViewPagerAdapter(Context context, int [] image){

this.context = context;
this.image = image;
}
@Override
public int getCount() {
return image.length;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return (view == object);
}
@Override
public Object instantiateItem(ViewGroup container, final int position)
{
//return super.instantiateItem(container, position);
ImageView img;
inflater = (LayoutInflater)
context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View itemView = inflater.inflate(R.layout.item_slider, container,
false);
img = itemView.findViewById(R.id.img_item);
img.setImageResource(image[position]);
img.setOnClickListener(new View.OnClickListener() {
@Override
Intent intent = new Intent(context, Fullscreen.class);
intent.putExtra("position", position);
context.startActivity(intent);
}
});
container.addView(itemView);
return itemView;
}
@Override
public void destroyItem(ViewGroup container, int position, Object
object) {
container.removeView((ImageView)object);
}
<?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".CareLabelActivity">
<ImageView
android:id="@+id/imageView47"
android:layout_width="wrap_content"
android:layout_height="5dp"
android:layout_marginStart="8dp"
android:layout_marginTop="36dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/featured_line_5" />
<ImageView
android:layout_width="84dp"
android:layout_marginBottom="4dp"
app:layout_constraintBottom_toTopOf="@+id/imageView55"
app:srcCompat="@drawable/care_label_pane" />
<ImageView
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@+id/imageView47"
<ImageView
app:srcCompat="@drawable/care_label_header" />
<ImageView
app:srcCompat="@drawable/material_label" />
<ImageView
app:srcCompat="@drawable/icon_label_grid" />
<ImageView
app:layout_constraintEnd_toStartOf="@+id/imageView61"
app:srcCompat="@drawable/icon_label_grid2" />
<ImageView
app:layout_constraintBottom_toBottomOf="@+id/imageView22"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/imageView22"
app:layout_constraintTop_toTopOf="@+id/imageView22"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="@drawable/label_grid" />
</android.support.constraint.ConstraintLayout>

tools:context=".CategoryActivity">
<ImageView
app:layout_constraintBottom_toBottomOf="parent"
<ImageView
app:srcCompat="@drawable/category_title" />
<ImageView
<Button
android:id="@+id/button5"
android:background="@drawable/cat_lls"
app:layout_constraintVertical_bias="0.0" />
<Button
android:background="@drawable/cat_polo"
app:layout_constraintTop_toBottomOf="@+id/button5"
<Button
android:background="@drawable/cat_print"
<Button
android:background="@drawable/cat_sig"
<Button
android:background="@drawable/back2home"
app:layout_constraintTop_toBottomOf="@+id/button8" />

tools:context=".Category1Activity">
<ImageView
app:srcCompat="@drawable/category_longline_ls" />
<ImageView
<ScrollView
android:id="@+id/scrollView7"
app:layout_constraintVertical_bias="0.0">
<LinearLayout
android:layout_marginLeft="40dp"
android:layout_marginRight="40dp"
android:orientation="vertical">
<ImageButton
android:layout_margin="4dp"
app:srcCompat="@drawable/basic_long_sleeve_black" />
<Button
android:id="@+id/b9"
android:layout_weight="1"
android:background="@drawable/basic_ls" />
<ImageView
app:srcCompat="@drawable/rm_29" />
<ImageView
app:srcCompat="@drawable/more_colours" />
<ImageButton
android:paddingTop="8dp"
app:srcCompat="@drawable/cameo_long_sleeves1" />
<Button
android:id="@+id/b19"
android:background="@drawable/cameo_ls" />
<ImageView
<ImageButton
android:id="@+id/button19_css"
app:srcCompat="@drawable/cameo_long_tee1" />
<Button
android:id="@+id/b19_css"
android:background="@drawable/cameo_long_t" />
<ImageView
android:id="@+id/imageView35_css"
<ImageButton
android:id="@+id/button19_ltj"
app:srcCompat="@drawable/long_tee_jersey4" />
<Button
android:id="@+id/b19_ltj"
android:background="@drawable/lt_jersey" />
<ImageView
android:id="@+id/imageView35_ltj"
<ImageView
android:id="@+id/imageView11_ltj"
app:srcCompat="@drawable/more_colours" />
</LinearLayout>
</ScrollView>
<Button
android:background="@drawable/back2category"
app:layout_constraintTop_toBottomOf="@+id/scrollView7" />

tools:context=".Cat1BasicLS">
<ImageView
android:src="@drawable/basic_ls"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:src="@drawable/featured_line_5"
app:layout_constraintBottom_toTopOf="@+id/pager"
<android.support.v4.view.ViewPager
android:id="@+id/pager"
app:layout_constraintVertical_bias="0.0"></android.support.v4.view.ViewPage
r>
<android.support.design.widget.TabLayout
android:id="@+id/indicator"
android:layout_alignParentBottom="true"
android:layout_centerInParent="true"
app:layout_constraintTop_toBottomOf="@+id/pager"
app:tabBackground="@drawable/indicator_selector"
app:tabGravity="center"
app:tabIndicatorHeight="0dp" />
<TextView
android:id="@+id/textViewBLS"
android:fontFamily="@font/oswald_light"
android:text="RM29.00"
android:textAlignment="viewStart"
android:textSize="18sp"
app:layout_constraintTop_toBottomOf="@+id/indicator" />
<TextView
android:id="@+id/textView4"
android:text="Made with pure cotton. Available in 4 colours."
android:textAlignment="textStart"
app:layout_constraintTop_toBottomOf="@+id/textViewBLS" />
<ImageView
app:layout_constraintTop_toBottomOf="@+id/textView4"
app:srcCompat="@drawable/size_avail" />
<ImageView
app:layout_constraintHorizontal_chainStyle="packed"
app:srcCompat="@drawable/size_s" />
<ImageView
app:srcCompat="@drawable/size_m" />
<ImageView
app:srcCompat="@drawable/size_l" />
<ImageView
app:srcCompat="@drawable/size_xl" />
<com.github.chrisbanes.photoview.PhotoView
android:id="@+id/full_img">
</com.github.chrisbanes.photoview.PhotoView>
?xml version="1.0" encoding="utf-8"?>

<ImageView
android:id="@+id/img_item"
android:scaleType="centerCrop"
android:foreground="?android:attr/selectableItemBackground">
</ImageView>

Report Final Project

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Report Final Project

Hochgeladen von

Copyright:

Verfügbare Formate

UNIVERSITI KUALA LUMMPUR

MALAYSIAN INSTITUTE OF INFORMATION TECHNOLOGY

FINAL YEAR PROJECT

KITNAC CATALOGUE APP

1. CHAPTER 1.0: INTRODUCTION 1

2. CHAPTER 2.0: LITERATURE REVIEW 4

3. CHAPTER 3.0: METHODOLOGY 9

4. CHAPTER 4.0: PROTOTYPE/PRODUCT DEVELOPMENT 18

5. CHAPTER 5.0: INTEGRATION AND TESTING 28

6. CONCLUSION AND RECOMMENDATION 30

Please explain details

Figure 1.7.1 UNIQLO App – New arrivals page

Figure 1.7.2 Software use in project

Conclude what you get from chapter 1.

2.1 check format

Guidelines for Developing Good Mobile Apps wrong

● Focusing a segment of task

Description of Project Area check all your

Figure 2.3.1 App Flow Diagram

Figure 2.4.1.1 Screenshot of UNIQLO App

Figure 2.4.2.1 Case study of UNIQLO App

Figure 2.4.1.2 Zalora App

Figure 2.4.2.2 Case study of Zalora App

Figure 2.4.1.3 Zara App

Research Methodology Structure

ADDIE Model is a step-by-step framework used by instructional designer, developer

Figure 3.2.2.1 Types of analysis

Figure 3.2.3.1 Content Design Activities

Development area Software

Figure 3.2.4.1 Software in developing the app

It is needed to properly evaluate the courseware as this phase of implementation is so

Model Lenovo Yoga 530 & Acer Nitro 5

Processor Intel Core i5-8300 (2.3 GHz)

Memory 8GB RAM 128 SSD/1TB HDD

System type 64-bit

Graphics card Intel UHD Graphics & NVIDIA GeForce

Figure 3.2.4.2 Hardware specs used in two laptops

Figure 4.2.1 Site map

Figure 4.3.1 Home page

Figure 4.3.2 Category page

Figure 4.3.3 Items scroll page

Figure 4.3.4 Item description page

The page enables user to scroll the color available.

Figure 4.3.5 Featured items

Figure 4.3.6 Item panning page

This page enables user to animated image of item panning.

Figure 4.3.7 Care label and composition

Figure 4.3.8 Contact page

Figure 5.3.1.1 Method of testing

Figure 5.3.2.1 Summary of integration test

Advantages & disadvantages of product

Figure 6.2.2.1 Advantages and disadvantages of product

Limitation of the product

2. Considerations concerning early build

Future recommendation or suggestion

1.2 3rd Party License Costs

1.3 Maintenance & Support

User Manual RM250

Estimated Cost of Maintenance RM4,250

Estimated Cost of Overhead RM1,500

1.5 Total Estimated Cost of

(Muhammad Afiq bin Azli) (Muhammad Amri bin Mohd Amin)

Designer Project Manager