Next to the already discussed theory behind a mobile integration, this example app aims to visualize the different options.

Specifications:

App Framework: Flutter
Connection Type: Socket
Programming Language:  Dart

Connect a Flutter App to Cognigy.AI

This guide will show you how to add a Conversational AI to your mobile application.

1_oxaSKydMFGXESQBPNrVkZw.png

In Cognigy

In order to set up a test environment, one has to create an example agent in Cognigy. For this approach, two resources are needed:

  1. Flow
  2. Socket Endpoint

In the Flow, a simple SAY Node is enough to show the functionality of the connection. In order to expose this to the world, one has to create the endpoint and choose the defined Flow as the source of the logic. Finally, the Endpoint URL and URL Token need to be stored since it will be used in the app.

In Flutter

For this short guide, the Cognigy part is finished. Now the application has to connect to the provided socket. Thereafter, one can send messages to Cognigy and wait for incoming responses, such as text or images e.g. gallery views.

The following steps are required to set up the connection in the Flutter application:

  1. Follow this Flutter Socket Tutorial
  2. Create a socket service that handles incoming and outgoing Cognigy messages
  3. Display the messages in the application

After reading the tutorial, the application should be ready to connect to any socket. Now, create a new Dart file called config.dart and paste the following code into it:

final String socketUrl = <Endpoint URL>;
final String urlToken = <URL Token>;

Paste in your Endpoint URL and URL Token.

After that, create another file called socket_service.dart. This file will contain the two methods createSocketConnection() and sendMessage(). The first one connects the app to Cognigy, while the second one sends a user message to our Conversational AI:


import 'package:socket_io_client/socket_io_client.dart' as IO
// Add this package to your pubspec.yaml import
'package:uuid/uuid.dart';
import 'package:cognigy_flutter_client/cognigy/config.dart' as config;

class SocketService {
IO.Socket socket;
bool connected = false;
final sessionId = Uuid().v1();

// time-based
final userId = Uuid().v4();

sendMessage(String text, dynamic data) {
if (connected) {
socket.emit('processInput', {
'URLToken': config.urlToken,
'text': text,
'userId': userId,
'sessionId': sessionId,
'channel': 'flutter',
'data': data,
'source': 'device'
});
} else {
print('[SocketClient] Unable to directly send your message since we are not connected.');
}
}

createSocketConnection() {
print("[SocketClient] try to connect to Cognigy.AI");

socket = IO.io(config.socketUrl, <String, dynamic>{
'transports': ['websocket'],
'extraHeaders': {
'URLToken': config.urlToken
}
});

this.socket.on("connect", (_) {
print("[SocketClient] connection established");

connected = true;
});

this.socket.on("disconnect", (_) => print("[SocketClient] disconnected"));
}
}

In the main.dart file, one is now able to use the SocketService class as soon as the widget starts initializing:

// Initialize SocketService to access the socket connection
final SocketService socketService = injector.get<SocketService>();
@override
void initState() {

// ...
// connect to Cognigy
socketService.createSocketConnection();
// wait for AI messages
socketService.socket.on('output', (response) {
// ...
}));
// ... super.initState();
}

Now all incoming messages can be handled in the initState() method. For example, to add them to a list of messages and display them in the app. However, outgoing messages must be handled as well. Therefore, a button can be added and a text field where the value of this field will be sent to Cognigy as soon as the button is pressed.

TextEditingController textController;TextField(
controller: textController,
onChanged: (value) {
setState(() { textController.text = value;});
}
)
FlatButton(
onPressed: () {
if (textController.text.isNotEmpty) {
// send the message to Cognigy
socketService.sendMessage(textController.text, null);

// clear the text field
textController.text = '';
// add the sent message to the displayed chat
// ...
}
}
...
)

→ No more steps are needed to send and receive simple text messages. ←


Further Steps

Just sending simple text messages may not be the target of a complex Conversational AI. In Cognigy, there are some more structured message types, like:

  • Quick Replies
  • Buttons
  • List
  • Gallery
  • Attachments (Image, Video)

For further developments, one can check the response that is sent from the Cognigy Socket Endpoint and build a related view in your list of messages.


Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.