Design and Implementation of a User-Centered Web-App using Open Source Platform: Indonesia Disaster Data (InDITA)

— The availability of updated and easy access geospatial data and information is the main thing in disaster mitigation and sustainable spatial planning. This needs to be supported by the rapid development of technology in spreading data and spatial information via the internet. The Spatial Data Infrastructure (SDI) is realized as an implementation of spatial data distribution. SDI is an integrated mechanism to make it easier for spatial data users to access, search, share, and use spatial data and information. To design and develop a disaster geospatial online application web-app with an integrated function (repository-web GIS) following the directions and input from user feedback becomes the fold of the research. The user interface is essential in bridging communication between users and web mapping systems. User-Centered Design (UCD) is implemented by gathering input and feedback from users. UCD describes the process of ensuring interface success throughout the design and development of the interface. GeoNode has been chosen as the platform due to its flexibility. Based on respondents' assessment of the quality of content/information that essential to be developed in a disaster website, it is recognized that providing reliable and up-to-date data and information (69%) and the accuracy of data and information (74%) are the most important things to develop in the InDITA application. The most essential respondents are the spatial data display feature/map viewer (89%). The design of InDITA was built interactive and user-friendly, which accommodates simple viewer, data repository, and web GIS functions.


I. INTRODUCTION
In the 4.0 era, geospatial technology becomes the leading factor, and spatial data becomes the development axis. The concept of sustainable development will depend heavily on the availability of spatial data that is accurate, relevant, and easily accessible [1]. This needs to be supported by the rapid development of technology in spreading data and spatial information via the internet. The Spatial Data Infrastructure (SDI) is realized as an implementation of spatial data distribution. SDI is an integrated mechanism to make it easier for spatial data users to access, search, share, and use spatial data and information [2]]. SDI is held at various regional scales for various purposes, such as decisionmaking, policymaking, and sustainable development based on regional resources. In the embodiment of SDI, it is necessary to define data availability (the need for spatial metadata) and technical standards to support interoperability. In general, SDI utilizes standards from the Open Geospatial Consortium (OGC) such as Web Feature Services (WFS) or Web Map Services (WMS) to facilitate data access via the web [3]. The existence of SDI cannot be separated from the critical role of a geoportal that operates well by utilizing the internet as a medium to publish, access, and use data. The geoportal is an online gateway that deals with searching and using spatial data via the internet. Geoportal functions to manage content and services such as directories, search tools, community information, support resources, data, and applications. There are at least 4 types of services provided in IDS, namely catalog services (search and publication), mapping services (feature and image exchange), visualization services, and data processing services.
The availability of updated and easy access to geospatial data and information is the main thing in disaster mitigation and sustainable spatial planning. In the realm of disaster and climate change, national development planning to spatial planning must include disaster aspects, adaptation to climate change, and balance of natural resources. Currently, disaster mitigation and management cannot be realized without the instruments of spatial technology that play an important role in collecting and processing a large amount of data required. Remote sensing, Geographical Information System (GIS), Global Positioning System (GPS) have proven to be effective tools in disaster management. Disaster prevention and frameworks for their monitoring, assessment, and mitigation, identification of areas lacking, and recommendations of appropriate strategies continue to evolve for disaster management using GIS [4]. In the disaster prevention phase, GIS is used to manage large volumes of data required for hazard and risk assessments. GIS becomes a useful tool for many aspects of spatial planning, particularly from early warning systems to the relief and rehabilitation phase [5]- [7]. However, difficulties with free-access data, the large size of the data, and the lack of spatial information distribution related to disasters in the community often appear as obstacles. This research aims to develop a web-based GIS service application. It is designed for disaster data to function as a data repository, viewer, and simple processing (web GIS).
For the commoner, working with modern-desktop single user Geographical Information Systems would be wearisome and enigmatic. Therefore, we need an approach with a more user-friendly method to spatial analysis that offers single tasks for the user, and it may be an "app-based" web application [8]. As the internet becomes the main media in delivering any information, the design of effective website becomes increasingly essential [9]. The importance of putting the user needs in building a web-app to be used by anyone universally is more realistic and practical. Normally, the application is designed to satisfy a concrete and determined audience, so it is less applied to the rest of the people.
The user interface design is an approach to focus on usercentered design as one of the major research areas in computer science and human-computer interaction. The user interface is essential in bridging communication between users and web mapping systems [8], [10]- [14]. By gathering input and feedback from targeted users, UCD describes the process of ensuring interface success throughout the design and development of the interface [11]. The UCD approach can improve user interfaces design and provide user-friendly and effective tools for information access and manipulation [15], [16]. Since then, the application called InDITA (Indonesia Disaster Data) could play a role as a medium for disseminating geospatial information, particularly related to the hazards or disasters. For instance, the community can be used as a means of education for mitigation or by various parties (government, private sector, and stakeholders) as a supporting tool in decision-making, policymaking, and spatial planning based on disaster mitigation. Successful disaster risk reduction requires an interdisciplinary and collaborative approach so that the process of sharing data and disseminating information can be communicated quickly and more effectively [17]- [19].
Designing and developing a disaster geospatial online application web-app functioned as a bundle of repository and webGIS, following the directions and input from users but still utilizing open-source facilities for development flexibility and research innovation, has become the purpose of this research. Not only there, but the application compiled must also be accessible and utilized by users from various circles in supporting disaster mitigation-based spatial planning. For compliance with open-source resources, one of the platforms that can be used is GeoNode, an online platform that can be accessed openly to share geospatial data that has been developed in recent years. GeoNode is a platform used to manage and publish geospatial data [3]. GeoNode is a web application located at the center of the framework and acts as a regulator of client interaction with the system's components [20]. GeoNode is built on Django (a Python-based web framework) and uses a relational database (generally PostgreSQL or SQLite). GeoNode can use various Relational Database Management System (other than PostgreSQL and SQLite) with support from Django (a Python-based web framework). The use of GeoNode as a web browser platform for spatial data has been widely used, especially for spatial data analysis [21], [22]. GeoNode's excellence supports this as a web-application that specializes in spatial data.

