Single Page Application Research Articles

Principles of securing RESTful API web services developed with python frameworks

This article discusses the key points of developing a secure RESTful web service API for keeping a student achievement journal. The relevance of using web services has been analyzed. The classification of web applications is given. The features of the Single Page Application architecture were considered. Comparative characteristics of architectural styles of application programming interfaces are given. Requirements to be met by RESTful API services are considered. The basic principles of API security were analyzed. A list of the main vulnerabilities that may appear during the development of the REST API is given. An overview of popular authentication schemes (methods) is given. Comparative characteristics of web frameworks of the Python programming language are given. The main tools used in the development of web API applications are listed. The process of creating a secure prototype of a RESTful web service API in Python using the Flask microframework and a tool for describing the Swagger specifications is presented. The process of configuring the application was examined in detail. The main recommendations for securing a web application, database and web server settings are listed. The key points of ensuring the protection of the developed web application are considered. The results obtained were analyzed.

Automatic recognition and representation of text in the form of audio stream

The problem of automatic speech generation from a text file is considered. An analytical review of the software has been completed. They are designed to recognize texts and convert them to an audio stream. The advantages and disadvantages of software products are estimated. Based on this, a conclusion was drawn about the relevance of developing a software for automatic generation of an audio stream from a text in Russian. Models based on artificial neural networks, which are used for speech synthesis, are analyzed. After that, a mathematical model of the created software is built. It consists of three components: a convolutional encoder, a convolutional decoder, and a transformer. The architecture of the software is designed. It includes a graphical interface, an application server, and a speech synthesis system. A number of algorithms have been developed: preprocessing text before loading it into a software, converting audio files of a training sample and training a network, generating speech based on arbitrary text files. A software has been created, which is a single-page application and has a web interface for interacting with the user. To assess the quality of the software, a metric was used that represents the average score of different opinions. As a result of the aggregation of different opinions, the metric received a sufficiently high value, on the basis of which it can be assumed that all the tasks have been solved.

Design of Management Information Systems Memorandum of Understanding (MoU) And Memorandum of Agreement (MoA) Universitas Darussalam Gontor

The Memorandum of Understanding (MoU) at Universitas Darussalam Gontor (UNIDA) is an important activity that can be proven by the number of MoUs that have been carried out. However, because the management of the MoU is still manual, there is a risk of damage, loss, and duplication of the MoU data. In this research, an information system for the Bureau of Cooperation, Alumni, and International Affairs UNIDA has been built to meet the bureau's needs in managing data correctly so that students and lecturers can utilize the data. The system is made in the form of a website using the concept of Model-View-Controller (MVC) and Single Page Application (SPA) by applying the SDLC (System Development Life Cycle) methodology. The study results show the satisfaction value of the respondent's assessment is at 4.11 on a scale of five, which means that this information system provides satisfaction to users. In the subsequent project research, this system can develop an authentication site for user security.

Perancangan dan Pembangunan Aplikasi Electronic Menu Restoran

Electronic Menu or abbreviated as eMenu is an application that designed to improve the performance of service processes in a business sector, especially restaurants. eMenu aims to change thefood ordering service process that was originally traditional using paper, into web-based digital media. Not only handling food ordering services, eMenu also handles almost all business processes in a restaurant such as menu management, managing information on orders received by waiters and chef, payment transactions, to sales reports. To handle payment transaction, eMenu using third party application payment gateway, called Duitku. eMenu is built using Single-Page Application concept that use AJAX calls which allows time efficiency in displaying the required data. By using the Single-Page Application, the browser does not reload the entire requested page but only part of data is displayed dynamically. The Single-Page Application uses Vue.js as Front-end stack, and Laravel to manage Back-end. eMenu application is responsive design, so that user can access via smartphone or desktop computer with properly.

Single Page E-learning Application with Ameliorate SEO and Navigation

Today, e-learning is mostly used and is acquiring prominence. E-learning delivers a learning environment. Platform by using electronic media and data Communications Innovations. As alternative terms such as computer-based learning, online schooling or technology-enhanced learning, we will use E-learning as other alternative terms. The goal of creating an E-Learning Frontend Web Application is to provide anyone with an integrated online self-learning site. We make a comparison between JSON and XML, then use JSON as data-transferring format in an actual project. This paper suggest that JSON is more suitable as a data-loading tool for Ajax applications. The idea behind using AngularJS in web application is to make your web application modular and easy to maintain. AngularJS brings MVC (Model View Controller) capability to your application. After using modified and compressed files in your application, the size reduces to some KBs which will results in faster loading of page. Single-Page Applications are Web apps that load a single HTML page and dynamically update that page as the user interacts with the app. Building Single Page E-learning Application instead of Multi page E-learning application With Improve Navigation. Solving the migration problem from traditional websites to single-page applications using new technology.

