# Development of an E-Commerce Chatbot for a University Shopping Mall

Authors: Victoria Oguntosin; Ayobami Olomo
Journal: Applied Computational Intelligence and Soft Computing
 (2021)

---

## Abstract

Chatbots have been used in many fields ranging from education to healthcare and are also used in e-commerce settings. This research aims at developing a web-based chatbot called Hebron for the Covenant University Community Mall. The chatbot is developed using Python and React.js as the programming languages and MySQL (Structured Query Language) server as the database to give a structure to the e-commerce datasets and Admin Portal process. The e-commerce chatbot application for Covenant University Shopping Mall (CUSM) seeks to provide an easy, smart, and comfortable shopping experience for the Covenant University Community.


---

## Body

## 1. Introduction

Covenant University Shopping Mall (CUSM) is a shop where members of the Covenant University Community can shop for various items ranging from groceries to other essentials. Undergraduate students mostly utilize the shopping mall to procure essential and everyday items of urgent need. The shopping mall currently lacks an online inventory service that allows students who patronize the shop to check the current stock availability of the items they wish to buy before visiting the store in-person to purchase these items. This deficit is a real cause of exhaustion and anger on the students’ part because of the long distance between the undergraduate hostels where students reside and the shopping mall. Students often embark on a long journey to the store but have their hopes dashed when the items they seek are either unavailable or out of stock.This work attempts to overcome this ongoing challenge by creating a chatbot for Covenant University Shopping Mall. The chatbot’s purpose is to have a smart, accurate, and real-time conversation with the students. In this way, students can chat with the bot to inquire about particular items they seek to purchase and pay online for the items before visiting the mall. The chatbot will be accessible via portable mobile devices or computers, which students can log in to anywhere and anytime on campus, thereby providing a 24-hour online service. This work will alleviate the discomfort currently existing when Covenant University members travel down to CUSM to source for out-of-stock items or unavailable items.The aim of this work is the design and implementation of a chatbot for Covenant University Shopping Mall. The block diagram for the University Chatbot System is shown in Figure1. This work will help create smart comfort and an efficient online presence for Covenant University students using a technology-oriented method, in this case, a chatbot for the website of Covenant University Shopping Mall. The work involves the following:(1)
Designing a web page where the chatbot will be deployed using React. This will serve as the front-end of the chatbot(2)
The development of the chatbot with deep Natural Language Processing (NLP) and datasets(3)
The development of a database of items currently stocked by the shopping mall(4)
Introduction of administrator privileges which can be updated by an assigned staff to update the current list of items and the number of stocks for each item(5)
System testing to ascertain the proper functionality of the developed chatbot, alongside, user testing by a focus group to provide constructive feedback on the developed chatbotFigure 1
Block diagram for the University Chatbot System.The paper is organized as follows. Section1 presents a brief overview of the project. A comprehensive review of relevant pieces of literature relating to the e-commerce chatbot is discussed in Section 2. Section 3 is the system design, where the actual design of the developed chatbot and its capabilities are presented. The results and user testing data are presented in Section 4. Section 5 is the concluding chapter, where a conclusion and relevant recommendations are stated.


## 2. Literature Review

