ABSTRACT

In the Society 5.0 era which is characterized by mobility high and integration technology in everyday life, PLN UP3 Yogyakarta experienced operational obstacles, especially related to manual data processing and static websites. To overcome these challenges, a Joint Information System (SIBER) was developed as an application web- based which allows real-time data access for all employees. In SIBER development, the Scrum method is used for possible project management clear planning and flexibility in sprint iterations. In addition, the implementation of the Tailwind CSS framework and Bootstrap in the development of the SIBER user interface ensures a responsive and attractive appearance, with Tailwind providing detailed design flexibility and Bootstrap providing UI components that are tested and easy to use.

Keywords: Tailwind, Bootstrap, Scrum, Frontend

INTRODUCTION

The current era this, mobility man experience significant improvement, of which technology has become an integral part inseparable from everyday life (Doughty & Murray, 2016; Rahmawati et al., 2021). This change happen because factor from changing become Society 5.0, Humans are now inclined bring various device smart devices such as smartphones, laptops and devices other smart in every activity them (Cortada, 2020; Miller et al., 2021; Reid et al., 2018). Development very fast technology join in influence dynamics life man. Humans need thorough preparation in developing technology in order to be able to do so function optimally. To avoid potential errors, this development needs to be carried out in a structured manner (Billings, 2018; Falck et al., 2017; Nagaria & Hall, 2020; Williams et al., 2018).

PLN UP3 Yogyakarta faces several obstacles in daily operations, especially in processing and sending data done manually and using a static website. To overcome problem Currently, PLN UP3 Yogyakarta needs a system information web- based that can be accessed by all employees use device existing computers and networks. This system, which is named the Joint Information System (SIBER). SIBER can displays data in real-time (Ivanov et al., 2021).

To achieve this goal, the Scrum method was chosen as a project management approach in developing the frontend of the SIBER project (Ashari et al., 2022; Barbosa & Saisse, 2019; Nagy & Sharshakova, 2020). Scrum helps member team in action projects by making planning easier understood and development becomes more flexible (Andry et al., 2019)(Baxter & Turner, 2023). Scrum works by dividing the development process into iterations small ones called sprints, teams can complete tasks in a structured manner within a predetermined time period (Azanha et al., 2017). This approach possible quick identification and resolution of problems, as well continuous feedback to improve final product quality (Ariyanto et al., 2020; Azanha et al., 2017).

In developing the user interface, Tailwind and Bootstrap CSS frameworks were chosen to ensure a responsive and attractive appearance. Tailwind provides flexibility and more detailed customization in interface design, while Bootstrap provides UI components that have been tested and are easy to use.

RESEARCH METHODS

Stages execution done using scrum methodology. Development begins with initiation SIBER project, then proceed to stage execution project, and ends with an evaluation of the SIBER project.

All work in SIBER is carried out by 2 people who are responsible as Front-end Developers whose duties focus on system interfaces, graphic design and creating a comfortable web frontend. when used by the user. And 2 people responsible as Back-end Developers whose duties focus on adding, changing or deleting data.

Figure 2. Stages SIBER Development Flow

Stages initiation the project is the initial stage in the SIBER development flow which aims to prepare the needs for activities project. At stage this activities performednamely gathering user needs, discussing the tools or framework that will be used, and creating a rough appearance of the web. With the activities that have been carried out, the framework that will be used is chosen, namely Tailwind and Bootstrap a Product Backlog is formed. The Product Backlog contains a list of work, the product backlog aims to improve product quality (Correia et al., 2019).

Stages execution project carried out using the scrum method. In stages this, consists from four the stages are carried out three times so produce first iteration, iteration second, and third iteration. Every iteration use scrum stages.

Project evaluation stages carried out after the stage execution project done. In stages this produce finished products or products that are in accordance with their function.

RESULTS AND DISCUSSION

In this discussion, each step is explained in more detail according to the stages outlined in Figure 2 of the previous chapter.

A. Initiation Project

At stage This carried out by preparing the entire development plan. Stage this done bycompiling backlogs. The backlog contains the work that will be done carried out within the team that has been discussed together with the scrum master from PLN UP3 Yogyakarta. Result of Initiation project namely there are 3 projects small then put together become one project big. Three project small amount is produced that is :

1. AMR Voltage Dashboard Project

