Tip: The 360|AnDev 2017 Android application is available for download from Google Play
Last year, I wrote an article about our experience using Firebase to power the 360|AnDev mobile app. This was a great success for us, and it made delivering content to our attendees easy throughout the event with the real-time database and cloud messaging features. However, with no front-end app to manage the data, updates were made almost entirely in the Firebase console.
This year, we wanted to streamline this and also address the speaker submission and approval process. In 2016, we used a Google form, which fed into a spreadsheet. When it came time to review the sessions with community members and made selections, this spreadsheet ended up with many copies that we had to reconcile later on. In addition, anytime a speaker needed to make a change or we had to update the schedule, this meant manual changes to multiple locations.
I felt like we could do better, and so I set out to build a system to help manage the data we already had in Firebase, with three distinct interfaces for the audiences we needed to address:
- Speakers: To create their own profiles and manage submissions during CFP.
- Reviewers: Anonymously score talks and leave comments for the organizers.
- Organizers: An admin interface to accept talks and build the schedule.
However, it's 2017 and I'm still not a web developer. JavaScript still makes me itchy, and I'm not that much more comfortable with HTML/CSS.
Enter AngularJS
Warning: I strongly identify with the author of How it Feels to Learn JavaScript in 2016. Suggestions that I picked the wrong JS framework are likely to fall on deaf ears.
I decided to build the web app using AngularJS for the same reason I chose Firebase. I didn't want to spend time writing front-end code any more than I did building a functional back-end. I spent a few minutes playing with AngularJS and was impressed at how much I was able to create in a short time with very little JavaScript.
I used the AngularFire library to bind our Firebase database to the UI. This made the Firebase data accessible to the app as an Angular model with all the data synchronization handled automatically behind the scenes.
The Angular Material library provided a set of UI components I could use to create the look and feel of a professional web app. This included some really neat touches like dialogs and pop-up menus that I would never have been able to attempt on my own.
With the help of these three components, I was able to build the speaker portal and reviewer interface to accept and score submissions inside of a week (it was literally finished just a few days before the CFP went live).
Firebase
We started using some more Firebase services this year in response to the addition of the front-end web apps.
Firebase Authentication
Each interface had slightly different security requirements, but overall we needed to ensure the data being entered was only accessible to the appropriate parties. Firebase Authentication was the obvious answer because it allowed us to evaluate the logged in user directly in the existing database security rules.
One thing that I would love to see added to this is a way of designating roles for particular users. Designating each of the organizer's accounts as an admin, for example, was a process that required business logic on our side. It would be great to manage that in the Authentication module and use that info directly in app logic and database rules.
Firebase Hosting
Because of our existing investment in Firebase, I chose to publish these web apps
with Firebase Hosting within the same
app we were using for the database. As an alien in the web world, I found the
CLI tools very convenient. It was helpful to have firebase serve during
development so I didn't need to figure out how to set up a local web server,
and be able to publish with firebase deploy from the same console.
It's also one of the fastest web hosting services I've used. I get consistently fast page loading at any time of day, where other hosts always seem to throttle site responses based on load and usage. The fact that SSL was set up automatically by default for our custom domain was also a bonus. Through my experience with Firebase Hosting, I've seriously considered dropping other web hosting services for personal projects and moving them to Firebase.
Note: We are using the Blaze plan (pay as you go), which has been perfect for a low traffic system like this that only spikes around the CFP and the actual event. Costs are "almost free" each month.
Summary
Having never built a web app before (this blog is Wordpress...sorry purists), I feel empowered by what AngularJS + Firebase has allowed us to accomplish in such a short time. Prediction for 2018? Maybe the entire public-facing site will be driven by the same frameworks and data (yep, that site is Wordpress also... for now).
Join Us at 360|AnDev
Android experts from Google and the community are descending on Denver, Colorado for two days of technical sessions and summer fun in the Mile High City.
For making it all the way to the end of this article, here's a registration coupon for 360|AnDev 2017. Use the coupon code AndroidCommunity for $75 off when you register!
So why haven't you registered yet? You need to be in Denver July 13-14!