Introduction: ECMA6 OOP With Classes, Basic Spreadsheet Generator
So my intention was to automate spreadsheet generation that can produce many calculations without a huge effort.
At the end of the instructable the app will be provided as zip.
Teachers! Did you use this instructable in your classroom?
Add a Teacher Note to share how you incorporated it into your lesson.
Step 1: What You Need for This Tutorial
- A text or better a coding editor with syntax highlighting (e.g. sublime, emacs, visual studio code)
- A browser with ECMA 6 support (Firefox, Chrome), maybe Edge (haven't tested yet)
- A basic understanding how a progamming language work
Step 2: CSV Filestructure
CSV stands for Comma Seperated Values and at first you should now how this fileformat is structured.
If you open up this kind file with a normal text editor it looks like above.
A simple human readable text that each cell is separated by comma or semicolon, the carriage return (or simply enter) leads to the next row of the table.
Step 3: CSV Opened With a Spreadsheet Program (Excel, Open Office Calc)
If you open a csv with a spreadsheet program it should be look like above.
Step 4: The Diagram of the App
So we begin with the diagram that is showed on the top and start with the html file that contains a form with radio, checkbox and generate buttons
Step 5: HTML - Form
The form is for the human interaction process, containing the visual elements, (radio) buttons, checkbox. It will be accessed by the controller module.
Step 6: Require.js
At the bottom of the html form, the script tag links to the requirejs library that it is used for loading seperated class files. You could also download the require.js library and link it directly so that it runs offline. Afaik there is still no native module loading support in ECMA 6, but in the next releases it will be hopefully integrated.
Step 7: Import the Modules
As you can see in the diagram, there is an entity (define imports) for the modules loads.
Inside the script tag, the data-main is assigned by imports/class.js, which leads to the imports of the class files.
So the controller has now access to all of the defined classes and can instatiate them.
Step 8: Controller/UX Implementation
Now we take a look at the controller:
After input evaluations (radio button, checkboxes already checked, rastersize), the eventListener reacts by clicking the generate button:
- it checks if the swap checkbox is checked
- it reads the keyinput (mxn)
- instatiation of the calc and filewriter module
- the check which radio button is chosen
- then assigning all of the evaluated inputs to the model instance
- the res(ult) of the model will be written in a blob to provide the csv file
Step 9: The Spreadsheet Generator
The next is the calculator module that generates a variable sized spreadsheet (dependent on user input) as csv file.
The constructor inits the default values of the inputs. When calc() is called it generates a Matrix in a nested for loop, checks at the same time if the operands are swapped (commutativity) and if the mode of the operation it's an addition, subtraction or something other.
Step 10: CSV/Txt Filegenerator
The Filewriter constructor contains a filename string variable e.g. "calcTable.csv" and the downloadlink is generated via DOM.
setContent() stores the generated String from the calculation module into the Blob(), that can takes up a set of Strings as text or csv. The method createFile() generates a downloadlink of the blob, that represents as csv or text file.
Step 11: Run the App!
So if you open up autoCalcGUI.html with your browser you generate simply a calculation spreadsheet, by choosing operation, entering the rastersize (e.g. 123x456) and clicking the generate button, then suddendly a download link for the csv-table appears below.
Thanks to Chrome's V8 engine it can also calculate and generate huge spreadsheets 1000x1000 = 1000000 in a couple of seconds.
Update: try, catch when input is not valid
Have fun and the app is provided as zip.