A chatbot is an automated AI software program that allows for human-bot interaction. These conversations can be implemented through text interfaces and voice interfaces. Besides, chatbots are embedded AI features that accompany websites and messenger applications and, in some instances, serve as standalone bots. Chatbots have several synonyms such as ChatterBot, Chat Robot, talk bot, bot, IM bot, and virtual assistants. They can be ontology or pattern-based [1]. Businesses are increasingly using artificial intelligence in conjunction with chatbots to interact with customers to provide a more personalized service experience for customers. Examples of such organizations include Lyft, Fandango, Spotify, Sephora, MasterCard, Staples, and The Wall Street Journal [2–4].In this work, a chatbot will be implemented to solve an e-commerce problem within an academic environment, specifically Covenant University, Ota. Therefore, the goal of this literature review is to study the application of chatbots in various contexts. In the section that follows, studies related to the application of chatbots in e-commerce and non-e-commerce contexts are examined to identify a gap concerning the concept of chatbots within the literature.The review of the literature reveals that several authors have contributed significantly to the development of chatbots primary among whom are Allison [5], Sanchez [6], Goel [7], Weizenbaum [8], Colby [9], and Wallace [10]. The review of the literature shows that chatbots were initially developed as chitchat systems [8–10] and task-completion systems within non-e-commerce settings. For example, the chatbot ELIZA was developed using simple pattern matching and a template-based response to emulate the conversational style of a nondirectional psychotherapist [11]. The chatbot PARRY was designed to behave like a paranoid person [12]. Also known as Artificial Linguistic Internet Computer Entity, ALICE engages in conversations by applying flexible pattern matching rules to the users’ input. [13]. The chatbot Jabberwacky [13] can learn and develop new responses to its users through previous interactions with its users, which made it special during its time of reign [14]. In 2011, the open-domain question-answering (QA) system, tagged Watson, beat the two highest-ranked players in a nationally televised two-game Jeopardy match [15]. With the release of intelligent personal assistant Siri by Apple in 2011 and then Cortana by Microsoft and more recently social chatbots such as Microsoft’s Xiaoice in the current social media age, the scope of chatbots as conversational systems has been extended to cover a wide range of domains including e-commerce [12, 16].Text-based chatbots are bots whose primary mode of communication is through texting or messaging. They also come with additional features such as images, videos, and quick replies [17, 18]. Humans are sometimes unable to tell the difference between a text-based chatbot conversation and a human conversation during real-time conversations. However, methodologies, such as CAPTHCHA, keyword detection, and dialogue correlation [19] are used to unravel this. Furthermore, Mori et al. [20] suggest that text-based chatbots meet the reasonable answer criteria but lack emotions and attitude, which can be easily identified in human conversation. In light of advanced virtual assistants like Cortana and Siri, text-based messaging services are “cheap, fast, democratic and popular” and, especially for young people, the preferred way of communication [21].Angga et al. [22] propose a chatbot design with an avatar (3D) and voice interaction elements to make the conversation more intelligible. Kraus et al. [23] investigated the factors for customers’ satisfaction in voice commerce and e-commerce. In the study, four factors were considered, which led to the author’s generation of four hypotheses. These factors include Recommendation Complexity, Recommendation Personalization, Convenience, and Transaction Process Efficiency. A survey was conducted with 178 consumers and a structural equation model designed for statistical hypotheses testing.NLP explores how computers can understand and manipulate natural language text or speech to do useful things [23]. Ontology-based chatbots can also be implanted on e-commerce websites, according to Vegesna et al. [24]. The authors propose that the ontology-based chatbot will satisfy the user in terms of solid replies and a more natural and interesting conversation. Unlike ontology-based chatbots, pattern-based chatbots have preprogrammed responses, which makes their conversation unnatural [25].Nwankwo [26] demonstrates how chatbots work in an academic context by designing an academic chatbot to assist tertiary institutions’ academic advising bodies in Nigeria. Subramanian et al. [27] developed a chatbot that serves as a tutor for learners, the learners being software engineers in this context. Haller and Rebedea [28], on the other hand, implemented a chatbot as a historical figure, where the bot contains a lot of information about the life and personality of the simulated person so that the bot can act in accordance with its requested character.Chatbots have a beneficial role in healthcare, such as support, motivation, coaching patients, and organizing administrative tasks [29]. However, there are concerns about the inability of chatbots to sympathize with the patients and give knowledgeable advice in expert medical areas.Chatbots have been applied in the e-commerce industry. A study [30] highlighted the practical benefits of using AI in e-commerce, as seen in Amazon’s case where using AI has led to improved productivity, an upgrading of clients’ online purchasing skills, and a positive impact on the company’s revenues. Kaczorowska-Spychalska [31] similarly provides insights into how chatbots have influenced marketing with respect to e-commerce. The findings show that chatbots have the highest degree of customer acceptance in the e-commerce sector. In addition, chatbots are seen as the future digital imitator of humans by the year 2050 [31]. The author suggests that, with these alarming figures, the conversational level of chatbots needs to be improved, specifically increasing the machine learning level ability of the bots and implementing chatbots with an all-in-one technology e.g., NLP, ontology-based, and pattern-based chatbots.Khandale et al. [32] extend discussions on chatbots by implementing a ChatterBot as a negotiator for e-commerce websites. Angelov and Lazarova [33] developed a distributed chatbot system for supply chain management. Bhawiyuga et al. [34] explain how an e-commerce chatbot can generate automatic responses to customers who want to enquire about products and services. The authors argue that while a business may operate 24 hours a day, seven days a week, it is implausible that its employees will be available around the clock. Cui et al. [35], on the other hand, created a virtual assistant called “SuperAgent,” which is an open-domain chatbot that can be implemented in web browsers like Microsoft Edge and Google Chrome. In the study, SuperAgent is represented as a customer service chatbot that leverages a huge scale and freely accessible e-commerce datasets. Gupta et al. [36] also implemented a chatbot on an e-commerce website. In their study, Steinbauer, et al. [37] implemented and integrated a chatbot component into an existing Customer-Relationship-Management (CRM) system of a mid-sized company in Austria. Böger [38] develops a chatbot prototype that assists its users in choosing laptops and acts as a sales recommender. Joshi et al. [39] also proposed a chat-based automated system–“CartBot” for online shopping. It is also known as a personalized assistant that understands its users’ needs based on the users’ likes and preferences. Nursetyo and Subhiyakto [40] demonstrated the use of chatbots as sales assistants by building a chatbot in an e-commerce system that carries out basic conversations concerning every product’s remaining stock orders and payments.Reshmi and Balakrishnan [41] sought to further develop chatbots’ intelligence by integrating big data into a chatbot framework. The big data served as the chatbot’s knowledge base or database, alongside the AIML knowledge base. Villegas et al. [42] developed a system that engages students on campus in active learning. With this, the system will be able to use AI [43, 44] to make decisions that contribute to each student’s needs in conjunction with big data.From the preceding sections, it will be observed that the chatbots developed thus far have a limited measure of intelligence. This is because chatbots are primarily pattern-based; therefore, when the user starts asking questions beyond the bot's knowledge scope, the bot becomes clueless. There is also a consensus among several scholars concerning the need to improve upon the AI capabilities and data sets of chatbots [24, 25, 35, 41]—a gap this study seeks to fill. In the light of this identified gap, the main question to be examined in this study is as follows: how can chatbots be made more intelligent? This question, which is yet to be investigated in chatbot literature, forms the interrogation basis hereinafter.From the review of literature, the following chatbot applications have been used, namely, Telegram bot, Chatfuel, Alexa, and DialogFlow.ai. Given the limited AI capabilities of these software programs, we propose implementing the e-commerce datasets with machine learning techniques and database structures during the pilot phase on smart shopping using the CUSM chatbot as a case study. The CUSM chatbot will be implemented using React.js for the chatbot UI combined with Python open-source libraries where Python functions as a DBMS for the messaging backend. The backend consists of the machine learning section and database layers, which work together to create more content and structure for Hebron. These methods stand a better chance of overcoming the earlier identified weaknesses of chatbots’ limited AI capabilities. Also, some of the methods to be used for the CUSM chatbot were not implemented in the studies reviewed above.The review demonstrated the application of chatbots in a wide range of contexts, which can be broadly grouped into two, namely, e-commerce and non-e-commerce contexts. Concerning non-e-commerce contexts, chatbots were implemented in academic and medical settings. Chatbot applications in the academic field included tutor bots for contextual learning [27], historical figures [28], virtual level advisers in the tertiary academic sector of Nigeria [26], and library assistants [5], while chatbots were deployed as online medical shopping assistants in the medical context. With respect to the e-commerce context, chatbots were implemented as recommenders [1, 31, 38], marketers [1, 31], negotiator agents [32], supply chain agents [24, 33], customer relationship managers [1, 34–37], and sales assistants [38–40]. Studies examining artificial intelligence-based chatbots were also reviewed.The review of chatbot studies undertaken thus far in this section reveals that pattern-based chatbots have limited intelligence. Scholars have suggested that the AI abilities and datasets of chatbots need to be improved upon. Based on this identified gap, my proposed project aims to improve on the limited intelligence of chatbots. To implement the work, methodologies that will be utilized are React.js to build the chatbot front-end and admin login page, Spacy and React.ai for the NLP section and training of the chatbot, and e-commerce datasets for the chatbot data layer coupled with MySQL to help manage and build the data structure in which the e-commerce datasets will be stored. In the next section, the methodologies for implementing the work are described.


