Floralify Final 10 58
Floralify Final 10 58
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
November 2024
ENDORSEMENT FORM FOR ORAL DEFENSE
ENDORSED BY:
Herbert G. Gardner
Capstone Project Adviser
NOTED BY:
November 2024
Herbert G. Gardner
Capstone Project Adviser
Noted:
November 2024
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.
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
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
Page
Figure 5: Categories 38
Figure 9: Conversations 40
Page
Table 1: Gantt Chart of Activities 30
Table 2: Hardware: 31
Table 3: Software 32
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.
Firebase
The back-end platform is employed for data storage, authentication, and real-time
updates within the system.
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.
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
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.
Specific Objectives
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
• 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.
• 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.
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
• 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
• 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.
• Orders Location
The system will only allow users to view the status of their orders
with a notification
• 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.
Local Literature
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.
Foreign Literature
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-
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.
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
Foreign System
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.
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
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:
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.
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
• Firebase: 10.6.0
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.
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
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
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
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
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
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.
Table 2: Hardware
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
Contribution:
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
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.
Requirements Documentation
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.
⚫ 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.
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
Login: This is where admin will log in using predefined email provided by
developers.
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.
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.
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.
Users and Customers Page: All users will be shown here, it will display customers
with pending orders, without orders, processing orders and completed orders.
Conversations: The admin can respond to customers inquiries. It includes chatbot for
handling inquiries if the admin is not available.
Reviews: This section allows shoppers to provide feedback about their overall
satisfaction.
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.
Categories: After loging in, users will direct to categories. This section displays a
category selection of flowers in different occasions.
Custom Order: This section will give ability to customers to personalize their ideal
flower arrangement.
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.
Cart: This section will display all the flowers selected by the customers that remains
unpaid and on process.
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.
Account: This section allows users to edit their information such as address and
phone number.
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.
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.
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
Implementation Plan
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.
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.
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.
Bloom and Wild (n.d.) | Flower Delivery | Bloom & Wild Flowers, Plants & Gifts.
https://www.bloomandwild.com/
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/
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
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
Meeting Context:
The developers met with the client to discuss the details of the System Projects.
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.
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.
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 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?
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: 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: 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.
Client: Yes.
Client: You're welcome. Feel free to reach out anytime. Thank you!
Approved by:
type ProductType = {
product_id: string;
name: string;
description: string;
category: string;
price: number;
stocks: number;
image: string;
}
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}
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',
}}
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}>
Name: __________________________________
How smooth was the checkout process within the Floralify system?
Do you feel that the Floralify system securely protects your personal information?
How satisfied are you with the accessibility features provided (e.g., font size,
screen reader compatibility, contrast)?
How easy is it to use the Floralify system for placing orders, tracking deliveries, or
accessing account information?
How easy is it to use the Floralify system for placing orders, tracking deliveries, or
accessing account information?
How satisfied are you with your overall experience with Floralify Stephanie
Flowershop?
N
L
K
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
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.
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
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.
Log in Page
Figure 50: Log-in Page
Figure 51: Log-in Page
Web Browser
Mobile Application
C
B
A
B
C
D
E
Categories
Figure 56: Categories C
B Web Browser Mobile
Application
A
W
B
H
C
D G
D
A
Cart
A B C
Figure 64: Pick Up Type Figure 65: Payment Figure 66: Customer
Options Information
Notification
Figure 76: Notification
Figure 75: Notification Mobile Application
Web Browser
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
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
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
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
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
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