beestat
patreon
Creating the beestat demo
🕑 Added 2019-06-11 14:01:00 +0000 UTCSomething that's always bothered me in the tech industry is that there are very few products with actual live demos. Sometimes you get some crappy version of one, but mostly you just get outdated screenshots, videos, or the frustrating "call for demo". This is not a trend I want to be part of so I finally took the time to put together a proper demo.
Here are the guidelines I set for myself:
1. No copy/pasting code. I did not want a normal application, then a separate copy/pasted version for the demo. The main application code should also be the demo code. This prevents duplicating work and ensures that the demo is always reflective of what beestat currently does.
2. As few if(demo) conditions as possible. Since the main application code is also the demo code, this is unavoidable but it can be kept pretty simple. For example, a quick if statement to show a "you're in the demo" banner or to prevent users from persisting settings that could affect another demo user.
3. Data must be realistic and up-to-date. None of that stale or obviously fake data. I wanted the demo to feel alive and as realistic as possible.
No copy/pasting code
Today, beestat is basically two things:
- Program code
- Configuration file
The code is capable of running beestat in my development environment or on the live beestat server. The only thing that really changes between the two is the configuration file. This defines all the things like the database credentials and external API connection info.
In order to make the demo work, I essentially needed a version of the configuration file for the demo. This turned out to be pretty easy because many of the things (like the connection to ecobee) can be ignored since they aren't used in the demo.
All that was left was to create an Apache virtual host for the demo site and point it at the live code.
As few if(demo) conditions as possible
Now that the configuration file was ready I needed to jump in and make a few minor changes to the application. These changes look a bit like this:
The general process for figuring out where to add these was to open the demo, try literally everything, then fix what broke or had unwanted side-effects. All together it took maybe an hour to make the current codebase work like a demo when the proper configuration file is present.
Data must be realistic and up-to-date
This is the most interesting and difficult problem to solve. I spent many drives to and from work thinking about how to do this. There are a lot of options:
- Write a script to populate a demo database and keep it up to date
- Write special code that fakes data on the fly
- Sync real data from the live database to a demo database
- Point the demo at the live database
It wouldn't have been terribly hard to write a script to populate a demo database...but then I need to monitor the script and maintain it separately from the application. So that was off the table fairly quickly. Writing application code seemed like a bad approach and would break the previous constraint about having very little if(demo) code.
The solution ended up being some combination of the last two, with a little bit of magic. The simplest description is that the demo reads *some* data from the live database, and some not, and it never writes to the live database. This is accomplished by creating a few views in the database specifically for the demo that point to the live database.
Since I'm pointing to the live database, you may be wondering whose data is available in the demo. It's mine...sort of. When I created the views much of what I filled in was read directly from the live database. For data that I want to protect like my address or schedule, I either replaced it, or changed it slightly. In the end I get a database that is full of real-ish data that stays up to date and requires virtually no maintenance.
Wrapping up
That's really about it. Making the whole thing work required a bit of web server configuration and some setup with SSL certificates, but that's fairly straightforward. Excluding planning, I probably got the demo up with about 6 hours of work. It will stay up to date and continue to work with zero maintenance. The only thing it adds is one more quick spot to test any time I add features or make other changes. I'm very happy with the result and glad to be in the "actually has a legit demo" camp.
Check it out now at demo.beestat.io!
