UniBooker Vehicle
Product LinkInstallation PlansSupport
  • Introduction
  • Changelogs
  • Getting Started
  • 🚀Admin Setup
    • Server Requirements
    • Install on Server
    • Required Configuration
  • 📱APP SETUP
    • Introduction
    • Code Setup
  • 📱VENDOR APP SETUP
    • Introduction
    • Code Setup
  • 🌎VENDOR WEB SETUP
    • Introduction
    • Code Setup
  • Support and Feedback
Powered by GitBook
On this page
  • Run an existing flutter project on IDE
  • App Logo
  • App Name
  • Base URL
  • Change Package
  • Setup One Signal for Push Notification
  • OneSignal Setup for Flutter Notifications
  • Prerequisites
  • For Android
  • For iOS
  • How to Set Up Firebase
  • Step 1: Create a Firebase Project
  • Step 2: Register Your App (Android & iOS)
  • Step 3: Add Firebase Configuration Files to Your Project
  • Step 4: Add Firebase Credentials to the Project
  • Step 5: Finalize Setup & Restart
  • Google Login for Android & iOS
  • Introduction
  • Step 1: Enable Google Authentication in Firebase
  • Step 2: Android Setup
  • Step 3: iOS Setup
  • Step 4: Testing Google Login
  • Conclusion
  • Enabling Firebase Realtime Database and Storage for Chatting
  • Step 1: Log in to Firebase Console
  • Step 2: Enable Firebase Realtime Database
  • Step 3: Enable Firebase Storage
  • Conclusion
  • Apple Login Setup for Unibooker
  • Step 1: Generate an Apple Developer Certificate
  • Step 2: Set Up Your Project in Xcode
  • How to Generate and Configure a Google API Key for UniBooker
  • Multi-Language Setup
  • Run The App

Was this helpful?

  1. VENDOR APP SETUP

Code Setup

PreviousIntroductionNextIntroduction

Last updated 6 months ago

Was this helpful?

Run an existing flutter project on IDE

Launch your preferred IDE (either VSCode or Android Studio) and navigate to the 'Project' folder. Allow some time for the project to load.

Run the following command on the IDE terminal to clean the whole project first.

flutter clean

Run the following command on the IDE terminal to get all the required packages.

flutter pub get

Make sure these commands should be run from the root directory of the code.

These commands will clean the project and get the required packages. Wait some time to get all the packages.

App Logo

Generate app logo by this link

To change the app logo in your UniBooker Flutter project, follow the steps outlined in this video tutorial. The video walks you through generating and replacing the app icons for both Android and iOS platforms, ensuring your app displays the correct branding across all devices. Make sure to update the pubspec.yaml file and run the necessary Flutter commands to integrate your new logo successfully.

Additional Tips for Changing the App Icon

  1. Recommended Sizes:

  2. iOS: App Store (1024x1024 px), Home Screen (180x180 px, 120x120 px, 76x76 px, 167x167 px).

  3. Android: Launcher (48x48 dp, 192x192 px for xxhdpi), App Icon (512x512 px).

  4. Simplicity: Use simple, recognizable designs.

  5. Visibility: Test the icon against different backgrounds.

  6. Branding: Reflect your app's purpose and maintain consistency.

  7. File Format: Use PNG for quality.

Update: Ensure all instances are updated across platforms.

App Name

To change the app name in your UniBooker Flutter project, follow the steps demonstrated in this video tutorial. The video explains how to modify the app name for both Android and iOS platforms. Ensure you update the necessary configuration files and run the required Flutter commands to reflect the name change across your app.

Additional Tips for Naming Your App:

  1. Keep It Short: Aim for a name that is easy to remember and pronounce. Shorter names are often more user-friendly.

  2. Avoid Special Characters: Use letters and numbers; avoid symbols or spaces, as they can cause issues in some platforms.

  3. Check Availability: Ensure the name is not already in use on app stores and social media platforms to avoid confusion.

  4. Branding Consistency: Ensure the name aligns with your brand identity and reflects the app's purpose.

