Prices-IDE

UML-VM Profile

A UML profile is firtsly defined based on DOP, called the UML-DOP profile. It realizes a one-to-one mapping between DOP elements to the UML model. The advantage is that a deterministic transformation from UML model elements to DOP languages (and vice versa) can be achieved (Muhammad & Setyautami, 2016; Setyautami et al., 2019). The UML-DOP is extended to the UML-VM profile for modeling VM, which supports MPL and interoperability in the product line. The UML-VM profile is defined by modeling VM elements from the metamodel using UML notation.

The UML profile can be represented as UML profile diagram. The profile diagram for UML-VM profile is shown in Figure 1. The profile diagram shows all stereotypes and their extending metaclasses. For example, VM, core module, delta, are represented as a UML package with different stereotypes <<vm>>,<<module>>, and <<delta>>. Specific attributes in the stereotypes can be defined in tagged values, see three tagged values in stereotypes <<feature>>.

Figure 1. UML-VM Profile Diagram

UML to WinVMJ Tool

PRICES uses UML diagram with UML-VM Profile, called UML-VM diagram, to model the problem domain. UML to WinVMJ tool is a plugin to generate VMJ (Java) source code with WinVMJ framework based on UML-DOP diagram. The result is a skeleton of Java code that follows VMJ architectural pattern and WinVMJ framework.

WinVMJ is a web framework based on DOP VMJ and VMJ architectural pattern. As defined in VMJ, WinVMJ uses JAVA module systems and design patterns. Support libraries are also developed using JAVA modules to produce a running web-backend application. The UML to WinVMJ tool is developed using Eclipse Acceleo Model to Text Transformator and deployed as Eclipse plugin

Installation

1. Download Eclipse Modeling Tools 2012

2. Download UML Editor (Papyrus version 2020-12)

3. Download & Install UML to WinVMJ Tool via Update Site https://amanah.cs.ui.ac.id/priceside/uml-to-winvmj/updatesite/

How to Use

1. The UML-VM diagram is modeled with the UML-VM profile using Papyrus. Download the UML-VM profile and import to Eclipse project: https://gitlab.com/RSE-Lab-Fasilkom-UI/prices-2/model-transformation/uml-dop-profile

2. Draw the UML diagram and use the UML-VM profile. You can also download the examples of the UML-VM diagram from the AMANAH case study

3. Right click on the .uml file and choose Generate WinVMJ.

FeatureIDE WinVMJ Composer

FeatureIDE is an integrated framework to support feature-oriented development of software product lines. FeatureIDE is designed based on Eclipse IDE as an eclipse plugin. Prices-IDE utilizes feature modeling and configuration tools in FeatureIDE by extending the domain implementation support. FeatureIDE has several composers that manage the product generation process, such as AHEAD, Munge, AspectJ, FeatureHouse, and FeatureC++. When we create a new FeatureIDE project, we can choose the composer based on the domain implementation preference. The WinVMJ composer supports web-based product line development based on DOP. WinVMJ is integrated into FeatureIDE as a composer to generate a back end of web-based SPL.

Installation

Download Eclipse and required plugins to run use the plugin:

1. Eclipse Modeling Tools (2020-12): https://www.eclipse.org/downloads/packages/release/2020-12/r/eclipse-modeling-tools

2. Plugin FeatureIDE 3.9: http://featureide.cs.ovgu.de/update/v3/

3. Plugin WinVMJ composer: https://amanah.cs.ui.ac.id/priceside/winvmj-composer/updatesite

4. Java 11

5. PostgreSQL 11

Plugin installation:

1. On top toolbar, click Help → Install New Software

2. Work with: add https://amanah.cs.ui.ac.id/priceside/winvmj-composer/updatesite, click Add and save with name WinVMJ Composer

3. Open the drop-down menu, Select WinVMJ Composer update site

4. Select WinVMJ Composer and WinVMJ Composer Dependencies, Click Next, approve all licenses, then click Finish

IFML UI Generator

Interaction Flow Modeling Language (IFML) diagram is used to model abstract user interface (UI) of a web-based SPL. IFML to UI generator is a plugin to generate JavaScript application based on IFML diagram. The design of IFML diagrams also refers to the problem domain in the UML class diagram. The generated JavaScript application is also connected to the web backend (VMJ) application.

The IFML to UI generator is implemented using the Eclipse Acceleo model to text transformation. Acceleo modules (.mtl files) consist of transformation rules and templates. The IFML UI generator is completed with ReactJS template with various styles. Users can change the styles after the source code is generated.

Installation

Download Eclipse and required plugins to run use the plugin:

1. Eclipse Modeling Tools (2020-12): https://www.eclipse.org/downloads/packages/release/2020-12/r/eclipse-modeling-tools

2. Plugin IFML UI Generator: https://amanah.cs.ui.ac.id/priceside/ifml-ui-generator/updatesite

3. Plugin IFML Editor https://ifml.github.io/update/site.xml

4. Acceleo 3.7 (for developer): https://download.eclipse.org/acceleo/updates/releases/3.7/R202102190929

5. React JS: Node v 16.14

Plugin installation:

1. On top toolbar, click Help → Install New Software

2. Work with: add https://amanah.cs.ui.ac.id/priceside/ifml-ui-generator/updatesite, click Add and save with name IFML UI Generator

3. Open the drop-down menu, Select IFML UI Generator update site

4. Select IFML UI Generator, Click Next, approve all licenses, then click Finish

Overview

A product line of banking software Bank Account is used as a common case study for SPLE. We use this case study to show the development process with Prices-IDE, starts from feature modeling, UML modeling, IFML modeling, model transformation, and product derivation.

Feature Modeling

Figure 1. shows the feature diagram Bank Account that models commonality and variability. The root feature BankAccount is a concrete feature that can be chosen by users. This feature provides basic functionalities, such as deposit and withdraw. In a standard Bank Account, the balance must be equal or greater than zero. Feature Overdraft allows customers to withdraw money more than their current balance with an overdraft limit. Feature Interest is used if the bank want to give interests for customers. A calculation of expected interest for the current year is provided by feature InterestEstimation . Feature CreditWorthiness provides a mechanism to assess whether customers may get credits of a certain amount. If the bank want to set a limit for daily withdrawal, feature DailyLimit can be chosen. Based on the constraints, all features are optional and can be combined each other.

Figure 1. Feature Diagram - Bank Account

We use FeatureIDE plugin to design the feature diagram. First, we have to create FeatureIDE project and choose WinVMJ as a composer.

AMANAH

AMANAH is an Adaptive Information System for Charity Organization. See amanah.cs.ui.ac.id, to know more about AMANAH.

Example of Generated Products of AMANAH

• High Tide

• Procom

• Aku Bantu

• Bersama