0% found this document useful (0 votes)
27 views110 pages

Floralify Final 10 58

Uploaded by

linotlley
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
27 views110 pages

Floralify Final 10 58

Uploaded by

linotlley
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 110

FLORALIFY: A CROSS-PLATFORM APPOINTMENT

AND CUSTOMIZATION FLORAL ARRANGEMENT


SYSTEM WITH SALES AND DELIVERY MONITORING
FOR STEPHANIE’S FLOWER SHOP

A Capstone Project
Presented to the Faculty of the
Information and Communications Technology Program
STI College San Jose Del Monte

In Partial Fulfilment
of the Requirements for the Degree
Bachelor of Science in Information Technology

Christian Dave S. Camato


Karl Justine F. Fernandez
Dhanica A. Llorente
Matthieu Alain G. Zabat

November 2024
ENDORSEMENT FORM FOR ORAL DEFENSE

TITLE OF RESEARCH: A Cross-Platform Appointment and


Customization Floral Arrangement System
with Sale and Delivery Monitoring for
Stephanie’s Flower Shop

NAME OF DEVELOPERS: Christian Dave S. Camato


Karl Justine F. Fernandez
Dhanica A. Llorente
Matthieu Alain G. Zabat

In Partial Fulfilment of the Requirements


for the degree Bachelor of Science in Information Technology
has been examined and is recommended for Oral Defense.

ENDORSED BY:

Herbert G. Gardner
Capstone Project Adviser

APPROVED FOR ORAL DEFENSE:

Jan Joshua D. Mangahas


Capstone Project Coordinator

NOTED BY:

John Carlo D. Silmaro


Program Head

November 2024

STI College San Jose Del Monte ii


APPROVAL SHEET

This capstone project titled A Cross Platform Appointment and Customization


Floral Arrangement System with Sales and Delivery Monitoring for Stephanie’s
Flower Shop, prepared and submitted by Christian Dave S. Camato, Karl Justine F.
Fernandez, Dhanica A. Llorente, and Matthieu Alain G. Zabat, in partial
fulfillment of the requirements for the degree of Bachelor of Science in Information
Technology, has been examined and is recommended for acceptance and approval.

Herbert G. Gardner
Capstone Project Adviser

Accepted and approved by the Capstone Project Review Panel


in partial fulfillment of the requirements for the degree of
Bachelor of Science in Information Technology

Chris Jonel B. Barrameda Enoch James C. Tayanguna


Panel Member Panel Member

Alfie B. Benito MIT


Lead Panelist

Noted:

Jan Joshua D. Mangahas John Carlo D. Silmaro


Capstone Project Coordinator Program Head

November 2024

STI College San Jose Del Monte iii


ACKNOWLEDGEMENTS

First and foremost, the developers would like to express their heartfelt appreciation to
everyone who made this project possible. The developers would like to sincerely
thank Mr. Jan Joshua Mangahas, our Capstone Project Coordinator, for his invaluable
guidance and support throughout the research process. His feedback and
encouragement motivated us to improve continuously, and his dedication to meeting
deadlines was crucial to the project's success.

To Mr. Herbert Gardner, the developers’ thesis advisor, for his invaluable guidance
and expertise that shaped the project's direction. His insightful feedback helped refine
both its technical and theoretical aspects. His support and encouragement were
instrumental throughout the process.

To the Capstone Project Review Panel, we express our sincere thanks for their expert
guidance, constructive criticism, and unwavering support throughout the research
process. Their feedback challenged us to improve our methodologies and enhance the
overall quality of our work, ensuring the project met rigorous academic and practical
standards.

Also, the developers’ families for their unwavering emotional and financial support
throughout this challenging period. Their understanding, patience, and belief in us
allowed us to dedicate the necessary time and effort to complete this project. The
developers truly appreciate the sacrifices they made to support our academic journey.

To Stephanie’s Flower Shop developers’ client, for their trust and collaboration in
shaping the system’s features and functionalities. Their valuable input and feedback
were essential to the success of this project.

And the most importantly, the developers express heartfelt gratitude to the Lord for
His guidance, strength, and wisdom, which provided courage and perseverance
throughout this project. His blessings were a constant source of inspiration and
motivation.

STI College San Jose Del Monte iv


ABSTRACT

Title of research: A Cross-Platform Appointment and Customization Floral


Arrangement System with Sales and Delivery Monitoring for
Stephanie’s Flower Shop

Developers: Christian Dave S. Camato


Karl Justine F. Fernandez
Dhanica A. Llorente
Matthieu Alain G. Zabat

Degree: Bachelor of Science in Information Technology

Date of Completion: July 2025

Keywords: Cross-Platform, Customization, Appointment

This research presents the development and implementation of Floralify: A Cross-


Platform Appointment and Customization Floral Arrangement System with Sales and
Delivery Monitoring for Stephanie’s Flower Shop, a digital platform designed to
connect users with local florists, enhancing the floral gifting experience. The primary
objective was to address the limitations of traditional floral services by leveraging
technology to improve accessibility, personalization, and customer engagement.

The study opens with an analysis of current market trends and consumer preferences in
the floral industry, highlighting the challenges local florists face, including competition
from online retailers and limited visibility, thereby emphasizing the need for an
innovative solution. It then describes the design and features of the Floralify platform,
showcasing functionalities such as personalized floral recommendations, real-time
inventory updates, and a user-friendly interface that enables smooth transactions
between consumers and local florists.

The implementation strategy includes the development process, user testing, and
feedback collection, with a comprehensive survey conducted among users and florists
post-launch to assess satisfaction levels and the effectiveness of features such as order
tracking and delivery options. Results revealed high user satisfaction, with respondents
praising the app's ease of use and the quality of floral arrangements. Feedback
highlighted significant improvements in communication between florists and

STI College San Jose Del Monte v


customers, along with increased visibility for local businesses. Overall, the findings
suggest that Floralify effectively enhances the floral gifting experience by revitalizing
local florists and addressing consumer needs. This study emphasizes the transformative
potential of technology in traditional sectors and establishes a foundation for future
developments of the platform.

STI College San Jose Del Monte vi


TABLE OF CONTENTS

Page
Title Page i
Endorsement form for Oral Defense ii
Approval Sheet iii
Acknowledgments iv
Abstract v
Table of Contents vii
List of Figures ix
List of Tables xiii
List of Notations xiv
Introduction
Project Context 1
Purpose and Description 2
Objectives 3
Scope and Limitations 4
Review of Related Literature/Studies/Systems 11
Methodology
Requirements Analysis 35
Requirements Documentation 35
Design of Software, System, Product, and/or Processes 36
Development 47
Results and Discussion
Testing 48
Description of Prototype 59
Implementation Plan 49
Implementation Results 50
Conclusion 51
References 52
Appendices 54
Resource Persons 55
Relevant Source Code 60
Evaluation Tool/Test Documents 68

STI College San Jose Del Monte vii


Sample Input/Output/Reports 70
User’s Guide 77
Personal Technical Vitae 92

STI College San Jose Del Monte viii


LIST OF FIGURES

Page

Figure 1: Landing Page on Web Browser 37

Figure 2: Landing Page in Mobile Application 37

Figure 3: Login Page 37

Figure 4: Admin Dashboard 38

Figure 5: Categories 38

Figure 6: Special Events 39

Figure 7: Custom Orders 39

Figure 8: Users and Customer Page 39

Figure 9: Conversations 40

Figure 10: Reviews 40

Figure 11: Login Page 41

Figure 12: Categories 41

Figure 13: Custom Order 42

Figure 14: Special Events 42

Figure 15: Cart 43

Figure 16: My Orders 43

Figure 17: Notifications 44

Figure 18: Chat 44

Figure 19: Account 45

Figure 20: Payment Method 45

Figure 21: Digital Receipt 46

Figure 22: Admin Sign-in Page 71

Figure 23: Inventory 71

Figure 24: Special Events 71

Figure 25: Custom Orders 72

STI College San Jose Del Monte ix


Figure 26: Users and Customers 72

Figure 27: Conversations 72

Figure 28: Reviews 72

Figure 29: Users and Customers Sign-in and Sign-up 73

Figure 30: Purchasing flowers in Categories 73

Figure 31: Custom Orders 73

Figure 32: Special Events 74

Figure 33: Cart 74

Figure 34: My Orders 74

Figure 35: Notifications 75

Figure 36: Chat 75

Figure 37: Account 75

Figure 38: About 76

Figure 39: Landing Page 77

Figure 40: Predefined Email 78

Figure 41: Admin Dashboard 79

Figure 42: Inventory 79

Figure 43: Special Events 80

Figure 44: Custom Orders 80

Figure 45: Users and Customers Page 81

Figure 46: Conversations 81

Figure 47: Reviews 82

Figure 48: Landing Page Web Browser 82

Figure 49: Landing Page Mobile Application 82

Figure 50: Log in Page Web Browser 83

Figure 51: Log in Page Mobile Application 83

Figure 52: Register Account Web Browser 83

STI College San Jose Del Monte x


Figure 53: Register Account Mobile Application 83

Figure 54: Home Page Web Browser 84

Figure 55: Home Page Mobile Application 84

Figure 56: Categories Web Browser 84

Figure 57: Categories Mobile Application 84

Figure 58: Custom Orders Web Browser 85

Figure 59: Custom Orders Mobile Application 85

Figure 60: Special Events Web Browser 85

Figure 61: Special Events Mobile Application 86

Figure 62: Cart Web Browser 86

Figure 63: Cart Mobile Application 86

Figure 64: Pick Up Type 87

Figure 65: Payment Options 87

Figure 66: Customer Information 87

Figure 67: To Process Web Browser 88

Figure 68: To Process Mobile Application 88

Figure 69: To Deliver Web Browser 88

Figure 70: To Deliver Mobile Application 88

Figure 71: To Rate Web Browser 89

Figure 72: To Rate Mobile Application 89

Figure 73: Feedback Web Browser 89

Figure 74: Feedback Mobile Application 89

Figure 75: Notification Web Browser 90

Figure 76: Notification Mobile Application 90

Figure 77: Account Web Browser 90

Figure 78: Account Mobile Application 90

Figure 79: About Web Browser 91

STI College San Jose Del Monte xi


Figure 80: About Mobile Application 92

STI College San Jose Del Monte xii


LIST OF TABLES

Page
Table 1: Gantt Chart of Activities 30
Table 2: Hardware: 31
Table 3: Software 32

STI College San Jose Del Monte xiii


LIST OF NOTATIONS

Cross Platform
Refers to the system’s capability to operate across various devices and operating
systems, providing accessibility and flexibility for users.

Appointment
A feature within the system that enables customers to schedule floral arrangement
services for specific dates and events.

Customization
This feature allows customers to personalize floral arrangements to suit their
preferences, such as adding specific flowers, colors, or messages.

Inventory
A section displaying details of all available flowers, including stock quantities, pricing,
and types.

Special Events
A management feature for creating, pricing, and customizing arrangements specifically
for occasions such as weddings or funerals.

Custom Order
A function that lets the admin add and edit customizable arrangement options for
customers.

Conversations
This feature enables direct communication with customers, including responding to
chatbot interactions.

Account
A section for customers to manage their personal information, including contact details
and preferences.

Payment Method
An option providing various payment choices, including digital wallet integrations for
seamless transactions.

Digital Receipt
An automated feature that sends a confirmation receipt to the customer upon successful
order completion.

STI College San Jose Del Monte xiv


Visual Studio Code
The integrated development environment (IDE) is used for coding and debugging
throughout the project.

React Native with Expo


The front-end framework is utilized for creating a responsive, cross-platform
application interface.

Firebase
The back-end platform is employed for data storage, authentication, and real-time
updates within the system.

STI College San Jose Del Monte xv


INTRODUCTION

Project Context

A flower shop is a retail establishment that sells cut flowers and flowering plants,
purchased from both local and international farmers. They create visually appealing
arrangements for various occasions and often provide consultations to help customers
choose the best options. Many flower shops also offer delivery services to ensure the
timely arrival of floral gifts. These shops facilitate emotional communication and joy
through their products. Embracing e-commerce, flower shops now allow customers to
browse, select, and order floral arrangements online, expanding their reach and
accessibility to a tech-savvy audience.

