Uniqa

An android eCommerce app 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

Uniqa is built with native Java in Android Studio. It’s an android e-commerce app with admin panel. It offers more than 25 pages and all are fully designed & keeping in mind to fit for any product types. Uniqa offers all required features, that can fulfil any modern application. It’s easy to customize, You can use it as any type of stores like Fashion, Electronics, Grocery and Restaurant. You can customize any page as per your needs. It follows all the standards to fulfil customer’s requirements.

2 - Folder Structure

2.1Unzip the file.

2.2You see the following folders:

uniqa-android (contain the android files)

Admin-Panel (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:

private\init.php.

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/Admin-Panel

For example, my pc ip address is: 192.168.2.88

So the url will be: http://192.168.2.88/Admin-Panel

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.unuqa.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.uniqa.data.helper.Constants.java

Paste the API_TOKEN value that copied form admin panel.

Run Uniqa 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.3Create new package and move all directories

Select Java, then right click button and create a new package (e.g.: mypackage)

Select data and ui packages move to new package

6.1.4Invalidate cache and restart your studio

Copy the new package name and paste to google-service.json file

Copy the new package name and paste to applicationId in gradle(APP.gradle)

Copy the new package name and paste to package in the manifest 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 - Sign in 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 - 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.

9 - SMTP Server Config

9.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

9.2Google SMTP Server Config

9.2.1Login to your Gmail account.

9.2.2Then visit the link: https://myaccount.google.com/security

9.2.3In the security page, turn off the 2-step verification

9.2.4Turn on the less secure app access

9.2.4Also visit the link: https://accounts.google.com/b/0/DisplayUnlockCaptcha and enable it.

10 - Admob Configuration

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 Uniqa 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 - Publishing the app in Playstore

12.1Prepare your app

Change the package name and app name.

Generate sign apk.

Configure AdMob according to your account settings

Change the app logo.

12.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

12.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

12.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.

12.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

13 - Folder Structure of Admin Panel

13.1Inside the project folder, you will see the following directories that are important to setup and customizing the admin panel.

private

public

.htaccess

13.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.

13.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

14 - Functionality of Admin Panel

14.1Categories

Admin is able to add/update/delete categories form the admin panel. To add category admin have to add an image and a set a title for the category.

14.2Attributes

Admin is able to add/delete/update product attributes. To add attributes, admin have to set the title of the attribute and set the attribute value of the attribute. Admin have to add comma separated attribute values in the attribute form. Admin is able to change the attribute values form attribute page without loading the apge.

14.3Product

Admin is able to add/delete/update products. To add a product admin has to upload a primary image. Put the purchase price, previous price(if have any) and sellig price. Admin have to select the category, featured(Yes/No). Admi n have to put product description, tags. Admin is able to upload multiple product images. And lastly admin have to set the inventory of the product. From the Add Attribute button admin is able to add attributes and the quantity of the product.

14.4Orders

Admin is able to view all the orders. Admin can change the order status(Pending/Clear). Also admin is able to see the order details. Admin is able to generate invoice in pdf format.

14.5Payment

We have integrated braintree payment method. Admin has to put braintree credentials(Environment, Merchant ID, Public Key, Private Key) to the admin panel.

14.6UI

Admin is able to Edit the slider Images, Banner Images and tags for this page.

14.7Registered users

Admin is able to view/delete all the registered users form Registered users menu.

14.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.

14.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.10Configuration

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.11Setting

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

Also, Admin will be able to change the TAX.