## 3. System Design

In this chapter, the processes involved in designing the chatbot for CUSM, namely, the chatbot’s architecture, its individual components, and the data that goes through the chatbot system, will be explained in detail. In addition, the minimum hardware requirements, target users, and software requirements will also be discussed.


### 3.1. Functional and Nonfunctional Requirements

This system’s functional requirements are in two phases: the Covenant University Community phase and the Covenant University Shopping Mall Administrators’ phase. On the Covenant University Community phase, they shall be able to chat with Hebron (chatbot), request for items available in the shopping mall, pay for items via the chatbot platform, have a visual representation of the item they want to buy, and know the price of the items they are enquiring about or wish to purchase. On the Covenant University Shopping Mall Administrators phase, they shall be able to log in via the administrators’ portal, update the chatbot database with the current items in the shopping mall, and get a list of users who have paid for items.The Nonfunctional requirements include the following:(1)
Security: unauthorized users should have no access to the system(2)
Usability: the proposed system should be easy for the user to operate, enter data, and interpret the output(3)
Scalability: the system should perform adequately at all times regardless of updates(4)
Compatibility: the proposed system should be compatible with all web browsers


### 3.2. Minimum Hardware Requirements

The minimum hardware requirements refer to the computer's physical features required to implement the chatbot. The features are as follows: at least 250 GB HDD, 4 GB RAM, and at least Intel Pentium Dual-Core.


### 3.3. Software Requirements

These are the computer programs and procedures required to implement the chatbot. Table1 indicates the minimum software requirements.Table 1
Software Requirements illustration.
RequirementsSoftwareOperating systemMicrosoft WindowsDBMSMySQLProgramming languages usedPython and JavaScriptDevelopment toolVisual Studio IDE


### 3.4. Target Users

The CUSM chatbot’s primary target users are the Covenant University Community, particularly the students because they make up most of the Covenant University Community. In addition, the students are the most frequent users of the shopping mall and will, therefore, appreciate the implementation of an online customer service feature.


### 3.5. Chatbot for University Shopping Mall System Architecture Design

Illustrated in Figure2 is a diagram showing the CUSM chatbot architecture (an AI-based bot).Figure 2
The architecture of the CUSM chatbot.


#### 3.5.1. Chatbot Interface

The chatbot interface is developed using React.js, a front-end framework for building single-page web applications. Also, React.js helps in developing responsive web pages. This is the presentation layer where users (students/staff) can fully interact with Hebron (chatbot) and get correct and up-to-date responses. Hebron is the official customer care service for CUSM. Here, the user can ask the bot questions concerning current products available, the current prices of the products sold in the shopping mall, and closing and opening times of CUSM and pay for the items the user desires to purchase via CUSM's payment platform.


#### 3.5.2. Message Backend

The message backend consists of the ML section and data layer. It will be developed using Python and SQL. Python is a high-level language that is easy to understand. It also supports ML and AI. SQL is a domain-specific language that is applied to programming and managing relational database management systems. In this case, it will help in managing the e-commerce datasets stored in a DBMS (MySQL). MySQL is a web database manager.


#### 3.5.3. ML Section

The ML section will be developed using an open-source Python library and API, Spacy, and Recast.ai. For the first ML part of Hebron, Spacy is the NLP feature that will help Hebron understand and translate the large volumes of texts (data type) it will encounter during its conversations with its target users [45], especially in the grammatical structuring of every sentence Hebron will encounter. This will also aid Hebron’s deep learning process toward NLP. Recast.ai, on the other hand, is the API used to train Hebron with subdivisions such as the user’s intents with preprogrammed expressions under every intent and skills conversational flow of the chatbot. Recast.ai will also help to connect Hebron to the external DBMS and create a webhook to the chatbot interface.(1) Spacy. The major features of Spacy are its tokenization feature, lemmatization feature, and linguistic annotations feature.(2) Tokenization Feature. This feature helps to break down texts or sentences into words. The tokenized result is as follows: the sentence is broken down into whitespace characters that can be placed horizontally or vertically. The tokenizer then processes the sentence from left to right as shown in Table 2.Table 2
Tokenized result.
012345678910WindowswillbeacquiringaUKstartupfor$2MillionIt then applies its exception rules where prefixes, suffixes, and infixes are considered and split into tokens.(3) Lemmatization Feature. This feature enables the base form of words to be derived. For example, word = tables, lemma = table; word = standing, lemma = stand; word = understood, lemma = understand.(4) Linguistic Annotation Feature. This feature gives an insight into the sentence’s grammatical structure. It further explains the parts of speech for each token or word. Every word has been grammatically defined. From Table 2, “Windows” has been identified as a proper noun, and “buying” has been identified as a verb. In a nutshell, this is how the grammatical structure of each word in a sentence is determined.(5) Recast.ai. This API, which is also NLP enabled, will be used to create, train, and monitor the conversational progress of Hebron. Furthermore, it has a webhook feature that will let Hebron go live and be present on the chatbot user interface. Training Hebron can be referred to as giving Hebron a brain to understand its creation purpose. The foundation of Hebron’s brain can be derived from a term called intents. An intent is a box of sentences or expressions that all have the same meaning. When a user sends a message to Hebron, the algorithm embedded within the API compares the user’s input to the expressions housed within Hebron’s intents. It picks the intent with the highest similarity rate to the user’s input and then selects a suitable reply for Hebron to give to the user. The reply to various intents is embedded within the intents. To further expand the knowledge base of Hebron, the API has a feature that accommodates external data. This external data is in the e-commerce datasets, which can be accessed from the admin login portal and DBMS. Hebron undergoes a lot of supervised learning during its training process, where monitoring its conversational progress finds expression. In other words, Recast.ai is what gives Hebron its brain and defines its skillset.