Stephanie Flower Shop specializes in floral services for significant life events, catering
to funerals and weddings. They hold a DTI permit and offer flexible payment options,
with a 50% down payment via E-wallet or bank transfer and the balance due after delivery
or pickup. Registered with the Bureau of Internal Revenue, they ensure compliance with
tax regulations. Their in-house delivery service is scheduled according to customer
needs, while sales are manually logged. The shop has a clear cancellation policy, with
the 50% down payment being non-refundable. Located in Tungkong Mangga's Dalisay
Market, they serve the San Jose Del Monte Bulacan area and provide fresh-cut flowers
for these meaningful occasions.

Despite being a trusted establishment, Stephanie's Flower Shop faces challenges in


adapting to modern customer needs and maintaining operational efficiency. Without a
digital system for capturing customer information, the shop misses opportunities for
personalized marketing strategies, such as targeted promotions or reminders for wedding
and funeral arrangements. Limited online presence restricts them from reaching a broader
customer base, making it harder to compete with flower shops that have a user-friendly
online platform. Manual setup further limits appeal to tech-savvy customers who prefer
the convenience of online browsing and ordering.

Customer communication and order tracking present challenges, as customers must call
or message the shop directly for updates, leading to potential delays and
misunderstandings. Manual operations sometimes cause scheduling errors and delivery
delays, which can disappoint customers—especially for time-sensitive occasions like
funerals. Managing sales and expenses manually is time-consuming and prone to

STI College San Jose Del Monte 1


discrepancies, complicating tax reporting and making profitability tracking challenging.
These issues impact both the customer experience and the shop's ability to focus on floral
arrangement design. Manual inventory tracking often results in stock discrepancies,
risking customer disappointment if items are oversold or unexpectedly out of stock.

Implementing the Floralify system could address these issues, streamlining order
management, inventory control, and communication. This cross-platform online solution
would allow customers to easily browse, customize, and order arrangements for funerals
and weddings. Automated customer data collection and financial tracking would
facilitate personalized marketing efforts and improve financial management. By adopting
Floralify, Stephanie's Flower Shop could focus on creating beautiful arrangements and
connecting with the community, effectively positioning itself to succeed in the digital
age.

Purpose and Description

To develop a cross-platform point of sale system with appointment, flower arrangement


customization, sales, and delivery options that allows customers to submit their preferred
orders and for flower shop businesses to quickly process the orders while managing their
sales and inventories. Customers can use a web browser to access the system. They can
browse several types of flowers, such as a package with accessories or their preferred
add-ons, or separately. They can select either self-pick-up, self-book, or use the shop's
delivery service. To create an account, customers may use their Email and Google
Account to view and order their preferred flower arrangement. This provides a
streamlined and convenient ordering experience.

STI College San Jose Del Monte 2


Objectives

Specific Objectives

• To create a user-friendly platform allowing customization, basic


selection, appointment booking for special events, and secure flower
purchasing. This objective aims to develop a platform to optimize the flower
purchasing process, enhancing customer satisfaction and driving sales. The
system will simplify event bookings for special occasions, including
weddings and funerals.

• To develop customization of flower arrangements and appointments for


special events through convenient customization options. The system will
allow customers to personalize floral arrangements by selecting colors, flower
types, and arrangement styles for specific occasions. Convenient appointment
scheduling will enable clients to plan their events in advance, ensuring precise
and creative execution.

• To develop a large online flower collection that is accessible via android


devices and through website. Users can explore a comprehensive flower
collection on both Android devices and the website, offering a seamless and
convenient browsing experience.

• To incorporate different delivery options for customers. The system will


provide flexible delivery options, allowing customers to choose delivery
times and methods that suit their specific needs, ensuring timely and
convenient delivery.

• To develop a system with a real-time live-chat function with chatbot


automated replies. To enhance customer experience, a live chat function
with an automated chatbot will be available to provide instant support, answer
questions, and guide users through the buying process.

• To implement a system with digital receipt functionality. To enhance


transparency and customer confidence, a digital receipt feature will be
included, providing users with a convenient of their transactions.

STI College San Jose Del Monte 3


Scope and Limitations

Scope:

• Landing Page

On the landing page, users will be directed to the system's home page.
Admin users can view the shop's physical store image, along with details
about events, location, Facebook link, contact information, and business
hours. Meanwhile, regular users will see flower categories, allowing them
to select their preferred flowers for purchase.

Admin Module

• Login Page
This section will allow the administrator to login using pre-defined
Email account.

• Dashboard
This section gives the admin an overview of the few stocks of a products,
new orders, most recent chats and recent transactions. It will also have a
button that will direct the admin to paymongo to see all the the payments
from the customers. Then, the data will be sorted by time and date.

• Notification
This section provides the admin with a notification display for all
transactions related to Inventory, Special Events, and Custom Orders.

• Inventory
In this section, it will display the flower details, such as types of flowers
in various occasion such as Valentine's Day and Mother's Day, flowers
name, flowers color, pricing information, and the quantity of flowers.
Also in this, the administrator can adjust the quantity of flowers, as well as
add available flowers for clients or customers to view. It will have a search
bar where admin can search specific flowers and it can also view as grid

STI College San Jose Del Monte 4


view.

• Special Events
In this section, administrators have the ability to edit event prices,
ensuring that they can quickly adjust rates as needed. Admins can manage
floral arrangements and enhancements associated with these events,
allowing them to customize offerings based on seasonal availability. It
will also display all of the bookings of customers.

• Custom Order
In this section, the admin can add and edit flowers, ribbons, wrappers, and
add-ons, as well as upload images for specific items. There is a button that
allows the admin to download the current stock availability, making
inventory management efficient and straightforward.

• Users and Customer Module


In this section, it will have five sequences. In the first sequence, all of the
users will be shown. In second sequence, it will display the customers
with pending orders. And for the third, it will display the customers
without orders. Fourth sequence, it will display the customers’ orders that
are still in process. And lastly the fifth sequence will display all of the
customer who have completed their orders. The system will display the
information about the customers who registered in the system such as the
name, contact information, and address. Further, once the customer
ordered, the admin can view the information of the purchased item,
delivery option selected by the customer and if the customer already paid
the 50% amount of the total bill. And lastly, the admin can view the status
of order whether it is to process, to ship, to deliver, and successfully
delivered.

• Conversations
In this section, the administrator can respond to customer requests or
inquiries. This section also includes a chatbot for handling inquiries if the
admin is unavailable.

STI College San Jose Del Monte 5


• Reviews
This section allows shoppers to provide direct feedback on their
experience, covering aspects such as flower quality, delivery service,
website usability, and overall satisfaction. This feedback helps the owner
enhance customer experience and identify areas for improvement. Also,
there is a search bar for admins to find specific customer names and a
filter to categorize feedback by flower names, streamlining the review
process.

Users Module

• Login Page
In this section, users have the option to sign up and create an account.
They can register or log in using their Email or Google Account. Users
who forgot their password can easily reset it, a reset link will be sent to
their email or Google account, enabling them to create a new password
securely.

• Home Page
In a web browser, this section will display the flower shop’s details along
with an image of the store. It will include the shop's name, address, contact
information, operating hours, and its Facebook page. And it will also
feature a button that directs users to the different flower categories
available. In a mobile, it will direct to flower categories.

• Categories
This section displays a category selection of flowers that the user may
prefer to select, whether the customer wants a flower for Valentine's Day,
Mother’s Day, or any other special occasion.

• Custom Order
This feature empowers customers to personalize their ideal flower
arrangement to perfection. They can thoroughly select their desired color

STI College San Jose Del Monte 6


scheme of ribbons, and flower wraps and choose from an extensive array
of flowers, encompassing everything from traditional favorites to exotic
blooms. Customers can highlight their arrangement with delicate flower
wraps, elegant ribbons, and other charming accessories, adding a touch of
flair and individuality. To further enhance the customization experience,
users have the option to upload a photo of their preferred flower
arrangement, serving as inspiration for skilled florists to craft a creation
that closely aligns with their vision.

• Special Events
This section enables customers to select a theme for their flower
arrangements specifically designed for weddings and funerals. After
choosing a category, the customers will complete a form with event
details, such as name, address, and contact information. Here they can also
personalize their arrangements by specifying color schemes and selecting
significant flower types. But to do that all, customers must provide the
event date and time to ensure timely preparation and delivery. And lastly,
to confirm their order for weddings and funerals, a 50% deposit or full
payment is required.

• Cart
This section showcases all the flowers selected by the customer, providing
a comprehensive view of their chosen arrangements. Each entry includes
details such as flower types, colors, and any additional enhancements or
customizations made. And this visual display does not only allows
customers to review their selections but also ensures that they can easily
make any necessary adjustments before finalizing their order.

• My Orders
This section outlines three stages of customer orders: to process, to
deliver, and to rate. In the “To Process area”, customers can view all
orders that are currently being processed. While the “To Deliver section”
allows customers to choose their preferred delivery method, whether it’s
self-booking, self-pick-up, or using the shop’s delivery services. And

STI College San Jose Del Monte 7


lastly, the “To Rate section” enables customers to provide ratings and
feedback on their purchased flowers, contributing to an enhanced
shopping experience.

• Notifications
This part will notify users about their order and show the status of their
orders, such as processed, completed, or ready for pickup or delivery. And
along with the order status, the time and date will be shown.

• Chat
This feature allows customers to openly inquire about their chosen flower
arrangement. Users can send images that they prefer for flower
arrangements. It will also have a chatbot that will provide frequently asked
questions (FAQs) about their location, order process, modes of payment,
delivery services, and the types of flowers available for specific occasions.
It will include a link that will redirect the user to their request.

• Account
This section allows users to easily modify their address and phone
number. They can edit their information and save the updates,receiving a
confirmation message once successful. This ensures the store has accurate
customer details for effective communication and delivery. Users can also
change their profile picture.

• Payment Method
In this section, users can make the 50% down payment via E- wallets like
G-cash and PayMaya, or with a bank transfer through Union Bank. Users
can also use the same E-wallets and Union Bank to settle the remaining
balance. Payment of the remaining balance is determined by the delivery
option selected: for pick-up, users can pay the remaining balance at the
store; for booking, users can choose whether the customer wants the
courier to make payments for the remaining balance; and for store delivery
service, users can pay the remaining balance upon delivery.

STI College San Jose Del Monte 8


• Digital Receipt
Upon the completion of either full payment or a down payment for their
orders, customers will promptly receive a comprehensive digital receipt
via email. This receipt serves as an official confirmation of their purchase,
detailing the specifics of the transaction, including the items ordered,
quantities, pricing, and any applicable taxes or fees. The receipt will
include pertinent order details such as the customer's name, billing and
shipping address, contact information, and the chosen delivery date and
time, if applicable. This digital receipt provides customers with a
convenient and secure record of their transactions, ensuring transparency
and peace of mind throughout the purchasing process.

STI College San Jose Del Monte 9


Limitations

• Orders Location
The system will only allow users to view the status of their orders
with a notification

• E-wallets and Bank Transactions


The system will only accept payments from GCash or PayMaya e-wallets
and only allow bank transfers from Union Bank.

• Android Mobile Only


Customers can only access the application on Android devices and via
iOS devices through a web page using Safari, Chrome, or other web
browsers. However, the application is not available for download from the
App Store.

• Android 5 up
The system will only work on Android devices running version 5 or
above. This ensures compatibility with secure and up-to-date devices
while targeting a broad user base.

STI College San Jose Del Monte 10


Review of Related Literature/Studies/Systems

Local Literature

According to Gamay et al. (2022), technology plays a critical role in business


operations. Businesses rely on various devices and programs to stay updated, plan
projects, and organize tasks effectively. Modern applications offer increased
capabilities, allowing businesses to excel in daily operations and provide user- friendly
methods for learning and data analysis. The absence of technology can be detrimental,
especially in the face of unforeseen circumstances like pandemics. Gamay et al. (2022)
highlight how the COVID-19 pandemic significantly impacted Filipino businesses
reliant on physical interaction. The need to close stores due to lockdowns forced many
to establish online presences to survive. However, these new online ventures often
struggled with inventory management, facing issues like duplicate selling, overselling,
and stock loss due to limitations of traditional methods like spreadsheets. Spreadsheets,
while accessible and cost-effective, are not user- friendly and lack the capacity to
handle complex business aspects like sales and employee management.

