For our sixth Le lab session, we wanted to build a mobile application for Scientists as an excuse to play with React Native. Meet Pauling, a mobile application that eases conference posters sharing.

TailorDev Le lab #6 Pauling

As mentioned in our previous Le lab session report, we decided to organize the next sessions far from the rest of the world, i.e. to do company retreats and to be 100% focus together. And we did it… partly (more on this later). Our home for this Le lab session was a family house in Corrèze, and the picture below was the view we had for the week. We must say that it was very, very relaxing: a wonderful place to work and share moments together. We had Internet access via 4G/LTE and this was more than enough to work comfortably.

Le lab TailorDev Corrèze

If you are not familiar with our Le lab concepts, we invite you to read the blog post of our first Le lab session. In short, a Le lab session is a week devoted to set up a MVP with new tools and technologies we want to learn.

Introducing Pauling

A common problem with poster sessions in conferences is that there are a lot of posters! It is sometimes hard to process, hard to remember the name of the laboratory or authors for a particular poster, and there is not enough time to get all the info from interesting posters. Conference proceedings are a good way to recall authors names but, again, you don’t get all the data as posters are usually not printed in the proceedings. Some authors print small sheets of their posters, and that is a really good idea for those like me who have a eidetic memory. Yet, those sheets often get lost…

We believe that the Pauling mobile application improves the situation by proposing high-quality posters downloaded and stored on smartphones, after having scanned QR codes on the posters.

Poster authors can share their posters by uploading them on a web application and get QR codes in exchange. In real life, Pauling, your poster and you may look like this in a conference:

Pauling QRCode Poster Thanks @bebatut for being one of our first beta tester!

Conference attendees can install the Pauling mobile application and scan these QR codes. The digital version of the poster will be downloaded, stored and displayed in the application, allowing its user to look at the poster at the boring keynote :wink:

If you do not use the Pauling mobile application to scan the QR code, you will be redirected to a nice web page showing all the information about the poster, including its digital version. No, we will never ever vendor lock you.

Architecture & implementation

Pauling is based on two main components: (1) a web application to import posters and expose them via an HTTP API, and (2) a mobile application that consumes this API to store and display the scanned posters (technically, you scan the QR codes of the posters but who cares?).

The web application

The Pauling web application is powered by Flask, a Python web micro-framework and PostgreSQL. Let’s review the different features we implemented in this web application.

As a poster author, I want to share it via Pauling

Step 1: submit the link to your poster hosted in a well-known data repository (FigShare and F1000 are supported so far) or upload your PNG/PDF file. We do not aim at being a data repository so please, upload your poster on F1000 and get a DOI for it :heart:

Pauling screenshot submission form

Step 2: review the information automatically retrieved by Pauling and/or fill the missing metadata (title, abstract, authors, …):

Pauling screenshot meta form

Step 3: you are almost done! Now you can generate a QR code to print and place right next to your poster so that people can scan it and collect your poster using the Pauling mobile application:

Pauling screenshot QR code Pauling screenshot admin

As a poster author, I want to edit the information of my poster

Once submitted, Pauling creates an administration view for your poster so that you can still edit it at any time. This unique link can be sent by email if you want to save these important information in your mailbox:

Pauling screenshot poster edition

As a poster author, I can share my posters

Once a poster has been successfully imported, Pauling generates a unique page with a viewable version of the poster (embedded in a PDF reader). This page URL is actually the value encoded in Pauling’s QR code. Requested without any particular header, the API response will fallback to this page. This is pretty neat if you scan the QR code without the Pauling mobile app (more on this later):

Pauling screenshot poster view

As usual in these “Le lab” blog posts, we review the internals of what we have built and this is our next section.

Implementation details

Because of the time constraint implied by our Le lab sessions, we decided to cut corners. For instance, we do not want to store users’ data (like the PDFs of the posters). We use Cloudinary to store the PDF files but also to manipulate them. Indeed, beside image storage, Cloudinary offers blazing fast delivery and transform functions to ease content image manipulations.

In the code snippet below, the uploaded image (poster.jpg) will be delivered cropped with a 300x200 pixels geometry. We can also generate thumbnails, convert formats, etc. Pretty neat!

https://res.cloudinary.com/tailordev/image/upload/w_300,h_200,c_crop/poster.jpg

Next, generating a QR code in Python is rather straightforward thanks to the python-qrcode library; it can be summarized as:

import qrcode
img = qrcode.make(poster.public_url(absolute=True))

Nonetheless, we wanted to have our own visual identity and not generate generic QR codes, so that our users get all the required information in a single image that looks like the following:

Pauling QR code example

We achieved that by relying on a template image that we filled with the generated QR code image. There is also a Python library for that! We invite the interested readers to dive into the source code to know more about this part.

Now, let’s talk about the UI. We wanted to give a new CSS framework a try, ideally based on Sass and Flexbox. We stumbled upon Bulma and decided to test it: this framework does the job and looks fresh and nice :muscle:

Last but not least, emails. If you have ever tried to design beautiful HTML emails that render correctly in all mailboxes, you know that it’s not an easy task. For years, we used tools similar to premailer to inline and fix CSS, relative URLs, and so on. No way. We looked for better tools and… :tada: we discovered a new player in town: MJML (a.k.a. “The only framework that makes responsive emails easy” :wink:). MJML is a XML-like markup language with a rich collection of components ready to use in your emails. This abstraction allows to build nice emails (especially with the live editor) without having all the inline CSS and other hacks. You write a template and compile it into crappy HTML, which is then delivered to your users:

