S.N.O.T. (Simple Note Organization Tool) is an online idea organization and bookmarking app built on the Google Apps Script platform.
Live site (requires Google account): SNOT (Simple Note Organization Tool) App
SNOT comes with a del.icio.us'esque bookmarking bookmarklet that will auto-fill the URL and title of the current site. Steps for using:
- Create a new bookmark in your browser.
- Edit the bookmark and copy+paste the code in bookmarklet.js into the URL field.
- When you're on a site, click the bookmark to bring up the SNOT app.
This project started with the desire to organize my myriad ideas, notes and bookmarks in one single user-friendly place.
I had some additional technical goals:
- Practice building a Javascript-based web application
- Test out the Google Apps Script platform
(Contact me to hear about the challenges and platform quirks I ran into!)
- Application server: Google Apps Script
- Database server: Google Fusion Tables
- Front-end languages used: Javascript, HTML, CSS
- Back-end languages used: Javascript
- Frameworks/libraries used: jQuery, Datatables, Bootstrap
The application is divided into two categories based on the Google Apps Script platform - javascript (.gs) server files and HTML (HTML, CSS, Javascript) browser files. Apps Script only allows .gs and .html file types, so all front-end CSS and Javascript have to be saved as .html files. By convention, I appended _CSS or _JS to the names of browser files that are not actually HTML code.
Also note that in the actual Apps Script environment (https://script.google.com), folders are not (currently) supported, so every file is actually stored at the same level. I just separated it in this repo for better accessibility.
When the application URL is accessed, code execution starts in the server file appMain.gs, with the function doGet. This is the special function Google Apps Script calls to initiate the app UI. In SNOT, doGet processes the URL, loads some session data, and then renders the mainView HTML template. This in turn loads the rest of the code and executes the front-end app.
The SNOT datamodel contains a list/set of notes that are mapped to Tags in a many-to-many relationship, i.e. a note can have many tags and a tag can be associated with many notes. This provides a simple and flexible system for many use cases.
A filterable list of all notes.
Edit view of a single note.
A filterable list of all tags.
Edit view of a single tag.
Since this project is mostly for personal use and learning, it is mostly a proof-of-concept and is currently not scalable to a larger user-base. It also needs some refactoring to make it more flexible and resilient.
Issues
- Improve database layer (scalability, resiliency)
- Apply front-end application framework