Test with Users: Consider getting feedback on potential names from target users to gauge their response.

Base URL

Step 1: Open the Project

  1. Open your UniBooker project in your preferred code editor (e.g., VS Code, Android Studio).

  2. Locate the project directory on your file system.

  3. Navigate to the following file path:

    lib/api/config.dart

  4. Open the config.dart file.

Step 2: Add Your URL to the Base URL Variable

static const String baseUrl = 'https://yourdomain.com/api/v1/';

Important Notes

  • Always include /api/v1/ at the end of your base URL to match the expected API structure.

  • Double-check the URL to ensure it is correct and accessible.

Video Tutorial

To change the base URL in your UniBooker Flutter project, you can refer to the instructions provided in this video tutorial. The video outlines the steps necessary to update the base URL for both Android and iOS platforms, ensuring your app connects to the correct backend services.

Change Package

To change the package name in your UniBooker Flutter project, you can follow the detailed steps outlined in this video tutorial. This video will guide you through the necessary modifications for both Android and iOS platforms to ensure your app is correctly identified.

Additional Tips for Changing Package Name:

  1. Use Lowercase Letters: Package names should consist only of lowercase letters, numbers, and dots (e.g., com.example.unibooker).

  2. Consistency Across Platforms: Ensure the package name is consistent for both

  3. Android and iOS to avoid conflicts.

  4. Update Dependencies: After changing the package name, update any dependencies that reference it.Test Thoroughly: Run your app on both platforms to ensure the package name change hasn’t affected functionality.

Backup Your Project: Before making changes, always create a backup to prevent any data loss.

Setup One Signal for Push Notification

To set up OneSignal for push notifications in your UniBooker Flutter project, you can refer to the following video tutorials. They will guide you through the necessary steps for both Android and iOS configurations: OneSignal Setup for Android and iOS: This video provides a comprehensive guide to integrating OneSignal into your app for both platforms. OneSignal SDK Setup for Flutter: This video focuses specifically on the OneSignal SDK setup in Flutter, ensuring you have all the required configurations.

OneSignal Setup for Flutter Notifications

Integrating OneSignal into a Flutter project for both iOS and Android involves setting up the OneSignal SDK and configuring your project to handle notifications. Here’s a detailed step-by-step guide to help you get started.

Prerequisites

  • A Flutter project set up and ready.

  • Access to an Apple Developer account for iOS configuration.

  • An Android project in your Flutter environment with access to your google-services.json.

For Android

Step 1: Access Firebase Console

  1. Open the Firebase Console: Navigate to Firebase Console.

  2. Log in: Use your Google account credentials to log in.

Step 2: Select or Create a Project

  1. Choose Existing Project: Select your existing Firebase project from the dashboard.

  2. Create New Project: If you don’t have a project, click on "Add project" and follow the prompts to create one.

Step 3: Navigate to Project Settings

  1. Click on Gear Icon: Located next to Project Overview on the left sidebar.

  2. Select "Project settings": This will take you to your project's settings page.

Step 4: Go to Cloud Messaging Tab

  1. Select Cloud Messaging: Click on the Cloud Messaging tab.

  2. Locate Server Key and Sender ID: Here, you will find your Server Key and Sender ID.

Step 5: Copy the Server Key

  1. Copy the Server Key: Click the copy icon next to the Server Key to save it for later use.

Step 6: Integrate Server Key into OneSignal

  1. Select Your App: Choose your app from the list.

  2. Navigate to Settings > Platforms: Click on Android.

  3. Paste Server Key: Enter the Firebase Server Key you copied earlier in the designated field.

  4. Click Save: Ensure to save your settings.

For iOS

Step 1: Access Apple Developer Account

  1. Select or Create App: Choose your existing app or create a new one as needed.

Step 2: Generate APNs Certificate

  1. Open Keychain Access: On your Mac, launch the Keychain Access app.

  2. Request Certificate: Go to Keychain Access > Certificate Assistant > Request a Certificate from a Certificate Authority.

    • Fill in the required information, including your app's bundle identifier.

    • Save the certificate request to your disk.