Project this is an informative dashboard for the Division Transaction Energy. The AMR voltage dashboard contains information related to customers who have Voltage Medium, Voltage Low, and Normal.

2. Dashboard Project.

Project itï¿½s a system information for the Planning division. The main function from the Performance Dashboard viz see performance data and information visually so makes it easier taking decision.

3. Project Construction

Project this is a system for division Construction. The main function from Construction namely creating, receiving and processing application data from ULP which is then received by UP3 and then status code can be processed by admin.

B. Execution Project

In stages Execution project explains the development process of initiation that has been carried out previously. The sprint was carried out three times which resulted in results three iteration. In each sprint there are four activity namely sprint planning, sprint, sprint review, and sprint retrospective.

1. First or 1st iteration

Stage The 1st iteration is a stage that focuses on developing the AMR Voltage Dashboard project.

a. Sprint Planning

At stage this done discussion for activities that will be developed in the 1st iteration. Stage This earn some activity points that is :

1) Creating an AMR Voltage Dashboard Website Prototype using figma tools

2) Create the main login page interface using Tailwind and Bootstrap tools.

3) Creating a Navbar for the AMR Voltage Dashboard Display

4) Create an AMR Voltage Dashboard interface display

b. Sprints

Based on the points that have been determined at the sprint planning stage, several documents formed for use in the development stage. Formed document among them namely script.js, tension.php, and login.php. The use of the Tailwind tool is used for the body part, meanwhile Bootstrap tools are used for the Navbar section.

c. Sprint Review

The interface that has been developed on the AMR Voltage Dashboard is the Main Page of the AMR Voltage Dashboard in Figure 3 and the Login Page in Figure 4.

The AMR Dashboard Main Page in Figure 3 has a score card feature, tables for existing data, maps to see locations, and charts to see data comparison. The features of the Login page in Figure 4 are: You can log in using the username and password you created.

Figure 3. AMR Voltage Dashboard Main Page

Figure 4. Login page

d. Sprint Retrospective

After all sprint activities and results have been declared complete. Then The team conducts discussions as a reflection from sprint activities that have been carried out in the first iteration. Activity reflection produce discussion as follows :

1) Stable team performance from all members between Backend and Frontend so that the results from the AMR Voltage Dashboard are as expected.

2) There are differences between the results of the prototype design and the final results of the website. Difference This located in the navbar which previously used the sidebar in the prototype. However, there is no change in the button function.

2. Iteration second or 2nd

In stages The 2nd iteration of development focuses on the Performance Dashboard project.

a. Sprint Planning

At the sprint planning stage, it is carried out discussion together team for activities that will be developed in the 2nd iteration. Stages This earn some activity points that is :

1) Create a Landing Page interface on the Performance Dashboard using Tailwind and Bootstrap.

2) Created a Customer and Power page interface on the Performance Dashboard using Tailwind and Bootstrap.

3) Creating a SuJuPro page interface on the Performance Dashboard using Tailwind and Bootstrap.

4) Create a saidi page interface saifi and ggn on Performance Dashboard using Tailwind and Bootstrap.

5) Creating an Hpl page interface on the Performance Dashboard using Tailwind and Bootstrap.

6) Create an interface for the landing page on SIBER using Bootstrap.

b. Sprints

Based on points from stages that have been created during sprint planning, several documents are formed. Document formed for use in the development stage. Formed document among them that is planning.php, customer_daya.php, SuJuPro.php, Sd_Sf_Rc_Gk_Gr.php, hpl.php, and index.php. The use of Tailwind tools on the Performance Dashboard is used for the body part Bootstrap tools are used for the Navbar section.

c. Sprint Review

interface display that has been developed on the Performance Dashboard is the interface display for the performance dashboard landing page in figure 5, the interface display for the customer and power pages in figure 6, the interface display for the SuJuPro page in figure 7, the interface display for the saidi page saifi and ggn in figure 8, the interface display for the HPL page in figure 9, and the interface display for the SIBER landing page in figure 10.

Feature of each page on the Performance Dashboard has the same features that is can view scorecards, view charts, and export and import. Feature main page on the landing page, namely can log in to the AMR performance dashboard and voltage dashboard.

Figure 5. Home Page Interface Display

Figure 6. Customer Page Interface Display and Power Performance Dashboard

Figure 7. SuJuPro Performance Dashboard Page Interface Display

