WebApps with LocalStorage and AppCache/Create an AppLSAC/JSON2Schema

For this learning resource a GitLab respository was developed to create a basic JSON editor as WebApp (AppLSAC) in 5min from a provided JSON. You will learn how a JSON Schema can be used to define the graphical user interface (GUI) of an editor. This learning resource is based on the Open Community Approach and therefore all software resources are based on Open Source and Open Content (Creative Commons Licenses) so that learner can build on the learning resources.

Introduction

We start in this learning resource with a JSON of your choice. Take a simple without too much complexity to understand the basic principle. If you do have a JSON, then just take the default JSON of JSON2Schema]. The JSON file is used to generate a JSON Schema and an basic Handlebars4Code output template to generate a desired output of your choice in your browser.

• (JSON to Template) Use the input JSON in JSON2Schema to create a basic template to generate an output with a specific code syntax.
• (JSON to Schema) Use the given JSON in JSON2Schema, modify the given JSON and create the appropriate JSON Schema.
• (Schema to JSON Editor) Create a JSON Editor with the generated JSON Schema.
• (Download JSON Editor) The generated JSON Editor is a WebApp with a Hamburger Menu.

Learning Task

JSON2Schema is an OpenSource tool for this learning resource, to learn about the process to create a complete JSON editor as WebApp from a given JSON. During the generation a JSON Schema and Handlebars4Code template for creating an output in specific syntax (e.g. text, LaTeX, Chart, HTML, ...).

• (Run JSON2Schema with defaults) With the first start of JSON2Schema your will just click through the majors steps of the JSON2Schema workflow and see how the template, the JSON Schema and the final JSON Editor will look like. You can even download the generated JSON editor as ZIP in 5 minutes.
  • press the blue Create-Buttons (to create the raw template)
  • scroll down step by step down to see what is created by JSON2Schema. Finally download the generated ZIP-file jsoneditor_app.zip and unzip the generated editor. Load the file jsoneditor_app/index4menu.html in the unzipped folder.
• (Run JSON2Schema with your own JSON as input) Now reload JSON2Schema and run the whole process with your own JSON and modifiy either the default input JSON in JSON2Schema or use your own JSON for generating a tailored JSON editor for your need.
  • (Template for Handelbars4Code) Modify the raw draft template and. check the output of the template engine with the given JSON.
  • (Modify JSON Schema) try to add appropriate descriptions in the default JSON Schema and create the JSON editor again. See how the alteration of the JSON Schema will affect the graphical user interface (GUI) of the JSON Editor.
  • (Submit Data) The generate JSON editor is able to collect data just in the browser as runtime environment and does not need a server backend to handle the data. For privacy reasons you are able to define where you want to submit the data to. E.g. with a FORM tag in HTML and a textarea that contains a "stringifed" JSON (i.e. a String change according to your chances of the source JSON.

CSV2Chart Create Charts from CSV file as AppLSAC

• (Complete Workflow for CSV2Chart) Finally we recommend to follow the complete learning resource for a Wikiversity Tool for converting a CSV file into a mathematical to visualize data in a chart. For this task we define a JSON file for storing the data and a Handlebars4Code template that creates the final syntax for a chart. The final JSON editor handles a JSON for data rows, the titles and the colors for the curves. The WebApp is an AppLSAC that we will be called "CSV2Chart", because it takes data as CSV file as input and converts the CSV file into a chart for Wikiversity (and Wikipedia). See COVID-19 Mathematical Modelling for a basic example how the diagrams and charts are used within Wikiversity learning resource.

See also

• CSV2Chart