Cross Platform Waste Reuse, Reduce and Recycle Management Application With Prototyping Methodology

 Abstract —The use of plastic bags by the public as containers for shopping goods is very high. People often throw away plastic waste carelessly, causing pollution everywhere. The biggest problem with the lack of recycling action lies in the lack of public awareness of the importance of implementing 3R (Reduce, Reuse, Recycle). People are less motivated to do 3R, one of which is because there are no rewards after doing 3R. This research develops an application provides rewards to the community for using Eco-Green Bags as an alternative to plastic bags. This research application has a system that makes it easier for people to carry out 3R. This proposed framework application uses the React Native framework for creating mobile apps and Next.JS for creating admin websites and APIs. With the React Native framework, application performance will be faster and smoother for users. The Next.JS framework allows developers to have a very clear project structure, because Next.JS uses file-based routing. With this research, it is hoped that people can be even more motivated to carry out 3R. The community can participate easily in implementing 3R without any coercion but through the community's own initiative. In this way, the application can be a real supporter of society in implementing 3R and avoiding the use of plastic bags which are also contributors to environmental pollution.

very high [1].Estimated around 500 hundred million plastic bags used in 2020.This gives rise to problem of ecosystem pollution [2], [3].People often throw away plastic waste carelessly, causing pollution everywhere.Starting from beaches full of plastic waste, to the discovery of plastic in animal digestion.Not only that, smoke from plastic factories also pollutes the air [4].Therefore, a replacement for plastic bags is needed that can be recycled and is easy to produce, namely Eco-Green Bags.This bag is an environmentally friendly bag.
Apart from reducing the use of plastic bags with environmentally friendly bags, there is also a recycling process.Recycling is the process of processing used/used goods into new materials/goods that can be used to make new goods or function as production support materials.Recycling has the term 3R, namely reduce, reuse and recycle.
Reduce means to reduce.In this case, society must reduce waste.Reuse means reused.It is important to minimize purchases of new items and maximize the useful life of an item so as not to replace items quickly.Recycle means recycling.The community must participate in maintaining the ecosystem.Keeping the ecosystem clean goes hand in hand with recycling.Both have the same priority level.So it is important for the public to have awareness of the cleanliness of the surrounding ecosystem and the urgency of recycling actions.
The biggest problem with the lack of recycling action lies in the lack of public awareness of the importance of implementing 3R [5].People are less motivated to do 3R, one of which is because there are no rewards after doing 3R.Therefore, we need a mechanism that can support 3R in society in a real way.A system is also needed that can attract the public to want to participate in carrying out 3R.
This mechanism can be done by saving on the use of plastic bags when shopping.If you can overcome one source of pollution, the success of the 3R process will be more effective.Therefore, support for the 3R process will be created in society in a real and implemented way.The system created must be online and mobile to support large and large public spending.
The development using the REST API will make the website

Cross Platform Waste Reuse, Reduce and Recycle Management Application With Prototyping Methodology
build easier [6] .Especially, Node JS has become one of the most popular languages for making web services.Node.js is a platform for running JavaScript-based web applications.Node.js was created by Ryan Dahl in 2009.Node.js is used to run JavaScript from the server side.Node.js is built with Google's V8 JavaScript engine [7], [8].React Native will help to improve the front end of the application because React Native aims to develop an application for Android and iOS [9], [10].Moreover, Next.js is a full-stack framework based on React, which means you can create front-end and back-end components simply with Next.js [11], [12].
Firebase is a platform that provides backend services in the cloud, provided by Google.Firebase has many services, starting from user management services to its own database provided by Firebase.Firebase makes it easy for developers to develop the backend of their projects [13], [14].
While acknowledging the 3R principle's potential, the research recognizes the challenges of low public awareness and motivation.To address this, the study proposes a novel system that incentivizes public participation in 3R activities through a reward system.This study's contribution is two-fold.It not only advances academic understanding of effective waste management [15] strategies, but also offers tangible benefits for policymakers, environmentalists, and the general public.Implementing the proposed system can lead to a significant reduction in plastic waste by encouraging the use of Eco-Green Bags and promoting the 3Rs.This, in turn, can motivate individuals to actively engage in recycling and waste reduction efforts through the proposed reward system, ultimately contributing to a cleaner and healthier ecosystem for all [16], [17].
This article consists of five parts.The first section discusses the introduction and background.The second part explains the literature review and the third part describes the methodology.The fourth section explains the results and discussion, and the final section discusses the conclusions.

