Bootic - An Android Ecommerce App

by: W3 Engineers Ltd.

Email: info@w3engineers.com

At first thank you for purchasing this item. If you have any question or any problem regarding this item, feel free to Contact us via info@w3engineers.com.

1 - Introduction

Bootic is built with native Java in Android Studio. It’s a android ecommerce app UI template. It offers more than 17 pages and all are fully designed & keeping in mind to fit for any product types. Bootic offers all required features, that can fulfill any modern application. It’s easy to customize, You can use it as any type of store like Fashion, Electronics, Grocery and Restaurant. You can customize any page as per your needs. It follows all the standards to fulfill customer’s requirements.

2 - Folder Structure

2.1Unzip the file.

2.2You see the following folders:

bootic (contain the android files)

bootic-admin (admin panel files)

bootic.sql (sql file)

2.3Open the bootic-admin folder:

bootic-admin

public

json (All the apis are located inside this folder).

private

db_credentials.php (For database connection).

functions.php (All the functions are in this file).

query_functions.php (All the queries are in this file).

3 - Installation

3.1Make sure that you have already installed Xampp control panel.

3.2PHP version 7+ required(So update your Xampp control panel or install new one).

3.3Make sure that you have already installed Android Studio.

3.4Copy the bootic-admin folder and paste it in your Xampp's htdocs folder.

3.5Now run your Xampp Control Panel.

3.6Create a database. Database name will be "bootic"

3.7Import the bootic.sql file in your created database. (bootic.sql file is located in the Main_files.)

3.8Find your pc ip address.

3.8.1Open Command Promt and type=> ipconfig

3.8.2Then find the IPv4 address (example: 192.168.1.75),copy the address

3.9Open your browser.In your browser url type:

http://your_ip_address/bootic-admin/public/

For example, my pc ip address is: 192.168.1.75

So the url will be: http://192.168.1.75/bootic-admin/public/

3.10If you see the admin login page, then admin-panel work successfully.

3.11Login as Admin:

UserName: admin@admin.com

Password: 12345678

4 - Connect the android app to the admin panel

4.1Open Android Studio.

4.2Open existing Android Studio project by using one of below methods:

4.3Open the bootic folder in android studio that contains android files.

4.4Then open the Constants.java class which is located in the Util package

4.5Find the String of SERVER_PATH and edit the link as below:

public static final String SERVER_PATH "http://192.168.1.75/bootic-admin/public/";

public static final String PATH_TO_SERVER = SERVER_PATH + "braintree_payment.php";

public static final String PRODUCT_GRID_URL = SERVER_PATH + "json/recent_products.php";

public static final String RECENT_PRODUCT_IMAGE_URL = SERVER_PATH + "uploads/recent-products/";

4.6Run bootic in your android studio. If everything okay then you will see the products from your admin panel.

http://your_ip_address/bootic-admin/public/

5 - Customizing the App

5.1 - Rename Package.

5.1.1In your Project pane, click on the little gear icon ( Gears icon )

5.1.2Uncheck / De-select the Compact Empty Middle Packages option

5.1.3Your package directory will now be broken up in individual directories

5.1.4Individually select each directory you want to rename, and:

Right-click it

Select Refactor

Click on Rename

In the Pop-up dialog, click on Rename Package

Enter the new name and hit Refactor

Click Do Refactor in the bottom

Allow a minute to let Android Studio update all changes

Note: When renaming com in Android Studio, it might give a warning. In such case, select Rename All

5.1.5Now open your Gradle Build File (build.gradle - Usually app or mobile). Update the applicationId to your new Package Name and Sync Gradle, if it hasn't already been updated automatically:

5.1.6You may need to change the package= attribute in your manifest.

5.1.7Clean and Rebuild.

5.1.8Done! Anyways, Android Studio needs to make this process a little simpler.

5.2 - Change App Logo.

5.2.1Name yor logo ic_launcher.png.

5.2.2Make your app logo for different size of screens. There are plenty of online tools which will help you to convert your logo for different sizes of screen. My recommendation would be Android Asset Studio.

5.2.3Replace those logos in the mipmap folder of your android studio project.

If you find any difficulties, please follow this Youtube Video

5.3 - Change App Name

5.3.1For changing app name go to the values > strings.xml file

5.3.2And change the app_name.

5.4 - Change App Color

5.4.1For changing app name go to the values > colors.xml file

5.4.2And change the colorPrimary, colorPrimaryDark, colorAccent.

5.5 - Change Toolbar Icon

5.5.1Name yor logo bootic_logo.png.