The concept of digital stores is rapidly gaining traction as a viable business strategy. A
growing number of businesses are establishing websites to facilitate online transactions.
Gamay et al. (2022) rightly point out the increasing prevalence of online shopping,
where customers can browse product catalogs, select items, and finalize purchases
directly through a virtual store. Gamay et al. (2022) present a relevant case study of a
responsive web-based sales and inventory system developed for Paint N Glow
Cosmetics and Skincare. This system highlights the numerous benefits of such
technology for businesses, including Improved Inventory Tracking and Sales
Monitoring – The system ensures accurate tracking of inventory and sales activity.
User-Friendly Interface – A user-friendly interface simplifies operations for both
business owners and customers. Elimination of Manual Tasks – The system
eliminates manual tasks like data entry, boosting efficiency. Real-Time Data Access –
Cloud storage enables real-time access to sales, stock, and inventory information. E-
commerce Integration – Integration with an e-commerce platform facilitates online
sales. Gamay et al. (2022) outline the typical functionalities of web-based sales and
inventory systems. These functionalities include features like login, product
management, stock management, transaction processing, and customer management.

STI College San Jose Del Monte 11


However, the study acknowledges limitations such as the system's dependence on a
stable internet connection. The research by Gamay et al. (2022) provides a strong
foundation for Stephanie's Flower Shop system. By incorporating functionalities like
those mentioned in the case study and addressing the limitations, Stephanie's Flower
Shop system can become a valuable tool for managing inventory, processing sales, and
offering online flower arrangements to customers.

In a study additionally, in Dalisay (2019) the research paper "Development of a Cross-


platform Online Reservation System for Car Services" highlights the benefits of online
appointment systems in improving customer satisfaction and efficiency. This study
provides valuable insights into the system design process, including the use of hybrid
and web application technologies for cross-platform accessibility.

Additional research by Dalisay (2019) on online appointment systems in the healthcare


industry demonstrates the positive impact on patient scheduling and wait times. This
research emphasizes the importance of user-friendly interfaces and integration with
existing workflows. The study by Dalisay (2019) on "E-commerce Platforms for
Personalized Floral Arrangements" explores the growing trend of online floral
customization. This research identifies key features such as interactive design tools,
flower selection options, and real-time previews as crucial for customer engagement.
Dalisay (2019) investigate the use of artificial intelligence (AI) in floral arrangement
customization, suggesting its potential to enhance the customer experience by
offering personalized recommendations and design suggestions. Research by Dalisay
(2019) on "Sales and Delivery Monitoring Systems for the Flower Industry" examines
the use of real-time tracking and data analysis tools to optimize sales performance and
delivery efficiency. This research emphasizes the importance of integrating sales data
with delivery tracking systems for comprehensive performance monitoring.
Furthermore, Dalisay (2019) explore the use of mobile applications for sales and
delivery management, enabling real-time communication and updates between florists
and customers.

Provided a comprehensive overview of existing research on online appointment


systems, floral arrangement customization, and sales and delivery monitoring. By

STI College San Jose Del Monte 12


critically analyzing these studies, we have gained valuable insights that will inform the
development of our proposed system for Stephanie’s Flower Shop. Our system will
leverage the identified best practices and functionalities to: Offer a user-friendly online
appointment system for convenient scheduling of flower consultations and deliveries.
Integrate interactive design tools and a diverse flower selection for personalized floral
arrangement customization. Implement real-time sales and delivery monitoring tools
for enhanced performance analysis and customer communication. By combining these
elements, we aim to create a comprehensive and efficient system that empowers
Stephanie’s Flower Shop to provide a seamless and personalized experience for its
customers.

This literature review aims to demonstrate the understanding of existing research


related to online appointment systems, floral arrangement customization, and sales and
delivery monitoring, informing the development of the proposed system for Stephanie’s
Flower Shop. The floral industry is characterized by increasing customer demand for
convenience and personalized experiences. Online appointment systems have emerged
as a valuable tool for businesses to manage customer flow and enhance service
delivery. The ability to customize floral arrangements online empowers customers and
fosters greater satisfaction. This review seeks to identify and analyze relevant research
on: Online appointment systems – We will explore the design, functionalities, and
benefits of online appointment systems in various service industries. Floral
arrangement customization – We will examine existing platforms and technologies that
enable customers to personalize floral arrangements online. Sales and delivery
monitoring – We will investigate systems and tools for tracking sales performance and
managing flower deliveries efficiently. By critically evaluating existing research, we
aim to: Gain insights into best practices for online appointment system design and
implementation. Identify key features and functionalities that enhance customer
experience in floral arrangement customization. Explore effective methods for sales
and delivery monitoring within the floral industry.

According to Samonte et al. (2022), "Market-e" is a platform that connects local


producers with urban consumers. This work was of particular interest in our review. As
developers investigating the development of an e-commerce platform for Stephanie's
Flower Shop, we examined existing literature to identify features that enhance customer

STI College San Jose Del Monte 13


experience and shop operations. Our review focused on studies exploring e-commerce
solutions for local businesses. Their findings highlight the growing trend of online
shopping and the importance of features like recommender systems that personalize the
shopping experience, facilitating customer discovery of new products. Furthermore,
their research emphasizes user interface (UI) design and usability testing,
demonstrating the impact of clear navigation and informative screens on user
satisfaction. They identify inventory management as a crucial aspect for vendors to
effectively track product availability and avoid stock outs. Drawing from these insights,
the researches propose that Stephanie's Flower Shop system prioritize a user-friendly
interface, incorporate recommendation features for personalized shopping, and utilize
a robust inventory management system to ensure order fulfillment. Usability testing
with a target audience, as suggested by Samonte et al. (2022), would be beneficial to
identify areas for improvement and guarantee the system effectively caters to customer
needs.

Foreign Literature

According to a study by Hermawan et al. (2024), the influence of online sales


promotions with free delivery cost on consumer purchase intention was investigated in
the context of Orchid Florist, Jakarta (Indonesia). Their research employed a
quantitative approach with data analysis techniques utilizing simple linear regression.
The study found that free delivery cost promotions significantly increased customer
purchase intention by 52.7%. This suggests that offering free delivery can be a powerful
tool for attracting customers and boosting sales in the online flower shop industry. The
study by Hermawan et al. (2024) aligns with Stephanie's Flower Shop system's plan to
offer free delivery for certain purchase amounts. Their findings provide valuable
evidence that this strategy can be effective in driving customer purchase intention and
potentially increasing sales.

According to Sin Young Park and Wook Oh (2019) explores how social networking
services (SNS) data can be used to understand consumer trends in floral products and
services. Stephanie's Flower Shop can leverage social media data to gain valuable
customer insights and inform its business strategy. Social media users are increasingly
interested in floral arrangement workshops and classes, highlighting a desire for hands-

STI College San Jose Del Monte 14


on floricultural experiences. This suggests that Stephanie's Flower Shop could consider
offering workshops or partnering with local businesses to provide floral design classes.
In terms of product preference, customers are gravitating towards natural design
aesthetics with specific flower choices. Roses, tulips, freesias, and chrysanthemums are
popular choices, often incorporated into bouquets, wreaths, baskets, orchids, boxed
arrangements, and wedding bouquets. Stephanie's Flower Shop can use this knowledge
to curate product offerings that cater to this natural design preference. Data analysis
also reveals that Stephanie's Flower Shop's target audience is primarily female and
utilizes mobile devices for purchases. This suggests that social media platforms like
Instagram and Facebook are likely the most effective channels to reach this
demographic. Furthermore, social media data indicates a seasonal trend in flower
purchases, with peaks occurring between February and May. This coincides with
holidays like Valentine's Day and Mother's Day, presenting opportunities for
Stephanie's Flower Shop to run targeted promotions during these periods. By
understanding these customer preferences and browsing behaviors, Stephanie's Flower
Shop can strategically develop its social media presence, product offerings, and
promotional campaigns to resonate with its target audience.

According to Ghelani and Hua (2022), who examined online food shop management
systems and their impact on business, their findings suggest that online platforms can
significantly improve efficiency and customer convenience. As developers
investigating the potential of e-commerce solutions for traditional retail businesses, this
paper explores how these findings translate to the floral retail industry, specifically
considering the potential benefits for Stephanie’s Flower Shop by implementing an
online shop management system. Similar to the limitations faced by food establishments
discussed by Ghelani and Hua , traditional flower shops encounter challenges that
hinder both customer experience and business operations. These limitations include:
Manual order processing – The reliance on manual order processing can be time-
consuming and prone to errors, potentially leading to delays and customer frustration.
Limited availability – Customers are restricted by physical store locations and
operating hours, hindering impulse purchases or last-minute orders. Inventory
management challenges – Manual stock tracking can be inaccurate, leading to
overstocking or missed sales opportunities due to understocked popular items.

STI College San Jose Del Monte 15


By adopting an online shop management system, Stephanie’s Flower Shop can address
these challenges and potentially experience a range of improvements: Increased
Efficiency – Automating order processing can significantly reduce errors and free up
staff time for other crucial tasks, mirroring the findings of Ghelani and Hua. Improved
Customer Convenience – 24/7 online access allows customers to browse flower
selections at their leisure, customize arrangements according to their preferences, and
place orders conveniently, replicating the anytime-anywhere ordering behavior
observed in online food delivery. Enhanced Sales Opportunities – An online platform
expands Stephanie’s Flower Shop’s reach beyond its physical location, potentially
attracting a wider customer base and increasing overall sales. Improved Inventory
Management – Real-time inventory tracking allows for better stock control and
informed purchasing decisions, similar to the benefits observed in online food shops.

The findings presented by Ghelani and Hua on online food shops directly translate to
the potential benefits for Stephanie’s Flower Shop. An online shop management system
can: Mirror online ordering behavior – Customers accustomed to the convenience of
online food ordering may be more likely to embrace online flower purchases as well.
Reduce workload – Similar to restaurants, automation can streamline order processing
for Stephanie’s Flower Shop staff, replicating the efficiency gains observed in the food
industry. Offer real-time information – Just as online food menus reflect current
availability, an online flower shop can display up- to-date flower options and pricing,
mirroring the transparency observed in online food delivery platforms.

Local System

According to FlowerStore.ph (n.d.), which positions itself as the "#1 Flower Delivery
service in the Philippines," offering same-day delivery in Metro Manila, Metro Cebu,
Davao City, and over 50 other cities, in conducting this research on a cross-platform e-
commerce system for Stephanie's Flower Shop, it's important to consider existing
players in the market. They boast a wide variety of flower arrangements, gift items, and
cater to various occasions including birthdays, anniversaries, funerals, and more. Their
online platform allows customers to browse and order flowers for delivery across the

STI College San Jose Del Monte 16


Philippines. Here's a key takeaway in comparison to Stephanie's Flower Shop's
proposed system. Geographic Reach – FlowerStore.ph currently delivers to a wider
range of cities compared to the initial scope outlined for Stephanie's Flower Shop.
Delivery Options – Similar to Stephanie's Flower Shop, FlowerStore.ph offers same-
day delivery options in specific regions. Customization – It's unclear from the available
information on FlowerStore.ph if their platform offers the same level of floral
arrangement customization envisioned for Stephanie's Flower Shop. Further research
into FlowerStore.ph online ordering process, specifically their level of customization
and customer reviews, would be beneficial to understand their strengths and
weaknesses as a competitor. This information can be used to refine Stephanie's Flower
Shop's e- commerce platform and potentially target a niche market that values extensive
floral arrangement customization.

According to Dangwa Flower Deliver (n.d), it focuses on online ordering systems of


Stephanie's Flower Shop and Dangwa Flower Market, with a specific focus on
enhancing customer experience through improved feedback mechanisms and live chat
functionalities. Stephanie's Flower Shop and Dangwa Flower Market might possess
varying strengths and weaknesses in these areas. While Stephanie's Shop might offer a
feedback mechanism of some kind, it could be limited in scope or accessibility. For
instance, the system might only allow for email feedback submissions, which can be
impersonal and discourage customer participation. Alternatively, Dangwa Flower
Market might have a more robust feedback system, but lack the ability to address
customer concerns in real-time. Their system might rely solely on post-purchase
surveys, which can miss opportunities to address immediate issues or questions during
the ordering process. Incorporating a live chat functionality would allow for real-time
interaction and support. A dedicated customer service representative could address
questions about flower arrangements, delivery options, or even provide personalized
recommendations. This would foster a more interactive and service-oriented online
presence for Stephanie's Flower Shop, ultimately leading to higher customer
satisfaction and loyalty.

According to Flower Chimp (n.d.), it investigates potential improvements to the online


ordering system of Stephanie's Flower Shop, specifically focusing on the order tracking

STI College San Jose Del Monte 17


