The Web-Based Application of Small and Medium Enterprises (SMEs) Product Distribution Management with Content Management System Shopify Integration in Netasia Singapore

. Netasia is a brand activation of the company named Golden Style Management Lte. Ptd. in Singapore which acts as a local partner and distributor for Small and Medium Enterprises (SMEs) from Indonesia. Netasia utilizes Content Management System (CMS) named Shopify to reach end-users. But currently, they do not have a platform for managing product distribution from preorders to vendors until distribution to stores. This research was conducted to develop a web-based application of SMEs product distribution management with CMS Shopify integration in Netasia Singapore. This research was conducted using Research and Development (RnD) method for research approaches and prototyping method for software development. The prototyping method often involves communication between developers and the company as application users, so that the application undergoes several changes. As the result of this research, the application has been successfully integrated with the data from the company's CMS Shopify through the API using cURL. The application was tested with several testing methods such as 1) black-box testing with 100% succeed percentage so the application is proper to use, 2) white-box testing with cyclomatic complexity of 4 and 100% succeed percentage for value test so the application passed the software engineering criteria, 3) User Acceptance Testing (UAT) with 94% average percentage so the application meets user expectations, and 4) browser application compatibility testing with the results that the application is compatible with all of the browser applications specified in this research for the menus function aspect, and less compatible with the Internet Explorer browser for the user interface aspect.


Introduction
Netasia also known as Netasia Singapore is a brand activation of the company named Golden Style Management Lte. Ptd. in Singapore. Netasia acts as a local partner and distributor for Small and Medium Enterprises (SMEs) from Indonesia in Singapore. The products distributed also adapt to the needs and market trends in Singapore. Netasia takes care of products from arrival to stores, monitoring sales, and penetrating to new places or new target markets. Netasia acts to preorder SMEs products from some vendor partners in Indonesia, then distributes them both to end-users and to several store partners in Singapore.
To optimize the distribution of SMEs products, Netasia started to reach end-users by utilizing a Content Management System (CMS) named Shopify. Content Management System (CMS) is a system that helps users to manage web content more easily without doing a programming [1]. Users just upload the content to the CMS and configure it through the features provided by the CMS. Meanwhile Shopify is an e-commerce CMS that is used as a marketplace for selling product by online. Netasia uses the Shopify to sell several products from SMEs vendors to anyone as an end-user.
Besides, Netasia also needs to manage the distribution of SMEs products from preorders to vendors until distribution to stores in Singapore. But currently, Netasia does not have a platform for managing product distribution from preorders to vendors until distribution to stores. They have been managed product distribution manually using communication apps such as WhatsApp and manual recording using Google Sheets or Microsoft Excel. It can stack files that can complicate product distribution management. The process of product distribution management in Netasia is illustrated in Figure 1.
The way that can be used to manage product distribution more easily is create a web-based application. Web-based application is an application that runs on a web server and can be accessed using a web browser [2]. Web-based application is more interactive and responsive to user actions than website [3]. The web-based application developed is also integrated with the data from Netasia's CMS Shopify through the Application Programming Interface (API) using a client URL (cURL) method. Application Programming Interface (API) is a library that acts as an intermediary for an application to interact with other applications [4]. While the client URL (cURL) is a command line to transfer data through the server using the URL syntax through several protocols [5]. Shopify provides procedures for accessing these APIs.
Based on the conditions and problems that have been described above, Netasia needs a platform that can be used to manage the distribution of SMEs products from preorders to vendors until distribution to stores in Singapore. Therefore, this research was conducted to develop a web-based application of SMEs product distribution management with CMS Shopify integration in Netasia Singapore. This application is expected to help Netasia manage the distribution of SMEs products more effectively and efficiently.

Methods
The research was conducted using the prototyping method as one of the methods from the System Development Lifecycle (SDLC). Prototyping is a system development method that uses an approach to create a software quickly and gradually so that it can be immediately evaluated by users [6]. There are several stages in the prototyping method as can be seen in Figure 2

Communication
Collecting data and information with literature study, interviews with the company, and observation of the data in the company's CMS Shopify. The prototyping method that used in this web-based application development often involves communication between developers and the company as application users. In this method, the application is developed as a prototype that can be changed or updated according to the company's needs.

Quick Plan
Consists of problem analysis and needs analysis which includes data requirements, system functional requirements, and system non-functional requirements for the web-based application development. Data requirements include vendor data and vendor product data obtained from the company's CMS Shopify, and also store data obtained from interviews with the company. System functional requirements include menus and features in the application desired by the company. System non-functional requirements include software requirements and hardware requirements to support the development process.

Modeling Quick Design
The data obtained from the previous stage is then visualized in a system model using the Unified Modeling Language (UML), database design, and user interface design. Unified Modeling Language (UML) is a method that provides visual modeling that allows developers to create designs or blueprints in a standardized form, easy to understand, and equipped with effective mechanisms for sharing and communicating the designs that have been made [8]. UML diagrams used in this research include use case diagram, sequence diagram, activity diagram, and class diagram.
Use case diagram are used to describe the sequence of actions performed by the system from each entity or actor. There are several use cases for each actor in a use case diagram. Based on the use case diagram as can be seen in Figure 3, there are three actors in the web-based application developed in this research, namely admin, vendor, and store. Each actor has their own use case. This use case is also used for making sequence diagram, activity diagram, and class diagram. Sequence diagram are used to describe the behavior of objects in the use case by describing the life time of objects and messages sent and received by objects. Activity diagram is used to model the workflow of a business process and the sequence of activities in a process, which are arranged based on the use case scenarios that have been made previously. Class diagram are used to describe the state (attributes/properties) of a system, as well