5.5.2Make your app logo for different size of screens. There are plenty of online tools which will help you to convert your logo for different sizes of screen. My recommendation would be Android Asset Studio.

5.5.3Replace those logos in the drawbale folder of your android studio project.

6 - Connect to Firebase to send push notification

6.1Go to the Firebase console page. visit the link

6.2Then add a project

6.3Then choose a project name and your country

6.4click Add Firebase to your Android app

6.5paste your app package name and signing certificate

6.6To get the package name open the AndroidManifest.xml and copy the package

6.7 - Getting the signing certificate

6.7.1Open Android Studio.

6.7.2Open your Project.

6.7.3Click on Gradle (From Right Side Panel, you will see Gradle Bar).

6.7.4Click on Refresh (Click on Refresh from Gradle Bar, you will see List Gradle scripts of your Project).

6.7.5Click on Your Project (Your Project Name form List (root)).

6.7.6Click on Tasks.

6.7.7Click on Android.

6.7.8Double Click on signingReport (You will get SHA1 and MD5 in Run Bar(Sometimes it will be in Gradle Console)).

6.7.9Select app module from module selection dropdown to run or debug your application.

6.8Download google-service.json and paste it to the root of the android studio project

For more details check this youtube video

6.9 - Get the Authorization key

6.9.1click the settings icon/cog wheel next to your project name at the top of the new Firebase Console

6.9.2Click Project settings

6.9.3Click on the Cloud Messaging tab

6.9.4The key is right under Server Key

6.10 - Set Authorization to php

6.10.1To set authorization to php code :

6.10.2go to bootic-admin/private/send_push_noti.php

6.10.3go to line 16 and change aurization key.

7 - Login with Google

7.1 If you generated google-services.json from the previous step, then you dont have to add anything new.

8 - Login with Facebook

8.1 Login to your facebook account.

8.2 Then Click this link.

8.3 Click My Apps.

8.4 Click Add new app.

8.5 To create a new app give a display name and email.

8.6 Then click basic from the setting menu on the right.

8.8 Paste your privacy policy url.

8.9 Choose a category.

8.10 Then scroll to the bottom of the page and click + Add Platform.

8.11 Select Android.

8.12 Paste your package name.

8.13 Paste your class name.

8.14 Paste your key hashes.(Describen below)

8.15 click Save changes.

8.16 After adding the app go to app reviews and click ON toggle button.

8.17 At alst copy the App Id.

8.18 Open strings.xml file from values folder.

8.19 Go to line 14 and paste the app id

8.20 Also change the fb_login_protocol_scheme by prepend fb before the app id

8.14.1 - Getting KeyHashes

8.14To get the key hashes open the LoginaActivity.java

8.14Go to line 109 and remove comment indicator and run the app

8.14Then browse to the login screen

8.14Go to android studio click Logcat from the bottom

8.14And paste FBKeyHash

8.14Select Debug from the drop downlist you will found a keyhash

8.14Copy the hash and paste it to the Facebook app setting page

9 - Customizing Currency

9.1To change the currency in admin panel :

Open private > functions.php

Go to line 22 and change the currency

9.1To change the currency in android app:

Open main > MainActivity.java

Go to line 199 and change the currency

10 - Customizing Braintree Credential

10.1You need a PayPal account.

10.2Login PayPal and go to the link:

developer.paypal.com/developer/applications

10.3Create a Sandbox account as Business type.

10.4Click My Apps & Credentials.

10.5Click the Create App button

10.6Write the App name here and select the sandbox account and then create app.

10.7My app name was PaypalPaymentss. So when you create your app then display your app name here. Just click your created app.

10.8From the following picture collects your Sandbox account, Client Id and Secret.

10.9Create a Braintree Sandbox account and then login.

Visit the link Braintree sandbox login

After login to your account then go to the setting, then click Processing then find a option PayPal and enables it.

10.10When you enable PayPal then put your information in it just like in Figure 6 which you created previously.

Your Paypal sandbox account.

Your client id.

Your secret.

After login to your account then go to the setting, then click

Processing then find a option PayPal and enables it.

10.11From Braintree sandbox control panel click the Account and then click My user.

10.12Click the View Authorizations.

10.13Click View.

10.14Then collects your Public key, Private key and Merchant id.

10.15Go to your bootic admin panel and login.

Then click the Braintree Credential tab.

Then update the Environment, public key, private key and Merchant id.

11 - Customizing SMTP Server

Open public > Mailer

Change the credentails below.

$mail->Username

$mail->Password

$mail->setFrom("johnruggles63@gmail.com", 'Mailer');