functionality. A competitive analysis of existing online flower shops will be conducted.
This analysis will identify strengths that can be adopted for Stephanie's Shop, such
as detailed order status updates (processing, shipped, delivered). The analysis
will reveal areas for improvement in Stephanie's Shop, such as a complete lack of order
tracking information for customers. The implementation of a basic order tracking
system will be explored. This system aims to provide customers with greater
transparency into the fulfillment process, reducing potential anxieties about order
status. A user-friendly interface accessible across all platforms (web, mobile app) will
be designed to facilitate easy order tracking for customers. Furthermore, integration
with a reliable courier service will be investigated as a potential source of basic tracking
information, such as estimated delivery windows. By focusing on these improvements
alongside robust data security measures, this study aims to enhance the customer
experience, streamline logistics for Stephanie's Flower Shop, and ultimately contribute
to the success of the online ordering system.

Foreign System

According to 1-800Flowers, through comparative analysis with industry leaders like 1-


800 Flowers, identified areas for improvement within the proposed cross-platform
system for Stephanie's Flower Shop. While the proposed system excels in user-
friendliness and offers extensive flower arrangement customization, surpassing
competitor offerings in personalization, further enhancement of its competitive
advantage is possible. A key area for development lies in delivery capabilities. While
both systems offer live chat support, 1800Flowers boasts a wider delivery range.
Expanding Stephanie's Flower Shop's delivery coverage area, potentially through
partnerships with established delivery services, would significantly enhance customer
convenience. Furthermore, conducting in-depth research specific to the Philippine
floral e- commerce landscape is crucial. This research would provide invaluable
insights into local customer preferences, including delivery expectations and potential
competitor analysis

According to Interflora, Stephanie's Flower Shop's proposed cross-platform system and


compared it to Interflora, a leading international flower delivery service. This analysis
aimed to identify areas for improvement in both systems. Interflora boasts a global

STI College San Jose Del Monte 18


network of partner florists, enabling international deliveries – a feature currently
missing from Stephanie's Flower Shop system. Interflora benefits from established
brand recognition and extensive marketing, potentially attracting customers unfamiliar
with local flower shops.

Drawing on these insights, developers identified potential improvements for


Stephanie's Flower Shop system. Expanding delivery options, potentially through
partnerships, would enhance its competitiveness with Interflora's international reach.
Furthermore, developing targeted marketing campaigns could leverage Stephanie's
unique strengths, customization, highlighting extensive flower arrangement
customization, a feature potentially unavailable with Interflora's partnered florists.
Faster Delivery, advertising the advantage of faster local deliveries compared to
Interflora's international options.
According to delved into the proposed cross-platform system for Stephanie's Flower
Shop, analyzing its functionalities and potential for improvement. The system boasts a
user-friendly interface, extensive flower arrangement customization options – allowing
customers to create truly personalized gifts – live chat support for real-time assistance,
and secure payment options for a seamless purchasing experience. However, compared
to competitors like Bloom & Wild, Stephanie's Flower Shop could benefit from
exploring ways to expand its delivery reach. Partnering with established delivery
services or strategically increasing their own delivery coverage area would enhance
customer convenience and cater to a wider audience. Conversely, Bloom & Wild, while
offering a broader delivery range, might consider expanding its customization options
beyond pre-designed bouquets. By incorporating this flexibility, they could attract
customers who desire a more personal touch in their floral arrangements. By
strategically addressing these areas for improvement, both systems can strengthen their
positions within the competitive floral e-commerce landscape, ultimately leading to a
more diverse and customer-centric online flower buying experience.

STI College San Jose Del Monte 19


Synthesis

Research by Gamay et al. (2022) highlights a responsive web-based sales and inventory
system, which can be enhanced for Stephanie's Flower Shop by implementing a detailed
order status system, providing updates at various fulfillment stages and estimated
delivery windows. Dalisay's (2019) research suggests incorporating a Customer
Relationship Management (CRM) system with order history to allow customers to view
past purchases, reorder favorites, and track current orders. Samonte et al. (2022)
recommends adding a digital marketing suite for email campaigns, social media tools,
and targeted advertising to reach a wider audience and drive sales.

Insights from foreign literature reveal that free delivery promotions, as studied by
Hermawan et al. (2024), significantly boost customer interest. Sin Young Park and Wook
Oh (2019) found that social media trends indicate a demand for floral arrangement
workshops and a preference for natural design aesthetics, suggesting Stephanie's Flower
Shop should curate content and offer workshops accordingly. Seasonal promotions
around Valentine's Day and Mother's Day can also maximize sales. Ghelani and Hua
(2022) suggest that online shop management systems improve efficiency and customer
convenience, highlighting the potential benefits of automating order processing and real-
time inventory tracking for Stephanie's Flower Shop.

To improve Stephanie's Flower Shop, examining competitors and adopting their


successful strategies is crucial. FlowerStore.ph's same-day delivery in multiple cities
highlights the need for extensive delivery coverage, while Dangwa Flower Delivery
emphasizes gathering customer feedback to enhance the customer experience.
Implementing an order tracking system, inspired by Flower Chimp, can reduce customer
anxiety by providing transparency. Learning from 1-800 Flowers and Interflora,
Stephanie's could expand delivery through partnerships and leverage its strength in floral
arrangement customization to attract a niche market. Bloom and Wild's approach to pre-
designed bouquets offers insights into broadening delivery reach while maintaining
customization options.

Stephanie's Flower Shop can adopt the Floralify system, which automates order logging
and inventory management, reducing errors and improving efficiency. The system will
feature user-friendly customization for floral arrangements, secure payment processing,
and live chat support. Gathering customer feedback through surveys and focus groups

STI College San Jose Del Monte 20


will help refine services. Integration with delivery services and real-time tracking will
enhance customer convenience. With a focus on core functionalities, user-friendly
features, and continuous improvement, Stephanie's Flower Shop can thrive in the digital
age, offering a seamless and personalized floral shopping experience.

STI College San Jose Del Monte 21


METHODOLOGY

Technical Background

• Technologies to be Used

The development and implementation of this project will begin with a strong emphasis
on research and data collection. The following were the two research methods:

• Interview

We conduct interviews with the clients and flower-shoppers on February 29, 2024 to see
whether the system is useful for them as well as gathering information on the
requirements of the system.

• Searching on Internet

Conducting research about the existing POS system and inventory system such as the
flower shops websites.

The following tools are utilized to create the system in the project’s second phase:

• Visual Studio Code: 1.90.0

As the main IDE for this project. Visual Studio Code is a free, open-source code editor
developed by Microsoft, offering features like debugging, version control, and a wide
range of extensions for various programming languages and tasks. The advantages of
using Visual Studio Code in developing websites include its extensive extension
ecosystem, integrated debugging and Git support, and efficient code editing with
IntelliSense.

• React Native with Expo: 0.74

The main framework to be used for the front-end is React Native with Expo, while using
TypeScript VERSION 4.9.5 as the programming language. React Native is a framework
developed by Facebook that allows developers to build mobile applications using
JavaScript and React, enabling code reuse across both iOS and Android platforms. Expo
is a set of tools and services built around React Native that simplifies the process of
developing, building, and deploying mobile applications, providing features such as a

STI College San Jose Del Monte 22


development environment, access to native APIs, and over-the-air updates. TypeScript is
a version of JavaScript that adds static typing and other features, enhancing code
maintainability, readability, and catching errors earlier in the development process.

• Firebase: 10.6.0

A Back end as a service developed by Google that offers real-time databases,


authentications, and cloud storage that would simplify backend development and
enabling rapid development of web and mobile applications. Firebase offers a suite of
backend services that are crucial for our application. It provides authentication, real- time
database (Firestore), file storage, and more, which are essential for features like user
management, data storage, and monitoring.

• NodeJS: 20.11.1 with Express: 4.19.2

A popular backend web application framework that runs on top of Node.js, providing a
simple and effective set of tools for building web servers and APIs, with features like
routing, middleware support, and easy integration with databases and other third- party
services. NodeJS with Express is used for building the backend server of our application.
It enables us to handle server-side logic, API endpoints, and integrations with other
services.

• PayMongo

It will be used for the payment gateway. PayMongo is a secure payment gateway in the
Philippines which supports PHP currency for its transactions and multiple payment
methods. PayMongo is also a developer first service, which allows the developers to
integrate its payment gateway easily and for free. PayMongo serves as our payment
gateway, allowing the users to make payments securely within our application. It handles
payment processing, which is essential for our sales monitoring system.

STI College San Jose Del Monte 23


Calendar of Activities

The academic year 2023-2024 marked a significant period for the researches’ Capstone
1 project, journey filled with collaborative effort, intensive research, and meticulous
planning. This narrative recalls our project timeline, delineating the systematic
progression of our work from February to June 2024.

On the first week of February, the commencement of our Capstone project with the
formation of groups. Each class section was tasked with organizing groups of four
members. Our group, sorted by surname, comprised Camato, Fernandez, Llorente, and
Zabat. This initial step set the stage for a collaborative venture that would span several
months.

And on the second week, The research team went on an exploratory phase, investigating
various system ideas to identify a suitable project. They considered several options,
including an Apartment Management System, a Barber Shop Appointment System, a
Hardware Trading System, a Bank Management System, and a Flower Shop
Appointment and POS System. This phase was crucial as it allowed them to explore
diverse fields and assess potential research opportunities.

Then, on the third week, the researches conducted surveys to pinpoint problems within
each system's domain. They prepared fifty questionnaires for customer target audiences
and one for client target audiences, complemented by brief conversations with clients.
This data-gathering exercise was instrumental in understanding the real-world challenges
faced by different sectors, providing a foundation for our project.

And by the fourth week, the developers had gathered sufficient information to prepare
our Title Proposal Template. This document, focusing on the Introduction, Project
Context, Objectives, and Scope & Limitation, encapsulated our preliminary findings and
proposed solutions. It marked the transition from exploratory research to formal proposal
development.

The fIrst week of March was pivotal, as the developers presented the title proposal to a
panel of five to seven members. The proposal, titled "A MULTI-PLATFORM
APPOINTMENT AND CUSTOMIZATION FLORAL ARRANGEMENT SYSTEM
WITH SALES AND DELIVERY MONITORING FOR STEPHANIE’S FLOWER

STI College San Jose Del Monte 24


SHOP," received approval. This endorsement was a significant milestone, affirming the
viability and relevance of the project.

Following the proposal approval, the developers reached out to Stephanie's Flower Shop
with an Intent Letter endorsed by the Adviser and Coordinator, seeking their participation
in the project. This engagement was crucial for aligning the research objectives with the
client's needs.

In the second week, the developers delved into the documentation phase, beginning with
a thorough study of the flower shop industry. They started drafting Chapter 1, laying the
groundwork for the project documentation.

The third week was marked by brainstorming sessions to decide on the appropriate
software and frameworks for the system. This collaborative effort was essential for
ensuring that our technical approach was both innovative and feasible. Concurrently, the
developers initiated system planning, using illustrations to conceptualize the User
Interface (UI) for basic functions.

As March drew to a close, the team continued to develop Chapter 1, started Chapter 2,
and advanced the system planning and UI design. This period was characterized by a
blend of research and creative design, setting the stage for the subsequent development
phase.

April began with the formal initiation and planning of the project. The developers
conducted brainstorming meetings to refine the system concept and establish a
development strategy. This initial design phase was critical for aligning the team's vision
and ensuring a coherent development trajectory.

On the second and third week, the developers commenced the development of the
intended system and writing Chapter 2, which focused on the Review of Related
Literature and Related Systems. This dual approach of development and literature review
ensured that the project was grounded in existing research while also pushing the
boundaries of innovation.

On the final week of April, the developers focus shifted to testing and debugging the
implemented code. Identifying and resolving issues early in the development process was

STI College San Jose Del Monte 25


vital for maintaining the project's momentum. Simultaneously, they authored Chapter 3,
detailing the technical background of our system.

On the second week of May, the developers developed and documented our project's
methodology in Chapter 4. This phase was crucial for outlining the systematic procedures
they employed, providing a clear framework for the research and development activities.

The final week of May was dedicated to a mock defense conducted by the advisors. This
simulation provided invaluable feedback, highlighting areas for improvement and
ensuring we were well-prepared for the final defense. Over a three-day period, we made
significant modifications based on this feedback, enhancing the overall quality of our
project.