Figure 8. Saidi Page Interface Display Saifi and ggn Performance Dashboard

Figure 9. HPL Performance Dashboard Page Interface Display

Figure 10. SIBER Landing Page Interface Display

d. Sprint Retrospective

After all sprint activities and results have been declared complete. Then the team conducts discussions as a reflection from sprint activities that have been carried out in the iteration second. Activity reflection produce discussion as follows :

1) Stable team performance from all members between Backend and Frontend so that the results from the Performance Dashboard are as expected.

2) There are no design changes like in the first iteration. The design created is in accordance with what was desired.

3. Third or 3rd iteration

In stages the 3rd iteration of development focuses on the project Construction.

a. Sprint Planning

At the sprint planning stage, it is carried out discussion together team for activities that will be developed in the 3rd iteration. Stages This earn some activity points that is :

1) Create a custom login interface for construction.

2) Create an interface for the landing page for the UP3, ULP, and admin sections on the Construction Website.

3) Create an interface for the application list page for the UP3 and ULP sections on the Construction Website.

4) Create an interface for the paid UP3 and ULP pages on the Construction Website.

5) Creating an interface for the UP3 and ULP sections in progress on the Construction Website.

6) Create an interface for the UP3 and ULP sections on the Construction Website.

7) Create an interface for the admin section user page on the Construction website.

8) Create an interface display for transaction type codes, status codes, progress status codes, codes rates, codes voltage, and unit code in the admin section on the Construction website.

b. Sprints

Based on points from stages that have been created during sprint planning, several documents are formed. Document formed for use in the development stage. Documents formed in the admin role, namely home_admin.php, adm.php, transaction_type.php, status.php, status_progress.php, tariff.php. voltage.php, and unit.php.

The documents formed in the UP3 role are home_up3.php, applicant_up3.php,bayar_up3.php, jasa_up3.php, and Flame_up3.php.

Documents formed in the ULP role, namely home_ulp.php, applicant_ulp.php, bayar_ulp.php, jasa_ulp.php, and Flame_ulp.php.

The use of the Tailwind tool on the Construction Website is used for the body part Bootstrap tools are used for the Navbar section.

c. Sprint Review

interface display that has been developed on the Performance Dashboard is the construction -specific login page interface display in figure 11, the landing page interface display on UP3, ULP and admin in figure 12, the interface display for the application list page for the UP3 and ULP sections in figure 13, the display The interface for the UP3 and ULP section has been paid for in Figure 14, the interface display for the UP3 and ULP section in process in Figure 15, the interface for the UP3 and ULP section in Figure 16, the interface for the admin section code in Figure 17.

Figure 11. Construction Specific Login interface display

Figure 12. UP3 Landing Page, ULP and admin page interface

Figure 13. Application page interface display on UP3 and ULP

Figure 14 Display of the payment page interface for UP3 and ULP

Figure 15. Process page interface display on UP3 and ULP

Figure 16. Display of the flame page interface on UP3 and ULP

Figure 17. Code page interface in admin

d. Sprint Retrospective

After all sprint activities and results have been declared complete. Then The team conducts discussions as a reflection from sprint activities that have been carried out in the third iteration of the activity reflection produce discussion as follows:

1) Stable team performance from all members between Backend and Frontend so that the results from the Performance Dashboard are as expected.

2) The design created is in accordance with what was desired.

C. Project Evaluation

Based on Execution results project that has been carried out, the final stage of the Scrum Method is Project Evaluation. In stages this is done by retesting or testing the website. Results of testing that has been carried out that is feature The features are as expected. Websites can goes well. Development produced the following results:

User friendly website interface

In Figure 18, the previous website display is not user friendly, because still simple and the data displayed is also still static.

Figure 18. Display of the AMR Voltage Dashboard Website before changes

Data updates are possible done in real time

By configuring using the mySQL database in figure 19 website can be runs and displays data in real time. You can also import data done so that generate dynamic data.

Discussion

When working on projects using the Scrum method, of course there are advantages and disadvantages when working on projects. The advantages and disadvantages of using the Scum method are:

1. Excess

a. Any problems that arise can be detected immediately so that problems that may arise resolved quickly.

b. Every member team got their respective assignments so influence enhancement productivity member.

2. Lack