A. Data Collection
To start developing a user-centered web app, firstly, we throw a questionnaire to 326 respondents who are educated on using mobile technology and understand the disaster. The convenience sampling method is used to collect data. Convenience sampling (also known as Haphazard Sampling or Accidental Sampling) is a kind of non-probability or nonrandom sampling in which members of the target population, mentions, are selected for the purpose of the study if they meet certain practical criteria, such as geographical proximity, availability at a certain time, easy accessibility, or the willingness to volunteer [23], [24]. The respondents come from the majority groups who are considerably active in using technology because nowadays in that young and productive age range (21-40 years old), the average respondent has been exposed to a smartphone with internet access. The location of 326 respondents who answer the questionnaire is limited to West Java (30.37%), Central Java and East Java (41.72%), and West Nusa Tenggara (27.91%). Several persons are picked up to have a depthinterview to validate the answer to the questionnaire. The questionnaire arranged based on the research question used in generating the questionnaire are (1) Hazard Information System is known by the citizen as an Early Warning System; (2) How is the social behavior of citizen accessing disaster data/information; (3) Review on a prior prototype of InDITA; (4) Features needed in a spatial information system for hazard and disaster. In the questionnaire, users were asked to respond the initial prototype of InDITA which developed as geoportal (with a simple viewer) only using GeoNode with modest customization as seen in Fig.1. The architecture of GeoNode (divide into a user interface, application server, and database) and its capability to accommodate various types of files has underlined its utilization. Menegon et al. [25] revealed the flexibility of using GeoNode as a platform to develop geoportal that could be connected to various geospatial data servers, both open-source or licensed.

B. Data and Devices
Specifically, in developing InDITA based on user requirements as a web-app functioned as a repository and web GIS, we employ a series of open-source software and data as written in Table 1.  TABLE 1.

WebGIS
InDITA built using the GeoNode open-source bundle platform to enable a wider range of activities (participatory mapping, public repositories, communication forums, and connectivity with other web GIS) in its utilization [3], [26]. GeoNode is built in Django (a Python-based web framework) and uses a relational database (generally PostgreSQL or SQLite). GeoNode can use various forms of Relational Database Management System (besides PostgreSQL and SQLite) with support from Django (a Python-based web framework) [3]. Development of InDITA has 2 folds, as a portal as well as a web GIS. Thus, it needs a server for each function. To deploy GeoNode on a server, minimum requirement that must be fulfilled are 8GB of RAM, 2.2GHz processor with 4 cores (unless for multiple rendering, additional processing power may be required), 30 GB software disk usage, additional disk space for any data hosted with GeoNode, data stored on the DataBase, and tiles cached with GeoWeb Cache. DataBase, spatial data, cached tiles, and "scratch space" useful for administration, a decent baseline size for GeoNode deployments is between 50GB and 100GB; and 64-bit hardware strongly recommended [27].