The first week of June culminated in a successful final defense of the reesearchers project.
This achievement was a testament to the team's hard work, dedication, and collaborative
spirit. However, the process did not end there. Based on the defense comments, additional
adjustments over three days in the second week of June were made. These final
modifications ensured that our project met the highest standards of quality and relevance.

The period from August to October 2023 marked a crucial phase for the developers ‘
Capstone 2 project, highlighting a journey defined by systematic progress, focused
research, and collaborative teamwork. This section outlines the detailed timeline of the
work, tracing the structured development of the project through each key stage during
this transformative period.

In the first week of August, the developers focused on establishing the foundation of our
Capstone 2 project. They brainstormed topics, conducted research, and evaluated
feasibility before finalizing. Roles were assigned, a timeline was drafted, and the project
proposal was prepared and submitted. The week ended with a progress review and
planning for the next phase.

During the second week of August, the developers delved deeper into the project
groundwork. They refined the objectives and conducted extensive research to gather

STI College San Jose Del Monte 26


relevant data and insights. Midweek, they began developing the project framework,
aligning it with our timeline and goals. Collaborative discussions ensured that everyone
was on track, and initial drafts for key components were started. By the end of the week,
they reviewed our progress, addressed challenges, and adjusted plans to prepare for the
next phase of implementation.

The 3rd week of August. The developers convened to review the entire project process,
from the initial documentation to the current system development stage. They discussed
the key milestones achieved and challenges encountered so far. Furthermore, they began
a thorough testing process to identify any issues or bugs in the system's modules. They
focused on ensuring that each module functioned as intended and that there were no
inconsistencies or errors.

In the final week of August, the team delved into the development of features related to
special events. They defined the necessary inputs and outputs required for creating and
managing special event bookings. Moreover, the team refined and categorized the
various options available for custom orders. They added new features and add-ons to
enhance the customization experience for customers. Lastly, the developers designed a
detailed flowchart to outline the logic and interactions of the chatbot. This helped
visualize the chatbot's behavior and ensure a seamless user experience.

In the late week of August to start from September, the team focused on finalizing the
authentication process for both administrators and customers. They implemented security
measures to protect user accounts and data. Finally, the developers implemented a
validation system to ensure that customers entered valid email addresses before
proceeding with their purchases. This helped prevent errors and improve data accuracy.

In the first week of September, the developers met with their adviser to discuss the
progress of the capstone project proposal. They sought guidance and feedback on the
project's direction and feasibility. Moreover, the team had an in-depth discussion with
their adviser about the system's dashboard, point-of-sale (POS) functionality, and chatbot
implementation. The adviser provided valuable insights and recommendations.

In drawing things to a close, the developer and quality assurance with system analyst

STI College San Jose Del Monte 27


manager actively worked on developing the system's dashboard and POS system. They
incorporated the features and functionalities discussed with the adviser.

In the second week of September, the team met with their adviser to present the chatbot
system and seek their evaluation. They discussed any areas for improvement and received
feedback on the chatbot's performance. Further, the developers held a meeting to discuss
the proper setup and integration of the chatbot into the system. They ensured that the
chatbot functioned seamlessly within the overall system architecture. The developers
integrated the chatbot into the system, ensuring compatibility and proper interaction with
other system components.

In the third week of September, the team consulted with their adviser about the system's
user interface (UI). They discussed areas where the UI could be improved to enhance
user experience and clarity. Moreover, the team met to discuss the suggestions provided
by their adviser regarding the system's UI. They prioritized the crucial improvements to
be implemented. In addition, the programmer revised the code to address the UI issues
identified. They focused on making the system more intuitive and user-friendly. The team
began planning the documentation for the project. They determined the scope, content,
and format of the documentation. Finally, the team met with the client to discuss the
pricing structure for various services, including solo, bundle, and packages. They also
explored the planning process for the appointment system.

In the final week of September, the team sought feedback from other IT faculty members
on the system's UI development. They obtained additional perspectives and
recommendations. Furthermore, the developers made significant changes to the admin
module to improve its usability and functionality. These changes included modifying the
menu bar, adding a search bar, enhancing the product button, improving c ustomer
separation, adjusting fonts a nd colors, and incorporating visual elements like flowers
in the inventory. Finally, the project manager transitioned to a new documentation format
for the fourth year first term. They adopted a standardized structure and style to ensure
consistency and clarity.

In the second week of October, the team held a meeting with the adviser to brainstorm
updates suggested by the coordinator. Documentation for Chapters 1 and 2 was revised
to ensure clarity and alignment with project objectives. This culminated in a successful

STI College San Jose Del Monte 28


mock defense, providing constructive feedback to prepare for the final defense.

During the third week, a user survey was conducted to gather insights on experiences
with the system, followed by consultations with the client to align updates with
expectations. Feedback from these activities led to enhancements in features such as the
chatbot, cart management, and special events. The updates aimed to create a more
intuitive and responsive user experience.

In the fourth week, the focus was on revising the entire documentation in preparation for
the final defense, ensuring all sections accurately reflected project progress and findings.
Final system updates were completed, incorporating improvements derived from user
feedback. This culminated in a successful final defense, demonstrating the effectiveness
and quality of the project.

STI College San Jose Del Monte 29


Table 1: Gannt Chart of Activities

STI College San Jose Del Monte 30


Resources

Table 2: Hardware

Used as the main device for developing


Laptop
the POS system.

Intel Pentium Silver N6000 Processor (4 MB L2


Cache, 1.10 GHz, up to 3.30 GHz with Intel
CPU Burst Technology, DDR4 or LPDDR4)

Intel UHD Graphics, supporting OpenGL


GPU 4.5, OpenCLTM 1.2,
Microsoft DirectX 12

RAM 8 GB of DDR4 system memory

STORAGE 256GB NVMe SSD

STI College San Jose Del Monte 31


Table 3: Software

Specification:

VS Code:1.90.0

Description:
Using Visual Studio Code as the main IDE for
this project. Visual Studio Code is a free, open-
Visual Studio Code
source code editor developed by Microsoft,
offering features like debugging, version
control, and a wide range of extensions for
various programming languages and tasks. The
advantages of using Visual Studio Code in
developing websites include its extensive
extension ecosystem, integrated debugging and
Git support, and efficient code editing with
IntelliSense.
Specification:
React Native - 0.74

Description:
The main framework to be used for the
front-end is React Native with Expo, while
using TypeScript as the programming
language. React Native is a framework
developed by Facebook that allows
React Native with Expo
developers to build mobile applications using
JavaScript and React, enabling code reuse
across both iOS and Android platforms. Expo
is a set of tools and services built around
React Native that simplifies the process of
developing, building, and deploying mobile
applications, providing features such as a
development environment, access to native

STI College San Jose Del Monte 32


APIs, and over-the-air updates. TypeScript is
a version of JavaScript that adds static typing
and other features, enhancing code
maintainability, readability, and catching
errors earlier in the development process.

Contribution:

React Native with Expo allows us to


efficiently build cross-platform mobile
applications.
For developing a cross-platform appointment
and customization floral arrangement
system, React Native with Expo enables us
to create applications for both Android and Web
platforms using a single codebase.

Specification:
firebase-10.6.0
Description:
a back end as a service developed by Google
that offers real-time databases,
authentications, and cloud storage that would
simplify backend development and enabling
rapid development of web and mobile
Firebase
applications.

Contribution:
Firebase offers a suite of backend services
that are crucial for our application. It provides
authentication, real-time database (Firestore),
file storage, and more, which are essential for
features like user management, data storage,
and monitoring.
Specification:
NodeJS with Express
NodeJS-20.11.1

STI College San Jose Del Monte 33


Description:
a popular backend web application
framework that runs on top of Node.js,
providing a simple and effective set of tools
for building web servers and APIs, with
features like routing, middleware support, and
easy integration with databases and other
third-party services.

Contribution:
NodeJS with Express is used for building the
backend server of our application. It enables
us to handle server-side logic, API endpoints,
and integrations with other services such as
communication to PayMongo that process
confirmation of payments as backend-server
API.
To integrate its payment gateway easily and
for free.

Contribution:
PayMongo
PayMongo serves as our payment gateway,
allowing the users to make payments securely
within our application. It handles payment
processing, which is essential for our sales
monitoring system.

STI College San Jose Del Monte 34


Requirements Analysis

Floralify is designed to streamline sales, inventory management, order customization,


and client relationships for businesses, supporting a wide range of users including
customers, employees, and administrators. Customers can submit and customize orders
through a web or mobile interface, while administrators manage sales, inventory
updates, and order processing. The system ensures real-time operations for prompt
order processing, inventory changes, and sales updates, and it also facilitates delivery
scheduling by shop staff. By automating these processes and enhancing customer
communication, Floralify operates seamlessly both online and in physical locations,
significantly improving productivity and accuracy through a single, integrated
platform.

Requirements Documentation

A cross-platform Point-of-Sale (POS) system is the main requirement of the system.


This allows customers to easily access the system from anywhere using any web
browser on their desktop or mobile device. They can place orders from anywhere. It
has a unique feature that allows users to customize their floral arrangements. As for the
Appointment Scheduling option, which lets users set a precise time for their flower
arrangements to be picked up or delivered, this feature simplifies order fulfilment. It
also has various delivery options so that clients can schedule their own delivery time,
pick up their arrangement personally, or use the shop's delivery service for convenience,
the system helps the shop streamline its sales procedure by keeping track of orders,
organizing sales information, and giving real-time alerts on the progress of deliveries.
This makes customer service and inventory management more effective. Streamlining
the account setup process to enable customized order histories. Guest checkout is
offered for a seamless and expedient ordering process. There are a variety of payment
methods available through the system, including bank transfers and e-wallets.

STI College San Jose Del Monte 35


Design of Software, System, Product, and/or Processes

The developers meticulously developed the system to align with the client’s
requirements and effectively meet the objectives of each study. Throughout the testing
phase, all functionalities—including appointment scheduling, customization options,
sales and inventory management, and delivery monitoring—functioned seamlessly,
demonstrating the system's reliability and user-friendliness. This collaboration resulted
in a cohesive system that not only meets operational needs but also enhances the overall
user experience.

⚫ Users and Customer Registration: The users and customers will have to sign in
using their Google account.

⚫ Admin Login: The admin will use predefined Email account to sign in.

⚫ Purchasing Flowers: The user will be choosing which flowers to buy.

⚫ Custom Order: The user can choose which kind of customization of the flower will
it be, such as selecting category, flowers, wraps, ribbons and add-ons. The user can
also send an image for their preferred reference of the flower.

⚫ Special Events: The user can order for a special event either wedding or funeral.
Then, the user can choose what kind of set-up will it be. Also, the user can pick
their preferred flowers for the event. The user can also choose what kind of theme
will it be.

⚫ Special Event Appointments: The user will have to enter their name, location, and
contact number. Then, the user need to set-up the appointment schedule for the
event.

⚫ Pick-up Type: The user will choose their preferred service either pick-up, store
delivery, or self-booking.

⚫ Payment Type: The user will choose either down payment or full payment.

⚫ Payment Method: The user must choose which kind of payment method will they
use, either E-wallet such as Gcash or Maya, or bank transfer which is UnionBank.

STI College San Jose Del Monte 36


Landing Page

Figure 1: Landing Page on web browser Figure 2:


Landing Page in
mobile
application

Landing Page: The user is directed to the home page of the system, which displays an
image of the shop's physical store along with key information such as upcoming events,
the shop's location, a link to its Facebook page, contact details, and business hours. On
the mobile application, users are taken to a selection of flower categories, enabling them
to browse and choose their preferred flowers for purchase.

Admin Module

Figure 3: Login Page

Login: This is where admin will log in using predefined email provided by
developers.

STI College San Jose Del Monte 37


Figure 4: Admin Dashboard

Dashboard: Where admin can view least stock, new orders, most recent chats and
recent transactions.

Figure 5: Categories

Categories Inventory: In this section, it will display all flowers and admin can add
and edit the quantity of flowers available. The admin can also download the available
stocks.

STI College San Jose Del Monte 38


Figure 6: Special Events

Special Events: The dmin has the ability to edit prices, manage floral arrangements
allowing them to customize offerings based on seasonal availability. It will also
display all the bookings of customers.

Figure 7: Custom Orders

Custom Orders Inventory: In this section, the admin can add and edit flowers,
ribbons, wrapper and add-ons, as well as upload images for specific item depends on
the availability. It will also allow admin to download the current stocks available.

Figure 8: Users and Customers Page

Users and Customers Page: All users will be shown here, it will display customers
with pending orders, without orders, processing orders and completed orders.