#### 3.5.4. Data Layer

Developed using MySQL, the data layer gives a structure to the e-commerce datasets that the chatbot will use to answer product-related questions. This structure, which is in the form of tables, will help the administrator (s) of CUSM put the relevant information in the right place. The structure is subdivided as follows:(1)
User(2)
Store(3)
Purchases(1)User. A table hosting the information in terms of the usernames (in the form of “e-mail address”) and passwords of the administrators for CUSM will be stored here.(2)Store. A table is created to store the products’ names, price of the products, quantity of the products, and a short description of the products.(3)Purchases. A table is created to store the purchases made on the CUSM chatbot via a pay stack plugin. In other words, the table created is a table of online purchases.


#### 3.5.5. CUSM Admin Login Page

The admin persons in the shopping mall will frequently have to update the chatbot with the shopping mall’s current products and prices. This will enable the chatbot to give current and correct information to its users. The page will be developed using JavaScript for the front-end and MySQL for the database backend. Section4 will exhibit figures showing what the database page looks like from the backend and how products are stored or modified. In addition, every ID number is a unique key. This implies that once a number has been used by a product, that number cannot be used again by another product. Furthermore, even if that product is deleted, it will not be assigned the same ID number it initially had.


### 3.6. System Modeling

A Sequence Diagram would be used to portray the system activities. The activity diagram for the inquiry of products, availability of products alongside the requested product’s price, and purchase where necessary is shown in Figure3. Also, the overall sequence diagram of the CUSM chatbot is illustrated in Figure 4.Figure 3
Activity diagram for inquiries.Figure 4
Overall sequence diagram for CUSM chatbot.As shown in Figure4, the modeling of the system serves as the foundation for the implementation of the chatbot for the CUSM web application. This section explained in detail how the CUSM chatbot system will be developed. This was achieved by describing the system units that make up the system and explaining how the units would interact with each other to realize the chatbot system. In addition, block diagrams and UML diagrams were used in describing the design of the system. In the section that follows, the testing and implementation of the chatbot system are presented.


## 3.1. Functional and Nonfunctional Requirements

This system’s functional requirements are in two phases: the Covenant University Community phase and the Covenant University Shopping Mall Administrators’ phase. On the Covenant University Community phase, they shall be able to chat with Hebron (chatbot), request for items available in the shopping mall, pay for items via the chatbot platform, have a visual representation of the item they want to buy, and know the price of the items they are enquiring about or wish to purchase. On the Covenant University Shopping Mall Administrators phase, they shall be able to log in via the administrators’ portal, update the chatbot database with the current items in the shopping mall, and get a list of users who have paid for items.The Nonfunctional requirements include the following:(1)
Security: unauthorized users should have no access to the system(2)
Usability: the proposed system should be easy for the user to operate, enter data, and interpret the output(3)
Scalability: the system should perform adequately at all times regardless of updates(4)
Compatibility: the proposed system should be compatible with all web browsers


## 3.2. Minimum Hardware Requirements

The minimum hardware requirements refer to the computer's physical features required to implement the chatbot. The features are as follows: at least 250 GB HDD, 4 GB RAM, and at least Intel Pentium Dual-Core.


## 3.3. Software Requirements

These are the computer programs and procedures required to implement the chatbot. Table1 indicates the minimum software requirements.Table 1
Software Requirements illustration.
RequirementsSoftwareOperating systemMicrosoft WindowsDBMSMySQLProgramming languages usedPython and JavaScriptDevelopment toolVisual Studio IDE


## 3.4. Target Users

The CUSM chatbot’s primary target users are the Covenant University Community, particularly the students because they make up most of the Covenant University Community. In addition, the students are the most frequent users of the shopping mall and will, therefore, appreciate the implementation of an online customer service feature.


## 3.5. Chatbot for University Shopping Mall System Architecture Design

Illustrated in Figure2 is a diagram showing the CUSM chatbot architecture (an AI-based bot).Figure 2
The architecture of the CUSM chatbot.


### 3.5.1. Chatbot Interface

The chatbot interface is developed using React.js, a front-end framework for building single-page web applications. Also, React.js helps in developing responsive web pages. This is the presentation layer where users (students/staff) can fully interact with Hebron (chatbot) and get correct and up-to-date responses. Hebron is the official customer care service for CUSM. Here, the user can ask the bot questions concerning current products available, the current prices of the products sold in the shopping mall, and closing and opening times of CUSM and pay for the items the user desires to purchase via CUSM's payment platform.


### 3.5.2. Message Backend

The message backend consists of the ML section and data layer. It will be developed using Python and SQL. Python is a high-level language that is easy to understand. It also supports ML and AI. SQL is a domain-specific language that is applied to programming and managing relational database management systems. In this case, it will help in managing the e-commerce datasets stored in a DBMS (MySQL). MySQL is a web database manager.


