Online Chemistry Lab Notebook

Han Lee
3 min readApr 8, 2017

--

Chemists keep their lab records on their notebooks. As everything moves to the internet, why can‘t chemists keep their lab note online? The advantages of keeping lab records on the internet are 1) you can share your experiment records with your lab-mates and your advisor/manager more quickly and easily, 2) you can search and find your old records more easily, and 3) you can use a template of reactions or properties of chemicals you previously saved to quickly call and use them to record your lab experiments.

I built a single page web app called chem-lab-note which has a JSON api with Ruby on Rails back-end framework and AngularJS for the front-end. The app provides a website that let you record your lab experiment online. It also lets you save chemicals and their properties on the web, so chemicals can be called when planning and recording a reaction. The reaction web page has four chemical components, two reactants, one solvent, and one product, which are built with an Angular directive. The app calculates the amount of reactant you need to add and the yield of the reaction, once you fill in necessary data. And, reactions and chemicals can be created, read, updated, and deleted (CRUD). The app’s client side persists data by talking to the Rails back-end framework using AngularJS services including the $http service.

Let’s check the app in more detail. First, you can post chemicals and add their properties that will be used in the reaction you want to create.

Chemical create page

Then in the new reaction page, you can type a name of a chemical in the search box in each chemical panel and click the search button, which will find the chemical and automatically fill the properties of the chemical including the formula weight of the chemical. The properties will be used to calculate quantities of the chemical in the reaction. When you give enough information including isolated weight of the product, it will calculate and show the yield of the reaction.

Reaction create page

In the reaction list page, the page shows the list of reactions. There are two search boxes, which allow you to search and find your old records. The first one is for searching by title and the other one is for searching by date, where you can select a range of dates. Unlike a physical notebook, now you can search reactions quickly either by a title or a range of dates.

The biggest challenges for building this app with AngularJS and Rails were building custom nested attributes for the reaction model in Rails, and checking which AngularJS scope you are in. One tip that really helped me to figure out which scope you are in was to use web inspector to select an element of interest and get its scope by typing angular.element($0).scope(); in the console.

If you want to test or improve the app, go to this GitHub repository, https://github.com/tpstar/chem-lab-note, and clone or fork to download the code. To test this app on your browser, clone, bundle install to install Ruby gems, rake bower:install to install JavaScript related packages, rake db: migrate, and rake db:seed to seed data. Please feel free to contribute to building the more complete app.

--

--