Ionic 4 Ticket Booking app starter — Evento

Get the amazing UI and source code of Event and Ticket Booking app for your Ionic 4 project. Start your Event and Ticket Booking for Event and Ticket Booking platform!

Table of Contents

1. Introduction — What is this template
2. Features of this template

2.1 Screens

2.2 Features

2.3 Device compatibility

3. Setup and Installation

3.1 Introduction

3.2 Installation

3.3 Running your app

3.4 Run your app with changes

3.5 Creating icon and splash

3.6 Generating Release builds

4. Modifying code

4.1 Screen code structure

4.2 Styling structure

4.3 Logic structure

4.4 Running your app

4.4 Navigation structure

5. Feature Explanation

5.1 User Authentication

5.2 Adding events, plays recommended movies, plays, etc

5.3 Recommendations

5.7 Social Share

5.8 Payments

6. Integrating Back-end Data

6.1 Data structure

6.2 Back-end options

7. Troubleshooting

8. Third-party libraries, sources, and Credits

1. Introduction — What is this template

Evanto — An Ionic 4 Events and Ticket Booking App Template is a mobile app theme/template. With this template, you can create Events and Ticket Booking apps like BookMyShow, OneFlighTicket, MovieticketBook, etc.

This template is the front-end part of the Evento app, which means the screens and user interfaces (screens) are ready. You can easily change the screens, styles, and logics to suit your requirements. To make it a live app like BookMyShow, OneFlighTicket, MovieticketBook, etc.. you just need to add a back-end to the app, and load your data in the back-end.

This template is made in IONIC 4 language. With IONIC 4, you can

• Create iOS and an Android app with a single source code
• Cut your project cost and time in half
• Ensure exact same UI in iOS and Android, while following the standard UI norms
• Saves separate updates for each app in future

2. Features of this template

2. 1. Screens

2.1.1 Home

This is the first tab of the application. This page can be accessed after a successful login by a registered user for the application.

Home page contains multiple scrollable segments like “All”, “Movies”, “EVENTS”, “PLAYS” etc at the top of the page. The current segment has options to Book an event and to Book a Movie Ticket options for a user.
By clicking on any one of the segment options, it will show the data of that segment on the same page.
the home tab consists: — 

1. Events
2. Plays
3. Movies
4. All
5. Sports
6. Activities

2.1.2 Home — segment — All

This is the first tab’s first segment. This page can be accessed after app load.

This page consists of all the events and movies related information in the app.

In this page, all the categories of movies, events, plays, sports , etc are arranged in the horizontal direction with the horizontal scroll view.

Each item of any category goes to its specific page.

2.1.3 Category item detail

This page can be accessed by clicking on any item of a particular category on the home page all segments items. 

This page contains “Critics Reviews” and “Recommended movies” list in the horizontal direction which are scrollable. On clicking on “See All” it navigates to the Recommended movies page.

This page contains detailed information of the particular event or movie. This page navigates to the review page and book tickets page.

2.1.4 Critics review

This page can be accessed from the “Category item detail ” page by clicking on the reviews button. This page has two tabs one is “USERS” and another is “CRITICS”. The user segment contains the reviews by the user and the critic's segment contains the reviews by the critics.
Here this page is only UI for demo purpose but you can integrate this with any back-end and get the data from the server.

2.1.5 Recommended movies

This page can be accessed from the “Category item detail ” page by clicking on the See All button at the right bottom end of the page.

 This page contains the recommended movies for the user. All the movies are arranged as the list items in the vertical direction.

2.1.6 Book Ticket

This page can be accessed from the “Category item detail ” page by clicking on the “Book ticket” button at the very bottom of the page.

This page contains the event/ movie booking detail. This page navigates to the payment page.

2.1.7 Payment

This page can be accessed from the “Book ticket ” page by clicking on the “Cards” button at the very bottom of the page. This page can be used for the payment method for the event/ movie booking.

This page navigates to the Payment confirmation page.

2.1.8 Payment confirmation

This page can be accessed by clicking on the pay button after entering all required input fields in the payment page.

This page navigates to the show ticket page by clicking on the “SHOW YOUR TICKET” button and to home by clicking on the “GO TO HOME SCREEN” button.

2.1.9 Show your ticket

This page can be accessed by clicking on the show your ticket button in the booking confirmed page.
This page navigates to the home page by cliking on the cancel button on the top right corner of the page.

2.1.10 Home — Segment — Movie

This page can be accessed by clicking on the second segment in the home page. 

This page contains nested segment navigation for: — 
1. NOW SHOWING
2. COMING SOON
3. EXCLUSIVE
Each segment has specific contents.

Now showing segments contains the currently released movies or current events available for the users. This page provides the filter options to the user for convenient search.
In this page, the cards for the particular movies are arranged in vertical roe and the trending in jukebox list are arranged in the horizontal row at the bottom of the page.

2.1.10 Home — Segment — Movie — Filter

This page can be accessed by clicking on the filter button in the now showing segment. This page provides the sort by facility to show movies or events accordingly.

2.1.11 Home — Segment— EVENTS

This is the third segment of the homepage. This page contains the filter options for the users for quick and desired searches.
This page has specific categories to choose from in scrollable segments at the top of the page. This page contains all the coming and available events nearby and provides the convenience to lock the seat online.
In this page, each event is arranged in card view and is shown in the vertical direction. Each card navigates to the booking page.

2.1.12 Home — Segment — Filter

This page can be accessed by clicking on the filter button on the events segment. Here you can enable and disable the button for nearby events, select category of events, set price range, set locations for events, select date for events, etc.

2.1.13 Home — Segment — Plays

This is the fourth segment of the homepage. This page contains the filter options for the users for quick and desired searches.
This page has specific categories to choose from in scrollable segments at the top of the page. This page contains all the coming and available plays nearby and provides the convenience to lock the seat online, here you can check the event date, event location, and prices too.
In this page, each play is arranged in card view and is shown in the vertical direction. Each card navigates to the booking page.

2.1.14 Book events/play

This page can be accessed by clicking on the Book button at the very bottom of the events/plays/Sports/Activities page. Here we can book the events online.
This page navigates to the confirm and pay page.

2.1.15 Home — Segment — Sports

This is the fifth segment of the homepage. This page contains the filter options for the users for quick and desired searches.
This page has specific categories to choose from in scrollable segments at the top of the page. This page contains all the coming and available sports events happening nearby and provides the convenience to book the seat online, here you can check the event date, event location, and prices too.
In this page, each activity is arranged in card view and is shown in the vertical direction. Each card navigates to the booking page.

2.1.16 Home — Segment — Activities

This is the sixth segment of the homepage. This page contains the filter options for the users for quick and desired searches.
This page has specific categories to choose from in scrollable segments at the top of the page. This page contains all the coming and available Activities happening nearby and provides the convenience to book the seat online, here you can check the event date, event location, and prices too.
In this page, each sport is arranged in card view and is shown in the vertical direction. Each card navigates to the booking page.

2.1.17 Search

This is the second tabs of the application. Here you can search for a particular category by writing in the input field at the top of the app.
This page in this app here is only UI for demo purpose.

2.1.18 Buzz

This is the third tabs of the application. This page contains all the buzz around the world means you can check here that what is trending around the world.
This page in this app here is only the UI for demo purpose.

2.1.19 Userinfo

This is the fourth tab of this application.
This page contains all the user information, here user can edit his personal information and change the app settings according to the user need.
This page navigates to the following pages: — 

1. Login
2. Signup
3. Location
4. Notification
5. Gift Cards
6. Jukebox Credits
7. Food and beverages
8. Offers
9. Support
10. Settings

2.1.20 Userinfo — Login

This page can be accessed from the userinfo page. By clicking on the login button after the required entries in the input field it redirects you back to the Userinfo page.

The login page can be used to perform login action with username/email and password. Currently, the login is only for demo purposes.

The login page also contains “Signup” page navigations.

2.1.21 Userinfo — Signup

This page can be accessed from the userinfo page. By clicking on the signup button it redirects you back to the Userinfo page.

The signup page can be used to register a user with a username/email and password. Currently, the signup is only for demo purposes.

The signup page also contains “Login page “ page navigations.

2.1.22 Userinfo — Location

This page can be accessed from the userinfo page. By clicking on the location text it opens a modal to select your preferred location.

2.1.23 Userinfo — Notification

This page contains the notifications for the events and movies in the vertical direction. To enable and disable mobile notifications, you will first need a Push notifications system in your back-end. If you are using Firebase — implementing, enabling and disabling push notification is very easy compared to a custom back-end. Read more about Firebase- Ionic push notificationhere.

2.1.24 Userinfo — Gift Cards

This page can be accessed from the userinfo page. By clicking on the Gift cards text it navigates to this page. This page contains all the offers for the user to use while booking for an event or movies.

2.1.25 Userinfo — Jukebox Credits

This page can be accessed from the userinfo page. By clicking on the Jukebox credits text. It navigates to this page. This page contains all the series or bundles of the movies or events. User can download all the latest and trending actions all around the world. Here this page is only UI.

2.1.26 Userinfo —Support

This page can be accessed from the “USerinfo” page by clicking on supports.

All the random queries related Evento app is listed here in a vertical direction.

Each list item opens a modal on click and it contains the detailed information.

2.1.27 Userinfo — Settings

This page can be accessed by clicking on the settings on the Userinfo page. In any app, settings page plays an important role in setting user’s preferences and requirement, here user can set the preferences for Push Notification, Email Notifications, and Whatsapp notifications, Mobile notification etc.
This page allows you to toggle some preferences and navigates to other pages to select choices.
This page allows the user to select theM-ticket, Box office pickup, enable and disable food beverages, newsletters, managing push, mobile, Whatsapp, and email notifications, sharing the app with friends and contacts, and to delete account from the app.

We can select and set any setting from the list of settings arranged in the vertical direction. This is the only UI for the demo purpose.

2.1.28 Userinfo — Edit profile

This page can be accessed from the “Userinfo” page after login.

The options available can be chosen to edit user name, email address, update password, address, gender, and birthday as per your requirement. “Save” button at the right of the page takes you back to the “Userinfo ” page.

2.3 Device Compatibility

As mentioned earlier, the app is written in Ionic 4 and angular language. This allows a single source code to create both iOS and Android apps.

This template has been tested in all latest Android versions and major devices.

This template has also been tested in all latest versions of iPhones, including iPhone X.

3. Setup and Installation

Evento is an Events and Ticket booking application made with Ionic 4 and angular.

For navigation in the application, we have used default angular navigation.

3.1 What is Ionic Framework

Ionic Framework is an open-source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies (HTML, CSS, and JavaScript).

Ionic Framework is focused on the frontend user experience, or UI interaction of an app (controls, interactions, gestures, animations). It’s easy to learn and integrates nicely with other libraries or frameworks, such as Angular, or can be used standalone without a frontend framework using a simple script include.

3.2 How can I use this template

This template is a ready-made front-end template for an event and ticket booking App. You can use the screens coded in this app, navigation between the screens and specific functions applied to buttons, etc. This saves your 100% cost and time in front-end UI development. You can simply add a back-end/server to this app template, and replace the demo data with data coming from your server. This way, you only spend time and money on back-end development.

3.3 Installation

Setting Up Environment and Installing Dependencies

# Install the Ionic CLI

npm install -g ionic

# Start an App

ionic start myApp tabs/blank/sidemenu

whatever is your requirement you can select that and remove others from tabs/blank/sidemenu.

#Angular + Ionic Framework

npm install @ionic/angular@latest --save

# Node & npm

Almost all tooling for modern JavaScript projects is based in Node.js. The download page has prebuilt installation packages for all platforms. We recommend selecting the LTS version to ensure the best compatibility.

Node is bundled with npm, the package manager for JavaScript.

To verify the installation, open a new terminal window and run:

node --version
$ npm --version

# iOS Setup

To target iOS, some additional environment setup is required. Unfortunately, iOS apps can only be created on macOS.

For iOS setup please follow the steps provided in the link here

#Run the App

cd your app name
ionic serve

For iOS build, follow the steps provided in the link here

For the android build, execute the following command

ionic cordova prepare android
ionic cordova run android

3.4 Creating Icon and Splash screen

For creating an icon and splash first paste your icon and splash in the resources folder and then execute the following command in your project directory

ionic cordova platform add android 
ionic cordova resources
ionic cordova build android

4. Modifying code

4.1 Screen / View’s Code Structure

4.2 Overall Folder Structure

There are broadly 30+ pages in this template. All pages are shown in the src/app folder above. Mostly, each page’s code is kept in a separate folder. Folder names are self-explanatory. You can create a page by executing the command

ionic cordova generate page your page name

This will create a folder of page name containing four files as -

In the case of Ionic 4, pages are generated with lazy loading by default which means a page has its own module.

├── enappd.html
├── enappd.module.ts
├── enappd.scss
└── enappd.ts

• enappd.html: contains UI components for the page.
• enappd.scss: contains sass styles to style your page.
• enappd.ts: contains TypeScript code

4.3 Layout File Code Structure

The layout file has the structure shown in the image.

• imports are written on the top.

• @component is the decorator that marks a class as an Angular component and provides configuration metadata that determines how the component should be processed, instantiated, and used at runtime.

• A constructor is used for dependency injections.

When the app loads the constructor gets called first then ngOnInit.

After constructor and inside the class we can write our logic for the page/component in page.ts

4.4. Styling Code Structure

style page are generated by default for each page after executing page generate command, inside the page folder.

4.5. Navigation Code Structure

On creating a project in ionic a file named app-routing.module.ts gets generated by default where all the navigation codes get done.
We use the pathname of a particular page to navigate from one page to another.

In ionic, there are some navigation type as-

Tab navigation

Controls the navigation of Tabs (4 tabs in the app). This is detailed in src/app/ tabs/tabs-router.module.ts. All the settings of Tab Navigation can be controlled from here.

Nested Segment and Tab navigation

5. Feature Explanation

5.1. User Authentication

User authentication is often the first and most important part of the app. This template has pages for Login, Signup, Forgot password and Update password.

As per your requirements, you can either

— Allow a user to access the app without login/signup, and ask a login for specific features, OR

— Do not allow any access without login/signup. In this case the Login page with go on top of the router navigation in app-routing.module.ts. Only once there is a “login”, the user should be allowed access to the HomePage. Authentication can be achieved by your custom back-end or, if you are using Firebase, there are several easy authentication options. You can even choose to integrate social logins in the app. Check details here.

5.2. Adding events, plays recommended movies, plays, etc

This template takes the dummy data from the JSON files placed in the data.service.ts file. If you only want to create static data, you can modify the JSON files’ data and the data in the page/ layout will change.

For example, in movies— we see many movies list.

These details are imported from the JSON data from the data.service.ts file in src/app.

You can generate service in ionic by executing the command

ionic g service your service name

Editing this data will edit the view in the page on serve or device.

Once you connect your back-end with the app, this JSON data will be replaced by the backend data. All the data labels are self-explanatory.

5.3 Images

You can choose to load images from URLs (recommended), or keep images in the local storage. If you are loading images from URL, keep a backup image to show in case the actual image takes time to load.

5.4 Social Sharing

Providing Social Sharing features is where you can share using your app.

This template does have a Social Sharing feature functionality but only UI.

You can share your app’s pages and invite links via this plugin after integrating it with proper back-end.

5.5 Payments

You can implement the payments by using any one or multiple of the following for events or tickets booking..

— Ionic PayPal

— Ionic Stripe

— Ionic in-app purchase

— Ionic Apple Pay and Android Pay

— Ionic Razorpay

— PhonePe

— GooglePay

— AmazonPay

6. Integrating Back-end Data

6.1. Data Structure

In each service.ts, there is a dummy data file placed to mimic the behavior of a back-end.

E.g. Following images shows the data and its structure in the evento app. The data is in JSON format.

Data is imported in the page.ts file as

this.ServiceProvider.cards

here, ServiceProvider is service name

cards is the JSON data in service

6.2 Back-end options

To make the app fully operational you will need to attach a back-end to the app. This will require several additions and you will need the assistance of a back-end developer.

We will provide a glimpse into the things you will require

Step 1 — Choose a back-end Technology

There are several options when it comes to back-end. Some of the major ones are

1. Node.js custom back-end
2. 2. Firebase back-end (node.js)
3. 3. Django custom back-end
4. 4. Ruby-on-rails custom back-end
5. GO back-end

We recommend starting out with Firebase, if you want quick turn-around of features. Firebase is a BaaS platform and comes with a bunch of ready-made functionality, like

— Storage

— Analytics

— Push notifications

— In-app messages

— Real-time database and much more.

Step 2 — Connect the back-end to the app

As explained in the section above, you will need to replace the Data coming in form individual JSON files with the data coming in from APIs (from your back-end).

To manage the data efficiently, you will need to arrange all API calls, and data manipulation in a single location. You can manage API calls with HttpClient services orfirebase functions.

7.0 Troubleshooting

Refer this troubleshooting guide from Ionic framework docs to solve some common issues.

8.0 Third-party libraries, sources, and Credits

Major third-party libraries used in this app template are

• @angular/router: “7.2.2”,
• @ionic-native/core: “5.0.0”,
• @agm/core: “1.0.0-beta.5”,
• @angular/forms: “7.2.2”,
• @ionic-native/splash-screen: “5.0.0”,
• @ionic-native/status-bar: “5.0.0”,
• @ionic-native/social-sharing: “5.0.0-beta.23”,
• @ionic/angular: “4.6.0”,
• Cordova: “9.0.0”,
• core-js: “2.5.4”,
• rxjs: “~6.5.1”,
• tslint: “~5.17.0”,
• typescript: “~3.1.6”

All these are open-source libraries and the license & usage permission of the above are available on their respective URLs.

Assets images are used from unsplash.com. The usage of these images is free.

_doc_end_