With this starter kit, you can build a full working cab booking and sharing application to provide services to the people at an extremely convenient way, only by integrating with a back-end server with the help of a good back-end developer. Now let set go to get to know about this starter kit in detail here.
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 rides, booking rides, History, etc
5.3 Recommendations
5.4 Geolocation and Map
5.5 Google Place Prediction
5.6 Chat Support
5.7 Camera
6. Integrating Back-end Data
6.1 Data structure
6.2 Back-end options
7. Troubleshooting
8. Third-party libraries, sources, and Credits
Carpool— An Ionic 4 Carpool and Ride-Sharing App Template is a mobile app theme/template. With this template, you can create a Carpool and Ride-Sharing apps like BlaBla Car, UberPool, ToGo, ber Eats, and Ola Share, etc.
This template is the front-end part of the carpool 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 BlaBla Car, UberPool, ToGo, ber Eats, and Ola Share, 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
You will get this screen as the app loads successfully after the splash screen timeout. Here you are provided with two options on this screen one is log in and another one is signup. If a user already exists then he/she may opt for login or if he/she has no account on this application then the user will have to create an account by clicking on the signup button.
This page navigates you to the login page and signup page. Here this page only UI for demo purpose but you can make it a fully working application by integrating backend to it with the help of a good backend developer.
This page can be accessed from the Landing page as the app loads. By clicking on the login button after the required entries in the input field it redirects you to the home 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 “Forgot Password” and “Signup” page navigations.
This page can be accessed as the app loads. By clicking on the signup button it redirects you to the Home 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 “Login” page. Forgot Password page can be used to send a reset password URL or OTP to the user’s email or any other way you want to use. Currently, this page is only UI. The email sent to the user can be verified from their mail and the user may be asked to provide a new password.
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 two segments “CURRENT ” and “HISTORY” at the top of the page after the header. The current segment has options to OFFER A RIDE and FIND A RIDE options for a user.
The history segment has the details of all the rides taken in the past.
By clicking on any one options in the current segment, it will navigate to the Offer a ride page or Find a ride page.
This is the first tab’s second segment of the application. This page can be accessed by clicking on the second segment “History” in the application.
this page contains all the information about previous rides.
This page can be accessed by clicking on offer a ride button on the home page. Here you can search for a pickup location of your choice or bu clicking on use current location to access your current location with the help of Ionic geolocation plugin.
This page navigates you to your pickup location’s view on the pickup map page.
This page can be accessed by clicking on any of the locations in pickup page.
This page depicts the exact pick-up location on the map. This page navigates to the drop-off page.
This page can be accessed by clicking on the arrow forward button on the pick-up-map page. Here you can select your drop location same as the pickup location. This page navigates to drop-off map view page.
This page can be accessed by clicking on any of the locations in drop-off page.
This page depicts the exact drop location on the map. This page navigates to the add stopover page.
This page can be accessed by clicking on the arrow forward button on the drop-off-map page. Here you can select your stopover in-between the journey. This page navigates to map view page of your complete ride.
This page can be accessed by clicking on the confirm button on the Add Stopover page. This page shows the map view of the journey.
This page navigates to the calendar page.
This page can be accessed by clicking on the Good for me button on the journey map view after the stopover selection. Here we can select the date of departure for your ride.
This page navigates you to the Select Time page.
This page can be accessed by clicking on the arrow-forward button on the select date page. Here we can select the time of departure for the ride.
This page navigates to the comfort page.
This page can be accessed after the pickup time selection. this page navigates you to the total no of carpool passenger’s page.
This page can be accessed after comfort page by clicking on any button on that page. Here you can select the total number of passengers that you can take with you for the ride.
This page navigates you to the permission page to verify either passenger booking instantly or not ?.
This page can be accessed after total passengers page by clicking on the arrow-forward button at the right end of the page.
This page navigates you to the recommended price per se seat page.
This page can be accessed after the permission page.
This page navigates to the don’t agree or confirmation price page.
This page can be accessed after the recommended price page. This page navigates to the edit price page.
This page can be accessed from the don’t agree page. Here you can edit the price of the journey. This page navigates you to the return trip page.
This page can be accessed from the edit price page. This page navigates to the return journey plan Calender.
This page can be accessed from the return trip plan confirmation page. Here you can select the return date of the journey. This page navigates to the return time page.
This page can be accessed by clicking on the arrow-forward button on the select return date page. Here we can select the return time of pick for the ride.
This page navigates to message for the passenger's page.
This page can be accessed after the return time page. Here on this page, the user can add some messages or instructions about his/her ride. This page navigates to the ride confirmation page.
This page can be accessed after complete ride information. This page navigates to the Home page current segment.
This page can be accessed after filling and selecting all the details from the “OFFER A RIDE” to “RIDE CONFIRMATION”. This page contains the navigation to journey and stops page.
This page can be accessed by clicking on the card in the home page.
This page navigates to:-
1. Journey & Stops
2. Passenger contribution
3. Passenger Options
4: Delete Offered Journey
This page can be accessed from the Journey & Stops. this page contains the details of the offered journey.
This page can be accessed from the Journey & Stops. This page contains the details of the price offered for the journey. Here you can edit the price and save that.
This page can be accessed from the Journey & Stops. This page contains the details of the passengers offered for the journey. Here you can edit the number of passengers and message for the passengers and save that.
This page can be accessed from the Journey & stops page by clicking on the delete button at the bottom of the page. This page navigates to the first tab’s first segment.
This is the second tab of the application. This page navigates to the: —
This page can be accessed by clicking on the Pickup location in the second tab of the application. In this page, we can select the pickup location of our’s using google place prediction.
This page navigates back to find a ride page.
This page can be accessed by clicking on the Destination location in the second tab of the application. In this page, we can select the destination location of our’s with the help google place prediction.
This page navigates back to find a ride page.
These pages can be accessed by clicking on the Date and Time button on the Find a ride page to select the date and time for the ride. This page navigates back to find a ride page. In find ride page after selecting all the information this page navigates to the available rides page by clicking on the search.
This page can be accessed by clicking on the search on the second tabs of the application after filling/ selecting all the required details of the ride. By selecting any ride it navigates to the ride details page.
This page can be accessed by clicking on any card in the available rides page. The page contains detailed information about the available ride.
this page navigates to the total riding passenger's page.
This page can be accessed by clicking on the “CONTINUE” at the bottom of the available ride details page.
This page navigates to the “Book” page.
this page can be accessed from the total passenger's count by clicking on the arrow-forward button at the bottom right most of the page.
This page navigates to the “Booking confirmation” page.
These pages can be accessed from the “Book ride” page. This page processes the progress for booking confirmation.
This page navigates to the ride booked confirmation page.
This is the last page of the find a ride flow. This page navigates back to the find ride page after successful ride booking.
This is the fourth tab of this application. This page contains the nesting of tabs and segments. This page has two segments at the top of the page below the header as “MESSAGES” and “NOTIFICATION”.This is the first segment of the inbox tabs.
This page navigates to the Chat page.
This page can be accessed by clicking on any chat contact in the “MESSAGES” segment.
Messages page contains the chat application for direct interaction to the carpool customer service. Here chat is only UI and for demo purpose.
This is the second segment of the inbox tabs. This page contains the notification as list items in the vertical direction of the page. 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.
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 notification here.
This is the fifth tab and the first segment of this application. This page contains the nesting of tabs and segments. This page has two segments at the top of the page below the header as “DETAILS” and “ACCOUNTS”. This is the first segment of the profile tabs. This segment has a list of actions in vertical direction. All the action executes as…
This page can be accessed from the “Profile” page.
The options available can be chosen to edit user name, email address, update password, address, contact, Gender, DOB, Bio, and etc as per your requirement and update all those. Back button takes you back to the “Profile” page.
This page can be accessed from the “Profile” page by clicking on the “Add my preferences”. Here you can edit your preferences and update that. The save preferences button will update your data in the database and navigate back to the profile tab. Here this is only UI for demo purpose.
This page can be accessed from the “Profile” page by clicking on the Verify my id”. This page will navigate to update document details.
This page can be accessed from the “Verify my id” page by clicking on the “Driving License”. This page will navigate to the camera.
Here this is only UI and for demo purpose. You can make it in a fully functioning app by integrating back-end with the help of a back-end developer.
This page can be accessed from the “Profile” page first segment. Verify mobile numbers page can be used to authenticate a user to check a user is registered or not. After entering the registered mobile number it navigates the user to the OTP verification page which a user receives after entering his/her mobile number.
Here these two pages are only UI and for demo purpose.
This page can be accessed after entering the phone number in with phone number page. In this page, received OTP on user’s mobile gets verified for letting the user to access the home page. On clicking “CONTINUE” it navigates back to the apps profile tab.
This page here is only the UI but you can make it a fully working app by integrating a suitable backend by a developer.
This page can be accessed by clicking on the verify email in the profile page.
Here you can control the emails you want to get either all of them, just the important stuff or the bare minimum. Here you have the options to enable and disable email 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 notification here.
Here this is only the UI for demo purpose.
This page can be accessed by clicking on the Add a car in the profile page.
This page navigates to the add new vehicle page.
This page can be accessed by clicking on the Add button at the very bottom in the Add a car page of the profile page. Here the items are listed in a list view in the vertical direction. Each item contains a dropdown menu to select the matching item from them.
By clicking on the “COMPLETE” button it will navigate back to the add car page.
This can be accessed by clicking on the pickup page or drop-off page on the find ride page. This allows the app to get your current location by clicking on the current location button.
Google map shows us the current location of the app by clicking on the current location or by filling the input field in the pickup or drop location. This shows us the exact point of our location on the map.
As mentioned earlier in the geolocation, by filling the input text in the set pickup page or drop-off page, this will show you some predicted locations according to your filled entries in the text input field. By selecting any predicted location it will store that location and show that on Find a ride pages' pickup and destination location individually.
Chat support provides us the facility to interact with the customer service provider directly. We can ask our queries and get a solution from their side. This provides us the real-time solution of our related queries.
Here in the app, this is only the UI for demo purpose but you can make it in fully functioning real-time chat support by integrating back-end which I mentioned earlier, with the help of any back-end developer.
By using ionic native camera plugin we get the facility to take a picture and save that as a profile picture, we may save that on the server and retrieve that any time as per requirement. We can you back-end for this or we may use ionic native Squalite storage or ionic storage to store data locally and retrieve that when there is no back-end. Or we can pick a picture from the gallery to make that our profile picture. You can follow this link to pick a picture from the gallery with the help of ionic native camera plugin.
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.
Carpool is a carpooling and ride-sharing 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 a carpooling and ride-sharing 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 ionicionic start myApp tabs/blank/sidemenuwhatever is your requirement you can select that and remove others from tabs/blank/sidemenu.npm install @ionic/angular@latest --saveAlmost 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 serveFor 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 40+ 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 nameThis 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.tsenappd.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 History— we see many past rides by the riders.
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.
This is the central component of the carpool app. This template has this feature — for getting users current location or allowing the user to feed his/her location and showing that on map.
The app uses ionic @ionic-native/geolocation plugin for geolocation and @agm/core npm package for map view.
Geolocation for Cordova applications. Display the ‘current location’ of the user or device at the current time.
The AGM core package provides the ability to open and show location on the map and drag the location for location adjustment in the map.
Providing Camera features is where you can change your profile picture using your app.
This template does have a Camera feature functionality but only UI.
You can change your app’s profile pictures by taking a picture and select any picture from the gallery using this plugin and save and retrieve this on a server after integrating it with proper back-end.
The app uses “ionic Cordova plugin add cordova-plugin-camera” plugin for camera and gallery.
You can have a payment page like above for the payments of the rides with the help of some developer. You can implement the payments by using any one or multiple of the following for your rides…
— 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 carpool 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 the 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.
With this starter kit, you can build a full working cab booking and sharing application to provide services to the people at an extremely convenient way, only by integrating with a back-end server with the help of a good back-end developer. Now let set go to get to know about this starter kit in detail here. 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 rides, booking rides, History, etc 5.3 Recommendations 5.4 Geolocation and Map 5.5 Google Place Prediction 5.6 Chat Support 5.7 Camera 6. Integrating Back-end Data 6.1 Data structure 6.2 Back-end options 7. Troubleshooting 8. Third-party libraries, sources, and Credits Carpool— An Ionic 4 Carpool and Ride-Sharing App Template is a mobile app theme/template. With this template, you can create a Carpool and Ride-Sharing apps like BlaBla Car, UberPool, ToGo, ber Eats, and Ola Share, etc. This template is the front-end part of the carpool 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 BlaBla Car, UberPool, ToGo, ber Eats, and Ola Share, 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 You will get this screen as the app loads successfully after the splash screen timeout. Here you are provided with two options on this screen one is log in and another one is signup. If a user already exists then he/she may opt for login or if he/she has no account on this application then the user will have to create an account by clicking on the signup button. This page can be accessed from the Landing page as the app loads. By clicking on the login button after the required entries in the input field it redirects you to the home 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 “Forgot Password” and “Signup” page navigations. This page can be accessed as the app loads. By clicking on the signup button it redirects you to the Home 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 “Login” page. Forgot Password page can be used to send a reset password URL or OTP to the user’s email or any other way you want to use. Currently, this page is only UI. The email sent to the user can be verified from their mail and the user may be asked to provide a new password. 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 two segments “CURRENT ” and “HISTORY” at the top of the page after the header. The current segment has options to OFFER A RIDE and FIND A RIDE options for a user. By clicking on any one options in the current segment, it will navigate to the Offer a ride page or Find a ride page. This is the first tab’s second segment of the application. This page can be accessed by clicking on the second segment “History” in the application. this page contains all the information about previous rides. This page can be accessed by clicking on offer a ride button on the home page. Here you can search for a pickup location of your choice or bu clicking on use current location to access your current location with the help of Ionic geolocation plugin. This page can be accessed by clicking on any of the locations in pickup page. This page depicts the exact pick-up location on the map. This page navigates to the drop-off page. This page can be accessed by clicking on the arrow forward button on the pick-up-map page. Here you can select your drop location same as the pickup location. This page navigates to drop-off map view page. This page can be accessed by clicking on any of the locations in drop-off page. This page depicts the exact drop location on the map. This page navigates to the add stopover page. This page can be accessed by clicking on the arrow forward button on the drop-off-map page. Here you can select your stopover in-between the journey. This page navigates to map view page of your complete ride. This page can be accessed by clicking on the confirm button on the Add Stopover page. This page shows the map view of the journey. This page can be accessed by clicking on the Good for me button on the journey map view after the stopover selection. Here we can select the date of departure for your ride. This page can be accessed by clicking on the arrow-forward button on the select date page. Here we can select the time of departure for the ride. This page can be accessed after the pickup time selection. this page navigates you to the total no of carpool passenger’s page. This page can be accessed after comfort page by clicking on any button on that page. Here you can select the total number of passengers that you can take with you for the ride. This page can be accessed after total passengers page by clicking on the arrow-forward button at the right end of the page. This page can be accessed after the permission page. This page can be accessed after the recommended price page. This page navigates to the edit price page. This page can be accessed from the don’t agree page. Here you can edit the price of the journey. This page navigates you to the return trip page. This page can be accessed from the edit price page. This page navigates to the return journey plan Calender. This page can be accessed from the return trip plan confirmation page. Here you can select the return date of the journey. This page navigates to the return time page. This page can be accessed by clicking on the arrow-forward button on the select return date page. Here we can select the return time of pick for the ride. This page can be accessed after the return time page. Here on this page, the user can add some messages or instructions about his/her ride. This page navigates to the ride confirmation page. This page can be accessed after complete ride information. This page navigates to the Home page current segment. This page can be accessed after filling and selecting all the details from the “OFFER A RIDE” to “RIDE CONFIRMATION”. This page contains the navigation to journey and stops page. This page can be accessed by clicking on the card in the home page. This page can be accessed from the Journey & Stops. this page contains the details of the offered journey. This page can be accessed from the Journey & Stops. This page contains the details of the price offered for the journey. Here you can edit the price and save that. This page can be accessed from the Journey & Stops. This page contains the details of the passengers offered for the journey. Here you can edit the number of passengers and message for the passengers and save that. This page can be accessed from the Journey & stops page by clicking on the delete button at the bottom of the page. This page navigates to the first tab’s first segment. This is the second tab of the application. This page navigates to the: — This page can be accessed by clicking on the Pickup location in the second tab of the application. In this page, we can select the pickup location of our’s using google place prediction. This page can be accessed by clicking on the Destination location in the second tab of the application. In this page, we can select the destination location of our’s with the help google place prediction. These pages can be accessed by clicking on the Date and Time button on the Find a ride page to select the date and time for the ride. This page navigates back to find a ride page. In find ride page after selecting all the information this page navigates to the available rides page by clicking on the search. This page can be accessed by clicking on the search on the second tabs of the application after filling/ selecting all the required details of the ride. By selecting any ride it navigates to the ride details page. This page can be accessed by clicking on any card in the available rides page. The page contains detailed information about the available ride. this page navigates to the total riding passenger's page. This page can be accessed by clicking on the “CONTINUE” at the bottom of the available ride details page. this page can be accessed from the total passenger's count by clicking on the arrow-forward button at the bottom right most of the page. This page navigates to the “Booking confirmation” page. These pages can be accessed from the “Book ride” page. This page processes the progress for booking confirmation. This is the last page of the find a ride flow. This page navigates back to the find ride page after successful ride booking. This is the fourth tab of this application. This page contains the nesting of tabs and segments. This page has two segments at the top of the page below the header as “MESSAGES” and “NOTIFICATION”.This is the first segment of the inbox tabs. This page can be accessed by clicking on any chat contact in the “MESSAGES” segment. Messages page contains the chat application for direct interaction to the carpool customer service. Here chat is only UI and for demo purpose. This is the second segment of the inbox tabs. This page contains the notification as list items in the vertical direction of the page. 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. 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 notification here. This is the fifth tab and the first segment of this application. This page contains the nesting of tabs and segments. This page has two segments at the top of the page below the header as “DETAILS” and “ACCOUNTS”. This is the first segment of the profile tabs. This segment has a list of actions in vertical direction. All the action executes as… This page can be accessed from the “Profile” page. The options available can be chosen to edit user name, email address, update password, address, contact, Gender, DOB, Bio, and etc as per your requirement and update all those. Back button takes you back to the “Profile” page. This page can be accessed from the “Profile” page by clicking on the “Add my preferences”. Here you can edit your preferences and update that. The save preferences button will update your data in the database and navigate back to the profile tab. Here this is only UI for demo purpose. This page can be accessed from the “Profile” page by clicking on the Verify my id”. This page will navigate to update document details. This page can be accessed from the “Verify my id” page by clicking on the “Driving License”. This page will navigate to the camera. Here this is only UI and for demo purpose. You can make it in a fully functioning app by integrating back-end with the help of a back-end developer. This page can be accessed from the “Profile” page first segment. Verify mobile numbers page can be used to authenticate a user to check a user is registered or not. After entering the registered mobile number it navigates the user to the OTP verification page which a user receives after entering his/her mobile number. Here these two pages are only UI and for demo purpose. This page can be accessed after entering the phone number in with phone number page. In this page, received OTP on user’s mobile gets verified for letting the user to access the home page. On clicking “CONTINUE” it navigates back to the apps profile tab. This page can be accessed by clicking on the verify email in the profile page. 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 notification here. This page can be accessed by clicking on the Add a car in the profile page. This page can be accessed by clicking on the Add button at the very bottom in the Add a car page of the profile page. Here the items are listed in a list view in the vertical direction. Each item contains a dropdown menu to select the matching item from them. This can be accessed by clicking on the pickup page or drop-off page on the find ride page. This allows the app to get your current location by clicking on the current location button. Google map shows us the current location of the app by clicking on the current location or by filling the input field in the pickup or drop location. This shows us the exact point of our location on the map. As mentioned earlier in the geolocation, by filling the input text in the set pickup page or drop-off page, this will show you some predicted locations according to your filled entries in the text input field. By selecting any predicted location it will store that location and show that on Find a ride pages' pickup and destination location individually. Chat support provides us the facility to interact with the customer service provider directly. We can ask our queries and get a solution from their side. This provides us the real-time solution of our related queries. By using ionic native camera plugin we get the facility to take a picture and save that as a profile picture, we may save that on the server and retrieve that any time as per requirement. We can you back-end for this or we may use ionic native Squalite storage or ionic storage to store data locally and retrieve that when there is no back-end. Or we can pick a picture from the gallery to make that our profile picture. You can follow this link to pick a picture from the gallery with the help of ionic native camera plugin. 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. Carpool is a carpooling and ride-sharing 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 a carpooling and ride-sharing 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 40+ 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 History— we see many past rides by the riders. 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. This is the central component of the carpool app. This template has this feature — for getting users current location or allowing the user to feed his/her location and showing that on map. The app uses ionic @ionic-native/geolocation plugin for geolocation and @agm/core npm package for map view. Geolocation for Cordova applications. Display the ‘current location’ of the user or device at the current time. The AGM core package provides the ability to open and show location on the map and drag the location for location adjustment in the map. Providing Camera features is where you can change your profile picture using your app. This template does have a Camera feature functionality but only UI. You can change your app’s profile pictures by taking a picture and select any picture from the gallery using this plugin and save and retrieve this on a server after integrating it with proper back-end. The app uses “ionic Cordova plugin add cordova-plugin-camera” plugin for camera and gallery. You can have a payment page like above for the payments of the rides with the help of some developer. You can implement the payments by using any one or multiple of the following for your rides… — 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 carpool 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 the 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 Car Pooling App Starter — Carpool
Table of Contents
1. Introduction — What is this template
2. Features of this template
2. 1. Screens
2.1.1 Landing
This page navigates you to the login page and signup page. Here this page only UI for demo purpose but you can make it a fully working application by integrating backend to it with the help of a good backend developer.2.1.2 Login
2.1.3 Signup
2.1.4 Forgot Password
2.1.5 Home
The history segment has the details of all the rides taken in the past.2.1.6 History
2.1.7 Offer Ride — Pick-up
This page navigates you to your pickup location’s view on the pickup map page.2.1.8 Offer Ride — Pick-up — Map
2.1.9 Offer Ride —Drop-off
2.1.10 Offer Ride —Drop-off— Map
2.1.11 Add Stopover
2.1.12 Add Stopover — Complete journey on the map.
This page navigates to the calendar page.2.1.13 Calender page
This page navigates you to the Select Time page.2.1.14 Select time page
This page navigates to the comfort page.2.1.15 Comfort page
2.1.16 Total passengers
This page navigates you to the permission page to verify either passenger booking instantly or not ?.2.1.17 Permission to book by Passengers instantly
This page navigates you to the recommended price per se seat page.2.1.18 Recommended price per seat
This page navigates to the don’t agree or confirmation price page.2.1.19 Don’t Agree Page
2.1.20 Edit Price
2.1.21 Return Trip Plan
2.1.22 Return Trip Plan date selector
2.1.23 Select return time
This page navigates to message for the passenger's page.2.1.24 Message for the passengers
2.1.25 Offer Ride Confirmation
2.1.26 Home Page — Current segment — offered rides
2.1.27 Home Page — Current segment — offered rides — Journey and Stops
This page navigates to:-
1. Journey & Stops
2. Passenger contribution
3. Passenger Options
4: Delete Offered Journey2.1.28 Offered Rides — Journey and Stops — Journey & stops details
2.1.29 Offered Rides — Journey and Stops —Passenger contribution
2.1.30 Offered Rides — Journey and Stops — Passenger options
2.1.31 Offered Rides — Journey and Stops — Delete Offered Journey
2.1.32 Find a ride
2.1.33 Find a ride — Pickup Location
This page navigates back to find a ride page.2.1.34 Find a ride — Destination Location
This page navigates back to find a ride page.2.1.35 Find a ride — Date and Time
2.1.36 Find a ride — Available rides
2.1.37 Find a ride — Available rides details
2.1.38 Find a ride — Total passengers count
This page navigates to the “Book” page.2.1.39 Find a ride — Book ride page
2.1.40 Find a ride — Booking confirmation
This page navigates to the ride booked confirmation page.2.1.41 Find a ride — Ride Booked
2.1.42 Inbox
This page navigates to the Chat page.2.1.43 Inbox — Messages-Chat
2.1.44 Inbox — Notification
2.1.45 Profile
2.1.46 Profile — Mini Biography
2.1.47 Profile — Add my preferences
2.1.48 Profile —Verify my id
2.1.49 Profile — Update Document
2.1.50 Profile —Verify mobile number
2.1.51 Profile — OTP Verification
This page here is only the UI but you can make it a fully working app by integrating a suitable backend by a developer.2.1.52 Profile — Verify email
Here you can control the emails you want to get either all of them, just the important stuff or the bare minimum. Here you have the options to enable and disable email notifications.
Here this is only the UI for demo purpose.2.1.53 Profile — Add a car
This page navigates to the add new vehicle page.2.1.54 Profile — Add a car — Add new vehicle
By clicking on the “COMPLETE” button it will navigate back to the add car page. 2.2 Features
2.2.1 Geolocation
2.2.2 Google Map
2.2.3 Google Place Prediction
2.2.4 Chat Support
Here in the app, this is only the UI for demo purpose but you can make it in fully functioning real-time chat support by integrating back-end which I mentioned earlier, with the help of any back-end developer.2.2.5 Camera
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 ionicionic start myApp tabs/blank/sidemenuwhatever is your requirement you can select that and remove others from tabs/blank/sidemenu.npm install @ionic/angular@latest --savenode --version
$ npm --versioncd your app name
ionic serveionic cordova prepare android
ionic cordova run android3.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.tsenappd.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 rides, booking rides, History, etc
ionic g service your service name5.3 Images
5.4. Geolocation and Map
5.5. Camera
5.6 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_TitleSubtitleKicker
