Combining the power of Google Blockly with AngularJS

I am looking for a way to empower advanced users to create and save custom math formulas that will be used in a shopping cart check-out process. These users are not programmers, but can follow instructions easily. The formulas should be editable by the users themselves, not by system administrators or developers.

A visual language UI seems like the ideal solution for this requirement, providing an environment familiar to power users that ultimately generates JavaScript code for the check-out routine to execute (evaluating myFormula).

For instance, consider the following myFormula example:

In this scenario, the user specifies the fee using... input type="number" ng-model="fee", while gross is entered at check-out (after testing the formula).

...and then, the formula is entered into a text box as follows (assuming fee was saved at 0.05):

var youPay = IF gross > 1000 THEN fee * gross ELSE 50

The resulting youPay amount is displayed during check-out. In this case, if the gross amount is under $1000, the customer pays a fixed fee of $50; otherwise, they pay five percent of the gross amount.

Do you have any feedback on the Google Blockly project or other potential solutions? Perhaps an Excel to JavaScript code converter where the Excel formula can be tested before being implemented in my application.

Furthermore, there needs to be a security layer added to ensure that the formulas do not pose any security threats or introduce bugs that could crash the check-out system.

Answer №1

It seems like implementing the Blockly framework could be a great solution for your needs. You can create a formula similar to the one you provided using the Blockly code demo found at this link. This demo could serve as a useful starting point for initiating your project. If left unmodified, the result would resemble something like this: https://i.sstatic.net/AXOJy.png (I am unable to embed images due to my limited reputation).

To further customize the experience, you will need to inform Blockly about your predefined variables so that users can select them from dropdown menus. Additionally, consider incorporating a save button to allow users to generate and store their code. It's possible that some adjustments may be necessary in how Blockly generates JavaScript, as it is designed to produce self-contained scripts rather than snippets of larger scripts. However, modifying the code generators in Blockly is relatively straightforward.

I hope this information proves helpful.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to store a personalized configuration for a user within a Node module?

For my CLI project in Node.js utilizing commander.js, I am interested in implementing a way to store user-specific configuration settings. This will allow users to input their preferences only once during the initial usage. What would be the best approac ...

Before being sent, CDATA is eliminated

Currently, I am integrating a SOAP call within an Angular application. One requirement I have is to include CDATA for a specific section of the payload for certain calls. angular.forEach(contactsCollection, function (item, index) { contacts = contact ...

How can I simulate the response of a VueX action using Vue-test-utils?

I am currently developing a test for a Vue component that interacts with a module store to execute an action and utilize the result from it. Since the action involves making requests to our API, I prefer not to run the test using the actual action. Instea ...

Enhancing Javascript functionality with additional on.change customization opportunities

My website currently has a dynamic AJAX script that updates a table based on the selection from a dropdown menu with the ID of [id="afl_player_ID"]. However, I am looking to extend this functionality so that the same script runs when either [id="afl_playe ...

Obtaining localStream for muting microphone during SIP.js call reception

My approach to muting the microphone involves using a mediastream obtained through the sessionDescriptionHandler's userMedia event. session.sessionDescriptionHandler.on('userMedia', onUserMediaObtained.bind(this)) function onUserMediaObta ...

What could be causing the server to return an empty response to an ajax HTTP POST request?

Attempting to make a POST request using ajax in the following manner: $.ajax({ type: "POST", url: 'http://192.168.1.140/', data: "{}", dataType: "json", ...

Encountered an unexpected comma token while attempting to map an array in ReactJS

Can't figure out why I'm getting an error when trying to map an array in React with the following code: const { loading, error, posts } = this.props; return( {posts.map(onePost => ({ <p key={onePost.id}>{onePost.title}&l ...

Angular JS requires a predefined list of values to be passed as a URL parameter

What I am attempting to accomplish: The parameter value should be one of a, b, c, d, e. If the parameter value is not in the provided list, the user should be redirected. This current implementation is causing an "Infinite $digest Loop" error. How can I ...

"How can we trigger a re-render of a React component once a promise is fulfilled? Is there a way to prevent rendering until the

Having attempted to make updates to a functional component that interfaces with an azure-devops-ui/Filter, I've encountered a situation where I am utilizing the azure-devops-extension-sdk to handle async responses. This component is intended to be use ...

When using Node.js and geth together, running JavaScript code may lead to the creation of zombie processes, causing the

Currently, I am utilizing a JavaScript code that connects to the web3 package on Ethereum's JSON RPC API. This code is designed to iterate through each transaction in an incoming block. If the transaction involves an internal wallet, it sends the rele ...

Pass information to a PHP file using JavaScript when the form is submitted

Essentially, I am looking to extract values from various inputs and spans using JavaScript when the submit input is clicked. These values will then be sent to PHP using $post in order to ultimately send them via email. Previously, I tested replacing all of ...

Improve loading speed of thumbnail and full images in HTML

I'm struggling with slow loading images on my blog website. Can anyone help me figure out how to improve loading speed and: Is it possible to use a separate thumbnail image that is smaller in size instead of the full image for both thumbnails and th ...

When using node.js express, the req.body object does not yield any results

My web server setup with express appears to be functioning correctly, however, I am encountering an issue where the req.body returns nothing. Despite not receiving any errors, the console.log(req.body) doesn't show anything in the console output. Stra ...

Personalize the error message for throwing an exception in JavaScript

I've been working on customizing error messages for exceptions thrown in JavaScript. Despite my best efforts, I have not been successful so far. I'm currently attempting the following code snippet but it's not functioning as expected: f ...

Senecajs responded with a result that was neither an object nor an array, displaying a Promise

Seeking guidance on incorporating promises into my Seneca modules. Firstly, there is the server.js file that exposes a route: var express = require('express'); var app = express(); var Promise = require('bluebird'); var seneca = requ ...

Command is not displaying JavaScript

Having difficulty grasping the task at hand. As a Mac user, my goal is to construct a 3D portfolio but I'm facing challenges. The issue lies in JavaScript not appearing on Variants. Upon entering "npm init vite.js/app," a framework is generated, follo ...

Is there a way to export a specific portion of a destructuring assignment?

const { a, ...rest } = { a: 1, b: 2, c: 3 }; If I want to export only the rest object in TypeScript, how can I achieve that? ...

Selecting dates based on week number

Is there a method in asp.net or via javascript to capture the dates (Monday to Friday) when a user clicks on the week number displayed on the calendar and display them on a label? ...

Exploring the functionality of angularjs filters with pre-set checkbox options

I'm trying to create a checkbox list to filter another list, but I'm running into some issues. Here is how I have set up my checkboxes: <input type="checkbox" ng-model="characteristics.nontraditional" ng-true-value="non-tradtional" ng-false-v ...

Webster Barron code script

I'm attempting to replicate the concept of this video https://www.superhi.com/video/barron-webster using text, but I am encountering difficulties in achieving the desired effect. The design text is currently overlapping my name and displaying in rev ...