The whole team the developer is a beginner in working on the project, so he cannot work on the project completed within the specified time. This problem can be overcome by holding activity discussion member developer so that member teams that have more experience can guide member another team.

CONCLUSION

Implementation of a framework using the Scrum method in the Frontend Development of the PLN UP3 Yogyakarta SIBER Project involving 3 process stages, namely initiation project, execution projects, and project evaluation supporting website development with a processing time of 6 months. The PLN UP3 SIBER interface can be displayed carried out within 6 months to create 3 dashboards, namely the AMR Voltage Dashboard, Performance Dashboard, and Construction Dashboard.

REFERENCES

Andry, J. F., Riwanto, R. E., Wijaya, R. L., Prawoto, A. A., & Prayogo, T. (2019). Development Point of Sales Using SCRUM Framework. Journal of Systems Integration (1804-2724), 10(1).

Ariyanto, A., Cinta, N. P., & Utami, D. N. (2020). Aktivitas fisik terhadap kualitas hidup pada lansia. Jurnal Kesehatan Al-Irsyad, 13(2), 145ï¿½151. https://doi.org/10.36760/jka.v13i2.112

Ashari, I. F., Aryani, A. J., & Ardhi, A. M. (2022). Design and build inventory management information system using the scrum method. JSiI (Jurnal Sistem Informasi), 9(1), 27ï¿½35.

Azanha, A., Argoud, A. R. T. T., Camargo Junior, J. B. de, & Antoniolli, P. D. (2017). Agile project management with Scrum: A case study of a Brazilian pharmaceutical company IT project. International Journal of Managing Projects in Business, 10(1), 121ï¿½142.

Barbosa, A. M. C., & Saisse, M. C. P. (2019). Hybrid project management for sociotechnical digital transformation context. Brazilian Journal of Operations & Production Management, 16(2), 316ï¿½332.

Baxter, D., & Turner, N. (2023). Why Scrum works in new product development: the role of social capital in managing complexity. Production Planning & Control, 34(13), 1248ï¿½1260.

Billings, C. E. (2018). Aviation automation: The search for a human-centered approach. CRC Press.

Correia, A., Gonï¿½alves, A., & Misra, S. (2019). Integrating the scrum framework and lean six sigma. International Conference on Computational Science and Its Applications, 136ï¿½149.

Cortada, J. W. (2020). Living with Computers: The Digital World of Today and Tomorrow. Springer.

Doughty, K., & Murray, L. (2016). Discourses of mobility: Institutions, everyday lives and embodiment. Mobilities, 11(2), 303ï¿½322.

Falck, A.-C., ï¿½rtengren, R., Rosenqvist, M., & Sï¿½derberg, R. (2017). Proactive assessment of basic complexity in manual assembly: development of a tool to predict and control operator-induced quality errors. International Journal of Production Research, 55(15), 4248ï¿½4260.

Ivanov, D., Tang, C. S., Dolgui, A., Battini, D., & Das, A. (2021). Researchersï¿½ perspectives on Industry 4.0: multi-disciplinary analysis and opportunities for operations management. International Journal of Production Research, 59(7), 2055ï¿½2078. https://doi.org/10.1080/00207543.2020.1798035

Miller, D., Abed Rabho, L., Awondo, P., de Vries, M., Duque, M., Garvey, P., Haapio-Kirk, L., Hawkins, C., Otaegui, A., & Walton, S. (2021). The global smartphone: Beyond a youth technology. UCL Press.

Nagaria, B., & Hall, T. (2020). How software developers mitigate their errors when developing code. IEEE Transactions on Software Engineering, 48(6), 1853ï¿½1867.

Nagy, A., & Sharshakova, D. (2020). The selection of IT project management methodologies.

Rahmawati, M., Ruslan, A., & Bandarsyah, D. (2021). The Era of Society 5.0 as the unification of humans and technology: A literature review on materialism and existentialism. Jurnal Sosiologi Dialektika, 16(2), 151.

Reid, A. J., Reid, A. J., & Vigil. (2018). Smartphone Paradox. Springer.

Williams, C. J., Headd, J. J., Moriarty, N. W., Prisant, M. G., Videau, L. L., Deis, L. N., Verma, V., Keedy, D. A., Hintze, B. J., & Chq

Copyright holder:

Annisa Dinda Septina, Erika Ramadhani (2024)

First publication right:

Journal of Social Science

This article is licensed under: