In this article, Indermohan Singh, the author of Ionic 2 Blueprints we will create a conference app. We will create an app which will provide list of speakers, schedule, directions to the venue, ticket booking, and lots of other features.

We will learn the following things:

• Using the device's native features
• Leveraging localStorage
• Ionic menu and tabs
• Using RxJS to build a perfect search filter

(For more resources related to this topic, see here.)

Conference app is a companion application for conference attendees. In this application, we are using Lanyrd JSON Exportand hardcoded JSON file as our backend. We will have a tabs and side menu interface, just like our e-commerce application.

When a user opens our app, the app will show a tab interface with SpeakersPageopen. It will have SchedulePage for conference schedule and AboutPage for information about conference.

We will also make this app work offline, without any Internet connection. So, your user will still be able to view speakers, see the schedule, and do other stuff without using the Internet at all.

JSON data

In the application, we have used a hardcoded JSON file as our Database. But in the truest sense, we are actually using a JSON export of a Lanyrd event. I was trying to make this article using Lanyrd as the backend, but unfortunately, Lanyrd is mostly in maintenance mode. So I was not able to use it. In this article, I am still using a JSON export from Lanyrd, from a previous event. So, if you are able to get a JSON export for your event, you can just swap the URL and you are good to go.

Those who don't want to use Lanyrd and instead want to use their own backend, must have a look at the next section. I have described the structure of JSON, which I have used to make this app. You can create your REST API accordingly.

Understanding JSON

Let's understand the structure of the JSON export.

• The whole JSON database is an object with two keys, timezone and sessions, like the following:

  {
  timezone: "Australia/Brisbane",
  sessions: [..] 
  }
  

• Timezone is just a string, but sessions key is an array of lists of all the sessions of our conference. Items in the sessions array are divided according to days of the conference. Each item represents a day of the conference and has the following structure:

  {
    day: "Saturday 21st November",
    sessions: [..]
  }
  

• So, the sessions array of each day has actual sessions as items. Each item has the following structure:

  {
    start_time: "2015-11-21 09:30:00",
    topics: [],
    web_url: "url of event
    times: "9:30am - 10:00am",
    id: "sdtpgq",
    types: [ ],
    end_time_epoch: 1448064000,
    speakers: [],
    title: "Talk Title",
    event_id: "event_id",
    space: "Space",
    day: "Saturday 21st November",
    end_time: "2015-11-21 10:00:00",
    other_url: null,
    start_time_epoch: 1448062200,
    abstract: "<p>Abstract of Talk</p>"
  },

Here, the speakers array has a list of all speakers. We will use that speakers array to create a list of all speakers in an array. You can see the whole structure here:

That's all we need to understand for JSON.

Defining the app

In this section, we will define various functionalities of our application. We will also show the architecture of our app using an app flow diagram.

Functionalities

We will be including the following functionalities in our application:

• List of speakers
• Schedule detail
• Search functionality using session title, abstract, and speaker's names
• Hide/Show any day of the schedule
• Favorite list for sessions
• Adding favorite sessions to the device calendar
• Ability to share sessions to other applications
• Directions to venue
• Offline working

App flow

This is how the control will flow inside our application:

Let's understand the flow:

• RootComponent: RootComponent is the root Ionic component. It is defined inside the /app/app.ts file.
• TabsPage: TabsPage acts as a container for our SpeakersPage, SchedulePage, and AboutPage.
• SpeakersPage: SpeakersPage shows a list of all the speakers of our conference.
• SchedulePage: SchedulePage shows us the schedule of our conference and allows us various filter features.
• AboutPage: AboutPage provides us information about the conference.
• SpeakersDetail: SpeakerDetail page shows the details of the speaker and a list of his/her presentations in this conference.
• SessionDetail: SessionDetail page shows the details of a session with the title and abstract of the session.
• FavoritePage: FavoritePage shows a list of the user's favorite sessions.

Summary

In this article, we discussed about the JSON files that will used as database in our app. We also defined the the functionalities of our app and understood the flow of our app.

Resources for Article: 

Further resources on this subject:

• First Look at Ionic [article]
• Ionic JS Components [article]
• Creating Our First App with Ionic [article]