II. RELATED WORK
Numerous studies have contributed to the current recovery of climate and environmental conditions.For instance, a website was developed to educate and increase awareness about recycling plastic [18].This initiative was driven by the growing concern over plastic pollution and the need for educational materials.Another study aimed to promote sustainable development by reducing product waste, particularly plastic, through the creation of a website [19].These websites were developed using Unified Modeling Language (UML) and the Microsoft Visual Studio 2010 programming language.
Despite these advancements, a clear gap exists in the literature: the need for a comprehensive platform that not only educates and promotes sustainability but also enables users to actively participate in waste management.Addressing this gap, Azemi et al. [20] designed a website that allows users to request waste collection, track their recycling progress, and receive rewards.They used the evolutionary prototyping model as the main software development technology, demonstrating the potential for other software development technologies, like Rapid Application Development (RAD), to be used in future developments [21].
In the realm of green computing research [22], [23] , which investigates the negative effects of information technology on the environment, Arfian developed a website based on Green Computing principles to reduce paper and electricity waste [23].This represents a novel approach to environmental conservation in the digital world.
The concept of a smart recycle bin is a popular research topic.Engelbrecht et al. [24] attempted to create a self-managing recycle bin system using a Raspberry Pi controller, strain gauges, and camera interaction.This system, developed with a C# and dotNetCore framework, measures recycled weight and manages rewards.Another study designed a holistic waste management system consisting of web-based and mobile application waste management with hardware [25].
However, waste storage remains a significant environmental problem.Many people are considering how to dispose of trash effectively.The implementation of a temporary waste storage system could serve as a viable solution to address the high volume of waste generated [15].This study aims to build upon these previous works by exploring the effectiveness of such a system, thereby contributing a unique perspective to the literature.

A. Application Development Method
The method used in making this application is the prototyping method.Prototyping is a methodology based on the concept of working models.A prototype of a software project must be developed quickly and often ignore best programming practices.Figure 1 shows the process of prototyping model.System development will be faster and usually cheaper than traditional methods.System developers, clients, and users can work together from the beginning of the system development process.This research uses the Incremental Prototyping model.The Incremental Prototyping model has an Increment which represents a sub module of an application system.Application modules can be separated into Increments which have their own prototyping processes, so that complex systems can be developed clearly and modularly.Each model's development is received through a repetition process, which is followed by answers from the project owners.The incremental prototyping model diagram shows in Fig. 2.

B. Requirement Collection
Requirements gathering is carried out to obtain what requirements will be needed for application development.
These requirements analyze the development process and required application features.The steps required are studying frameworks, libraries and applying prototyping methodology.

C. Design
After gathering requirements, proceed with designing the system architecture.In this design process, the system architectural design and flow design for all types of users and all process flows for each type of user are explained.The architecture of the system is shown in Fig. 3. Figure 3 describes the architecture of the system.There are 5 actors as users, namely customer, cashier, courier, recycler and admin.User, cashier, courier, and recycler use smartphone.Admin use website.The system will use React Native for the Mobile Framework, Next.js for the Website and Service Framework, MySQL for the database, REST API for the API type, and Midtrans as the payment gateway.