Step 3: Upload APNs Certificate to OneSignal

  1. Go to OneSignal Dashboard: Navigate to your OneSignal app settings.

  2. Select iOS Platform: Under Settings > Platforms, select iOS.

  3. Upload APNs Certificate: Upload the generated APNs certificate you created in the previous step.

Step 4: Enable Push Notifications in Xcode

  1. Open Your Project in Xcode: Launch Xcode and open your Flutter project.

  2. Navigate to Capabilities: Click on your project target, then go to Capabilities.

  3. Enable Features: Turn on Push Notifications and Background Modes (ensure Background fetch and Remote notifications are checked).


Final Notes

  • Security: Keep your Firebase Server Key secure, as it is essential for sending messages to your app.

  • Testing: Always test your push notifications on actual devices for both Android and iOS.

  • Documentation: Regularly check OneSignal’s and Firebase’s official documentation for any updates or changes.

This detailed guide will help you set up OneSignal in your Flutter project for both Android and iOS platforms. If you have any further questions or need assistance, feel free to ask!

Please follow this link to setup all necessary details for iOS and Android setup

How to Set Up Firebase

Introduction:

we will guide you through the process of setting up Firebase for the Unibooker Vehicle app, covering both Android and iOS platforms. Follow these steps to ensure your Firebase project is correctly integrated and ready for use.

Step 1: Create a Firebase Project

  1. Open the Firebase Console.

  2. Click Add Project to create a new Firebase project.

  3. Follow the prompts to configure the project, give it a suitable name (e.g., "Unibooker Vehicle"), and agree to the terms.

  4. Click Create Project and wait for it to finish setting up.

Step 2: Register Your App (Android & iOS)

For Android:

  1. In the Firebase console, click on the Android icon under the "Get started by adding Firebase to your app" section.

  2. Enter your Android package name (e.g., com.unibooker.vehicle).

  3. Click Register App.

  4. Download the google-services.json file that Firebase generates for you.

For iOS:

  1. In the Firebase console, click on the iOS icon.

  2. Enter your iOS bundle ID (e.g., com.unibooker.vehicle).

  3. Download the GoogleService-Info.plist file after registering the app.

Step 3: Add Firebase Configuration Files to Your Project

For Android:

  1. Copy the google-services.json file you downloaded earlier.

Navigate to your project directory, and place the file in the following location: /android/app/google-services.json

For iOS:

  1. Copy the GoogleService-Info.plist file you downloaded.

Place it inside your iOS project at: /ios/Runner/GoogleService-Info.plist

Please note that the file you download must replace the existing file in the codebase for both Android and iOS.

Step 4: Add Firebase Credentials to the Project

  1. Open the firebase_options.dart (or equivalent) in your Unibooker codebase.

  2. Enter your Firebase credentials, including the API keys, project ID, and other required fields. You can find these details in your Firebase console under Project Settings.

Step 5: Finalize Setup & Restart

  1. Once the configuration files and credentials are set up, restart your development environment or build the project again.

  2. Verify that everything is working correctly by running your app. Firebase should now be successfully connected to your Unibooker project.


For more details follow this video to setup firebase

Google Login for Android & iOS

Introduction

In this guide, we will walk through the steps to enable Google Login for both Android and iOS in the Unibooker app. Most configurations are complete, but you will need to enable Google Authentication in Firebase and, for iOS, add some additional details like the Reverse Client ID, API Key, and Google App ID to the Info.plist file. Additionally, for Android, you will need to generate the SHA-1 and SHA-256 keys.


Step 1: Enable Google Authentication in Firebase

Log in to Firebase Console:

  1. Open the Firebase Console in your web browser.

  2. Log in with the Google account associated with your Firebase project.

Navigate to Authentication:

  1. In the left-hand sidebar, under the Build section, click on Authentication.

Enable Google Sign-In:

  1. In the Sign-in Method tab, find Google and click on it.

  2. Toggle the Enable button to on.

  3. Optionally, enter your support email.

  4. Click Save.