Facilitating Study and Item Level Browsing for Clinical and Epidemiological COVID-19 Studies.

COVID-19 poses a major challenge to individuals and societies around the world. Yet, it is difficult to obtain a good overview of studies across different medical fields of research such as clinical trials, epidemiology, and public health. Here, we describe a consensus metadata model to facilitate structured searches of COVID-19 studies and resources along with its implementation in three linked complementary web-based platforms. A relational database serves as central study metadata hub that secures compatibilities with common trials registries (e.g. ICTRP and standards like HL7 FHIR, CDISC ODM, and DataCite). The Central Search Hub was developed as a single-page application, the other two components with additional frontends are based on the SEEK platform and MICA, respectively. These platforms have different features concerning cohort browsing, item browsing, and access to documents and other study resources to meet divergent user needs. By this we want to promote transparent and harmonized COVID-19 research.

Cross-Platform Drilling 3D Visualization System Based on WebGL

This study develops a novel drilling 3D visualization solution based on WebGL, termed as WebDrillingViz, and introduces the system architecture design and software programming implementation. The software is part of the Engineering Technology Internet of Things (IoT) System, interfacing with other software, and also capable of direct hardware interfacing for data retrieval and system control. It is fully web-based, used real time, and used in RTOC (Real-Time Operating Center) of IoT system, which is a software system for drilling process remote monitor and decision. WebDrillingViz uses the most frontier HTML5 technology to realize a brand-new drilling 3D visualization system. The front end is designed in single-page application (SPA) mode and adopts technologies such as angular, bootstrap, and WebGL. The front-end uses single page application (SPA) mode, Angular, Bootstrap, WebGL and other technologies are used. The back-end data services provide data interface support for front-end visualization applications based on HTTP protocol which uses NodeJS, a lightweight development platform suitable for cloud platform, and Restify to realize a REST JSON API. Both sides are using the same object-oriented oriented development language—TypeScript. The front-end develops an easy-to-extend 3D visualization class library based on WebGL for drilling. It is encapsulated as Angular modularization to form an Angular component, which can be used standalone or integrated into other Angular applications. At the same time, the back-end microservice architecture combined with container and cloud technology is easy to maintain, deploy, and expand and has the advantages of being lightweight, cross-platform, flexible, and efficient. Using HTML5 standard and Bootstrap's responsive layout achieves cross-platform, which can support different operating systems and screen sizes. The system has better robustness and maintainability, thanks to the object-oriented and strong typing characteristics of TypeScript. Practical application shows that WebDrillingViz is efficient, capable of visualization of large drilling 3D scene, and compatible with mainstream devices, such as Windows, Linux, macOS, iOS, and Android. The use of open standards-based modern web technologies and data format enables a more lightweight and economical solution. WebGL, Angular, NodeJS, and TypeScript formed a powerful technology stack, which can be used as an excellent reference for other browser-based visualization development.

Web-Based Human-Machine Interfaces of Industrial Controllers in Single-Page Applications

Advances in conventional industrial controllers have led to new technologies such as multilanguage use, cross-platform applications, and remote monitoring and control. However, the human-machine interfaces (HMIs) of conventional industrial controllers and mobile devices cannot directly transmit instant messages to each other. This study describes a simple method of upgrading the HMIs of conventional industrial controllers into controllers capable of Web-based remote access. The study began with the development of a model-view-controller architecture consisting of Hypertext Markup Language, Cascading Style Sheets, and JavaScript and proceeded to the implementation of a single-page application (SPA) method through AJAX and WebSocket, which communicates with the back-end Node.js server to transfer data. Future advancements will enable information to flow through cross-platform devices across various operating systems and Web browsers, allowing users to remotely monitor and control machines from mobile smart devices. We demonstrated the simplicity of the SPA method by transforming a conventional personal computer-based industrial controller, WINPC32, to an all-purpose Web-based HMI for industrial use with the graphic user interface software, GPX.

The Research on Single Page Application Front-end development Based on Vue

‘Vuejs’ is a popular front-end framework, which uses MVVM (Model View View-Model) design pattern to support data-driven and component-based development. This paper discusses the basic working principle and development mode of Vue, and on this basis, uses SPA (Single Page Application) to design and implement a mobile mall front-end page based on Vue. This research fully demonstrates the advantages of front-end and back-end separation technology in Web development, and provides a powerful front-end support for full stack development.

