1 - Introduction

Bootic is built with Flutter in Android Studio. It’s an e-commerce app with admin panel. 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 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.

Features:

Login

Allows users to access their accounts using their email and password.

Signup

Enables new users to create an account using their email and password.

Login with Google

Provides an option for users to log in using their Google account.

Login with Facebook

Provides an option for users to log in using their Facebook account.

Login with Apple (iOS only)

Allows iOS users to log in using their Apple ID.

Forgot Password

Users can reset their password by receiving an OTP via email.

Email Verification

Ensures users verify their email address before accessing the app.

User Profile System

Users can view and update their profile picture.

Light / Dark Theme

Users can switch between light and dark themes for better user experience.

Product Category

Displays products sorted into various categories for easy navigation.

Product Subcategory

Further categorizes products under main categories for better organization.

Featured Product

Highlights selected products as featured to attract user attention.

Popular Product

Displays products that are popular among users.

Recent Product

Shows the latest products added to the catalog.

Product Slider

Allows users to browse through products using a sliding interface.

Product Details

Provides detailed information about each product, including images, description, price, and reviews.

Product Reviews

Users can read and write reviews for products they have purchased.

Add Review with Product Image

Users can upload images along with their product reviews.

Suggested Product

Recommends products to users based on their browsing and purchase history.

Search Product

Users can search for products using keywords.

Shopping Cart System

Allows users to add products to a cart and manage their selections before checkout.

Checkout Details

Users can review their order details, select payment methods, and confirm their purchase.

Cash on Delivery

Provides an option for users to pay for their order upon delivery.

Online Payment (Stripe)

Integrates Stripe payment gateway for secure online payments.

Shipping Address Management

Users can add, edit, and manage their shipping addresses.

Order List

Displays a list of user orders with details and statuses.

Invoice Generation as PDF

Generates an invoice for each order in PDF format.

Download Invoice, Share Invoice, Print Invoice

Users can download, share, or print their invoices.

Favorite Product System

Allows users to mark products as favorites for quick access later.

Privacy Policy

Displays the app's privacy policy for user information.

About Us

Provides information about the company or the app.

Logout

Allows users to securely log out of their accounts.

2 - Folder Structure

2.1Unzip the file.

2.2You see the following folders:

3 - Requirements

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 on Locally

In order to setting up database , first you create a database “bootic_test_wp_db”.

Then you can easily import the db.sql (located on bootic-admin folder) file in your server.

Link the database to admin panel

For linking up, first you will find the file from this directory:

Update the DB_SERVER, DB_USER, DB_PASS, and DB_NAME by your own.

4.3Installation on Locally

Make sure that you have already installed Xampp control panel.

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

Now run your Xampp Control Panel.

Find your pc ip address or run on localhost(127.0.0.1).

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:

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

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:

Login as Admin:

To change the admin email and password, simply go to the admin dashboard, navigate to the profile section, and update your details accordingly.

5 - Configure app with server

5.1Extract and open the project

Double click on the zip file for extract the project

Open android studio

Click on “open" & select the flutter-streamz folder

Click on “Trust Project"

5.2Basic app configuration (Get dependency and generated file)

Tools-> Flutter-> Flutter Pub Get

Go to terminal -> and paste this command
dart run build_runner build --delete-conflicting-outputs

5.3Server Configuration

Go lib-> resources-> app_constant.dart

Change the baseUrl and imageBaseUrl value by yours

6 - Customizing the App

6.1Change package name

Go to terminal -> and paste this command:
rename setBundleId --targets android,ios --value "com.your.id.com"

6.2Change app name

Go to terminal -> and paste this command
rename setAppName --targets ios,android --value "YourAppName"

6.2Change app icon

Go to flutter-streamz -> image

Delete the image named applogo.png and paste your own logo. Make sure you name it applogo.png, otherwise, it does not change globally (splash screen, auth screen)

6.2.1Android

Go to terminal -> and paste this command
dart run flutter_launcher_icons -f icon_launcher.yaml

6.2.2IOS

Go to the https://www.appicon.co/ and paste your image, generate your logo by following the image

Extract the AppIcons.zip file and open it

AppIcons -> Assets.xcassets ->AppIcon.appiconset Copy All files like below

Open the main folder of flutter-streamz-> ios -> Runner -> Assets.xcassets

Delete all files and paste your new copied items

Repeat same work for remaining 2 folders

6.4Change build configuration

Go to android -> key.properties , and change the store password, store key like below

Following this documentation generate your own jks file or follow the step below

Paste the command on terminal & fill up all steps
keytool -genkey -v -keystore ~/upload-keystore.jks -keyalg RSA \ -keysize 2048 -validity 10000 -alias upload

If you are windows user please use this command instated previous one
keytool -genkey -v -keystore %userprofile%\upload-keystore.jks ^ -storetype JKS -keyalg RSA -keysize 2048 -validity 10000 ^ -alias yourKeyAlias

Go to your user directory and copy the upload-keystore.jks file

Open your project go to android-> app and delete this upload-keystore.jks file then paste your copied file

6.5Payment method setup (Stripe)

Go to your stripe developer dashboard and copy the Publishable key

Go to the lib->resources->app_constant.dart file and replace stripePublishableKey by yours

Again, go to the stripe developer dashboard and copy the Secret key

Go to assets folder and open .env file. Now replace the STRIPE_SECRET value by yours

7. Firebase & Google sign in configuration

Open the firebase console and create a new project

Enable google analysis if you want and press continue

Choose Default Account for firebase from dropdown menu then press create project button

