WebApps with LocalStorage and AppCache/Processing
As a first example we process a ZIP file in the browser. With a combination of loadfile4dom.js
- (Load Files) We load files with loadfile4dom.js into the browser environment, that are selected by a user to be added to a ZIP file. The selected files are not submitted to server for processing, they remain in the browser environment.
- (Processing)
- (Save ZIP) finally we save the generated ZIP file with FileSaver.js if the user presses a button a Download event is generate, but the file is NOT fetched from a remote server - the uses downloads a generated file handled by
JSZip
in the browser environment
Basic Constituents
editLoad Files into the Browser
edit- LoadFile4DOM to load files into the browser for browser internal processing of user data.
Save Files processed in the Browser
edit- FileSaver to save files generated/processed in the browser for browser internal processing of user data.
GUI Layout
editA Graphical User Interface Interface (GUI) is used to offer processing features of the AppLSAC. User can press button, move slides, enter text, draw on a canvas, .... The interaction of the user at the interface create input parameters for the internal processing within the browser without submission of the data to a remote server.
- Boilerplate templates or frameworks that define the layout of a Graphical User Interface
- Hamburger Menu for WebApp
- Icons for Menus for your WebApp based on SVG files JQuery-Mobile SVG icons and SVG files in Wiki Commons.
Data Management JSON
edit- JSON Data Editor
- JSON Editor by Jeremy Dorn
- Application of JSON Schema and definition of the structure of data (see JSON2Schema)
- Search and compare existing frameworks to handle save and load JSON files in a browser.
- Output File Generator, that creates the desired product for the user in the browser, e.g.:
- Image Maps for Wikiversity
- 3D Models that can be used for visualization in a learning resource
- NPM module cross-fetch to load data from a remote server into a WebApp of type AppLSAC-0.
Learning Tasks
edit- (JSON Editor) Explore the application type "JSON Editor" and explain how a JSON editor can be used in an AppLSAC to editor data.
- (Template Engine) Explore the concept of template engine driven file generation from a JSON file by analysis of Handlebars4Code and explain how the library Handlebars4Code can be used in AppLSACs to generate a text file in within the browser without internet connectivity just with the browser as runtime enviroment of the AppLSAC Javascript code.
See also
editUsed Libraries
edit- loadfile4dom.js for loading files into the browser.
- jszip.js for handling ZIP files in a browser.
- FileSaver.js for saving/exporting generated files from the browser by emulation of a standard download event for a file that is generated within the browser environment.