Consumer product preference prediction towards online shopping

Nowadays E-commerce plays a major role in a business organization. People prefer online shopping rather than offline shopping which helps them to purchase their product from anywhere around the world through mobile phones and laptop. Online shopping websites help people by saving time and product order can be done easily by clicking the product. Online shopping websites are built using the Single Page Application (SPA) framework and the objective of this research is to find the customer preference product prediction by tracking the frequent clicks of the product by the customer. By tracking the clicks of customer we can find their product choice and helps retailer to add the products according to user preference.

Unified and Flexible Online Experimental Framework for Control Engineering Education

This article introduces a unified and flexible experimental framework for massive online experimentation of control education. The new architecture adopts a front-end and back-end separation scheme based on React at frontend and Nginx at backend, and a single page application has been achieved to improve user experience. Multiple features and supporting technologies which provide a flexible, interactive, and real-time platform with enhanced sense of presence and user experience are discussed. The design and implementation of the proposed system are depicted in detail. With the implementation of online algorithm design, the unified framework enables all the functionalities such as web-based algorithm design, parameter tuning, visual configuration of customized user interface, and real-time control with remote and virtual laboratories, which cover the entire process in control education experimentation. A case study with students from two universities shows that the implemented online laboratory framework can support massive students with minimum maintenance required.

Building a model of network interaction between the components of a multiagent system of mobile robots

The results reported here represent the first stage in the development of a full-featured laboratory system aimed at studying machine learning algorithms. The relevance of the current work is predetermined by the lack of network small-size mobile robots and appropriate control software that would make it possible to conduct field experiments in real time. This paper reports the selection of network data transmission technology for managing mobile robots in real time. Based on the chosen data transmission protocol, a complete stack of technologies of the network model of a multi-agent system of mobile robots has been proposed. This has made it possible to build a network model of the system that visualizes and investigates machine learning algorithms. In accordance with the requirements set by the OSI network model for constructing such systems, the model includes the following levels: 1) the lower level of data collection and controlling elements – mobile robots; 2) the top level of the model includes a user interface server and a business logic support server. Based on the built diagram of the protocol stack and the network model, the software and hardware implementation of the obtained results has been carried out. This paper employed the JavaScript library React with a SPA technology (Single Page Application), a Virtual DOM technology (Document Object Model), stored in the device's RAM and synchronized with the actual DOM. That has made it possible to simplify the process of control over the clients and reduce network traffic. The model provides the opportunity to: 1) manage the prototypes of robot clients in real time; 2) reduce the use of network traffic, compared to other data transmission technologies; 3) reduce the load on the CPU processors of robots and servers; 4) virtually simulate an experiment; 5) investigate the implementation of machine learning algorithms

Xcellerate Investigator Portal: A New Web-Based Tool for Online Delivery of Central Laboratory Data, Reports, and Communications to Clinical Sites.

Covance Drug Development produces more than 55 million test results via its central laboratory services, requiring the delivery of more than 10 million reports annually to investigators at 35,000 sites in 89 countries. Historically, most of these data were delivered via fax or electronic data transfers in delimited text or SAS transport file format. Here, we present a new web portal that allows secure online delivery of laboratory results, reports, manuals, and training materials, and enables collaboration with investigational sites through alerts, announcements, and communications. By leveraging a three-tier architecture composed of preexisting data warehouses augmented with an application-specific relational database to store configuration data and materialized views for performance optimizations, a RESTful web application programming interface (API), and a browser-based single-page application for user access, the system offers greatly improved capabilities and user experience without requiring any changes to the underlying acquisition systems and data stores. Following a 3-month controlled rollout with 6,500 users at early-adopter sites, the Xcellerate Investigator Portal was deployed to all 240,000 of Covance’s Central Laboratory Services’ existing users, gaining widespread acceptance and pointing to significant benefits in productivity, convenience, and user experience.

Single Page Reactive Application using Angular Spring MVC and Rest API

Single Page Application (SPA) in web technology has the potential to compete with the seamless performance of app. Single Page Applications are highly reactive as they load the JavaScript bundles just once and then according to the required DOM changes the elements are downloaded. So, it is very fast and consumes less resources. In this paper Angular and Spring MVC are discussed to provide a methodology for creating SPA.

What Makes Angular Interseting