STI College San Jose Del Monte 39


Figure 9: Conversations

Conversations: The admin can respond to customers inquiries. It includes chatbot for
handling inquiries if the admin is not available.

Figure 10: Reviews

Reviews: This section allows shoppers to provide feedback about their overall
satisfaction.

STI College San Jose Del Monte 40


Users Module

Figure 11: Login Page

Login Page: In this section, users can use their google account to sign in. They can
reset their password and a reset link will be sent to their google account.

Figure 12: Categories

Categories: After loging in, users will direct to categories. This section displays a
category selection of flowers in different occasions.

STI College San Jose Del Monte 41


Figure 13: Custom Order

Custom Order: This section will give ability to customers to personalize their ideal
flower arrangement.

Figure 14: Special Events

Special Events: This section enable customers to select a event such as Wedding and
Funeral. They can choose their preferred arrangements by specifying color schemes
and flower types.

STI College San Jose Del Monte 42


Figure 15: Cart

Cart: This section will display all the flowers selected by the customers that remains
unpaid and on process.

Figure 16: My Orders

My Orders: It will display the status of the order of the customers.

STI College San Jose Del Monte 43


Figure 17: Notifications

Notifications: This section will notify users about their order.

Figure 18: Chat

Chat: This feature allows customers to openly inquire and send images that they
preferred to order. It will also have a chatbot that will provide frequently asked
questions.

STI College San Jose Del Monte 44


Figure 19: Account

Account: This section allows users to edit their information such as address and
phone number.

Figure 20: Payment Method

Payment Method: Customers required to make a 50% down payment or full payment
option to process their orders. They can select payment option such as Gcash,
Paymaya or UnionBank.

STI College San Jose Del Monte 45


Figure 21: Digital Receipt

Digital Receipt: Upon completion of either full payment or down payment,


customers will receive a digital receipt via email.

STI College San Jose Del Monte 46


Development

The development phase involved the systematic creation of the system, ensuring it
adhered to the client’s requirements and addressed the objectives outlined in the study.
The team utilized an iterative approach, integrating core functionalities such as
appointment scheduling, customization options, sales and inventory management, and
delivery tracking. Rigorous testing was conducted to ensure these features operated
seamlessly, highlighting the system's reliability and user-friendliness. Regular
consultations with the client fostered a collaborative environment, allowing the team to
incorporate design elements that reflected the flower shop's unique identity. This phase
culminated in a robust and user-centric system tailored to enhance both operational
efficiency and customer satisfaction.

STI College San Jose Del Monte 47


RESULTS AND DISCUSSION

Testing

Unit Testing

During Unit Testing, developers rigorously examine each module of the Floralify
system, including the customer interface, admin dashboard, and inventory management
functionalities. This phase is essential for identifying errors or bugs that may arise
before deployment. By conducting these tests, developers gain a comprehensive
understanding of how individual components perform, ensuring that the system’s
infrastructure and codebase are reliable. This proactive approach helps to maintain
stability and reliability across all features, such as appointment scheduling and
customization options.

Alpa Testing

Alpha Testing allowed the developers to thoroughly evaluate both the web-based and
mobile applications of Floralify in a controlled environment. This phase provides a
detailed assessment of functionality, compatibility, performance, and potential
limitations. By simulating real-world conditions, developers identified vulnerabilities
and addressed them prior to broader testing phases. The goal is to ensure a smooth and
reliable experience for both Stephanie's Flower Shop staff and customers, facilitating
efficient order processing and delivery management.

Beta Testing

Beta Testing involved selecting staff members from Stephanie's Flower Shop, as well
as a diverse group of customers, to evaluate the Floralify system before its official
launch. Participants are chosen based on their familiarity with the shop and willingness
to engage with the new system. Beta testers performed a series of real-world tasks,
assessing the system’s performance in areas such as online browsing, customization,
inventory accuracy, and overall user experience. Their feedback is invaluable, allowing
developers to identify and address weaknesses, ensuring the system meets customer
needs effectively

STI College San Jose Del Monte 48


Description of Prototype

The project Floralify: A Cross-Platform Floral Arrangement and Customization


System with Sales and Delivery Monitoring for Stephanie’s Flower Shop was
developed to enhance the purchasing experience for customers seeking floral
arrangements. The system aims to streamline the entire process of buying flowers,
from customization to delivery, ensuring a more efficient and user-friendly
experience.

Key features of Floralify include secure user authentication to protect customer


information, and real-time communication capabilities that facilitate seamless
interaction between customers and shop staff. The system utilizes PayMongo as
its mode of payment, providing a reliable and efficient method for processing
transactions. This integration ensures that customers can easily make payments
while enjoying a smooth and secure checkout experience. Overall, Floralify is
designed to modernize flower purchasing, making it more accessible and
enjoyable for customers.

Implementation Plan

The system was implemented in a real-world environment following thorough testing


and approval by the client. The developers deployed the admin module using a
predefined email provided to the designated administrator, enabling them to efficiently
manage users and assess system functionalities. The deployment process is structured
into three key stages: the setup phase, training phase, and implementation phase,
ensuring a smooth and effective rollout.

During the setup phase, the necessary hardware and software will be configured to
support the administrator’s role. This includes deploying the admin module and
ensuring all components are fully operational.

In the training phase, selected participants received comprehensive training on using


the system, covering essential tasks such as user management, order processing, and
troubleshooting. This ensures that all stakeholders are equipped with the knowledge
needed to navigate the system confidently.

STI College San Jose Del Monte 49


The final implementation phase involved deploying the system in a controlled
environment, allowing for real-time interactions between the admin and users. This
phase aims to evaluate the system’s performance and user experience under actual
conditions, providing valuable insights for any necessary adjustments before the
official launch. Overall, this structured approach guarantees that the Floralify system is
effectively integrated into the shop’s operations, enhancing both functionality and user
satisfaction.

Implementation Results

This part consists of the outputs during the implementation phase. These may include the generated
outcomes as the ground for improving the project/system. This part is optional.

STI College San Jose Del Monte 50


CONCLUSION

The implementation of the Floralify system significantly improved operational


efficiency and customer experience at Stephanie's Flower Shop. Key enhancements
included a notable reduction in order processing times, allowing staff to prioritize
customer service. User feedback indicated that a majority found the system intuitive,
while real-time inventory tracking effectively reduced overselling. Communication via
real-time chat improved response times, further boosting customer satisfaction.
Comprehensive training ensured staff confidence, and feedback from numerous users
facilitated ongoing enhancements. The shop experienced a substantial increase in
online sales, supported by reliable PayMongo payment integration.

The findings indicate that the Floralify system successfully addressed the operational
challenges faced by Stephanie's Flower Shop, leading to improved order processing and
customer satisfaction. The hypothesis that implementing an automated system would
enhance efficiency and user experience was accepted, as evidenced by the significant
reductions in processing times and increases in sales. Furthermore, the integration of
real-time features and comprehensive training contributed to the effective adoption of
the system among staff and customers alike. The positive feedback from users confirms
that the system meets the needs of both the shop and its clientele.

Based on these conclusions, it is recommended that Stephanie's Flower Shop continue


to leverage user feedback for ongoing improvements to the Floralify system. Further
research could explore the integration of additional features, such as loyalty programs
or advanced analytics, to enhance customer engagement and retention. Regular training
sessions for staff should be maintained to ensure they are fully equipped to utilize the
system's capabilities. Expanding the reach of the mobile application through targeted
marketing could further increase online sales and customer satisfaction.

STI College San Jose Del Monte 51


REFERENCES

1-800-Flowers.com: Flowers | Flower Delivery | Fresh Flowers Online. Send Flowers


Online with Flower Delivery by 1-800-Flowers.com, the World's Favorite Florist!
https://www.1800flowers.com/

Bloom and Wild (n.d.) | Flower Delivery | Bloom & Wild Flowers, Plants & Gifts.
https://www.bloomandwild.com/

Dalisay, F. V. (2019). Development of a cross-platform online reservation system for


car services. Asian Journal of Multidisciplinary Studies, 2(1), 165-173. Retrieved on
2 June, 2024 from
https://asianjournals.org/online/index.php/ajms/article/view/397/214.

Dangwa Flower Delivery. (n.d.). Prestige Flowers | Dangwa Flower Delivery | Order
Flowers Online. https://www.dangwaflowerdelivery.com/

Flower Chimp. (n.d.). Flower Delivery Philippines - Send Flowers & Gifts Nationwide.
https://www.flowerchimp.com.ph/

FlowerStore.ph. (n.d.). Flower Delivery Philippines - Send bouquets of flowers to


Manila. https://flowerstore.ph/product/search

Gamay, S. M. V., Padilla, D. J. B., Sanvictores, J. P. C., & Villanueva, K. J. C. (2022,


December 2). Responsive Web-Based Sales and Inventory System for Paint N Glow
Cosmetics and Skincare [Capstone project, STI College San Jose Del Monte
Library]. Retrieved on May 11, 2024.

Ghelani, D., & Hua, T. K. (2022). A perspective review on online food shop
management system and impacts on business. Advances in Wireless
Communications and Networks, 8(1), 7-14. doi: 10.11648/j.awcn.20220801.12

STI College San Jose Del Monte 52


Hermawan, H., Damayanti, I. R., & Utami, V. (2024). The Influence of Online Sales
Promotion with Free Delivery Cost on Consumer Purchase Interest at Orchid Florist
Jakarta [Abstract]. International Journal of Innovative Science and Research
Technology, 9(1), 1649-1653. Retrieved on May 11, 2024 from chrome-
extension://efaidnbmnnnibpcajpcglclefindmkaj/https://www.ijisrt.com/assets/upload/
file s/IJISRT24JAN1196.pdf

Interflora (n.d.) | Flower Delivery | Order Flowers Online. https://www.interflora.co.uk/

Park, S. Y., & Oh, W. (2019). A trend analysis of floral products and services using
big data of social networking services. Journal of People, Plants, and Environment,
22(5), 455-467. Retrieved May 11, 2024 from
https://jppe.ppe.or.kr/upload/pdf/ksppe-2022-25- 3-253.pdf

Sanidad, A. (2024). Flower Shop Feasibility Study. Retrieved on May 11, 20-24
from https://www.scribd.com/doc/235251182/Business-plan-of-a-BakeryLibrary

STI College San Jose Del Monte 53


APPENDICES

STI College San Jose Del Monte 54


APPENDIX A. RESOURCE PERSONS

STI College San Jose Del Monte 55


Ms. Audrei Julien Sasi Casanova

Stephanie’s Flower Shop Owner/Manager

Interview in Personal at Stephanie’s Flower Shop, Dalisay Market Tungkong Mangga


on February 29, 2024 and May 16, 2024.

Meeting Context:

The developers met with the client to discuss the details of the System Projects.

Floralify: A Cross-Platform Appointment and Customization Floral Arrangement


System with Sales and Delivery Monitoring.

Meeting Summary:

The developers inquired whether the client already had a system in place for managing
their flower shop and asked about various aspects of the business, such as sales and
inventory management, custom orders, payment methods, and delivery processes. The
client responded that they did not have a system and instead managed all orders through
a Facebook page. Subsequently, the team returned to the flower shop and presented a
system encompassing all basic sales and inventory management attributes, payment
method, delivery options and the customized orders. After presenting the initial concept,
the client accepted all modules and was satisfied with their functionality. The developers
demonstrated the system's initial design, which incorporated the theme from the client's
Facebook page to align with the flower shop's concept. The developers then sought
permission to use the flower design images posted on the Facebook page, which the client
agreed to and provided all necessary data for the system's development. The team and
client reached an agreement on all terms for constructing the system and concluded the
meeting.

STI College San Jose Del Monte 56


[Client and Researcher Transcript]

Researcher: Good afternoon, Ma'am! We're students from STI, and we're excited to
propose a system that could significantly enhance the operations of your flower shop.

Client: Good afternoon.

Researcher: Do you currently have a POS system in place?

Client: Actually, several students have approached us with proposals, but


unfortunately, they haven't followed up.

Researcher: Understood, Ma'am. We've thoroughly reviewed the information about


Stephanie Flower Shop, and it appears to be a well-established business with a strong
reputation. We have some questions about your shop's management and how you
handle customer orders.

Researcher: Could you please describe your current processes for tracking sales and
managing inventory?

Client: Currently, we manually record sales transactions and update our inventory
records accordingly. It's a time-consuming process and prone to errors.

