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!

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!
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
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
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: —
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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: —
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.
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.
This page can be accessed from the userinfo page. By clicking on the location text it opens a modal to select your preferred location.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Setting Up Environment and Installing Dependencies
npm install -g ionic
ionic start myApp tabs/blank/sidemenu
whatever is your requirement you can select that and remove others from tabs/blank/sidemenu.
npm install @ionic/angular@latest --save
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
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
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
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 codeThe 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
style page are generated by default for each page after executing page generate command, inside the page folder.
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-
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.
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.
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.
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.
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.
You can implement the payments by using any one or multiple of the following for events or tickets booking..
— Ionic Apple Pay and Android Pay
— PhonePe
— GooglePay
— AmazonPay
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
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
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
— Analytics
— 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.
Refer this troubleshooting guide from Ionic framework docs to solve some common issues.
Major third-party libraries used in this app template are
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.
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! 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 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 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. 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. 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. 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. 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. 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. 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. 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. This page can be accessed by clicking on the show your ticket button in the booking confirmed page. This page can be accessed by clicking on the second segment in the home page. This page contains nested segment navigation for: — 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. 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. This is the third segment of the homepage. This page contains the filter options for the users for quick and desired searches. 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. This is the fourth segment of the homepage. This page contains the filter options for the users for quick and desired searches. 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 is the fifth segment of the homepage. This page contains the filter options for the users for quick and desired searches. This is the sixth segment of the homepage. This page contains the filter options for the users for quick and desired searches. 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 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 is the fourth tab of this application. 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. 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. This page can be accessed from the userinfo page. By clicking on the location text it opens a modal to select your preferred location. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Setting Up Environment and Installing Dependencies 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: # 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 For iOS build, follow the steps provided in the link here For the android build, execute the following command 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 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 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. 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 style page are generated by default for each page after executing page generate command, inside the page folder. On creating a project in ionic a file named app-routing.module.ts gets generated by default where all the navigation codes get done. In ionic, there are some navigation type as- 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. 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. 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 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. 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. 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. You can implement the payments by using any one or multiple of the following for events or tickets booking.. — Ionic Apple Pay and Android Pay — PhonePe — GooglePay — AmazonPay 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 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 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 — Analytics — 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. Refer this troubleshooting guide from Ionic framework docs to solve some common issues. Major third-party libraries used in this app template are 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.Ionic 4 Ticket Booking app starter — Evento
Table of Contents
1. Introduction — What is this template
2. Features of this template
2. 1. Screens
2.1.1 Home
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: — 2.1.2 Home — segment — All
2.1.3 Category item detail
2.1.4 Critics review
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
2.1.6 Book Ticket
2.1.7 Payment
2.1.8 Payment confirmation
2.1.9 Show your ticket
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
1. NOW SHOWING
2. COMING SOON
3. EXCLUSIVE
Each segment has specific contents.
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
2.1.11 Home — Segment— EVENTS
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
2.1.13 Home — Segment — Plays
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 navigates to the confirm and pay page.2.1.15 Home — Segment — Sports
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 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 page in this app here is only UI for demo purpose.2.1.18 Buzz
This page in this app here is only the UI for demo purpose.
2.1.19 Userinfo
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: — 2.1.20 Userinfo — Login
2.1.21 Userinfo — Signup
2.1.22 Userinfo — Location
2.1.23 Userinfo — Notification
2.1.24 Userinfo — Gift Cards
2.1.25 Userinfo — Jukebox Credits
2.1.26 Userinfo —Support
2.1.27 Userinfo — Settings
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.2.1.28 Userinfo — Edit profile
2.3 Device Compatibility
3. Setup and Installation
3.1 What is Ionic Framework
3.2 How can I use this template
3.3 Installation
npm install -g ionic
ionic start myApp tabs/blank/sidemenu
whatever is your requirement you can select that and remove others from tabs/blank/sidemenu.
npm install @ionic/angular@latest --save
node --version
$ npm --version
cd your app name
ionic serve
ionic cordova prepare android
ionic cordova run android
3.4 Creating Icon and Splash screen
ionic cordova platform add android
ionic cordova resources
ionic cordova build android4. Modifying code
4.1 Screen / View’s Code Structure
4.2 Overall Folder Structure
ionic cordova generate page your page name
├── 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 code4.3 Layout File Code Structure
4.4. Styling Code Structure
4.5. Navigation Code Structure
We use the pathname of a particular page to navigate from one page to another.Tab navigation
Nested Segment and Tab navigation
5. Feature Explanation
5.1. User Authentication
5.2. Adding events, plays recommended movies, plays, etc
ionic g service your service name
5.3 Images
5.4 Social Sharing
5.5 Payments
6. Integrating Back-end Data
6.1. Data Structure
this.ServiceProvider.cards
here, ServiceProvider is service name
cards is the JSON data in service
6.2 Back-end options
7.0 Troubleshooting
8.0 Third-party libraries, sources, and Credits
_doc_end_