API

SlidesUp uses Firebase Realtime Database as its data store. Consequently, you can use any Firebase API to fetch conference data. Not only that, your clients can receive real-time updates, such as last minute agenda changes. Firebase provides excellent documentation of their API. Please refer to the section matching your choice of technology. We will use JavaScript and the Web API in the following examples to illustrate various concepts.

Database Entities

Conference data is stored in the Firebase database as JSON objects. Each object is identified by a unique key known as its identifier. For example, here's a list of speakers for a demo conference called Boston Conference 2018:

{
    "-LFy_y56baRZKZZC7Wzd" : {
        "name" : "Bijan Sabet",
        "title" : "Co-founder & General Partner",
        "org" : "Spark Capital",
        "pictureUrl" : "...",
        "bio" : "<p>Bijan is a co-founder ...</p>"
    },
    "-LFyaCvWxEBpD8sILO-P" : {
        "name" : "C.A. Webb",
        "title" : "Co-founder & Former Partner",
        "org" : "_Underscore.VC",
        "pictureUrl" : "...",
        "bio" : "<p>C.A. Webb has spent her career ...</p>"
    }
}

-LFy_y56baRZKZZC7Wzd is the unique identifier for speaker Bijan Sabet.

Database References

Each entity in the Firebase database is assigned a reference that encodes its location (see firebase.database.Reference). Once you have a reference, you can read the data at that location using the Firebase API.

Example: The key properties of a conference are stored at the Firebase reference confs/list/${confId}. Here confId is the identifier of your conference (provided by the administrators at SlidesUp). As an example, the confId for Boston Conference 2018 is boston-conference-2018. The code below will fetch the JSON object for this conference:

const confId = 'boston-conference-2018';

firebase.database().ref(`confs/list/${confId}`)
.once('value')
.then(snapshots => {
    const jsConf = snapshots.value();
    return jsConf;
})

Here's what the returned JSON object looks like:

{
    "name": "Boston Conference 2018",
    "isPublished": true,
    "startTime": "2018-10-22T13:00:00.000Z",
    "endTime": "2018-10-23T21:00:00.000Z",
    "timezone": "America/New_York",
    "description": "<p>Bringing the tech &amp; design community together.</p>"
}

As an aside, you can use the Firebase REST API to view the JSON objects at any database location. For example, type the following URL in your browser to view the Boston Conference JSON object:

https://slidesup-test.firebaseio.com/confs/list/boston-conference-2018.json?print=pretty

Converting JSON to View Objects

The representation of conference objects in the Firebase database may not exactly match the needs of your application. For example, SlidesUp stores dates in the ISO 8601 format. You may want to convert them to date objects supported by your programming language. As another example, the conference data is stored in a normalized format to avoid duplication and inconsistency, e.g. the Event object stores just the references (ids) to its speakers, not the full Speaker objects. For these reasons, you may want to run a transformation on the received JSON objects to create an internal representation for your application. This internal representation consists of objects known as View Objects or View Models.

You can see this transformation happening in the SlidesUp demo application in the ConferenceAdapter class. The highlighted code transforms the received JSON objects into view models using the toModel() method of each model object. For example, here's how Conf.toModel() converts a JSON conference to the internal representation:

static toModel(id, jsConf) {
    const { startTime, endTime } = jsConf;

    return new Conf(
        id,
        jsConf.name,
        jsConf.isPublished,
        startTime ? new Date(startTime) : null,
        endTime ? new Date(endTime) : null,
        jsConf.timezone,
        jsConf.description
    );
}

Demo App

Once you have the internal representation of your conference, you can render it easily in your app. We have created a sample web app to illustrate the basic concepts (see the live version here). Writing an app in your preferred technology will use equivalent concepts. You will fetch your conference data in JSON format, convert it to an internal representation and then use it to render the various views in your app.

As an aside, it is amazing how different designs can make the same data look and feel so different. Below there are two apps showing Boston Conference 2018–on the left is the default SlidesUp Attendee App and on the right is the demo app used in the discussion above.

Conceptual Model

We are curious to see where your imagination takes you. Please send us details of your implementation to kunal@slidesup.com. We'd love to showcase it!

← ConceptsConference →