Researcher: I see. How do you monitor inventory levels and ensure adequate stock?

Client: We attempt to track inventory levels manually, but it's challenging,


especially during busy periods.

Researcher: Can you explain your current payment methods?

Client: Presently, we accept e-wallets and bank transfers for

orders. Researcher: Which e-wallets and banks do you use?

Client: We only accept Gcash and PayMaya for e-wallets and Union Bank for bank
transactions.

Researcher: Do customers need to pay a down payment, or must they pay the full
amount upfront?

STI College San Jose Del Monte 57


Client: We typically require customers to pay at least 50% of the total order amount as
a down payment.

Researcher: How do you handle receipts for clients? Do you offer split payments?

Client: We provide a receipt upon payment of 50% of the total bill. Split payments are
possible, with customers able to pay 50% via e-wallet or bank and the remaining
balance online or in-store upon pickup. For store delivery, customers can settle the
balance upon delivery.

Researcher: Is the down payment refundable?

Client: No, the down payment is non-refundable.

Researcher: What delivery options do you offer?

Client: We provide various delivery options, including self-booking with Lalamove or


Grab, self-pickup, and in-store delivery service.

Researcher: How does your in-store delivery service operate? Is it limited to San
Jose Del Monte Bulacan?

Client: Our in-store delivery service primarily covers San Jose Del Monte Bulacan, but
we can accommodate deliveries outside Bulacan for bulk orders. We've delivered to
locations such as Quezon City, and in some cases, as far as Batangas.

Researcher: Does your flower shop offer event decoration services, such as
for weddings or birthdays?

Client: Yes, we specialize in event decoration, particularly for weddings.


Researcher: What if a customer desires a unique flower arrangement?

Client: We offer customization options where customers can specify their desired
flower arrangement. We've fulfilled requests for custom orders with additional
accessories, such as incorporating personal photos.

Researcher: Is your business registered with the BIR?

Client: Yes.

STI College San Jose Del Monte 58


Researcher: That covers all our questions for now, Ma'am. Thank you for providing
us with valuable insights. We'll be in touch if we need further clarification.

Client: You're welcome. Feel free to reach out anytime. Thank you!

Researcher: Have a great day!

Approved by:

Audrei Julien Sasi Casanova


Client Stephanie Flower Shop Owner

STI College San Jose Del Monte 59


APPENDIX B. RELEVANT SOURCE CODE

STI College San Jose Del Monte 60


import { FlatList, SafeAreaView, StyleSheet, Image, useWindowDimensions, Pressable
} from 'react-native';
import { ButtonThemed, Text, View } from '@/components/Themed';
import { useEffect, useState } from 'react';
import { Link, router } from 'expo-router';
import { collection, doc, onSnapshot } from 'firebase/firestore';
import { FIREBASE_DB } from '@/firebaseConfig';
import EmptyState from '@/components/EmptyState';
import LoadingView from '@/components/Loading';
import SearchBar from '@/components/SearchBar';
import DropDownPicker from 'react-native-dropdown-picker';
import formatPrice from '@/components/formatPrice';

type ProductType = {
product_id: string;
name: string;
description: string;
category: string;
price: number;
stocks: number;
image: string;
}