C. Web-app Design and Development
The user-centered web design process proposed in this work is divided into several stages, some of which are iterative. User feedback, both the results of questionnaires and in-depth interviews, is used to improve the initial design of the InDITA prototype in terms of usability and utility. The flow chart in Figure 2 estimates the flow of InDITA development.
Run to the role of Web GIS, InDITA provides tools to perform online thematic spatial analysis via web GIS. Web GIS preparation for spatial analysis purposes in InDITA is designed for several disaster themes, including Web GIS to determine the Coastal Vulnerability Index (CVI) and Web GIS for simulating Sea Level Rise (SLR). In general, the web GIS function in INDITA follows the workflow as shown in Figure 3. The Web GIS is connected to the repository. As the data source for Web GIS in the form of Shapefile and Geotiff (from the repository) is stored in the PostgreSQL database with the PostGIS extension. PostGIS carry out all data processing according to parameters and output regarding CVI or SLR. The results of these calculations are then converted into Geojson to be presented in the Web GIS application through Leaflet and PHP.

A. User-Centered Approach for Web-app Development
InDITA was built not for a particular user group but the broadest possible community. This is because InDITA was built with the aim of being a web-app that can disseminate disaster information. To describe the user, based on the age composition, most respondents were from the 21-40 years age range (67.75% of respondents). Respondents from 41 to 60 were 19.8%, and those aged less than 20 years were 12.38%. The respondents are coming from civilians, academics, and government officials. Concerning disasters, it is known that 56.88% of respondents have accessed Disaster Information Systems. This shows that the community, especially in Indonesia, is starting to apprehend disaster information's importance.
User needs for InDITA Development are obtained from the assessment of the quality of content/information that is important to be developed in the InDITA application and the requirement for developing the system in InDITA application. Based on respondents' assessment of the quality of content/information that important to be developed in a disaster website, it is recognized that providing reliable and up-to-date data and information (69%) and the accuracy of data and information (74%) are the most important things to develop in the InDITA application ( Figure 4). Furthermore, from Figure 5, 92% of respondents agreed that concerning developing InDITA web app as an application that is easy to use & learn (user friendly) and accessible from various platforms (web or mobile) is urgently needed. Fig. 4 The quality of content/information that important to be developed in the InDITA disaster application according to respondents' perspective Regarding the option of the most important features to be performed in a disaster application as seen in Figure 6, 3 features get the highest score according to respondents are the spatial data display feature/map viewer (89%); data sharing feature (65%), and data searching features (66%).
Based on the resume of user input as shown in Figure 4-6 and depth-interview results, the development of InDITA directed to be a web-app that can function as a portal and spatial data display which will be more informative if it has a spatial analysis function like Web GIS.