### 3.5.3. ML Section

The ML section will be developed using an open-source Python library and API, Spacy, and Recast.ai. For the first ML part of Hebron, Spacy is the NLP feature that will help Hebron understand and translate the large volumes of texts (data type) it will encounter during its conversations with its target users [45], especially in the grammatical structuring of every sentence Hebron will encounter. This will also aid Hebron’s deep learning process toward NLP. Recast.ai, on the other hand, is the API used to train Hebron with subdivisions such as the user’s intents with preprogrammed expressions under every intent and skills conversational flow of the chatbot. Recast.ai will also help to connect Hebron to the external DBMS and create a webhook to the chatbot interface.(1) Spacy. The major features of Spacy are its tokenization feature, lemmatization feature, and linguistic annotations feature.(2) Tokenization Feature. This feature helps to break down texts or sentences into words. The tokenized result is as follows: the sentence is broken down into whitespace characters that can be placed horizontally or vertically. The tokenizer then processes the sentence from left to right as shown in Table 2.Table 2
Tokenized result.
012345678910WindowswillbeacquiringaUKstartupfor$2MillionIt then applies its exception rules where prefixes, suffixes, and infixes are considered and split into tokens.(3) Lemmatization Feature. This feature enables the base form of words to be derived. For example, word = tables, lemma = table; word = standing, lemma = stand; word = understood, lemma = understand.(4) Linguistic Annotation Feature. This feature gives an insight into the sentence’s grammatical structure. It further explains the parts of speech for each token or word. Every word has been grammatically defined. From Table 2, “Windows” has been identified as a proper noun, and “buying” has been identified as a verb. In a nutshell, this is how the grammatical structure of each word in a sentence is determined.(5) Recast.ai. This API, which is also NLP enabled, will be used to create, train, and monitor the conversational progress of Hebron. Furthermore, it has a webhook feature that will let Hebron go live and be present on the chatbot user interface. Training Hebron can be referred to as giving Hebron a brain to understand its creation purpose. The foundation of Hebron’s brain can be derived from a term called intents. An intent is a box of sentences or expressions that all have the same meaning. When a user sends a message to Hebron, the algorithm embedded within the API compares the user’s input to the expressions housed within Hebron’s intents. It picks the intent with the highest similarity rate to the user’s input and then selects a suitable reply for Hebron to give to the user. The reply to various intents is embedded within the intents. To further expand the knowledge base of Hebron, the API has a feature that accommodates external data. This external data is in the e-commerce datasets, which can be accessed from the admin login portal and DBMS. Hebron undergoes a lot of supervised learning during its training process, where monitoring its conversational progress finds expression. In other words, Recast.ai is what gives Hebron its brain and defines its skillset.


### 3.5.4. Data Layer

Developed using MySQL, the data layer gives a structure to the e-commerce datasets that the chatbot will use to answer product-related questions. This structure, which is in the form of tables, will help the administrator (s) of CUSM put the relevant information in the right place. The structure is subdivided as follows:(1)
User(2)
Store(3)
Purchases(1)User. A table hosting the information in terms of the usernames (in the form of “e-mail address”) and passwords of the administrators for CUSM will be stored here.(2)Store. A table is created to store the products’ names, price of the products, quantity of the products, and a short description of the products.(3)Purchases. A table is created to store the purchases made on the CUSM chatbot via a pay stack plugin. In other words, the table created is a table of online purchases.


### 3.5.5. CUSM Admin Login Page

The admin persons in the shopping mall will frequently have to update the chatbot with the shopping mall’s current products and prices. This will enable the chatbot to give current and correct information to its users. The page will be developed using JavaScript for the front-end and MySQL for the database backend. Section4 will exhibit figures showing what the database page looks like from the backend and how products are stored or modified. In addition, every ID number is a unique key. This implies that once a number has been used by a product, that number cannot be used again by another product. Furthermore, even if that product is deleted, it will not be assigned the same ID number it initially had.


## 3.5.1. Chatbot Interface

The chatbot interface is developed using React.js, a front-end framework for building single-page web applications. Also, React.js helps in developing responsive web pages. This is the presentation layer where users (students/staff) can fully interact with Hebron (chatbot) and get correct and up-to-date responses. Hebron is the official customer care service for CUSM. Here, the user can ask the bot questions concerning current products available, the current prices of the products sold in the shopping mall, and closing and opening times of CUSM and pay for the items the user desires to purchase via CUSM's payment platform.


## 3.5.2. Message Backend

The message backend consists of the ML section and data layer. It will be developed using Python and SQL. Python is a high-level language that is easy to understand. It also supports ML and AI. SQL is a domain-specific language that is applied to programming and managing relational database management systems. In this case, it will help in managing the e-commerce datasets stored in a DBMS (MySQL). MySQL is a web database manager.


## 3.5.3. ML Section