export default function Categories() {


const { width } = useWindowDimensions();
const [products, setProducts] = useState<ProductType[] | null>(null);
const [filteredProducts, setFilteredProducts] = useState<ProductType[] | null>(null);
const [search, setSearch] = useState('');
const [open, setOpen] = useState(false);
const [value, setValue] = useState('all');
const [items, setItems] = useState([

STI College San Jose Del Monte 61


{ label: 'All Flowers', value: 'all' },
{ label: 'Valentines', value: 'valentines' },
{ label: 'Funeral', value: 'funeral' },
{ label: 'Wedding', value: 'wedding' },
{ label: 'Birthday', value: 'birthday' },
{ label: 'Anniversary', value: 'anniversary' },
{ label: "Mother's Day", value: 'mothersday' },
]);

// Fetch products from Firebase


useEffect(() => {
const subscriber = onSnapshot(doc(collection(FIREBASE_DB, 'products'),
'product_document'), (snapshot) => {
let p = snapshot.data()?.product_items;
setProducts(p);
});
return () => subscriber();
}, []);

// Filter products based on search and category


useEffect(() => {
const filteredProducts = products?.filter((product) => {
return product.name.toLowerCase().includes(search.toLowerCase()) &&
(value === 'all' || product.category.toLowerCase() === value);
}) || null;
setFilteredProducts(filteredProducts);
}, [search, products, value]);

// Determine the number of columns based on screen width


const getNumColumns = () => {
if (width >= 1000) return 3;

STI College San Jose Del Monte 62


if (width >= 650) return 2;
return 1;
};

return (
<View style={styles.container}>
{!products ? (
<LoadingView />
):(
<SafeAreaView style={{ flex: 1, width: '100%'}}>
<FlatList
key={getNumColumns()} // Key prop forces re-render when numColumns
changes
ListHeaderComponent={
<HeaderBar
search={search}
setSearch={setSearch}
open={open}
setOpen={setOpen}
value={value}
setValue={setValue}
items={items}
setItems={setItems}
/>
}
ListHeaderComponentStyle={{ zIndex: 1000 }}
numColumns={getNumColumns()}
data={filteredProducts}
renderItem={({ item }) => <Product item={item} />}
columnWrapperStyle={getNumColumns() > 1 ? { justifyContent: 'space-
evenly', width: '100%', maxWidth: 1200, alignSelf: 'center' } : undefined}
keyExtractor={item => item.product_id}

STI College San Jose Del Monte 63


ListEmptyComponent={<EmptyState message='No products found' />}
/>
</SafeAreaView>
)}
</View>
);
}

function HeaderBar({ search, setSearch, open, setOpen, value, setValue, items, setItems
}: any) {
DropDownPicker.setListMode("SCROLLVIEW");
return (
<View style={{ flexDirection: 'row', maxWidth: 1200, width: "100%", alignItems:
'center', padding: 10, alignSelf: 'center', justifyContent: 'space-evenly' }}>
<SearchBar placeholder="Search flower..." search={search} setSearch={setSearch}
/>
<View style={{ width: 300, maxWidth: '48%' }}>
<DropDownPicker
open={open}
value={value}
items={items}
setOpen={setOpen}
setValue={setValue}
setItems={setItems}
textStyle={{ fontFamily: 'SpaceMono' }}
style={{
borderColor: '#ffb3b3',
}}
dropDownContainerStyle={{
borderColor: '#ffb3b3',
maxHeight:'auto',
}}

STI College San Jose Del Monte 64


/>
</View>
</View>
);
}

function Product({ item }: any) {


const smallestPrice = Math.min(...item.variants.map((variant: any) => variant.price));

return (
<Pressable
style={[styles.card, { width: getCardWidth() }]}
onPress={() => router.push({ pathname: "/product", params: { id: item.product_id }
})}
>
<View style={{ overflow: 'hidden', borderTopRightRadius: 10,
borderTopLeftRadius: 10, }}>
<Image
source={{ uri: item.variants[0].images[0] }}
style={{ width: '95%',aspectRatio:2,alignSelf:'center' }} // Set a fixed height to
avoid overflow
/>
</View>
<View style={{ padding: 10 }}>
<Text style={styles.title}>{item.name}</Text>
<View style={{ flexDirection: 'row', marginVertical: 10, justifyContent: 'space-
evenly', alignItems: "flex-end" }}>
<Text style={{ flexWrap: 'wrap', fontSize: 14, color: 'gray'
}}>{item.category.toUpperCase()}</Text>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between',
paddingVertical: 10 }}>
<Text style={styles.priceText}>

STI College San Jose Del Monte 65


{item.variants.length > 1 ? `Starts at ${formatPrice(smallestPrice)}` : `Price:
${formatPrice(smallestPrice)}`}
</Text>
</View>
</View>
</Pressable>
);
}

// Get card width based on screen size


function getCardWidth() {
const { width } = useWindowDimensions();
if (width >= 1000) return '30%';
if (width >= 650) return '40%';
return '95%';
}

const styles = StyleSheet.create({


container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
title: {
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
priceText: {
marginLeft: 15,
fontSize: 16,

STI College San Jose Del Monte 66


fontWeight: '500',
textAlign: 'center',
},
card: {
alignSelf: 'center',
borderRadius: 10,
marginVertical: 10,
backgroundColor: '#fff', // Set background color to avoid transparent issues
shadowColor: "#ca7f68",
shadowOffset: {
width: 0,
height: 6,
},
elevation: 5,
shadowOpacity: 0.37,
shadowRadius: 7.49,
overflow: 'hidden', // Ensure content doesn't overflow
},
});

STI College San Jose Del Monte 67


APPENDIX C. EVALUATION TOOL/TEST DOCUMENTS

STI College San Jose Del Monte 68


This survey aims to gather insights that will help developers enhance the current
system. Your feedback is vital for identifying areas of improvement and creating a
better user experience. Thank you for participating!

Name: __________________________________

How smooth was the checkout process within the Floralify system?

☐ Extremely Smooth ☐ Smooth ☐ Neutral ☐ Difficult ☐ Very Difficult

Do you feel that the Floralify system securely protects your personal information?

☐ Very Confident ☐ Confident ☐ Neutral ☐ Slightly Concerned ☐ Very Concerned

How easy was it to set up an account with Floralify?

☐ Extremely Smooth ☐ Smooth ☐ Neutral ☐ Difficult ☐ Very Difficult

How satisfied are you with the accessibility features provided (e.g., font size,
screen reader compatibility, contrast)?

☐ Very Satisfied ☐ Satisfied ☐ Neutral ☐ Dissatisfied ☐ Very Dissatisfied

Did you find the system's design intuitive and user-friendly?

☐ Very Satisfied ☐ Satisfied ☐ Neutral ☐ Dissatisfied ☐ Very Dissatisfied

How easy is it to use the Floralify system for placing orders, tracking deliveries, or
accessing account information?

☐ Extremely Smooth ☐ Smooth ☐ Neutral ☐ Difficult ☐ Very Difficult

How easy is it to use the Floralify system for placing orders, tracking deliveries, or
accessing account information?

☐ Extremely Smooth ☐ Smooth ☐ Neutral ☐ Difficult ☐ Very Difficult

How satisfied are you with your overall experience with Floralify Stephanie
Flowershop?

☐ Very Satisfied ☐ Satisfied ☐ Neutral ☐ Dissatisfied ☐ Very Dissatisfied

STI College San Jose Del Monte 69


APPENDIX D. SAMPLE INPUT/OUTPUT/REPORTS

STI College San Jose Del Monte 70


Admin Sign-in Page

Figure 22: Admin Sign-in Page

Figure 23: Inventory

Figure 24: Special Events

STI College San Jose Del Monte 71


Figure 25: Custom Orders

Figure 26: Users and Customers

Figure 27: Conversations

Figure 28: Reviews

STI College San Jose Del Monte 72


Figure 29: User and Customers Sign-in and Sign-up Page

Figure 30: Purchasing flowers in Categories

Figure 31: Custom Orders

STI College San Jose Del Monte 73


Figure 32: Special Events

Figure 33: Cart

Figure 34: My Orders

STI College San Jose Del Monte 74


Figure 35: Notifications

Figure 36: Chat

Figure 37: Account

STI College San Jose Del Monte 75


Figure 38: About

STI College San Jose Del Monte 76


APPENDIX E. USER’S GUIDE

STI College San Jose Del Monte 77


Admin Module

Figure 39: Landing Page

A. Click the menu bar, then click log in.

Figure 40: Predefined Email


B. Type the email that provided of developers
C. Type the password
D. Click sign in

STI College San Jose Del Monte 78


F G H
I

Figure 41: Admin Dashboard

E. You can view least stocks of your products


F. New orders will appear here.
G. Most recent chats from customer will appear here.
H. Recent transactions of customer can view here.
I. This button will direct to all of the transactions in the system.

N
L
K

Figure 42: Inventory


J. You can edit stocks of the specific flower.
K.You can add product by clicking this button.
L. You can filter the flowers according to occasions, such as valentines, mothers day,
valentine days.
M. You can view the product in two options: list view and grid view.
N. A searchbar where you can easily search an product

STI College San Jose Del Monte 79


P

Figure 43: Special Events

O. Admin can edit what is inside of special event, including price or rates.
P. Admin can edit the details under special events.

Q S

Figure 44: Custom orders


Q. Admin can view flower details, scuch as the flower types, stocks number, and prices.
R. You can add item by clicking the button and answer the required field.
S. You can edit the stocks available of the products.
T. You can download the stocks available for each item easily.

STI College San Jose Del Monte 80


V W X
Y

Figure 45: Users and Customers Page

U. By clicking all, you can see all the customers including people who login yo the
account.
V. You can also just view customers with orders.
W. You can view people who haven’t the purchased yet, it also include the users who are
not verified.
X. In this section, admin can adjust the status of the customers where admin can also see
if the user is verified.
Y. You can view also the orders that are completed
Z. Admin can see the details of the customer and the number of order of each.

A.1

Figure 46 : Conversations
A.1. Admin can view the customers and users that have inquiries. Admin can answer
inquiries by this module.

STI College San Jose Del Monte 81


B.2

Figure 47: Reviews

B.2. Admin can view the feedback from the customer. You can also search the name of
the flowers.

• User Module
Landing Page

A A B

Figure 48: Landing Page Web Browser

Web Browser
A. View Flowers – To view the different kinds of
flowers available
Mobile Application

A. Search Bar – To search flower names and pieces Figure 49: Landing Page
Mobile Application

B. Categories Drop Down Button – This will list all the available categories in the
Store.

STI College San Jose Del Monte 82


C. View – When tap on the white screen it will view the Flower

Log in Page
Figure 50: Log-in Page
Figure 51: Log-in Page
Web Browser
Mobile Application

C
B

Web Browser & Mobile Application

A. Email – Email Address of an account, if already


registered to the system.
B. Password – Unique password of an Account.
C. Forgot Password – a feature to use when an email address is can not recovered,
using verified email address
Figure 53: Register
Log in Page Account Mobile
Register Account Figure 52: Register Application
Account Web Browser

A
B
C
D
E

Web Browser & Mobile Application


A. Email – User can create unique email address.
B. Name – User can enter name with numbers
C. Mobile Number – User can only enter numbers.
D. Password – user can create a mixture of symbols, numbers, letters
E. Confirm Password – ensure the first password input is the same with confirmation

STI College San Jose Del Monte 83


Home Page Figure 55: Home Page
Figure 54: Home Page Mobile Application
Web Browser

Web Browser & Mobile Application

A. Account Icon – This will appear after logging into the


system that has full access of your account.
Figure 57: Categories
Mobile Application

Categories
Figure 56: Categories C
B Web Browser Mobile
Application

A
W

Web Browser & Mobile Application

A. All Flowers – This is the flowers display


B. Search Bar – Search name of flowers
C. Categories List – List all the available occasion

STI College San Jose Del Monte 84


Custom Orders
Figure 59: Custom Orders
Mobile Application
Figure 58: Custom Orders
Web Browser
A F

B
H
C

D G

Web Browser & Mobile Application

A. Select Categories– List all the available occasion


B. Select Flower – List all available flowers
C. Select n(flower) – Select prefer number of flowers
D. Select Wrap Color – List all available wrapper colors
E. Select Ribbon Color – List all available ribbon colors
F. Select Add-ons – List all the available Add-ons such as Cake, Ring, Necklace, Pink
Teddy Bear, Chocolate and Pictures
G. Attach Image Reference – If customer has reference image for their preferred
arrangement, they can upload the floral arrangement to customize by the admin.
H. Total Price – Sum of all total products
Figure 61: Special Events
Special Events Figure 60: Special Events Mobile Application
C Web Browser

D
A

Web Browser & Mobile Application


A. Wedding – To view the wedding packages
B. Funeral – To view the funeral packages
C. View My Orders – To view the products and appointment
schedule
D. Contact Us – If the customer wants to reach out the admin of the
store, if has concerns with booking

A STI College San Jose Del Monte 85


Figure 63: Cart
Mobile Application

Cart Figure 62: Cart


Web Browser

Web Browser & Mobile Application


A. Cart – This is your cart, just like in a physical grocery store

Cart

A B C

Figure 64: Pick Up Type Figure 65: Payment Figure 66: Customer
Options Information

STI College San Jose Del Monte 86


Web Browser & Mobile Application
A. Choose Pick Up Type – This page shows where the customer wants to Pick Up
their Product, Delivered by Store, or Self-booking for their trusted couriers.
Furthermore, they can only select two-choices of payment method such as
Downpayment or Full Payment.
B. Payment Method – This shows where the available payment methods are displayed
such as E-Wallets (GCash and Maya) and Bank Transfer (Union Bank) to pay at
the store.
C. Customer Information – It is important to input the right name, number and email
address, for further verification of the payment and authenticity when delivering
the product.

Figure 68: To Process


Mobile Application

My Orders Figure 67: To Process


A Web Browser
To Process

Web Browser & Mobile Application


A. To Process – The customer will see their order here if the
Order is already been processed.

STI College San Jose Del Monte 87


Figure 70: To Deliver
My Orders Figure 69: To Deliver Mobile Application
Web Browser
To Deliver

Web Browser & Mobile Application


A. To Deliver – The customer will see here if the product was
been delivered or pick-up based on the preferences they choose.
Figure 72: To Rate
My Orders
Figure 71: To Rate Mobile Application
To Rate A
Web Browser

Web Browser & Mobile Application

A. Rate Product – The customer can share his/her valuable


insights publicly.
B. Submit your feedback – This is the button, where it
incicates that the feedback was posted
C. Thank you for your feedback – The customer will now
have the idea that he/she was done doing her thing
sharing feedback for positive or negative experience of
the product.

STI College San Jose Del Monte 88


B

Figure 73: Feedback


Web Browser

Figure 74: Feedback


Mobile Application
Web Browser & Mobile Application
A. Notification Button – To view notification of the process, To Deliver/pick-up or
Rate product after delivered.

Notification
Figure 76: Notification
Figure 75: Notification Mobile Application
Web Browser

Web Browser & Mobile Application


A. Change E-mail – Customer cannot change email address, if he/she uses Google
Sign In.
B. Verify E-mail – a “check” symbol means the account is verified while “x”
symbolizes the account was not verified
C. Change Password – Customer cannot change password directly into our system if
Google Authentication was used to register the users’ account.

STI College San Jose Del Monte 89


Figure 77: Account Figure 78: Account
Account Web Browser Mobile Application
Web

Browser & Mobile Application

A. Screen – This section presents the store's mission and


vision, helping customers understand the company’s goals and guiding principles.
It’s essential for customers to know the purpose and values driving the store.

About Figure 79: About Figure 80: About


Web Browser Mobile Application

STI College San Jose Del Monte 90


APPENDIX F. PERSONAL TECHNICAL VITAE

STI College San Jose Del Monte 91


Curriculum Vitae of
Christian Dave S. Camato
Block 10 Lot 13 San Agustin St. Guadanoville Subdivision, Caloocan City
cdcamato@gmail.com
0999-836-2483

EDUCATIONAL BACKGROUND
Level Inclusive Dates Name of school/ Institution
Tertiary September 2021- System Technology Institute
2024
Vocational/Technical June, 2018-2020 Our Lady of Fatima University
High School June, 2014-2018 Saint Anthony Nova School
Elementary June, 2008-2009 Mater Carmeli School
June, 2009-2014 Saint Anthony Nova School

PROFESSIONAL OR VOLUNTEER EXPERIENCE


Nature of Experience/ Name and Address of Company or
Inclusive Dates
Job Title Organization
March, 2024 Client-Service, Porter Air Cooler Rental PH, Quezon City
February, 2022 Encoder EVES Driving School, RFV
Building, 304, 28 Visayas Ave,
Diliman, Quezon City, Metro
Manila
July, 2019 Dining Crew Lugaw Republic, Starmall SJDM
Quirino Hwy, San Jose del Monte
City, Bulacan

SKILLS
SKILLS Level of Competency Date Acquired
PHP Average May, 2024
HTML, CSS, JS Skilled March, 2024
C# Skilled November, 2023
Python Skilled October, 2022
Java Skilled September, 2021

TRAININGS, SEMINARS, OR WORKSHOPS ATTENDED


Inclusive Dates Title of Training, Seminar, or Workshop
March, 2024 Cryptocurrency Webinar
February, 2022 Driving School Seminar

STI College San Jose Del Monte 92


Curriculum Vitae of
Karl Justine F. Fernandez
Block 17, Lot 16, Street Malaysia Malabon Towerville, Santo Cristo, Bulacan 3023
Karlfernandez100@gmail.com
0977-777-5764

EDUCATIONAL BACKGROUND
Level Inclusive Dates Name of school/ Institution
Tertiary September 2020 – Present STI College
Vocational/Technical June 2018 – 2020 Ebenezer Christian Academy
INC.
High School June 2014 – 2018 Ebenezer Christian Academy
INC.
Elementary June 2008 – 20014 Jesus of Nazareth Learning Center

PROFESSIONAL OR VOLUNTEER EXPERIENCE


Nature of Experience/ Name and Address of Company or
Inclusive Dates
Job Title Organization
February 2024 Worker DOLE TUPAD
December 2023 Worker DOLE TUPAD
June 2020 Computer Shop Attendant Computer Shop

SKILLS
SKILLS Level of Competency Date Acquired
HTML Skilled March 2024
Python Skilled October 2022
MySQL Database Average September 2018
Video Editing Specialist August 2018

TRAININGS, SEMINARS, OR WORKSHOPS ATTENDED


Inclusive Dates Title of Training, Seminar, or Workshop
December 2023 A Mental Health Awareness and a Purpose Driven Life
October 2021 Cryptocurrency Webinar

STI College San Jose Del Monte 93


Curriculum Vitae of
Dhanica A. Llorente
245 Camia Street Malaria, Caloocan City 1400
Llorentedhanica513@gmail.com
0977-006-7750

EDUCATIONAL BACKGROUND
Level Inclusive Dates Name of school/ Institution
Tertiary September 2021 - Present STI College
Vocational/Technical - -
High School June 2011 – March 2015 Manuel Luis Quezon
Highschool
Elementary June 2005 – March 2011 Marcelo H. Del Pilar
Elementary School

PROFESSIONAL OR VOLUNTEER EXPERIENCE


Inclusive Dates Nature of Experience/ Name and Address of Company or
Job Title Organization
November 2017 – Promodiser/Sales Clerk Canadian Company
November 2018
December 2015- Factory Worker Florenz
January 2016

SKILLS
SKILLS Level of Competency Date Acquired
JavaScript Beginner March 2024
Html Programming Specialist January 2023
SQL Programming Skilled February 2022
C# Programming Skilled November 2021
Python Programming Specialist October 2022
Photo Editing Specialist November 2021
Java Programming Average September 2021

TRAININGS, SEMINARS, OR WORKSHOPS ATTENDED


Inclusive Dates Title of Training, Seminar, or Workshop

December 2023 A Mental Health Awareness and a Purpose Driven


Life

STI College San Jose Del Monte 94


Curriculum Vitae of
Matthieu Alain G. Zabat
Blk 8 Lot 3, Marilao Grand Villas, Brgy. Loma de Gato, Marilao, Bulacan
zabat.matthieu@gmail.com
0930-981-7242
EDUCATIONAL BACKGROUND
Level Inclusive Dates Name of school/ Institution
Tertiary 2019 – Present STI San Jose Del Monte,
Bulacan
Vocational/Technical June 2017 – March 2019 Technological Institute of the
Philippines – Manila
High School June 2013 – March 2017 St. Margaret School City of
SJDM, Prenza National High
School City of Marilao
Elementary June 2007 – March 2013 St. Dominic Montessori de
Manila, St. Margaret School
City of SJDM
PROFESSIONAL OR VOLUNTEER EXPERIENCE
Inclusive Dates Nature of Experience/ Name and Address of Company or
Job Title Organization
March 2024 Driver – Shuttle (On C3C Driving School – Present
Call)
SKILLS
SKILLS Level of Competency Date Acquired
TypesScript Programming Beginner February 2024
JavaScript Programming Average March 2024
Python Programming Average October 2022
Java Programming Skilled June 2019
PHP Programming Beginner September 2018
MySQL Database Beginner September 2018
HTML Programming September 2018
Specialist

TRAININGS, SEMINARS, OR WORKSHOPS ATTENDED


Inclusive Dates Title of Training, Seminar, or Workshop
December 2019 A Mental Health Awareness and a Purpose Driven
Life
March 2019 Road Safety Measures and Awareness Seminar

STI College San Jose Del Monte 95

You might also like