B. InDITA Application Design Development 1) Architecture design:
The InDITA concept and interface were improved based on provided input and feedback on needs and designs (by user), urging revisions to the interface's conceptual and functional requirements (utility), and finally leading to new prototypes. As a web-based GIS service prototype, InDITA is built to meet the need for geoportal and disaster information. This is closely related to the problem of providing geospatial information as the main thing in the spatial planning and disaster mitigation process. Thus, it needs special attention, especially in terms of easy access and spatial data center in either 2D or 3D format.
InDITA application design development is directed to be an application that has a function as a portal, viewer, webGIS operation by utilizing the open-source platform GeoNode 2.10. Also, InDITA owns an additional function so the user could report disaster events. The functions provision in InDITA is based on the user's demand for a disaster webapp as if (1) the importance of spatial data viewer feature; (2) accessibility; (3) interoperability; (4) updated data.
GeoNode allows users to upload vector data (.shp, json, .csv, .kml or .kmz) and raster data in their original projections using a web form. While vector data is formatted into geospatial tables on a database, the raster data are retained as GeoTIFFs. For metadata, ISO 19139:2007/ISO19115 is given as standard metadata formats. Moreover, users also may upload a metadata XML document to fill key GeoNode metadata elements automatically. Customization using Mapstore2 REACT in GeoNode platform improving the functionalities of InDITA as a web GIS since it's support ArcGIS layers and revamped Time Slider for temporal series.
The InDITA architecture design as a data portal equipped with Web GIS features is pictured in Figure 7. When the data input manually into repository InDITA, the super administration will verify which data dan temporary metadata (red cylinder) will enter the permanent database. Moreover, data from any connected databases (local/regional/national/government official network node) could be stored in the portal (purple cylinder in Figure 7) through metadata harvesting.
As a portal, InDITA runs services. The portal system on InDITA will perform information seeking on the server metadata, users can make use of the information stored in the metadata. The query will automatically filter information related to the disaster. The metadata server will perform access to the connected metadata database. The metadata scheme used to store 12 types of information, namely metadata information, identification information, boundary information, genealogical information, content information, distribution information, reference system information, spatial representation information, portrayal catalog information, application metadata information, application schema information, metadata extension information, and metadata service information. After information about the data being sought is found, then data retrieval will perform and bring the user's result (information). Metadata is the backbone of a portal. As a WebGIS , INDITA set features for data viewer and spatial analysis. As a viewer, information is displayed according to the type. The spatial data format (vector or raster) showed in the form of interactive maps. Images and text format displayed on the browser. The link information will be referenced to the corresponding URL and download menu also available in InDITA.
For instance, InDITA performs a function as a web GIS for Coastal Vulnerability Index (CVI). The Entity Relationship Diagram for the CVI Web GIS depicted in Figure 8, where there are 9 static tables consists of (1) point1996 (comprise of data point of coastline from the year 1996), (2) point2018 (comprise of data point of coastline from the year 2018); (3) Slope; (4) Building; (5) Coastal; (6) Waters; (7) Utility; (8) Vegetation; and (9) Grids. In CVI web GIS, grids stand as the calculation unit area along the coast. Each table consists of grid ID and the geometry from each feature. The grid ID refers to those in the "Grid_mtrm" table. The input table for CVI web GIS is a dynamic table, which allowed the user to input data for "Significant Wave Height (SWH)," "Sea Level Rise (SLR)," and "Mean Tidal Range (MTR)" values. Those inputs are set as dynamic since the value may vary from different coastal. The "Distance," "Zonal," "Combine", and "CVI" tables contain the analysis result from the static tables. "Distance" Table is the result of the calculation analysis of the shoreline changes from the "point1996" and "point2018" tables using ST_Intersections and ST_Distance_Sphere functions from PostGIS. The value filled in the "Zonal" table is calculated from zonal statistics of data in the "slopeDEM" table. Meanwhile, data in the "Combine" table result from scoring applied on of geomorphological condition of a coastal area. The results bring up to the "CVI" table. In this case, we use the CVI6 formula to assess Coastal Vulnerability Index by giving rates to the six physical variables: Shorelines changes, Mean Tidal Range, Coastal Slope, Geomorphology, Significant Wave Height, and Sea Level Rise [28] 2) Application design and interface: As a web application built with the purpose of hazard or disaster information systems, several features are made to enhance the functions, such as Portal, CVI Web GIS, SLR Web GIS, Volcano Web GIS, Flood Web GIS, and Data Report (Figure 9). The user interfaces for the menu on the InDITA home page is structured to make it easier for users to choose which operation functions to perform. It is subject to search for data in a warehouse, view data, or perform simple spatial analysis on available web GIS themes. However, the user interface for the last two web GIS is still in a development state Users freely access all the web GIS in InDITA, but login are needed for activities in the repository (data management) and data reporting. The user interfaces for Sea Level Rise web GIS displayed in Figure 10. The Sea Level Rise simulation shows the coastal area inundated with a scenario of increasing seawater level in meters. The user interfaces for Coastal Vulnerability Index web GIS shown in Figure 11. The user proposes to operate the physical calculation of the CVI. Inserted parameters in the database and applied in the formulation are changes in shoreline, slope, geomorphology, tidal range, sea-level rise, and mean significant wave height. The CVI parameters that have been uploaded into the INDITA application are coastline, slope, and geomorphology. While for other parameters, users can input manually.

IV. CONCLUSIONS
In this study, a questionnaire was created and used to understand users' needs, preferences, and expectations of a web app, particularly in hazard and disaster. InDITA is a web-app created according to the needs assessment results using a user-centered approach. The design of InDITA was built interactive and user-friendly with function as a data repository -the viewer -web-based GIS. This is to increase the utilization of geospatial data by various levels of society. A geospatial data management system makes it easy for users to access, process, and download data, or even upload field data stating existing conditions.