The ML section will be developed using an open-source Python library and API, Spacy, and Recast.ai. For the first ML part of Hebron, Spacy is the NLP feature that will help Hebron understand and translate the large volumes of texts (data type) it will encounter during its conversations with its target users [45], especially in the grammatical structuring of every sentence Hebron will encounter. This will also aid Hebron’s deep learning process toward NLP. Recast.ai, on the other hand, is the API used to train Hebron with subdivisions such as the user’s intents with preprogrammed expressions under every intent and skills conversational flow of the chatbot. Recast.ai will also help to connect Hebron to the external DBMS and create a webhook to the chatbot interface.(1) Spacy. The major features of Spacy are its tokenization feature, lemmatization feature, and linguistic annotations feature.(2) Tokenization Feature. This feature helps to break down texts or sentences into words. The tokenized result is as follows: the sentence is broken down into whitespace characters that can be placed horizontally or vertically. The tokenizer then processes the sentence from left to right as shown in Table 2.Table 2
Tokenized result.
012345678910WindowswillbeacquiringaUKstartupfor$2MillionIt then applies its exception rules where prefixes, suffixes, and infixes are considered and split into tokens.(3) Lemmatization Feature. This feature enables the base form of words to be derived. For example, word = tables, lemma = table; word = standing, lemma = stand; word = understood, lemma = understand.(4) Linguistic Annotation Feature. This feature gives an insight into the sentence’s grammatical structure. It further explains the parts of speech for each token or word. Every word has been grammatically defined. From Table 2, “Windows” has been identified as a proper noun, and “buying” has been identified as a verb. In a nutshell, this is how the grammatical structure of each word in a sentence is determined.(5) Recast.ai. This API, which is also NLP enabled, will be used to create, train, and monitor the conversational progress of Hebron. Furthermore, it has a webhook feature that will let Hebron go live and be present on the chatbot user interface. Training Hebron can be referred to as giving Hebron a brain to understand its creation purpose. The foundation of Hebron’s brain can be derived from a term called intents. An intent is a box of sentences or expressions that all have the same meaning. When a user sends a message to Hebron, the algorithm embedded within the API compares the user’s input to the expressions housed within Hebron’s intents. It picks the intent with the highest similarity rate to the user’s input and then selects a suitable reply for Hebron to give to the user. The reply to various intents is embedded within the intents. To further expand the knowledge base of Hebron, the API has a feature that accommodates external data. This external data is in the e-commerce datasets, which can be accessed from the admin login portal and DBMS. Hebron undergoes a lot of supervised learning during its training process, where monitoring its conversational progress finds expression. In other words, Recast.ai is what gives Hebron its brain and defines its skillset.


## 3.5.4. Data Layer

Developed using MySQL, the data layer gives a structure to the e-commerce datasets that the chatbot will use to answer product-related questions. This structure, which is in the form of tables, will help the administrator (s) of CUSM put the relevant information in the right place. The structure is subdivided as follows:(1)
User(2)
Store(3)
Purchases(1)User. A table hosting the information in terms of the usernames (in the form of “e-mail address”) and passwords of the administrators for CUSM will be stored here.(2)Store. A table is created to store the products’ names, price of the products, quantity of the products, and a short description of the products.(3)Purchases. A table is created to store the purchases made on the CUSM chatbot via a pay stack plugin. In other words, the table created is a table of online purchases.


## 3.5.5. CUSM Admin Login Page

The admin persons in the shopping mall will frequently have to update the chatbot with the shopping mall’s current products and prices. This will enable the chatbot to give current and correct information to its users. The page will be developed using JavaScript for the front-end and MySQL for the database backend. Section4 will exhibit figures showing what the database page looks like from the backend and how products are stored or modified. In addition, every ID number is a unique key. This implies that once a number has been used by a product, that number cannot be used again by another product. Furthermore, even if that product is deleted, it will not be assigned the same ID number it initially had.


## 3.6. System Modeling

A Sequence Diagram would be used to portray the system activities. The activity diagram for the inquiry of products, availability of products alongside the requested product’s price, and purchase where necessary is shown in Figure3. Also, the overall sequence diagram of the CUSM chatbot is illustrated in Figure 4.Figure 3
Activity diagram for inquiries.Figure 4
Overall sequence diagram for CUSM chatbot.As shown in Figure4, the modeling of the system serves as the foundation for the implementation of the chatbot for the CUSM web application. This section explained in detail how the CUSM chatbot system will be developed. This was achieved by describing the system units that make up the system and explaining how the units would interact with each other to realize the chatbot system. In addition, block diagrams and UML diagrams were used in describing the design of the system. In the section that follows, the testing and implementation of the chatbot system are presented.


## 4. Construction, Testing, and Results

The chabot system has two user interfaces and two sections, namely, the Admin section and User section. The chatbot system is a web application that is further divided into two parts:(i
)The front-end: it consists of the chatbot and Admin web pages(ii
)The backend: it consists of the database and machine learning section that keeps the entire system functionality


### 4.1. Chatbot Page

Figure5(a) shows the chatbot interface where the user-to-chatbot interaction occurs. The chatbot interface is where users (students or staff) can fully interact with the chatbot Hebron and get correct and up-to-date responses. Hebron is the official customer care service for CUSM where the user gets to ask the bot questions concerning current products available, the current prices of the products sold in the shopping mall, and closing and opening times of CUSM and pay for items via CUSM's payment platform. Figure 5(b) shows the user requesting the availability of an item and its price. Figures 5(c) and 5(d) show the payment process.Figure 5
(a) Chatbot interface. (b) User requesting items from a chatbot. (c) User paying for an item via chatbot. (d) Successful Payment.
(a)(b)(c)(d)


### 4.2. CUSM Admin Login Page and Admin Portal

The admin persons in the shopping mall will frequently have to update the chatbot with the shopping mall’s current products and prices. This will enable the chatbot to give current and correct information to users. Therefore, only the shopping mall’s administrative employees have access to the CUSM portal, and the admin persons’ authentication will be done via the CUSM Admin Login Page. The Admin Portal, on the other hand, is where the e-commerce items are saved, updated, added to, and subtracted from. This is shown in Figures6(a) and 6(b).Figure 6
(a) Admin login page. (b) Admin portal.
(a)(b)


### 4.3. The Database Section