D. Development Tools
In the development of our research signifies a pivotal advancement in addressing the exigencies of waste management through digital means.We leverage the confluence of Next.js,React Native, and RESTful APIs.Next.js is a powerful framework for website development that offers a compelling combination of performance and user experience.By using Incremental Static Regeneration (ISR) to pre-render dynamic pages, Next.js ensures fast loading times.Features like code splitting, multilingual support, and image optimization further enhance both website performance and SEO.
Additionally, Next.js simplifies deployment on popular platforms and offers Server-Side Rendering (SSR) for lightening the client-side workload and accelerating initial page loads.In essence, Next.js empowers developers to create high-performing, user-friendly websites with ease [26].
Meanwhile, React Native is a cross-platform framework that allows developers to create mobile apps for both iOS and Android using a single codebase.Unlike web-based solutions, React Native apps run natively, resulting in better performance.Key features include Incremental Static Regeneration (ISR), code splitting, and multilingual support.
Furthermore, REST (Representational State Transfer) is an architectural style for distributed hypermedia systems.It was first presented by Roy Fielding in 2000.Key principles of REST include client-server separation, statelessness, cacheability, a uniform interface, layered system architecture, and optional code execution on the client [27].
Figure 4 shows the flow of customer registration flow.The customer should register and buy an Eco-Green bag first.After the bag is ready to use, the customer can check out with an Eco-Green bag.The cashier will scan the bag and create a \transaction from the bag.Points will be awarded automatically to the customer as soon as the transaction is finished.Figure 5 shows the flow of purchasing goods in a supermarket using an Eco-Green Bag.Initially customers had to use Eco-Green Bags to shop.Once finished, the customer will proceed to the cashier who will continue the transaction.The cashier will use the Scanner feature to verify the bag from the customer.Once successful, the transaction payment will continue.If successful, the customer will get notifications and points for their purchases.The application also has a recycling feature.The following is a recycling flow diagram by customers.
Figure 6 above illustrates the flow of the recyclable pick-up request feature.The first customer collects and packs the items to be recycled.After that, the customer makes a pickup request on the application.The courier will receive the pickup order and then carry out the pickup according to the predetermined schedule.The courier here is tasked with collecting and delivering donations of recycled goods from customers to recyclers for further processing.In the following diagram, the recycling user workflow will be depicted.Figure 7 illustrates the workflow of a recycling user.Continuing from the Pickup flow, the Recycle Flow aims to input goods that have been picked up by the courier into the system.The recycler will calculate the weight, dimensions and type of item to input into the system.After the recycler inputs the item, the customer will get a notification that the item has been processed and will get points as a reward.The settings for awarding the number of points is set by the admin.Customers have the option to request a recalculation if the customer feels that the point rewards calculated automatically by the system using a formula created by the admin are not appropriate.

E. Prototyping Stages
According to this methodology, a prototype is created with the primary or chosen function to see the outcome and identify any gaps in the project [28].The prototyping stages are carried out in several stages and phases using the Incremental Prototyping Model.Prototyping was carried out on 4 types of users, each using the Incremental Prototyping Model.

1) Prototype Customer
This prototyping involves creating interfaces for various pages and features that will be used by customer users, including the account registration process and other features.The first stage of the prototype is focused on creating an initial interface design by the developer and does not involve testing or feedback.Various pages such as login, register, forgotten password, customer home, customer profile, etc. are explained in detail with a focus on appearance and functionality.Every page is tested and some receive feedback for improvement.An event list page from admin is shown in Fig. 8.It is one of the pages that was worked on throughout the customer prototype phases.

2) Prototype Cashier
This prototype focused on initial interface design and checking page deficiencies, including key features such as transaction creation, transaction history, and cashier profile management.After receiving feedback from users, the prototype underwent design revisions and functionality improvements, including changes to transaction input and improvements to the transaction history display.A history transaction page is shown in Fig. 9.It is one of the pages that was worked on throughout the cashier prototype phases.

