TripEasy
An android Trip advising application with admin panel
by: W3 Engineers Ltd.
Email: info@w3engineers.com
At first thank you for purchasing this template. If you have any question or any problem
regarding
this template, feel free to Contact
us via
info@w3engineers.com.
1 - Introduction
TripEasy is built using native Java language in Android Studio. It’s an android Trip advising application.
It offers more than 15 screens and all are fully designed & functional. TripEasy offers all required features,
which can fulfill any modern application. It’s easy to customize. You can customize any screen as per your needs.
It follows all the standards to fulfill user’s requirements.
2 - Folder Structure
2.1Unzip the file.
2.2You see the following folders:
tripeasy-android (contain the android files)
tripeasy-admin (admin panel files)
db.sql (sql file)
server_Configuration_setup_process.mp4 (Tutorial Video)
3 - Requirements
Android Studio 3+
Android version 4.2+
PHP 7+
mysql database
We have made important steps yellow for up and running the project.
4 - Installation
4.1PHP version 7+ required(So update your Xampp control panel or install new
one).
4.2Database Setup
In order to setting up database , first you create a database “db_name”.
Then you can easily import the db.sql file in your server.
Link the database to admin panel
For linking up, first you will find the file from this directory:
Insert the db_name (if it is empty),
username, password.
4.3Installation on Locally
Make sure that you have already installed Xampp control panel.
Copy the admin-panel folder and paste it in your
Xampp's htdocs folder.
Now run your Xampp Control Panel.
Create a database. Database name will be
"db_name" or any other name
Import the db.sql file in your created database.(db.sql file is
located in the Main_files.)
Find your pc ip address.
Open Command Prompt and type => ipconfig
Then find the IPv4 address (example: 192.168.2.88),copy the address
Open your browser.In your browser url type:
http://your_ip_address/tripeasy-admin
For example, my pc ip address is: 192.168.2.88
So the url will be: http://192.168.2.88/tripeasy-admin
If you see the admin login page, then admin-panel work successfully.
Username: admin
Password: 123456
4.4Installation on Server
To install it on the live server, First import the databse to the server.
Then copy the project folder and paste
it to your live server folder.
Please give the writeable 777 permission
to the following folders and the subfolders inside them:
public\uploads
public\uploads\thumb
Login as Admin:
UserName: admin
Password: 123456
5 - Connect the android app to the admin panel
5.1Make sure that you have already installed Android Studio.
5.2Open Android Studio.
5.3Click on “open an existing Android Studio project.”
5.4Browse and select project.
5.5Select “Don’t remind me for this project” when gradle update
command will prompt.
5.6Connect the admin panel to the app
Open Data > Helper
Open com.w3e.core.tripeasy.data.helper.Constants.java
Replace MAIN_URL link with the link of the
admin panel.
5.7Changing API token
Open the setting page of the admin panel.
Copy the api token.
Open Data > Helper
Open com.w3e.core.tripeasy.data.helper.Constants.java
Paste the API_TOKEN value that copied form
admin panel.
Run Tripeasy in your android studio. If everything okay
then you will see the videos in your application.
6 - Customizing the App
6.1Rename Package.
Open Android Studio
6.1.1Change your Android Studio Settings to auto import
For Windows/Linux, you can go to File -> Settings -> Editor -> General -> Auto Import -> Java and make the following changes:
change Insert imports on paste value to All
mark Add unambigious imports on the fly option as checked
On a Mac, do the same thing in Android Studio -> Preferences
6.1.2Invalidate cache and restart your studio
6.1.3Create new package and move all directories
Select Java, then right click button and create a new package (e.g.: mypackage)
Select core and move to new package
Copy the new package name from your manifest and paste to google- service.json file
6.3Changing the App Name
To change Application name go to the
values > strings.xml file
Change the app_name item.
6.4Change App Color
Go to the values > colors.xml file
Change the colorPrimary, colorPrimaryDark,
colorAccent item values
7 - Login with Google
7.1Creating API Key
Open browser and go to google.com
Sign in with your Gmail
Go to
this link
Click On “ Configure A Project “
Enter a project name and click next
Select Android
Configure oath client id By giving Package
name and SHA-1 signingcertificate
To get the package name open the
AndroidManifest.xml and copy the package
7.1 - Getting the SHA-1 signing certificate
Open Android Studio
Open your Project
Click on Gradle (From Right Side Panel, you will see Gradle Bar)
Click on Refresh (Click on Refresh from Gradle Bar, you will seeList
Gradle scripts of your Project)
Click on Your Project (Your Project Name form List (root))
Click on Tasks
Click on Android
Double Click on signingReport
(You will get SHA1 and MD5 in RunBar(Sometimes it will be in Gradle Console))
Select app module from module
selection dropdown to run or debug your application
8 - Google Map Integration
Install the Google Play service SDK in your Android Studio
Go to Tools from the top bar, then select SDK Manager
Select Android SDK
Open SDK Tools
If Google repository is not install then selet it and hit apply button
In AndroidManifest.xml, add the elements inside the
Replace your API key for “google_app_api_key” in the value attribute
To get your API key, sign in with your Gmail
Go to
this link
From the project drop-down menu, select or create the project for which you want to add an API key
From the Navigation menu, select APIs & Services > Credentials
On the Credentials page, click Create credentials > API key
The API key created dialog displays your newly created API key. Copy this key
You need to enable following API’s
Add your google API key
Go your google developer account enable map and place API.
Then you will got API.
Go data package
Go helper package
Open the Constants.java file
See a string name API_KEY into the interface GoogleAPIKey
Please give your api key.
Now please go string.xml
See please see the google_app_api_key
Please give your API here also
9 - Sign in with Facebook
Log In to your Facebook account
Click this link
From drop-down menu, choose Add new App
Give a display name
Click Products and choose Facebook Login
Click on android
Click on the next
Click on the next
In the package name section add your project package name from manifest.
in the class name section add your LogInActivity.class package name
Click on save the button
Click on the red mark button
Place your generated hash key in the Key Hashes field. Hit the save button then contiue
Hit the next button.
In your android manifest, add the internet permission(its already added) then add the meta-data (its also added) . just place your api key.
To make the status like click on the toggle button and go to basic settings.(or you can go to basic setting manually from side menubar )
You will see a pop up where you have to select a category.
After selecting the category, click confirm.
Add a safe public url on that blank section and save it
Now u can see the status live.
Getting the hash key
Go to
this link
Click on the circle mark and download OpenSSL then extract the file.
Place it to any drive.
Run command prompt from where
your java sdk locate.(here is mine C:\Windows\System32\cmd.exe)
Copy the red mark text and paste to your cmd console
here in red mark 1 :
I paste the copy text avoid where in android debug key give your alias key
then in %HOMEPATH%\ give the path of your jks file
in openssl sha1 –binary, give the path of your openSSL file
2. In password ..put key password
Then in the red mark line this is your hash key.
10 - Admob Configuration
Note : Real admob adds will be shown only after the publication into the google play store.
10.1Login with your Email id
10.2Go to this link
10.3If its your first app tghen you have to select your country,
timezone and currency
10.4Then you have to agree of the terms and condition and
Create Admob Account
10.5Then you click Continue to Admob
10.6Then you click App and Create your first app
10.7If apps in play store then select yes otherwise no
10.8Then provide app information and click add
10.9Then you will get an App ID. Save it. You will need it later
10.10Then click on ‘ CREATE AD UNIT ’ and you will find three type of
ads.
10.11Select banner. Provide ad unit name and click on ‘ CREATE AD UNIT ‘
10.12Copy Banner ad unit id
and save it. You will need it later
10.13Then again go back and click ‘ ADD AD UNIT ’
10.14Select ‘ Interstitial ’ ad type.
10.15You will find a page like this. Provide ad unit name and select
‘ CREATE AD UNIT ’
10.16Copy ad unit id and save it . You will need it later .
10.17Now get saved Admob App ID, Banner Ad Unit ID.
Then go to Admin Panel click Admob from sidebar. Put App ID and Ad Unit ID
in the Banner Ad in the admin panel.
10.18Now get saved Admob App ID, Interstitial Ad Unit ID.
Then go to Admin Panel. Click Admob form sidebar. Put App ID and Ad Unit ID
in the Interstitial Ad in the admin panel.
10.19You can hide admob from the ap by clicking the on/off toggle button form the header.
11 - Configure firebase for push Notification
Go to firebase console and login to your google account.
Click on Add project
Provide a project name and hit on “Create Project”
Now click on “Android Icon” to configure project for android
Open “Android Manifest” and copy package name
Paste the package name in “Register App” field
Download the “google service.json” file
Copy google-service.json file
Go to your project
Select project
Browse TripEasy and replace the google-service.json file
Now sync your project again
Now Go to firebase console
Click Setting icon on project setting
Click Cloud Messaging and copy the server key
Paste the copied auth key in the auth key field in the admin panel.
12 - SMTP Server Config
12.1To send the confirmation email and forgot password functionality
you have to configure your SMTP server. To configure the SMTP server,
click the SMTP Configuration menu from sidebar
and change the credentials of the SMTP server.
Host
Sender Email
Username
Password
Port
Encryption
11.2Google SMTP Server Config
12.2.1Login to your Gmail account.
12.2.2Then visit the link:
https://myaccount.google.com/security
12.2.3In the security page, turn off the 2-step verification
12.2.4Turn on the less secure app access
12.2.4Also visit the link:
https://accounts.google.com/b/0/DisplayUnlockCaptcha
and enable it.
13 - Publishing the app in Playstore
13.1Prepare your app
Change the package name and app name.
Generate sign apk.
Configure AdMob according to your account settings
Change the app logo.
13.2Prepare resources
Prepare one logo with size 512px * 512 px
Take a minimum of 2 screenshots of your app
Generate feature graphics screen1024px * 512px
Reference link:
https://support.google.com/googleplay/android-developer/answer/1078870?hl=en
13.3Submit your app on play store
Sign in to your play store account with your credential.
Create an app.
Go to “App Release” section.
Fillup application short and long description, upload a high-resolution logo, app screenshots and feature graphics that was prepared earlier.
Also filling the privacy policy link and other required information.
Click on save and if all required field submitted properly then you will find a green check mark on app release.
Now go to “App releases” section and go to manage production release.
Upload you signed apk and leave a short note in “What's new in this release” section.
Save this section.
Now finish “Content Rating” and “Store Listing” section with proper instruction and back to “App release” section again.
Finally, review your app and submit for publication.
Reference link:
https://www.youtube.com/watch?v=udPWeFUZzdo
13.4App submission
After submission, you won’t find your application immidiately on playstore.
Play store team will review your app. And after review your application will be published on playstore.
Review time could max 48 hours.
13.5Note
Here are some important tips for your application that will reduce the possibility of application rejection by play store.
Do not forget to change the app name and package name.
Do not forget to change the application logo.
Try not to download image or icons directly from Google. And try to use copyright free resources.
User your own AdMob credentials and link your application with AdMob account.
Admin Panel
14 - Folder Structure of Admin Panel
14.1Inside the project folder, you will see the following directories that are important
to setup and customizing the admin panel.
14.2public directory: All the public files like outlook, uploaded images/videos, apis are inside this directory.
public\api : List of all apis.
public\common\php : Common files like header, footer, sidebar.
public\common\other : Custom Styte and Script file.
backend\plugin-frameworks: All the external style and javascript files.
backend\uploads: All the uploaded images.
14.3private directory: All the private files like models, controllers files are inside this directory.
private\controllers : All the controller files.
private\models : All the models.
private\vendor : External php scripts like phpmailer.
private\init.php : All the settings like database credential, uploaded folder name, item count for pagination.
Please make sure you have change the database credential in the
private/init.php file.
Please make sure you have set the writable 777 permission to the
public/uploads and public/uploads/thumb folder
15 - Functionality of Admin Panel
15.1Places
Admin is able to add/update/delete places form the admin panel.
To add place admin have to add a primary image for the place, title, latitude and longitude, description, address.
Admin is able to upload multiple images which will be shown as slider image in the app. Admin is able to make the place
as featured place. Also admin is able to hide the place from the app by making the place inactive form the
radio button form top right corner.
15.2Restaurants
Admin is able to add/delete/update restaurants.
To add restaurant admin have to add a primary image for the restaurant, title, latitude and longitude, restaurant category,
description, timing. Admin is able to upload multiple images of the restaurant which will be shown as slider image in the app.
Admin is able to add the food menus of the restaurant which will be shown in the details of the restaurant.
Also admin is able to hide the restaurant from the app by making the restaurant inactive the
radio button form top right corner.
15.3Restaurant Food menu
Admin is able to add the food menus of the
restaurant which will be shown in the details of the restaurant. Admin have to upload an image of the food.
Insert title, category of the food and insert the price and for how many people is that food.
15.4Hotels
Admin is able to add/delete/update hotels.
To add hotel admin have to add a primary image for the hotel, title, latitude and longitude, restaurant category,
description, timing. Admin is able to upload multiple images of the hotel which will be shown as slider image in the app.
Admin is able to add the hotel rooms of the hotel which will be shown in the details of the hotel.
Also admin is able to hide the hotel from the app by making the hotel inactive the
radio button form top right corner.
15.5Hotel Room
Admin is able to add the hotel room of the
hotel which will be shown in the details of the hotel. Admin have to upload an image of the room.
Insert title, category of the room and insert the price and for how many people is that hotel.
15.6Uploaded image
Admin is able to view/delete all the uploaded image
form the app.
15.7Registered users
Admin is able to view/delete all the
registered users form Registered users menu.
15.8Google Admob
Admin can configure admob credentials from admin panel.
Also admin can on/off admin from the on/off button in the admob page.
15.9Push Notification
Admin can send push notification from the admin panel.
First, Admin have to put the AuthKey in the AuthKey field. Then create a notification
by inserting title and description. To send the notification admin have to send the notify button.
Note : Please follow the steps we described in
11 - Configure firebase for push Notification to configure push notification
14.7Configuration
In the configuration page, admin will be able to change the icon, site title
and site tag line in the Site Configuration form .
Also, admin will be able to configure the smtp server
credentials for the user registration process from the app.
14.8Setting
From the setting page, Admin will be able to change the api key,
which used in the app.
Also, Admin will be able to change
the currency name and currency font for restaurant food item price and hotel rent.