Recently, our team received a request to create a prototype system for issuing tickets. It has been done in 40 hours, including discussion of Functional specifications and even some reworks, which was incredibly fast. We created this mini-system and thought that such a simple application can be very useful for a wide audience. Аs a result, we brought some magic to IONDV. Framework added a social purpose to the app and most importantly, we tested IONDV. Studio and invite you to do the same.
Meet IONDV. Tickets, a register-type open-source application for issuing social nutrition tickets for recipients receiving aid. The application is based on IONDV. Framework technology and created in the IDE – IONDV. Studio. As always, demo and video are available, and the app is published on GitHub under the `Apache 2.0` open license. In this article, we want to share with you the process of creating an application, shall we say, from an idea to a prototype.
And the idea is very simple; keep in mind that although we’ve already been full of inspiration, we only slightly outplayed the details. The purpose of the system is to keep records of issuing and cashing tickets (or cards) for social nutrition for preferential categories of recipients receiving aid to optimize the process of social services or non-profit social organizations. So, the users of the system should have the possibilities to:
- Create the recipient card with such data as name, date of birth, sex, etc.
- Create the ticket card with such data as date of issue, issued by, expiration date, status, etc.
- Stage the ticket’s statuses according to established workflow.
- Log in as the user with the correct role and right—operator, cashier, admin, moderator.
Also, additional functionality: check-boxes with categories, scans of documents, printed form of tickets, integration with some portal.
Let’s Model the Situation
An individual comes to social security for social nutrition tickets. An employee of the social services (and for us, the Operator of the system) creates the user card, determines the category, and creates 4 tickets for him for a month and gives all 4 tickets at once. The individual must use tickets within a month in the store/canteen/issuing point tick as preferred.
The amount specified in the ticket depends on the number of assigned categories. When he cashes his tickets, the employee (with the role of “Cashier”) finds the number of his ticket in the list and, if it’s valid (not highlighted in red and the completion date is greater than the current one), closes the ticket and the ticket is no longer valid.
Our Fantasies (Or Additional Functionality)
We would like to make it possible to apply for tickets online by configuring integration with some portal. We imagine it like this: an individual fills in the application form on the e-government portal and sends an application. The form will be displayed in the “online applications” item or in the dashboard widget “New online applications”. The employee of social services will see a new application from the portal. The operator processes the application to either reject with a reason or accept it to issue the tickets.
An additional advantage would be the printed form of tickets in Docx format. When editing the recipient’s card the operator can send tickets to print and give them to the recipient, or send a Docx or Pdf version to the recipient’s email.
The Basics: Technical Details
The application is based on IONDV. Framework technology. This is an open-source framework on node.js to create high-level web applications based on metadata, which does not require serious programming skills. The framework is based on an independent data model, core APIs, functional modules, and view templates. We use the DBMS MongoDb to store application settings, metadata, and the data itself. The framework runs in the Node.js environment. Altogether it provides a cross-platform framework.
The combination of IONDV. Studio + IONDV. Framework + IONDV. Apps (application builder from the repository) is a rapid prototyping system Framework + IONDV. Apps. You can develop a web-app to test business logic and data structures, security and a ready REST API — and edit the front with your favorite AgularJS or React.js. Also, there is a SOAP to work out the integration.
We wrote down our actions of creating an application IONDV. Tickets in the IONDV. Studio step by step. Look for full instructions in the Studio repository, where you can repeat the process in detail.
- Create classes
- Create navigation
- Create views
- Create work-flow
So, first of all, just simple action—creating the application starts with a button “+ Create your first app”. In the pop-up window fill in 2 lines about the future application—name and description. And let’s move on to creating classes. The base classes of the application are “Tickets”, “Person”, “Recipient”, “Documents”. Create classes and their attributes. After that, move to fine-tuning of specific properties.
For the “Recipient” class, configure the inheritance. It will inherit the attribute composition of the “Person” class, i.e. the “Recipient” class has all the attributes of the “Person” class + its own. Also, for the “Recipient” class, configure a connection of the “Collection” type for the “Tickets” attribute. Specify the “Tickets” class as a reference one. The collection is made for the collection of “Tickets” objects could be displayed in the form of the class object. Repeat the configuration of connections for other classes and in the end, we should get a diagram of the application of the following type:
Next, configure the important details according to the instruction:
- Formula to calculate the number of recipients receiving aid
- Formula to calculate the maximum ticket value
- Formula to calculate the ticket expiration date
- Restriction on creating objects in the collection
Create a navigation section and a navigation item. Section—groups the menu items on any basis. To create a navigation section, go to the “Navigation” section and click the “+ Section” button. We have grouped all menu items into one section on the basis of the application theme—”Nutrition Tickets”.
After creating the navigation section, the button to create a navigation item becomes available. In this case, each created navigation item is a page of the class; name them as classes respectively.
The view form allows you to specify an arbitrary attributive composition for different views of class attributes in the system. There are three view forms: create form, list form, edit form. Select the “Classes” section, and then the “View” action on the work panel. In the list, select the type of view form and drag and drop the attribute blocks.
On the view form, you can set additional properties—a mask for the phone number attribute and styles for displaying objects in the list. For example, highlight the expired coupons in red.
For the “Tickets” class, a workflow consists of 3 statuses: “Issued by”, “Acknowledged”, “Expired”. Go to the “Workflows” section and select the “+ Workflows” action and select the “+ State” action to create the state of the workflow.
About IONDV. Studio
IONDV. Studio is an IONDV. Framework specialized IDE that helps accelerate the development of applications on the framework. It is used to develop or edit metadata (for example class, navigation, view, workflow, portal interfaces) that can be deployed as an IONDV application. Framework is not necessary. It also may be used as a standalone node.js application or Desktop application. The advantage of using a standalone application is that the database and in IONDV. Framework is not necessary.
See here for info on how to start an application.
How To Get the Application and What To Do With It
Under Linux, you can install the application in one line (if git, node.js, and MongoDB are installed locally) using the iondv-app installer. The script will install the environment, clone all the necessary framework repositories, modules, and apps from GitHub. Then it will collect, initiates, and launches the application:
Where instead of localhost:27017 you need to specify the MongoDB address.
You can also run the following Docker container:
At startup, open the http://localhost:8888. For the back office with admin rights: login—demo, password—ion-demo. Other users with limited operator rights: login—operator, password—ion–demo. Test the [demo-app]. Login—demo, password—ion–demo.
If you want to repeat our experience, we have written a detailed instruction How to create a Tickets app in IONDV. Studio. It’s full of screenshots so you can see that develop in the Studio = create. It would be cool if this app inspired you to create your own accounting system. Our goal is to show how easy and quick the idea is transformed into a real prototype.
If you find errors, write in the comments or in the Issues application repository on GitHub. Share your ideas, where else would you apply such a system? What would you change?