##### ViserPay

Complete Mobile Financial Service

- Created : 2024-02-14
- By : ViserLab

Welcome to ViserPay, your all-in-one Complete Mobile Financial Service. This documentation will guide you through the various features and functionalities of the app, helping you make the most of it.

Thank you for choosing ViserPay. If you have any questions or suggestions that you'd like to share with us, please feel free to contact us via email. We are committed to promptly addressing your inquiries. We appreciate your support and hope you enjoy our ViserPay app.

##### Requirements

Follow the below requirements.

- Download and install Any one from these IDE(Android studio, Vs Code)
- Flutter and Dart must be successfully installed and setup on your device in order to edit this project.(Recommended Flutter SDK version: 3.13.6)
- Install the Flutter and Dart plugins after setting up your editor

##### Installation

Follow the below instruction to install the system.

- Unzip the downloaded project and navigate to the flutter/file section, and open the project to the preferred IDE (Android Studio / Visual Code)
- Then complete the main configuration section
- On IDE go to the pubspecs.yaml file then clicks on the Pub Get button top of the IDE to install the libraries.
- To run the project, connect an emulator or a real device.
- Then press the Run button to run the project on the connected device

##### Folder Structure

Folders and files structure are showing below

- assets
  - fonts
  - images
- lib
  - core
    - di_service
    - helper
    - route
    - theme
    - utils
  - data
    - controller
    - model
    - repo
    - services
  - view
    - components
    - screens
  - main.dart
  - push_notification_service.dart
- pubspec.yaml

##### Screens

Our app screens list are showing below

- Splash Screen
- Onboard Screen
- Login and Registration Screen
- Forget Password and Reset Password Screen
- Email, Sms Screen
- Smart Homepage
- Send Money Screen
- Mobile Recharge Screen
- Cashout Screen
- Make Payment Screen
- Bank Transfer Screen
- Bill Payment Screen
- Bill History Screen
- Donation Screen
- Add Money Screen
- Transaction Limit Screen
- Transaction Screen
- Menu Screen
- Multi Language System
- FAQ Screen
- Notification Settings Screen
- Profile Screen
- Change Password Screen
- And more...

##### Main Configuration

Application Setup

##### 1. Flutter Setup

Follow the guidelines in the following link to install the Flutter environment

OFFICIAL DOC LINK: https://docs.flutter.dev/get-started/install

##### 2. Firebase Setup

- Create a New Firebase Project:
  - Once you are logged in, click on the "Add Project" button
  - Provide a name for your Firebase project. This name is for your reference and can be anything you like.
  - Choose or Create a Google Analytics Account:

    If you enabled Google Analytics, you'll need to choose an existing Google Analytics account or create a new one.

  - Click on 'Create Project.'
  - Wait for Project Creation:

    Firebase will take a moment to create your project. Once it's done, you'll be redirected to the project dashboard.

  - Click on 'Continue'
  - Add Your Desired App for Android or iOS
- Android Firebase Setup
  - After Clicking Android Icon
  - Fillup Recommended Options
  - Download google-services.json
  - Clck Continue To console
- IOS Firebase Setup
  - After Clicking IOS Icon
  - Fillup Recommended Options
  - Download GoogleServices-Info.plist
  - Clck Continue To console

##### 2. App Key Store Setup

How to generate a keystore in Android Studio

To generate a keystore in Android Studio, follow these steps:

1. Open your app code project in Android Studio.
2. Click On Tools > Flutter > Open Android Module in Android Studio
3. Now Wait For app Gradle Update
4. Click on the Build menu and select Generate Signed Bundle/APK.
5. In the Generate Signed Bundle or APK dialog, select Android App Bundle or APK and click Next.
6. Below the field for Key store path, click Create new.
7. Click NEXT Button:
8. On the New Key Store window, provide the following information for your keystore and key, as shown in the image below:
   - Key store path: Select the location where your keystore should be created. Also, a file name should be added to the end of the location path with the `.jks` extension.
   - Password: Create and confirm a secure password for your keystore.
   - Alias: Enter a name for your key.
   - Password: Create and confirm a secure password for your key.

     Click Create New

     Select you path and name

     Click OK

     Fillup all field

     Click NEXT

     You Will get a Release App bundle