Important Step: Update Google Services JSON

  • After enabling Google Sign-In, download the updated google-services.json file from Firebase.

  • Replace the old /android/app/google-services.json file in your Android project with the updated one to ensure everything works correctly.


Step 2: Android Setup

To set up Google Login on Android, you need to generate the SHA-1 and SHA-256 keys and add them to your Firebase project settings.

Step-by-Step Instructions for Android Setup:

  1. Open Your Android Project:

  2. Launch Android Studio and open your Android project

Generate SHA-1 and SHA-256 Keys: You can generate these key

For Mac:

Open the Terminal.

Navigate to your Java bin directory (this path may vary based on your JDK installation): cd /usr/bin/

Run the following command to generate the SHA-1 and SHA-256 keys: keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android

This command will output the SHA-1 and SHA-256 keys in the terminal.

For Windows:

Open the Command Prompt.

Navigate to your Java bin directory (this path may vary based on your JDK installation): cd "C:\Program Files\Java\jdk<version>\bin"

Run the following command to generate the SHA-1 and SHA-256 keys: keytool -list -v -keystore %USERPROFILE%\.android\debug.keystore -alias androiddebugkey -storepass android -keypass android

Copy the SHA-1 and SHA-256 Keys:

Locate the SHA-1 and SHA-256 values in the output and copy them for the next step.

Add SHA-1 and SHA-256 Keys to Firebase:

  1. Return to the Firebase Console.

  2. Navigate to Project Settings by clicking on the gear icon next to your project name.

  3. Under Your apps, find your Android app and click on it.

  4. Scroll down to the SHA certificate fingerprints section.

  5. Click Add Fingerprint.

Paste the SHA-1 key and click Save. Repeat the process for the SHA-256 key.


Step 3: iOS Setup

For iOS, additional configurations are required. You need to extract information from the GoogleService-Info.plist file and add it to your project’s Info.plist file.

Step-by-Step Instructions for iOS Setup:

Find and Download GoogleService-Info.plist:

  1. In the Firebase Console, go to Project Settings.

  2. Under Your apps, select your iOS app.

  3. If you haven't already, download the GoogleService-Info.plist file for your iOS app.

Add GoogleService-Info.plist to Xcode:

  1. Open your iOS project in Xcode.

  2. Ensure the GoogleService-Info.plist file is added to your project:

  3. Go to the /ios/Runner/ folder and place the file there.

  4. Drag it into Xcode under the Runner project to include it in the project build.

Extract Values from GoogleService-Info.plist:

  1. Open the GoogleService-Info.plist file in a text editor or Xcode.

  2. Locate the following values in the file:

  3. Reverse Client ID ,API Key ,Google App ID

Add to Info.plist:

  1. Open Info.plist in a code editor or Xcode.

Add the following entries: <key>CFBundleURLTypes</key>

<array>

<dict>

<key>CFBundleURLSchemes</key>

<array>

<string>YOUR_REVERSE_CLIENT_ID</string>

</array>

</dict>

</array>

<key>GADApplicationIdentifier</key>

<string>YOUR_GOOGLE_APP_ID</string>

<key>API_KEY</key>

<string>YOUR_API_KEY</string>

Replace the placeholders with the actual values from the GoogleService-Info.plist file.

Save and Rebuild:

  • After updating the Info.plist, save the changes.

  • Rebuild your iOS app in Xcode and run it to test the Google Login functionality.


Step 4: Testing Google Login

Android Testing:

  • As all configurations for Android are already in place, simply run your app on an Android device or emulator to test Google Login.

iOS Testing:

  • After adding the required keys to Info.plist and rebuilding the app, test the Google Login on an iOS device or simulator.


Conclusion

You have successfully set up Google Login for both Android and iOS in the Unibooker app!

Summary:

  • For Android: Generated SHA-1 and SHA-256 keys, added them to Firebase, and updated the google-services.json file.

  • For iOS: Added the Reverse Client ID, API Key, and Google App ID to the Info.plist file.

After following these steps, users should be able to sign in with their Google accounts on both platforms!

