Screenshot of the app's search screen on Android
Screenshot of the app's results screen on Android
Screenshot of the app's record screen on Android
Screenshots of the Invenio Mobile app on Android.

In the summer of 2014, I took part in the CERN openlab Summer Student programme, for which I worked on a mobile app for the Invenio document repository, the open-source system behind the CERN Document Server. I gave a lightning talk about it, which won third prize on the programme!

Invenio is a Web service written in Python and Flask, which allows users to publish, browse and download papers or other documents. A prototype had been created for a mobile app which would allow users to browse Invenio repositories. My objectives were to improve its speed, functionality and usability, either by building on the prototype or starting over. I chose to start over, due to the large differences in architecture and chosen frameworks.

Screenshot of the app's search screen on iOS
Screenshot of the app's results screen on iOS
Screenshot of the app's record screen on iOS
Screenshots of the Invenio Mobile app on iOS. These screens are defined by the exact same HTML as those in the Android screenshots above.

The app was built using Apache Cordova, a hybrid app framework which allows HTML5 apps to be wrapped and deployed to Android, iOS and many other platforms. This is very useful for building simple cross-platform apps, but raises interesting security issues, as Cordova apps are vulnerable to Cross-Site Scripting. The Invenio app was to display content differently depending on which server it was connected to, meaning that I had to create a simple way to customise the display of records without using HTML (which could contain malicious scripts from a compromised server).

Within the Cordova framework, I used jQuery, JinjaJS for templates, and TaffyDB (a JavaScript database library for semi-structured data). I found the Ratchet CSS framework particularly useful for making the app look native on both Android and iOS.