Wait few moments to create the project and press continue

Our Firebase project is ready to be connected with our music app. Let's follow a few more steps to establish the connection!

Go to your Android Studio, open the terminal, and paste the following command: 'firebase login'. After successfully logging in through the browser, you are ready to configure the Firebase projects for your Flutter project.

Paste "flutterfire configure" this command on the terminal and configure your project like below

7.1 Google Sign In

Open the Firebase console again and navigate to your project. On the left side, click the 'Authentication' tab, then select the 'Google' option

In this window, ensure that you enable Google, choose a support email from the dropdown, and then click the 'Save' butto

Go to the Google Cloud Platform API manager and select your project, then go to the OAuth constant screen -> Edit APP

Complete these four steps after clicking the 'Edit App' button as shown in the screenshots below

Open your Flutter project and navigate to the terminal. Run the following commands:

This command generates the digital signature. Copy both the productionDebug and productionRelease SHA-1 & SHA-256 one by one and add them to the Firebase Console. Refer to the screenshots below for a better understanding.

Open firebase project again, click the settings icon -> Project settings

Select android -> Add fingerprint

Here, add the SHA-1 and SHA-256, one by one, that you obtained in the earlier steps

In the above steps, our Google Cloud and Firebase configuration was completed. Now, we need to update all configurations in our Flutter project. To do that, run 'flutterfire configure' and configure your project again as before.

To update the iOS configuration with Firebase, revisit the Firebase console, select 'ios' project and download the 'GoogleService-Info.plist' file.

Copy the downloaded 'GoogleService-Info.plist' file. Navigate to the Flutter project -> ios -> runner, delete the old 'GoogleService-Info.plist' file, and paste the new one

To enable Google Sign-In for iOS, you can follow this document or the steps below.

Go to the 'GoogleService-Info.plist' file and copy the 'CLIENT_ID' from the selected ... value, as shown in the screenshots below

Navigate to the 'Info.plist' file and replace the values for 'GIDClientId' and 'GIDServerClientId' with the 'CLIENT_ID' copied from previous step, as illustrated in the screenshots below

Again, Navigate to the 'GoogleService-Info.plist' file and copy the 'RRVERSED_CLIENT_ID' from the selected ... value, as shown in the screenshots below.

Navigate to the 'Info.plist' file again, and replace the values for 'CFBundleURLSchemes' copied 'RRVERSED_CLIENT_ID' from previous step, as illustrated in the screenshots below

8 - Sign in with Facebook

8.1 Android

Go to Facebook Login for Android - Quickstart and login

Click Create a New App

Click Authenticate and request data from users with Facebook Login -> Next

Click No, I'm not building a game -> Next

Put app name and contact email -> Create app

Go to Facebook Login for Android - Quickstart again and select your project

Go to Associate Your Package Name and Default Class with Your App section and put your package name like and activity name like this.

Open the flutter project on android studio -> terminal, and paste the command for generate key hash and copy the hash value.

For macOS or Linux

For Windows

Go to Provide the Development and Release Key Hashes for Your App section and put the copied hash value like below.

Go to Facebook Developer Console, select your project -> App settings-> Basic -> add Privacy Policy URL & Terms of Service URL. Copy the App Id and App secret

In Android Studio, open your Flutter project -> android -> app -> src -> main -> res -> values -> string.xml and replace the values for 'facebook_app_id' and 'facebook_client_token' with your own.

8.2 IOS

Go to Facebook Login for IOS - Quickstart and select your app

Go to Register and Configure Your App with Facebook and select your app, put your app id and save it

Open the Flutter project -> ios -> runner -> Info.plist and change the values for 'FacebookAppID ' and ' FacebookClientToken' and 'FacebookDisplayName' to your own

Also change the app id from here

9 - Sign in with Apple

You will need to recreate and download the updated Provisioning Profiles for your app, so they include the new Sign in with Apple capability. Then you can download the new certificates and select them in Xcode.

10 - Change color & run app

10.1 - Change color

Open the Flutter project -> lib -> resources -> app_constant.dart and modify the color if desired

10.2 - Run app

This project contains 3 flavors:

To run the desired flavor either use the launch configuration in VSCode/Android Studio or use the following commands:

11 - SMTP Server Config

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

9.2Google SMTP Server Config

11.2.1Login to your Gmail account.

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

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

11.2.4Turn on the less secure app access

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

12 - Configure firebase for push Notification

Open the Firebase Console and select your project. Click the Settings icon on the left sidebar and choose Cloud Messaging.

Click on the Manage API in Google Cloud Console link, which opens the Google Cloud Console in a new tab. Ensure the Firebase Cloud Messaging API is enabled. If it's not, enable it

Ensure the Firebase Cloud Messaging API is enabled. If it's not, enable it

Return to the Firebase Console and select the Manage API in Google Cloud Console link again to confirm that the Cloud Messaging option is enabled.

Go back on the Firebase Console and click 'Service Account' button and click on the 'Generate new private key' button

Click Generate Key to download the service account JSON file to your local machine.

Locate the downloaded JSON file on your computer and copy it

Locate the bootic-admin -> private folder and delete the 'bootic-flutter-firebase-service-account.json' file

Now paste the coppied file, and make sure you rename it by 'bootic-flutter-firebase-service-account.json'

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.

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.

14.3private directory: All the private files like models, controllers files are inside this directory.

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

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

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

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

15.5Registered users

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

15.6Google 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.7Push 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

15.8Configuration

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.

15.9Setting

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.