For more details:

This updated document now includes the step to update the google-services.json file after enabling Google Sign-In in Firebase.

Enabling Firebase Realtime Database and Storage for Chatting

Introduction

Congratulations on completing most of the Firebase setup for UniBooker! You are now ready to enable the Realtime Database and Firebase Storage in your Firebase Console. This process is straightforward and requires no technical knowledge. Just follow the simple steps outlined below to complete your setup.

Step 1: Log in to Firebase Console

  1. Open Firebase Console: Open your web browser and go to the Firebase Console.

  2. Log In: Use the Google account associated with your Firebase project to log in.

  3. Select Your Project: Once logged in, you will see a list of your projects. Click on the project named Unibooker to access its settings.

Step 2: Enable Firebase Realtime Database

  1. Navigate to Realtime Database: In the left sidebar, look for the Build section. Click on Realtime Database to access the database settings.

  2. Create the Database: You will see a button labeled Create Database. Click on it to initiate the creation of your Realtime Database.

  3. Set Database Location: You will be prompted to choose the database location. Select the region that is closest to your app users to ensure optimal performance. If you’re unsure, you can simply use the recommended option.

  4. Choose Security Mode: You will have two options for security settings:

  5. Start in locked mode (recommended for enhanced security)

  6. Start in test mode (less secure, intended for testing purposes) For better security, select Start in locked mode. Note that you can modify these settings later if needed.

  7. Enable the Database: After configuring the options, click the Enable button. Firebase will then set up your Realtime Database, and you will receive a confirmation once the process is complete.

  8. Add Security Rules

// rules
{
  "rules": {
    ".read": true,
    ".write": true
  }
}

9 Publish the Rules:

  • After entering the rules, click the "Publish" button at the top right corner of the screen. This will apply the new rules to your real Time database.

Step 3: Enable Firebase Storage

  1. Navigate to Firebase Storage: Again, in the left sidebar under the Build section, click on Storage to access the storage settings.

  2. Set Up Storage: Click on the Get Started button to begin the setup process for Firebase Storage.

  3. Choose a Storage Location: Similar to the Realtime Database, you will be prompted to select a storage location. Choose the same region as your database (or use the recommended option) to ensure that your data remains cohesive.

  4. Add Security Rules

// Some code
rrules_version = '2';

// Craft rules based on data in your Firestore database
// allow write: if firestore.get(
//    /databases/(default)/documents/users/$(request.auth.uid)).data.isAdmin;
service firebase.storage {
  match /b/{bucket}/o {

  // change the date if needed
    match /{allPaths=**} {
      allow read, write: if request.time < timestamp.date(2025, 10, 12);
    }
  }
}
  • After entering the rules, click the "Publish" button at the top right corner of the screen. This will apply the new rules to your database.

5 Publish the Rules

  • After entering the rules, click the "Publish" button at the top right corner of the screen. This will apply the new rules to your database.

Conclusion

You have now successfully enabled Firebase Realtime Database and Firebase Storage for your Unibooker app! With these features set up, you are ready to utilize them for various functionalities, such as real-time data synchronization and file storage. Your Firebase environment is now equipped to support enhanced communication and data management within your application.

Apple Login Setup for Unibooker

To enable Apple Login for Unibooker, you need to generate a certificate and set up your project. Follow these steps to ensure your application is ready for Apple Sign-In.

Step 1: Generate an Apple Developer Certificate

1.1. Sign in to Apple Developer Account

1.2. Create a Certificate Signing Request (CSR)

  1. Open Keychain Access on your Mac.

  2. Navigate to Keychain Access > Certificate Assistant > Request a Certificate from a Certificate Authority.

  3. Enter your Apple ID email and a common name (your name or app name). Leave the CA email blank and select Saved to disk.

  4. Click Continue and save the CSR file.

1.3. Create and Download the Certificate

  1. In the Apple Developer portal, go to Certificates, IDs & Profiles.

  2. Under Certificates, click the + icon.

  3. Choose Apple ID Authentication and ensure to enable Sign In with Apple during this process.

  4. Upload the CSR file and download the generated certificate.