Developed using MySQL, the data layer gives a structure to the e-commerce datasets that the chatbot will use to answer product-related questions. This structure, which is in the form of tables, will help the administrator(s) of CUSM put the relevant information in the right place. The structure is subdivided as follows:(1)
User(2)
Store(3)
Purchases(1)User. Figure 7(a) shows a table hosting the information in terms of the usernames (in the form of “e-mail address”) and the administrators’ passwords for CUSM.Figure 7
(a) Database structure table for admin users. (b) Database structure table for store items. (c) Database structure table for purchases made.
(a)(b)(c)(2)Store. Figure 7(b) shows a table created to store the products’ names, price of the products, the quantity of the products, and a short description of the products.(3)Purchases. Figure 7(c) shows a table created to store the purchases made on the CUSM chatbot via a pay stack plugin. In other words, the table created is a table of online purchases.


### 4.4. Testing

Some of the basic software testing methods deployed are functionality, interface, database, compatibility, unit, and pilot tests to test the chatbot web application system.


#### 4.4.1. Functionality Testing

The system was tested for functionality as it was being built to ensure that it performs as required. For the front-end section, the user interface was tested for proper responses. Testing the data processing part of the chatbot system involved observing the output data to ensure that they met the specified requirements. Figures8(a) and 8(b) show the terminal used as a testing tool for the backend and results.Figure 8
(a) Backend testing and result. (b) Backend testing and result.
(a)(b)


#### 4.4.2. Interface Testing

Particular areas were considered at the interface testing stage, namely:(1)
Web application: Tests were carried out to ensure that requests were sent correctly to the message backend. The client side’s output was Web Server. The web server was monitored to ensure that all requests were handled properly without service denial seen in Figure9(2)
Database server: Inspections were carried out to ensure that all queries to the database gave the expected resultsFigure 9
Web server monitoring.


#### 4.4.3. Database Testing

The database is a very critical part of a web application. Assessments were carried out to ensure data integrity while creating, updating, or deleting data in the database and the correct display of data retrieved from the database on the web application.


#### 4.4.4. Compatibility Testing

This is the stage where the web application was tested for browser compatibility. The main browsers used for the test were Google Chrome, Mozilla Firefox, and Internet Explorer. This test ensured that the web application was displayed correctly in all of the above-stated web browsers.


#### 4.4.5. Unit Testing

Individual units of software developed were tested to validate that each branch of the software performs as designed.


#### 4.4.6. Pilot Testing

Pilot testing is a vital part of any web-based project, and it is usually carried out by the tester or a small focus group. In this testing stage, the locally hosted web application was shown to many people to test the chatbot and ensure that all buttons and system functionalities on the site were visible and working correctly.


### 4.5. Results

A survey was conducted using questionnaires to gather results from students on their overall perception of the chatbot. The questionnaire was divided into three sections. The first section contained basic demographic questions such as Name, Gender, and Programme, while the second section contained the web application test criteria, namely, functionality, usability, and interface. Respondents were asked to evaluate the three web application parameters on a scale of 1 to 5, with 1 representing a low or unsatisfactory score and 5 indicating a highly satisfactory score. The third section sought to inquire from the students about their overall perception of the chatbot application and recommend it to their fellow students. A total number of 10 students participated in the survey, specifically five females and five males. Based on the responses gathered from the testers, the results in Figure10 were obtained.Figure 10
(a) shows that about 50% of users thought that Hebron’s functionality was good and satisfactory. (b) suggests that Hebron fulfilled about 60% of its functionality. (c) shows that 60% of users rated Hebron’s interface as good. (d) Usability Rating. (e) shows that all the testers (100%) thought that Hebron was highly recommendable.
(a)(b)(c)(d)(e)Concerning this section, the various modules of the CUSM chatbot web application were presented. It also discussed the ways in which the modules of the web application were examined. The chatbot system was also implemented based on the design outlined in Section3, and the results of the chatbot implementation presented and discussed.


## 4.1. Chatbot Page

Figure5(a) shows the chatbot interface where the user-to-chatbot interaction occurs. The chatbot interface is where users (students or staff) can fully interact with the chatbot Hebron and get correct and up-to-date responses. Hebron is the official customer care service for CUSM where the user gets to ask the bot questions concerning current products available, the current prices of the products sold in the shopping mall, and closing and opening times of CUSM and pay for items via CUSM's payment platform. Figure 5(b) shows the user requesting the availability of an item and its price. Figures 5(c) and 5(d) show the payment process.Figure 5
(a) Chatbot interface. (b) User requesting items from a chatbot. (c) User paying for an item via chatbot. (d) Successful Payment.
(a)(b)(c)(d)


## 4.2. CUSM Admin Login Page and Admin Portal

The admin persons in the shopping mall will frequently have to update the chatbot with the shopping mall’s current products and prices. This will enable the chatbot to give current and correct information to users. Therefore, only the shopping mall’s administrative employees have access to the CUSM portal, and the admin persons’ authentication will be done via the CUSM Admin Login Page. The Admin Portal, on the other hand, is where the e-commerce items are saved, updated, added to, and subtracted from. This is shown in Figures6(a) and 6(b).Figure 6
(a) Admin login page. (b) Admin portal.
(a)(b)


## 4.3. The Database Section

Developed using MySQL, the data layer gives a structure to the e-commerce datasets that the chatbot will use to answer product-related questions. This structure, which is in the form of tables, will help the administrator(s) of CUSM put the relevant information in the right place. The structure is subdivided as follows:(1)
User(2)
Store(3)
Purchases(1)User. Figure 7(a) shows a table hosting the information in terms of the usernames (in the form of “e-mail address”) and the administrators’ passwords for CUSM.Figure 7
(a) Database structure table for admin users. (b) Database structure table for store items. (c) Database structure table for purchases made.
(a)(b)(c)(2)Store. Figure 7(b) shows a table created to store the products’ names, price of the products, the quantity of the products, and a short description of the products.(3)Purchases. Figure 7(c) shows a table created to store the purchases made on the CUSM chatbot via a pay stack plugin. In other words, the table created is a table of online purchases.


## 4.4. Testing

Some of the basic software testing methods deployed are functionality, interface, database, compatibility, unit, and pilot tests to test the chatbot web application system.