9. Click OK to create the keystore and key.

Once you have created a keystore, you can use it to sign your Android apps for release.

Additional notes:

- Choose a strong password for your keystore and key.
- Store your keystore in a safe place.
- Back up your keystore regularly.
- If you lose your keystore, you will not be able to update your app on the Google Play Store.

Conclusion

Generating a keystore is an important step in preparing your Android app for release. By following the steps above, you can create a keystore and key that will help to protect your app and your users.

##### Setup

Application Setup

##### 1. Change App Name

- For Android
  - Open AndroidMainfest.xml to IDE from android/app/src/main
  - Change the label name inside the application tag from this file
- For IOS
  - Open Info.plist file to IDE from ios/Runner
  - Change the app name inside the dict. Please follow the below instruction.

##### 2. App Icon Change

- For Android
  - Go to /android/app/src/main/res and replace all mipmap folder with your generated icon android folder.
- For IOS
  - Go to /ios/Runner and replace Assets.xcassets with your generated Assets.xcassets folder.

Note: For different type of device we need to add different size of icon. So that you should to need to resize them. You can use https://appicon.co/ platform to generate multiple size icons for android and ios. It will provide you the icon with a correct folder structure.

##### 3. App Logo Change

- - Go to the AppFolder/assets/images/logo and replace it with your SVG image. Use white as the splash SVG color.

##### 4. App Text Change

- - Go to the lib/core/utils/my_strings.dart change and replace your text.

##### 5. API Base URL

- Open lib/core/utils/url_container.dart file and change base url string

##### 6. Change App Color

- Open lib/core/utils/my_color.dart folder and Replace the value in the primary Color field with the prepared color code. From here, you can easily change the color of something else.

##### 7. Change Package Name

- Right click on project folder and click on Replace in Files
- Search dev.vlab.viserpay in the first indicated box and your own package name in the second marked box. Then click Replace All button

##### 8. Add Firebase Option config

- lib/firebase_options.dart
  - Open firebase_options.dart to IDE from lib/firebase_options.dart
  - Change all the values inside this file. You will find all the key codes in the Firebase settings section.

#### OR

- Setup Using Firbase Cli For Flutter

##### 1. Android

Follow the guidelines in the following link to Setup Firebase in you app using Firebase CLI.

OFFICIAL DOC: https://firebase.flutter.dev/docs/cli/

##### 9. Generate SHA-1 & SHA256 KEY

- Open a Terminal:
  - Open a terminal or command prompt in your project's root directory where the gradlew script is located.
    CMD: cd android
    Run the Gradle Signing Report Task:
    In the terminal, run the following command:
    Generate key code
  CMD: ./gradlew signingReport
  - To Generate Release SHA-1 KEY add keystore.properties in you app
  - Create the key.properties File:
    First, create a new file named key.properties in the android directory of your Flutter project.
  - Edit key.properties File
    Open the key.properties file in a text editor, and add the necessary configuration properties. A common use case for this file is to store the signing configuration for your Android app. Here's an example of what the key.properties file might look like for
  - storeFile=/path/to/your/keystore.jks
    storePassword=your_keystore_password
    keyAlias=your_key_alias
    keyPassword=your_key_password

    ##### Demo

##### Now Put This Key in Firebase App

- Setup Using Firbase Cli For Flutter

##### Fingerprint SHA-1 and SHA-256 key add here

##### 10. Edit environment variable

- Open the lib/environment.dart file and modify your necessary options.

##### Publish App

Follow below instruction to publish the app

##### 1. Android

Follow the guidelines in the following link to publish the app to Play Store.

PlayStore: https://flutter.dev/docs/deployment/android

##### 2. IOS

Follow the guidelines in the following link to publish the app to AppStore.

AppStore: https://flutter.dev/docs/deployment/ios

##### Support

Support information details

Once again, thank you so much for purchasing this App. As I said at the beginning, I'd be glad to help you if you have any questions relating to this App. No guarantees, but I'll do my best to assist. If you have any queries, please feel free to contact us at Support Center.

Email Us: https://viserlab.com/support