1.4. Install the Certificate

  • Double-click the downloaded certificate file to install it in Keychain Access.

Step 2: Set Up Your Project in Xcode

2.1. Open Your Project

  • Open the ios folder of your Flutter project using Xcode (.xcworkspace file).

2.2. Enable Sign In with Apple

  1. Select your project in the left sidebar.

  2. Go to the Signing & Capabilities tab.

  3. Click + Capability and add Sign In with Apple.

2.3. Check Bundle Identifier

  • Ensure your app's bundle identifier matches the one registered in the Apple Developer portal.

For iOS video referral

How to Generate and Configure a Google API Key for UniBooker


Step 1: Create a Google Cloud Project

  1. Open Google Cloud Console:

    • Visit Google Cloud Console.

    • Sign in with your Google account.

  2. Create a New Project:

    • In the top navigation bar, click Select a Project and then New Project.

    • Enter the Project Name as (Your Project Name)

    • Click Create.

  3. Select the Project:

    • After the project is created, select it from the project dropdown menu.


Step 2: Enable Required APIs

  1. Go to the API Library:

    • Navigate to APIs & Services > Library from the left menu.

  2. Search and Enable the APIs: Enable the following APIs one by one:

    • Geocoding API: Converts addresses into geographic coordinates and vice versa.

    • Places API: Retrieves information about places using query strings or geographic coordinates.

    • Directions API: Provides routes and directions between locations.

    • Place Details (New): Fetches detailed information about a specific place.

    • Google Places API: Supports querying and retrieving places data.

    • Maps SDK for Android: Provides mapping functionality for Android.

    • Maps SDK for iOS: Provides mapping functionality for iOS.

    • Maps JavaScript API: Provides interactive maps for the web platform, allowing users to view locations and routes directly in their browser..

  3. Enable Each API:

    • Search for each API in the library.

    • Click the Enable button on the API overview page.

Step 3: Generate an API Key

  1. Navigate to Credentials:

    • Go to APIs & Services > Credentials.

  2. Create an API Key:

    • Click Create Credentials and select API Key.

    • A new API key will be generated. Copy the key and save it securely.

Video Tutorials


Step 5: Integrate the API Key into UniBooker

For Flutter (UniBooker):

Android Integration

  1. Open the AndroidManifest.xml file in your Flutter project:

  2. Path: android/app/src/main/AndroidManifest.xml.

<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="YOUR_API_KEY" />

Replace YOUR_API_KEY with the key you generate

iOS Integration

  1. Open the AppDelegate.swift (or AppDelegate.m) file:

    • Path: ios/Runner/AppDelegate.swift.

  2. Add the following code to provide the API key:

  3. Path: ios/Runner/AppDelegate.swift.

     GMSServices.provideAPIKey("YOUR_API_KEY")

Replace YOUR_API_KEY with the key you generated.

To set up the Google Maps API Key in your UniBooker Flutter app, you can follow the tutorial provided in the video below. This video will guide you through the process of generating and integrating your Google Maps API key into your application.

Multi-Language Setup

To set up multi-language support in your UniBooker app, you can follow the tutorial provided in the video below. This video will guide you through the steps necessary to implement multi-language functionality, allowing your application to cater to a diverse user base.

Run The App

Before doing this, connect An Android Emulator from Android Studio or A Real Android device or An iOS Simulator from Xcode, or An real iOS device.

Before running the app, clean the project & get the packages by running the following commands one after one:

flutter clean
flutter pub get

And finally, run the following command to run the app:

flutter run

Go to OneSignal Dashboard: Visit the.

Log in: Go to and log in.

iOS Video Reference:

Android Video Reference:

Visit the and log in with your Apple ID.

📱
https://www.appicon.co/
OneSignal Dashboard
Apple Developer Account
https://documentation.onesignal.com/docs/flutter-sdk-setup
https://youtu.be/YVB94s21jD8?si=euxxiHRKhTW5djZc
Watch Here
Watch Here
Apple Developer Account