### 4.4.1. Functionality Testing

The system was tested for functionality as it was being built to ensure that it performs as required. For the front-end section, the user interface was tested for proper responses. Testing the data processing part of the chatbot system involved observing the output data to ensure that they met the specified requirements. Figures8(a) and 8(b) show the terminal used as a testing tool for the backend and results.Figure 8
(a) Backend testing and result. (b) Backend testing and result.
(a)(b)


### 4.4.2. Interface Testing

Particular areas were considered at the interface testing stage, namely:(1)
Web application: Tests were carried out to ensure that requests were sent correctly to the message backend. The client side’s output was Web Server. The web server was monitored to ensure that all requests were handled properly without service denial seen in Figure9(2)
Database server: Inspections were carried out to ensure that all queries to the database gave the expected resultsFigure 9
Web server monitoring.


### 4.4.3. Database Testing

The database is a very critical part of a web application. Assessments were carried out to ensure data integrity while creating, updating, or deleting data in the database and the correct display of data retrieved from the database on the web application.


### 4.4.4. Compatibility Testing

This is the stage where the web application was tested for browser compatibility. The main browsers used for the test were Google Chrome, Mozilla Firefox, and Internet Explorer. This test ensured that the web application was displayed correctly in all of the above-stated web browsers.


### 4.4.5. Unit Testing

Individual units of software developed were tested to validate that each branch of the software performs as designed.


### 4.4.6. Pilot Testing

Pilot testing is a vital part of any web-based project, and it is usually carried out by the tester or a small focus group. In this testing stage, the locally hosted web application was shown to many people to test the chatbot and ensure that all buttons and system functionalities on the site were visible and working correctly.


## 4.4.1. Functionality Testing

The system was tested for functionality as it was being built to ensure that it performs as required. For the front-end section, the user interface was tested for proper responses. Testing the data processing part of the chatbot system involved observing the output data to ensure that they met the specified requirements. Figures8(a) and 8(b) show the terminal used as a testing tool for the backend and results.Figure 8
(a) Backend testing and result. (b) Backend testing and result.
(a)(b)


## 4.4.2. Interface Testing

Particular areas were considered at the interface testing stage, namely:(1)
Web application: Tests were carried out to ensure that requests were sent correctly to the message backend. The client side’s output was Web Server. The web server was monitored to ensure that all requests were handled properly without service denial seen in Figure9(2)
Database server: Inspections were carried out to ensure that all queries to the database gave the expected resultsFigure 9
Web server monitoring.


## 4.4.3. Database Testing

The database is a very critical part of a web application. Assessments were carried out to ensure data integrity while creating, updating, or deleting data in the database and the correct display of data retrieved from the database on the web application.


## 4.4.4. Compatibility Testing

This is the stage where the web application was tested for browser compatibility. The main browsers used for the test were Google Chrome, Mozilla Firefox, and Internet Explorer. This test ensured that the web application was displayed correctly in all of the above-stated web browsers.


## 4.4.5. Unit Testing

Individual units of software developed were tested to validate that each branch of the software performs as designed.


## 4.4.6. Pilot Testing

Pilot testing is a vital part of any web-based project, and it is usually carried out by the tester or a small focus group. In this testing stage, the locally hosted web application was shown to many people to test the chatbot and ensure that all buttons and system functionalities on the site were visible and working correctly.


## 4.5. Results

A survey was conducted using questionnaires to gather results from students on their overall perception of the chatbot. The questionnaire was divided into three sections. The first section contained basic demographic questions such as Name, Gender, and Programme, while the second section contained the web application test criteria, namely, functionality, usability, and interface. Respondents were asked to evaluate the three web application parameters on a scale of 1 to 5, with 1 representing a low or unsatisfactory score and 5 indicating a highly satisfactory score. The third section sought to inquire from the students about their overall perception of the chatbot application and recommend it to their fellow students. A total number of 10 students participated in the survey, specifically five females and five males. Based on the responses gathered from the testers, the results in Figure10 were obtained.Figure 10
(a) shows that about 50% of users thought that Hebron’s functionality was good and satisfactory. (b) suggests that Hebron fulfilled about 60% of its functionality. (c) shows that 60% of users rated Hebron’s interface as good. (d) Usability Rating. (e) shows that all the testers (100%) thought that Hebron was highly recommendable.
(a)(b)(c)(d)(e)Concerning this section, the various modules of the CUSM chatbot web application were presented. It also discussed the ways in which the modules of the web application were examined. The chatbot system was also implemented based on the design outlined in Section3, and the results of the chatbot implementation presented and discussed.


## 5. Conclusion

Prior to this research, pattern-based chatbots have had a questionable level of intelligence. Although Hebron is pattern-based, it has a high learning rate, which means that it learns immediately from any e-commerce item that is added to its database. Furthermore, it responds quickly and well to new training phrases added to its database. The achieved aim of this work is the design and implementation of a chatbot for Covenant University Shopping Mall. The chatbot’s purpose is to have a smart, accurate, and real-time conversation with the students. In this way, students chat with the bot to inquire about particular items they seek to purchase and pay online for the items before they visit the mall. The chatbot is accessible via portable mobile devices or computers, which students can log in to anywhere and anytime on campus, thereby providing a 24-hour online service. This research will alleviate the discomfort experienced by members of the Covenant University Community when they travel down to CUSM to source for items only to find that the desired items are either out of stock or unavailable. It is recommended that more features can be added to the chatbot, such as the delivery of paid items to student halls of residence; more training phrases can be added to the chatbot to give the chatbot a better social outlook; addition of items to the chatbot database can be made automated, for instance, adding a barcode reader option to the chatbot. It would also be expedient to test the chatbot with larger datasets.



---

*Source: 6630326-2021-03-20.xml*