3) Prototype Driver
This prototype focused for courier users.This prototype includes various stages of prototyping with the main focus on the courier pickup feature for recyclable goods.The first stage of the prototype involves creating temporary interface designs for all pages and features in the application.The main purpose of this stage is to check for deficiencies in the interface page, although at this stage no trials have been carried out to get feedback.Some of the pages explained in this first stage include the courier profile page, waiting for pick-up, on-going pick-up, pick-up history, pick-up details, and others.A courier profile page is shown in Figure 10.It is one of the pages that was worked on throughout the driver prototype phases.

4) rototype Recycler
This stage is focused for the prototyping process for recycling users.This prototype includes designing the recycling user functionality, focusing on the recyclable input feature and interaction with the courier user.There are several stages in making this prototype.The first stage involves creating temporary interfaces for all pages and features in the application, based on the analysis carried out by the developer.This stage has not been tested to get feedback, but aims to identify deficiencies in the temporary interface.Several specific pages such as the recycler profile page, driver list page, and pickup list page are discussed in detail, including testing and feedback received.A recycler profile page is shown in Figure 11, which is one of the pages that was worked on throughout the recycler prototype phases.

F. Implementation
Implementation is carried out in program coding and system design.The implementation uses the JavaScript programming language as the main language of the Next.js and Node.js frameworks.

G. Testing
Testing is carried out to find out whether the appearance of the application is user friendly, the functionality works well, and is easy to use.The trial will be carried out with 20 people divided into certain roles.12 people will be customers, 2 cashiers, 2 couriers, 2 recyclers, and 2 admins.The trial will be carried out until a minimum of 100 transactions occur.

IV. RESULT
In this section we will discuss testing in this research.Trials are carried out to test features and provide assessments on several criteria given in the questionnaire.With this trial, advantages and disadvantages will be obtained as well as conclusions regarding the fulfillment of the objectives of this proposed framework.
Figure 12 shows the home page of the application for customer users.The home page is the main page that displays information briefly regarding points and pick-up status and displays application advertisements.Figure 14 shows the redeemable page.This page is a customer point exchange page.This page has a list containing all items that can be exchanged by customers using customer points.Customers can press one of the items on the list to see the details of that item and make an exchange if the customer has enough points and the customer wants to make the exchange.
The trial was carried out by distributing a trial user questionnaire.With this questionnaire, conclusions can be drawn as well as fulfillment of the proposed framework objectives and evaluation of this research.The trial also contains suggestions given by the testers.
Figure 15 is a diagram of the question "How well the application runs when you use it?".There were a total of 20 people who filled out this questionnaire.A total of 15 people answered very well with a percentage of 75% and 5 people answered well with a percentage of 25%.  Figure 16 is a diagram of the question "How well the application performs when you use it?".There were a total of 20 people who answered question this.A total of 13 people gave 5 marks for very good with percentage 65%, while 7 other people give 4 marks for Good with percentage 35%.Fig. 17.Question about the app's ease of use.
Figure 17 is a diagram of the question "How easy it is to use the application when you use it".There were a total of 20 people who answered this question.A total of 14 people gave a score of 5 for very easy with a percentage of 70%, 5 people gave a score of 4 for easy with a percentage of 25%, and 1 person gave a score of 3 for so-so with a percentage of 5%. Figure 18 is a diagram of the question "Does this application provide you with material or immaterial benefits".There were a total of 20 people who answered this question.All 20 people answered yes with a 100% percentage of getting benefits from using this proposed research application.Figure 20 is a diagram of the question "Does this application make it easier for you to recycle your items?".A total of 20 people answered this question.A total of 19 people answered yes with a percentage of 95% and only 1 person answered no with a percentage of 5%.

