Flutter App Setup Guide

Overview

This guide provides the necessary information to set up and configure the web2app_pro Flutter application that integrates with the ERP Mobile Bridge backend to display your website in a native mobile app with push notifications, version control, and custom pages.

Prerequisites

Required Software

Verify Installation

Run the following command to verify your Flutter installation:

flutter doctor

Ensure all required components are installed and configured.

Project Setup

1Extract Source Code

You will receive the web2app_pro Flutter application as a source code package. Extract the files to your desired location:

cd /path/to/your/projects
unzip web2app_pro.zip
cd web2app_pro

2Folder Structure

The project's source code is located in the lib/ directory and is organized as follows:

lib/
├── config/
│   └── app_config.dart          # General application configuration settings
├── models/                       # Data models used throughout the app
├── screens/
│   ├── home_screen.dart         # Primary dashboard or home view
│   ├── onboarding_screen.dart   # Initial setup/welcome screens for new users
│   └── page_viewer_screen.dart  # Screen for viewing specific pages or content
├── services/
│   ├── api_service.dart         # Handles API requests and responses
│   ├── fcm_service.dart         # Manages Firebase Cloud Messaging (Push Notifications)
│   └── settings_service.dart    # Manages app settings and local storage
├── widgets/                      # Reusable UI components
├── firebase_options.dart         # Generated Firebase configuration file
└── main.dart                     # Entry point of the application

Dependencies

Key Dependencies

The application relies on several key packages (defined in pubspec.yaml):

Install Dependencies

After extracting the source code, install all required packages by running:

flutter pub get

Firebase Configuration

Using FlutterFire CLI (Recommended)

The easiest way to configure Firebase is using the FlutterFire CLI. This will automatically generate the firebase_options.dart file.

If the file is not present, configure it using the FlutterFire CLI:

flutterfire configure

This command will:

• Prompt you to select or create a Firebase project
• Register your app with Firebase
• Download configuration files
• Generate firebase_options.dart automatically

Manual Configuration (Alternative)

If you prefer manual setup:

Android Setup

1. Go to Firebase Console
2. Create or select your project
3. Add Android app with your package name
4. Download google-services.json
5. Place it in android/app/ directory

iOS Setup

1. In Firebase Console, add iOS app with bundle ID
2. Download GoogleService-Info.plist
3. Open ios/Runner.xcworkspace in Xcode
4. Drag GoogleService-Info.plist into Runner folder

API Integration

Configure API Service

The lib/services/api_service.dart file handles all API requests to the ERP Mobile Bridge backend. You need to update the base URL to point to your backend server.

Open lib/config/app_config.dart and configure both the API base URL and your app key:

class AppConfig {
  // TODO: Replace with actual base URL in production
  static const String apiBaseUrl = 'https://web2app.lpkerp.com/api/app';
  static const String appKey = 'e1661f9e94f9281a5eefcc91cdf779b22399ef87e55c57741d01a7d808796d3e';
}

API Key Authentication

All API requests require authentication using an API Key. Each business app has a unique app_key that must be included in API requests.

Getting Your API Key

1. Log in to the ERP Mobile Bridge admin panel
2. Navigate to Business Apps
3. Find your app in the list
4. Copy the App Key value from the table

Using the API Key

Include the API key in your HTTP requests. There are two common methods:

Method 1: Query Parameter (Recommended)

// Example API request with app_key as query parameter
final response = await http.get(
  Uri.parse('$apiBaseUrl/app-settings?app_key=YOUR_APP_KEY_HERE'),
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
  },
);

Method 2: Request Header

// Example API request with app_key in header
final response = await http.get(
  Uri.parse('$apiBaseUrl/app-settings'),
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
    'X-App-Key': 'YOUR_APP_KEY_HERE',
  },
);

Available API Endpoints

Example: Fetching App Settings

import 'package:http/http.dart' as http;
import 'dart:convert';
import '../config/app_config.dart';

class ApiService {
  Future<Map<String, dynamic>> fetchAppSettings() async {
    try {
      final response = await http.get(
        Uri.parse('${AppConfig.apiBaseUrl}/app-settings?app_key=${AppConfig.appKey}'),
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json',
        },
      );

      if (response.statusCode == 200) {
        final data = json.decode(response.body);
        return data['data'];
      } else {
        throw Exception('Failed to load app settings');
      }
    } catch (e) {
      print('Error fetching app settings: $e');
      rethrow;
    }
  }
}

WebView Setup

Understanding the WebView Implementation

The WebView functionality is already implemented in lib/screens/home_screen.dart. This screen loads your website URL and provides features like:

• Loading indicator while page loads
• Pull-to-refresh functionality (if enabled in settings)
• JavaScript support
• Navigation handling

Push Notifications

Firebase Cloud Messaging (FCM)

Push notification functionality is already implemented in lib/services/fcm_service.dart. This service handles:

• Requesting notification permissions
• Getting and registering FCM tokens
• Handling foreground and background messages
• Displaying local notifications
• Token refresh management

Build & Deploy

Android Build

Debug Build

flutter build apk --debug

Release Build

flutter build apk --release

App Bundle (for Play Store)

flutter build appbundle --release

iOS Build

Debug Build

flutter build ios --debug

Release Build

flutter build ios --release

App Signing

Android Signing

Create a keystore:

keytool -genkey -v -keystore ~/upload-keystore.jks -keyalg RSA -keysize 2048 -validity 10000 -alias upload

Create android/key.properties:

storePassword=your_password
keyPassword=your_password
keyAlias=upload
storeFile=/path/to/upload-keystore.jks

Update android/app/build.gradle

def keystoreProperties = new Properties()
def keystorePropertiesFile = rootProject.file('key.properties')
if (keystorePropertiesFile.exists()) {
    keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
}

android {
    signingConfigs {
        release {
            keyAlias keystoreProperties['keyAlias']
            keyPassword keystoreProperties['keyPassword']
            storeFile keystoreProperties['storeFile'] ? file(keystoreProperties['storeFile']) : null
            storePassword keystoreProperties['storePassword']
        }
    }
    buildTypes {
        release {
            signingConfig signingConfigs.release
        }
    }
}

Version Management

Update version in pubspec.yaml:

version: 1.0.0+1  # version_name+version_code

The version code should match what you configure in the ERP Mobile Bridge admin panel for version checking.

Running the Application

Start the App

After completing the setup steps above, run the application on a connected device or emulator:

flutter run

Verify Integration

Check that the following are working correctly:

• App loads settings from your backend
• Website displays correctly in the WebView
• Push notifications are received (test from admin panel)
• Onboarding screens appear on first launch
• App version checking works