Documentation

File Structure

After downloading the Sngine Messaging Apps zip file from CodeCanyon and extracting it, you will need the Source folder to build the apps.

The file structure of the source code inside this folder Source is as follows:

/android
/ios
/assets/ # App assets (images, icons, etc.)
/lib/
  └── common/
      └── config.dart # Main configuration file
      └── themes.dart # App theming
  └── routes/
  └── screens/ # All screens
  └── states/
  └── utilities/
  └── widgets/
  └── main.dart # Main file
/pubspec.yaml
              

Prerequisites

Installation

Before you start, you need to install Android Studio (For Android) and Xcode (For iOS) and Flutter then set up your development environment.

Sngine Installation

You can follow the Sngine installation guide from here Sngine Installation Guide

Visual Studio Code Installation

You can download Visual Studio Code from here Visual Studio Code

You can insall Flutter & Dart plugins from here Flutter & Dart Plugins

Flutter Installation

You can follow the Flutter installation guide from here Flutter Installation Guide

Android Studio Installation

You can download Android Studio from here Android Studio

You can insall Flutter & Dart plugins from here Flutter & Dart Plugins

Xcode Installation MacOS

You can download Xcode from here Xcode

Configuration

In this section, we will guide you through the configuration of the apps like APIs Settings, Push Notifications, and App Configuration.

APIs Settings

First thing you need to make sure you are ruuning Sngine latest version (v4.0 or higher) and now you need to configure your API settings.

1. Go to your Sngine admin panel then APIs Settings

   

2. If you don't the keys generated, you can generate them from here Reser API Key and the same for JWT Key for Reset JWT Key

   Then your need to check if it's working fine by clicking on Ping API button till you see the success message like this:

   

3. Now you need to copy the API Key, API Secret and JWT Key and paste it in the apps config.dart file as will be shown shortly.

Push Notifications

In this section, we will guide you through the configuration of the push notifications for the apps.

1. First of all you need to configure the push notifications in your Sngine admin panel for the messging apps as we shown in the Sngine documentation Push Notifications Setup

   

2. Now you need to copy the OneSignal App ID and paste it in the apps config.dart file as will be shown shortly.

App Configuration

In this section, we will guide you through the configuration of the app.

1. After open the source code folder then go to lib/common/config.dart file and you will see the configuration file as will be shown in the screenshot below:

   You will paste the API Key, API Secret and OneSignal App ID in the config.dart file as will be shown in the screenshot below:

   For apiURL it will be the URL of your Sngine server like https://demo.sngine.com without the / at the end

   

2. Now you need to run the following command to install the app dependencies.

   flutter pub get

   You can also open the pubspec.yaml and click on Get Packages button to install the dependencies.

   

   

3. And that's it, you have successfully configured the app. Now you can customize the app as you want.

Running The Apps

In this section, you will learn how to run the apps on your device.

1. You need to run the app to make sure it's working fine and connected to your Sngine server using the API keys you configured in the previous sections.

2. From Visual Studio Code, you can run the app on your device by clicking on the Run button after open lib/main.dart file then select your device from the list.

   

   

3. This step will take a while to build the app and then you will see the app running on your device.

   

   

   

4. Now you can see the app running on your device and you ready to customize the app as you want.

Customization

In this section, we will guide you through the customization of the app like App Name, App Icon, and App Colors.

App Name

In this section, we will guide you through the customization of the app name.

1. You can change the app name from 2 files android/app/src/main/AndroidManifest.xml and ios/Runner.xcworkspace/Runner.xcproj

   

App Icon

In this section, we will guide you through the customization of the app icon.

1. First you will need to have your app icon as JPG or PNG file with the size of 1024x1024 pixels.

2. You will use this online tool to generate the app icon for Android and iOS https://www.appicon.co/ You will drag and drop your app icon to the tool and then you will click on the Generate button.

   

3. You will get a ZIP file with the app icon for Android and iOS.

   

4. For Android, you will need to copy/paste what's inside the Android folder to android/app/src/main/res folder.

5. For iOS, you will need to copy/paste the followings files appstore.png, playstore.png and Assets.xcassets folder to ios/Runner folder.

6. And that's it, you have successfully changed the app icon.

App Colors

In this section, we will guide you through the customization of the app colors.

1. You can change the app colors from lib/common/themes.dart file.

   

App Images

In this section, we will guide you through the customization of the app images.

1. You can change the app images from assets/images folder.

   

2. The image you want to change must be with same name and extension as the original image.

Building The Apps

In this section, we will guide you through the building of the apps for Android and iOS.

Building Android App

In this section, we will guide you through the building of the Android app.

1. First you will need to change your app bundle ID to a unique one in the following files:

   android/app/build.gradle.kts

   android/app/src/main/kotlin/com/example/sngine_messenger/MainActivity.kt

   

2. Select the Android folder from your source code folder and open it in Android Studio.

3. Once the Android Studio is open let the Gradle build the app.

   

4. Once the Gradle build is finished, you can select from the menu Build > Generate Signed Bundle / APK....

   

   

   You will need to generate the keystore file and then you will select the AAB option.

   

5. You will see the AAB file in the folder you selected to save the file.

Building iOS App

In this section, we will guide you through the building of the iOS app.

1. First you need to create a new Apple Developer Account if you don't have one yet https://developer.apple.com/account/

2. You need to create a new App ID if you don't have one yet https://developer.apple.com/account/resources/identifiers/list

   

3. Open the ios/Runner.xcworkspace file in Xcode and wait for the project to be indexed and ready.

   

4. Select the Runner project from the left sidebar and click on the Runner target.

   Change the Team to your Apple Developer Team. Also change the Bundle Identifier to the one you created in the previous step.

   In App Groups section, you need to add a new App Group like group.YOUR_APP_BUNDLE.onesignal

   

5. Now change the target to OneSignalNotificationServiceExtension and change the Team to your Apple Developer Team.

   You need to change the Bundle Identifier to YOUR_APP_BUNDLE.OneSignalNotificationServiceExtension.

   In App Groups section, you need to add the same App Group as the main app group.YOUR_APP_BUNDLE.onesignal.

   

6. Now you can publish the app by selecting from the menu Product > Archive.

   

7. Now you can select the Distribute option and then select the App Store Connect option.

8. You will follow the steps to upload the app to App Store Connect.