Construction of Prototype
Develop the software based on the results of some analysis and system design that have been carried out in the previous stage. This stage becomes the main focus in the prototyping method because at this stage the software has begun to be developed. The software developed then will deliver to the company as application users to receive feedbacks. It can be used as an evaluation and improvement of the software developed, so that the application can be proper to use.

Deployment, Delivery, and Feedback
If the prototype of the software has been completed, then the software is delivered and used by users to get feedback. This stage also includes the software testing stage which consists of black-box testing, white-box testing, User Acceptance Testing (UAT), and browser application compatibility testing. The instrument used in the software testing is a questionnaire using a form.

Software Development Results
The results of the application development were obtained after going through several stages of the prototyping method which lasted for about eight months. The web-based application was developed using the Codeigniter framework. This web-based application is also integrated with the data from the company's CMS Shopify through the API using cURL. The prototyping method that used in this webbased application development often involves communication between developers and the company as application users. It also makes the development of this application undergoes several changes and updates based on the communication with user and user feedback.
Before being implemented, the application developed in this research will go through the construction of prototype stage to make the application prototype. There have been several changes in this application according to feedback from the company as application users at the communication stage and deployment, delivery, and feedback stage. The construction of prototype stage in the development of this application can be seen in Figure 4.
After going through several changes in construction of prototype stage, the application is then integrated with the data from CMS Shopify through the API. The data in the company's CMS Shopify includes vendor data and vendor's product data. This data can be integrated because Shopify as a CMS provides a web service that allows other applications to access some of its features, through the Application Programming Interface (API) using the client URL (cURL) method. The data is presented in JavaScript Object Notation (JSON) format and will be called in the PHP code structure.
There are four stages in using cURL method [9], including 1) initializing the cURL function using curl_init() command, 2) setting the value options (set options) such as the URL address, the result format, headers, etc. using curl_setopt() command, 3) executes cURL to make an HTTP request according to the options given in the previous stage using curl_exec() command, and 4) closes cURL using curl_close() command because the process is deprecated. The data retrieved from the API is presented in JSON (JavaScript Object Notation) format. Then the data decoded using json_decode() command. This function is used to parse JSON format and make it is easy to processed into PHP variables. The data integration process from the CMS Shopify through the API can be seen in Figure 5.
The application developed in this research consists of four main pages, such as login page, admin page, vendor page, and store page. When the user accesses the application, the first page that is shown by the system is the login page. This page consisting a form to enter a username and password, and a button to login. The user will login to the application and directed to the dashboard page according to their respective levels as admin, vendor, or store by the username and password that have been entered. The login page can be seen in Figure 6.
The admin page has six main menus including dashboard, vendor partner, store partner, preorders, preorder history, and admin accounts. The admin page also has other features such as vendor details, store details, processing preorder, sending preorders to vendors, preorder details, and account settings. The admin dashboard page along with the menus and features can be seen in Figure 7.
The vendor page has four main menus including dashboard, products, preorders from admin, and preorder history. The vendor page also has other features such as processing preorder, preorder details, and account settings. The vendor dashboard page along with the menus and features can be seen in Figure 8.
The store page has several main menus including dashboard, preorders, cart, and preorder history. The store page also has other features such as vendor details (containing list of vendor's products), product details, preorder details, and account settings. The store dashboard page along with the menus and features can be seen in Figure 9.

Software Testing Result
Software testing is one of the important stages in software development. Software testing is carried out to determine whether the software is in accordance with the criteria and objectives of the software design. Software testing used in this research included black-box testing, white-box testing, User Acceptance Testing (UAT), and browser application compatibility testing. The results of software testing for the web-based application developed in this research are described as follows:

a. Black-box testing
Black-box testing is used to test the functional specifications of a system or software [10]. Blackbox testing was carried out by involving three lecturers from the Informatics Study Program of Universitas PGRI Semarang as respondents using a questionnaire. There are 76 test cases in this test with details of 4 test cases for login page, 41 test cases for admin page, 15 test cases for vendor page, and 16 test cases for store page. The results of the black-box testing from three respondents (1) The percentage from each respondent's then averaged and the results of the black-box test were obtained as follows:

b. White-box testing
White-box testing is used to test the detail or internal structure of the software design and uses the control structure of the procedural program design to divide the test into several test cases [10]. White-box testing was carried out by the researchers themselves by testing the code structure of the web-based application developed in this research. The code structure tested is a program flow that has a looping, such as the preorder process from store to admin and the preorder process from admin to vendor. The white-box test results that have been obtained are then processed using several techniques, such as basis path testing, cyclomatic complexity, independent path, and value test. The result obtained the cyclomatic complexity of 4 and 100% succeed percentage for value test.

c. User Acceptance Testing (UAT)
User Acceptance Testing (UAT) is a verification process that the solution made in the system or software is suitable for the user. In contrast to black-box testing or white-box testing that focusing on the functionality and structure of the system or software, the UAT focuses on whether the solution in the system or software is accepted by the user [11]. The UAT test was carried out by involving 3 respondents consisting of 1 representative from company as admin, 1 representative from the SMEs vendor, and 1 representative from the store, using a questionnaire. There are 13 questions which are divided into three aspects such as usability, ease of use, and user interface. The UAT results obtained a percentage of respondent 1 was 93%, respondent 2 was 98%, and respondent 3 was 92%. The percentage from each respondent's then averaged and the results of the UAT test were obtained as follows:

d. Browser Application Compatibility Testing
Browser application compatibility testing was carried out by the researchers themselves by testing the functionality and user interface of the web-based application developed in this research on several predetermined samples of browser applications. The results of browser application compatibility testing can be seen in Table 1.