Sample code

Here we provide you with a sample application to experience ZEGOCLOUD's In-app Chat, and also describe how to run the sample code.

Prepare the environment

• The Dart version is [2.12.0, 4.0.0).
• An iOS device or iOS Simulator that is running on iOS 11.0 or later and supports audio and video. We recommend you use a real device.
• An Android device or Simulator that is running on Android 4.1 or later and supports audio and video. We recommend you use a real device (Remember to enable the USB debugging).
• Windows: Windows 10 or higher (64-bit operating system based on x86-64).
• macOS: macOS 10.13 or higher.
• Web browsers:
  • Chrome 58 or higher.
  • Firefox 56 or higher.
  • Safari 11 or higher.
  • Opera 45 or higher.
• Your device is connected to the internet.

Configure the Flutter environment

Your development environment should meet one of the following requirements:

• Android Studio: select Preferences > Plugins, search and download the Flutter plugin, and add the Flutter SDK path.
• Visual Studio Code: search and download the Flutter extension in the app store.

After all the above is configured, run the flutter doctor command in the terminal, and follow the prompts to install corresponding dependencies.

Prerequisites

• Go to ZEGOCLOUD Admin Console, and do the following:
  • Create a project, get the AppID and AppSign.
  • Subscribe to the In-app Chat service (contact us if the subscription doesn't go well).

For SDK 2.3.0 or later, the AppSign authentication mode and Token-based authentication mode are both supported.

If you want to change your authentication mode, please refer to the Upgrade the authentication mode from using the AppSign to Token.

Get the sample code

The following structure shows the subdirectory structure of the sample code:

.
├── CHANGELOG.md                            
├── LICENSE                                 
├── README.md                               
├── android                                
├── example                                 # Sample project directory
│   ├── ...                           
│   ├── android                             # Android sample project
│   ├── ios                                 # iOS sample project
│   ├── lib                                 # Main logic directory of the sample project
│   │   ├── ...
│   │   ├── main.dart                       # Entry of the sample project
│   │   └── topics                          # Themes of the sample project
│   │       ├── chat                        # Chat logic
│   │       ├── items                       # Components used in the sample project
│   │       │   ├── ...
│   │       │   ├── key_center
│   │       │   │   ├── ...
│   │       │   │   └── key_center.dart     # Please enter your AppID in this file
│   │       │   └── msg_items               # Message logic
│   │       ├── login                       # Login logic
│   │       ├── menu                        # Menu logic
│   │       └── splash                      # Splash screen logic
│   ├── macos
│   ├── pubspec.lock
│   ├── pubspec.yaml                        # Dependency description file for the sample project
│   ├── web                                 # Web sample project
│   ├── windows                             # Windows sample project
│   └── ...
├── ios                                     # iOS plugin      
├── lib                                     # Implementation and header files of the Flutter plugin
├── macos                                   # macOS plugin
├── pubspec.yaml                            # Dependency description file for the plugin
├── windows                                 # Windows plugin
└── ...

Run the sample code

The following shows how to run the Flutter sample code on iOS and Android devices:

Android Studio

1. In Android Studio, select Open an existing Android Studio project, and open the zim_flutter_sdk file you get when downloading the sample app package file.

2. Modify the example/lib/topics/items/key_center/key_center.dart file with the AppID and AppSIgn you get in the previous prerequisites steps.

3. Connect your test devices to the computer.

4. Click the Run button in "Android Studio" to run the sample app.

   

Visual Studio Code

1. In Visual Studio Code, select File > Open, open the zim_flutter_sdk file you get when downloading the sample code.

2. Modify the example/lib/topics/items/key_center/key_center.dart file with the AppID and AppSign you get in the previous prerequisites step.

3. Connect your test devices to the computer.

4. Click the Run > Run without Debugging to run the sample app.

Notes for running the sample app on iOS devices

If you're running the sample app on a real iOS device, you'll need to use your own Apple developer certificate.

1. In Xcode, open the example/ios/Runner.xcworkspace file you get.

2. Log in to your Apple developer account.

   1. In Xcode, select Xcode > Preferences..., click Accounts, and click the "+" in the lower left to add your Apple ID, and click continue.

      

   2. Log in with the Apple ID and Password.

      

3. Modify the Bundle Identifier and the certificate.

   1. In Xcode, select the Runner in the left pane.

      

   2. Select your target project, click General, and modify the Bundle Identifier.

      

   3. Click the Signing & Capabilities to select your certificate.