An example of an email sent by Pauling

That is it for the web application, let’s talk about the mobile part now!

The mobile application

First thing first: Pauling is our first official mobile application :tada:

Because we’re very experienced with React, the promise of React Native to build native mobile applications using React was really appealing. If you haven’t tested React Native yet, you have to know that getting started with this framework is a little bit more painful than using CRA for a standard React project. Sure there is a similar project with Expo, but we decided not to use it and if you make the same choice, be prepared to download lots of new stuff.

Pauling has been developed in a few days with absolutely no notion of how React Native works, and limited knowledge about mobile applications in general. Yet, we were able to ship a functional version of a mobile application for both iOS and Android! We describe its main features in the sequel, then discuss some implementation details.

As a conference attendee, I want to collect posters

The set of screenshots below relates the story of a conference attendee, like you, opening Pauling for the first time. After a brief splash screen, Pauling invites you to scan your first poster (QR code). Once the (bottom right) action button has been touched, Pauling relies on your phone camera to look for Pauling QR codes. Once the application finds a QR code (and if you have a working Internet connection currently), it redirects you to the poster view, downloading all the information related to this poster in the meantime.

Pauling Mobile Screenshots QR

Pauling stores the data on the phone, so you can go offline and still have access to your posters. In the future, we’ll improve the resilience of this process, allowing for instance to scan QR codes and retrieve the information when a Internet connection is available.

As a conference attendee, I want to view a poster

Once the scanned poster has been added to your collection, you can zoom to read it comfortably from your mobile phone. The poster metadata (title, authors, abstract, etc.) are also available.

Pauling Mobile Screenshots PDF Viewer

In the near future, we will allow to take notes on a poster so that you can write down a conversation with her author or anything that comes to your mind. We will also improve the readability of this screen.

Implementation details

In a Le lab session, we do not have too much time for design. That is why we decided to use the NativeBase cross-platform UI components. This library provides all the essential components to develop a rich mobile interface without a designer. We deeply regret cross-platform inconsistencies in some components behaviors. We already thought about writing our own components with a lower level library, but it was out of this session scope.

One of the strengths of React is its rich ecosystem, and we were glad to find a similar ecosystem for React Native too! There are a lot of great components to interact with the devices, including these ones used by Pauling:

Because it is our first React Native application, we do not have much more information about how we did it. We spent a lot of time trying to apply what we knew about React into React Native (components, redux, testing) and we lost a few battles with some third-party libraries. At the end of the session, we managed to build something we could use though.

We could not end this section without mentioning buddybuild, a continuous integration platform for mobile applications. This could be the best CI/CD platforms we have ever tried: it magically works without having to perform any action, other than registering your application to it and give your Google Developer/Apple iTunes Connect credentials. This platform is able to build a React Native application for iOS and Android, run the tests, package (build) your application, deploy it on the stores (as beta or production releases) but it also allows you to manage a list of beta-testers who can download and install the application from their platform (for Android devices at least). :heart_eyes:

What’s next?

We have tons of ideas to improve this application, and we also have a lot of room for improvements to make the existing application as slick as possible. We list some of our ideas below.

Poster notes

As mentioned previously, the ability to add additional notes to posters is at the top of our TODO list. We have been asked many times already. This is challenging since we do not have any notion of users in the Pauling application, and this was a design decision. The problem is that the users will certainly want to share their notes taken on their small devices. There are a few possibilities to fix this, including emails, but we need to think more about this feature and ask our next round of beta testers too.

Poster pictures

Because Pauling may not be successful and may not “disrupt” the world of scientific conferences, not all the posters will be available in Pauling. Therefore, a user should be able to add posters to its collection by taking pictures. Ideally, we should find a way to get the high-quality poster later.

Poster categories

We need to improve our UI to sort/filter posters and introduce the notion of collections. Our idea is to allow the users to create a folder/category tree so that they can sort their posters by year and conference for instance.

Our next Le lab session, scheduled for late November, might bring significant improvements to this application (or not :stuck_out_tongue:)

A note on this Le lab session/team retreat

Organizing a code retreat like we did was a great idea… until one of us had family issues that forced him to leave on day-2. It’s always hard to get back into it after a long break (a few weeks) and without this particular atmosphere of staying together far from “disturbing agents”. This session was still a one-week period, but broken down in smaller chunks. We will have our revenge during our next Le lab session!

Conclusion

To wrap up this Le lab session, here is a summary of what we’ve learnt:

  1. Mobile application development is far different from web development. In other words, do not be tricked by the React Native promise. If you do not know how to develop a mobile application, well… you do not know how to develop mobile applications, even if you are using React Native.
  2. React Native seems an elegant solution to develop cross-platform mobile applications quickly. You must know Java, Objective-C and the basics of native development though.
  3. We still need to work on this application and on mobile applications in general but this is exciting because we’re outside our comfort zone.

You can check out our Pauling web application at: pauling.lelab.tailordev.fr. We did not publish the mobile application to the different stores yet but this is something we are working on (on our spare time currently).

Update: we have open-sourced and published Pauling on the stores.


:fire: :fire: :fire: Like the idea? Want to use this app or contribute to it? Want to be a beta-tester on the mobile application? We need you! Get in touch with us via Twitter or email and spread the word! In any case, thanks for reading!