Angular JS is Single Page Application which is also a JavaScript library. It is a Open Source application which is used by the thousands of developers in the world. Angular is more responsive to action taken by the users. It is also licensed in Apache license version 2.0. The new mobile and web-based application frameworks has been released and it is used by the both the software development industry and research While some of these new frameworks are more popular than others, some are specialised in certain types of applications, and others have specific advanced features or outstanding capabilities that set them above others.The increase in the usage of mobile application has increased the demand of mobile application and has also increase the need for cross-platfrom framework. In this paper, we discuss the different criteria which identifies the strengths and weaknesses of using Angular frame work in developing mobile and web-applications. Finally, we focus more deeply on the version of the Angular framework showing the eminent capabilities and over its own earlier versions. Overall, our comparative analysis results in a few interesting findings regarding different version of Angular framework, leaving us to believe that a new generation might soon emerge from the exponential path of MVC, MV*/MVW and MVVM.

Performance analysis of selected tools for building a Single Page Application

The article presents analysis of the performance of selected tools to build a Single Page Application. Chrome browser with DevTools tool was used to evaluate the performance of the test application. The total number of all tests was 112. As part of the study, a test application was created using different JavaScript frameworks - the Angular framework and the Vue.js framework.

Genie Enterprise Resource Planning for Small Medium Enterprises Implementing Single Page Web Application

The exponential growth of Small Medium Enterprises (SMEs) in Indonesia has led to the greater competition among them. However, their business processes are often inefficiently managed, which increase the cost of operation. The current Enterprise Resource Planning system could address the problem, but the price is relatively expensive for current condition of SME in Indonesia. The problem continues when the business operation run in different places, where data inconsistencies reduce operation efficiency. Cloud-based ERP is a possible solution, but it is relatively slow to fully maximize the benefit. Therefore, new affordable solution with remote access, which use less internet bandwidth is needed to answer problems in implementing ERP. This study aims to analyze the problem and use the findings to provide a prototype that could address the existing problem. Through implementation of various technologies such as Single Page Application, Gzip Compression, and Webpack Module Bundler, the author successfully developed the prototype of ERP system. Several tests, including compatibility test and user acceptance test were performed to evaluate the prototype. Although this prototype has not been able cover the whole modules, the test results showed a satisfactory result in terms of accessibility and basic functionality.

Improvement of academic services using mobile technology based on single page application

This research discussed the use of SPA-based mobile applications for academic activities at universities. This technology works using asynchronous JavaScript, which can be run by mobile devices and is not limited by the operating system used by mobile phones such as Android, iOS, and others. This way could be reduced the workload of the server because the data sent by a server is not significant compared with a web-based application.

WebAssembly as an alternative solution for JavaScript in developing modern web applications

The article describes the impact of using WebAssembly on the performance of web applications. A Blazor framework based on WebAssembly was used. The paper shows that it is possible to create fully functioning Single Page Application using C# programming language. The second application was made using Angular framework. Both applications implement the same functionalities. For prepared applications loading time and size of transferred data was measured. The impact of using browser cache memory and gzip compression was examined. The performance of handling http requests using GET and POST methods were measured. The performance of WebAssembly against JavaScript code in task of sorting a list of N objects was compared. The performance of modifying html DOM was examined. Selected code metrics of written applications were compared. JavaScript presents better performance with tasks related with browser API. WebAssembly was better for computing.

Design of EPICS and Web-Based Remote Control Software of Near-Infrared Sky Brightness Monitor in Antarctica

The Near-infrared Sky Brightness Monitor (NIRBM) aims to measure the middle infrared sky background in Antarctica. The NIRBM mainly consists of an InGaAs detector, a chopper, a reflector, a cooler and a black body. The reflector can rotate to scan the sky with a field of view ranging from 0{\deg} to 180{\deg}. Electromechanical control and weak signal readout functions are accomplished by the same circuit, whose core chip is a STM32F407VG microcontroller. Considering the environment is harsh for humans in Antarctica, a multi-level remote control software system is designed and implemented. A set of EPICS IOCs are developed to control each hardware module independently via serial port communication with the STM32 microcontroller. The tornado web framework and PyEpics are introduced as a combination where PyEpics is used to monitor or change the EPICS Process Variables, functioning as a client for the EPICS framework. Tornado is responsible for the specific operation process of inter-device collaboration, and expose a set of interfaces to users to make calls. Considering the high delay and low bandwidth of the network environment, the tornado back-end is designed as a master-and-agent architecture to improve domestic user experience. The master node is deployed in Antarctic while multiple agent nodes can be deployed domestic. The master and agent nodes communicate with each other through the WebSocket protocol to exchange latest information so that bandwidth is saved. The GUI is implemented in the form of single-page application based on the Vue framework which communicates with tornado through WebSocket and AJAX requests. The web page integrates device control, data curve drawing, alarm display, auto observation and other functions together.