Figure 23 is a diagram of gender demographic questions.
There was a total of 20 people who answered this question.15 people were male with a percentage of 75%, and 5 people were female with a percentage of 25%.The majority of application users are male.Figure 24 is a diagram of age demographic questions.There were a total of 20 people who answered this question.A total of 16 people aged 24 to 19 years with a percentage of 80%.A total of 2 people aged 17 to 23 years with a percentage of 10%.This is the case with the remaining 2 people aged 30 to 40 years.Most users are young people.
We will discuss the testing method, that we used to test the quality of the application.In this research, system testing is carried out using the Black Box method testing.This Black Box testing method is a process.Testing is carried out only by observing the results execution through test data and functional checks of software that has been developed.
Results of trials on recycling users are displayed in Table 1.Overall, the developed features all function nicely.There were no issues discovered that would prevent recyclers from using the application as a whole.The application development process is finished utilizing a prototyping approach and incremental prototyping model after testing with recycler.The completion of the application development process is marked by the successful use of the prototyping technique with an incremental prototyping model, delivering a seamless and effective user experience for recycling users.V. CONCLUSION We tested a system that encourages people to use Eco-Green Bags, which are reusable bags that can replace plastic bags.The response from the testers was very positive, with well over 95% saying they wanted to switch to Eco-Green Bags.In addition, almost all of the testers agreed that the system would make recycling easier for them.
The system provides a convenient pickup service for recyclable items, eliminating the need for users to manually sort them.All users need to do is gather their recyclables and ensure they are prepared for collection.While the testers found the app to be functional, they suggested ways to make it more interesting to use.In other words, they wanted the app to be more interactive and user-friendly.
Potential areas for further study include using artificial intelligence (AI) to recommend the best times for residents to put out their recyclables for collection.This could potentially make the recycling process smoother and encourage even more people to participate.Because of these findings, future studies can help us develop even more efficient and user-friendly recycling systems.

Figure 13
Figure 13 displays the customer profile page.The customer profile page has a menu that contains all the customer user features.The profile page is also the fourth page of the footer navigation.Customers use this page to open features and other pages in the application.Figure14shows the redeemable page.This page is a customer point exchange page.This page has a list containing all items that can be exchanged by customers using customer points.Customers can press one of the items on the list to see the details of that item and make an exchange if the customer has enough points and the customer wants to make the exchange.The trial was carried out by distributing a trial user questionnaire.With this questionnaire, conclusions can be drawn as well as fulfillment of the proposed framework objectives and evaluation of this research.The trial also contains suggestions given by the testers.Figure15is a diagram of the question "How well the application runs when you use it?".There were a total of 20 people who filled out this questionnaire.A total of 15 people answered very well with a percentage of 75% and 5 people answered well with a percentage of 25%.

Fig. 18 .
Fig. 18.Question about the benefit of the application.

Fig. 19 .
Fig. 19.Question about the impact of the application.

Figure 19
Figure19is a diagram of the question "Does this application give you motivation to avoid using plastic bags but instead use environmentally friendly bag alternatives?".A total of 20 people answered this question.A total of 19 people answered yes with a percentage of 95% and only 1 person answered no with a percentage of 5%.Figure20is a diagram of the question "Does this application make it easier for you to recycle your items?".A total of 20 people answered this question.A total of 19 people answered yes with a percentage of 95% and only 1 person answered no with a percentage of 5%.

Fig. 20 .
Fig. 20.Question about the case of the recycling the app provides.

Fig. 21 .
Fig. 21.Question about whether you would recommend this application.

Figure 21
Figure21is a diagram of the question "How would you like to recommend this application to other people?"A total of 20 people answered this question.A total of 10 people gave a score of 5 for very wanting with a percentage of 50%, 7 people gave a score of 4 for wanting with a percentage of 35%, and 3 people gave a score of 3 for average with a percentage of 15%.

Fig. 22 .
Fig. 22. Question about whether you would recommend this application.

Figure 22
Figure22is a diagram of the question "In your opinion, is this application feasible and can be developed in the future?".There was a total of 20 people who answered this question.All 20 people answered yes with a percentage of 100% for this research application being further developed in the future.

Table 1 .
Testing Results for Recycler