SDKs para dispositivos móveis

Os SDKs para dispositivos móveis da plataforma Contact Center AI (CCAI Platform) incluem o SDK do Android e o SDK do iOS. Com esses SDKs, você pode oferecer suporte por voz e chat aos seus clientes diretamente no app para dispositivos móveis iOS ou Android.

É possível configurar apps para dispositivos móveis para trabalhar com a plataforma CCAI de várias maneiras, incluindo a integração dos SDKs para dispositivos móveis aos seus apps, conforme indicado no guia do SDK do Android ou no guia do SDK do iOS. Você também pode integrar os SDKs para dispositivos móveis aos seus apps para dispositivos móveis usando Flutter ou React Native.

Integrar usando o Flutter

Esta seção fornece as etapas iniciais para usar o Flutter para integrar os SDKs para dispositivos móveis aos seus apps. As etapas desta seção são as mesmas para o SDK do Android e o SDK do iOS. Depois de concluir essas etapas, você pode continuar usando instruções específicas para o SDK do Android ou o SDK do iOS, dependendo da sua plataforma para dispositivos móveis.

O Flutter não é necessário para integrar os SDKs para dispositivos móveis aos seus apps. Você também pode integrar conforme indicado nestes guias:

Executar o app de exemplo localmente

Para executar um app de exemplo, é necessário:

  • Flutter: uma estrutura para criar apps multiplataforma.

  • Android Studio: um ambiente de desenvolvimento integrado para o desenvolvimento de apps Flutter e Android.

  • Xcode: um ambiente de desenvolvimento integrado para o desenvolvimento de apps iOS.

  • Cocoapods: um gerenciador de dependências para projetos iOS.

Para executar o app de exemplo localmente, siga estas etapas:

  1. Faça o download e extraia o arquivo ZIP de exemplo do Flutter.

  2. No terminal, acesse o diretório de exemplo do Flutter.

  3. Insira o código a seguir no terminal:

    cd example
cp .env.example .env

  4. Insira os valores da variável de ambiente no arquivo .env, por exemplo, API_KEY=your_api_key. As aspas não são necessárias.

  5. Para instalar dependências, insira flutter pub get no terminal.

  6. Para atualizar as informações da empresa, acesse android/app/src/main/res/values/strings.xml e atualize ujet_company_key, ujet_subdomain e ujet_company_url.

  7. Dependendo da sua plataforma, execute um emulador do Android ou um simulador do iOS.

  8. Insira flutter run no terminal.

Importar o módulo da plataforma CCAI para o projeto

Para importar o módulo da plataforma CCAI para o projeto, é necessário:

  • Um endpoint de API de assinatura de JWT. Para mais informações, consulte Autenticação do usuário final do SDK.

  • No Android, o destino de implantação do projeto precisa ser o iOS 13.0 ou mais recente.

  • No iOS, o minSdkVersion do projeto precisa ser 21 ou mais recente.

Para importar o módulo da plataforma CCAI para o projeto, siga estas etapas:

  1. Copie o conteúdo do diretório example/lib/ujet e cole-o no projeto do Flutter no diretório lib.

  2. Acesse example/android/app/src/main/kotlin/co/ujet/flutter_example_app e copie os arquivos a seguir para o projeto do Flutter em que a classe MainActivity está localizada:

    • UJETModule.kt

    • Application.kt

    • firebase\MyFirebaseMessagingService.kt

    • firebase\FirebaseTokenManager.kt

  3. Abra o XCode e arraste example/ios/Runner/UJETModule.swift para o projeto.

  4. Abra example/lib/ujet/ujet_module.dart e edite o método _getUserData para que ele retorne as informações adequadas do usuário final. Confira o exemplo de código a seguir:

    static Future<Map<String, String?>> _getUserData() async {

String? name = "John Doe"; // end-user name
String? identifier = "id1234"; // end user identifier
String? email = "jdoe@example.com"; // end user email
String? phone = "+12223334444"; // end user phone

return {
  "name": name,
  "identifier": identifier,
  "email": email,
  "phone": phone
  };
}

  5. Implemente signPayload em server_api.dart para receber o token JWT assinado da API do servidor. Para mais informações, consulte Autenticação do usuário final do SDK.

Inicializar e iniciar

Para inicializar e iniciar, insira o código a seguir no terminal:

 await UJET.init(key: 'your_ujet_key', baseUrl: 'your_ujet_base_url');
 await UJET.start(UjetStartOptions(skipSplashScreen: true));

Problemas conhecidos

Confira os problemas conhecidos ao usar o Flutter para integrar os SDKs para dispositivos móveis aos seus apps:

  • Problema: as capturas de tela não são feitas usando as SmartActions de captura de tela.

    • Ação: o Google está trabalhando para corrigir esse problema.

  • Problema: a tela de navegação conjunta não é projetada do lado do agente durante uma sessão de navegação conjunta (somente iOS).

    • Ação: o Google recomenda desativar o mecanismo de impulsor em dispositivos iOS. Para desativar o mecanismo de impulsor, siga estas etapas:

      1. Abra o arquivo info.plist.

      2. Defina a chave FLTEnableImpeller como false, como no exemplo de código a seguir:

        <key>FLTEnableImpeller</key>
<false/>

Continuar a integração

Para continuar a integração usando o Flutter, consulte uma das páginas a seguir, dependendo da sua plataforma para dispositivos móveis:

Integrar usando o React Native

Esta seção fornece as etapas iniciais para usar o React Native para integrar os SDKs para dispositivos móveis aos seus apps. As etapas desta seção são as mesmas para o SDK do Android e o SDK do iOS. Depois de concluir essas etapas, você pode continuar usando instruções específicas para o SDK do Android ou o SDK do iOS, dependendo da sua plataforma para dispositivos móveis.

O React Native não é necessário para integrar os SDKs para dispositivos móveis aos seus apps. Você também pode integrar conforme indicado nestes guias:

Executar o app de exemplo localmente

Para executar o app de exemplo localmente, faça o seguinte:

  1. Faça o download e extraia o ujet-react-native-example.zip app de exemplo.

  2. Abra o arquivo README.md na pasta extraída e siga as instruções.

Executar o app de exemplo em um servidor local

O app de exemplo que você fez o download no procedimento anterior também pode ser executado em um servidor local. Para isso, siga estas etapas:

  1. Faça o download e extraia o arquivo ZIP de exemplo do React Native.

  2. Acesse o diretório em que o exemplo do servidor está implantado.

  3. Insira os seguintes comandos:

    cd server
cp .env.example .env
Edit .env
nvm use
npm install
npm start```

Executar o React Native

Para executar o React Native, siga estas etapas:

  1. Mude o diretório do aplicativo.

  2. Insira os seguintes comandos:

    cd app
nvm use
npm install
bundle install
npx pod-install

  3. Atualize as informações da empresa:

    1. src/screens/Home.tsx:atualize os parâmetros em UJET.initialize({})

    2. android/app/src/main/res/values/strings.xml::atualize ujet_company_key, ujet_subdomain e ujet_company_url.

  4. Insira o comando npm start.

  5. Execute o app para dispositivos móveis iOS ou Android usando a CLI interativa do Meteor ou um ambiente de desenvolvimento integrado de sua escolha.

Importar o módulo da plataforma CCAI para o projeto

Esta seção mostra como importar o módulo da plataforma CCAI para o projeto.

Requisitos

Você precisa usar um endpoint de API de assinatura de JWT. Consulte o arquivo server/app.js no app de exemplo ou a Autenticação do usuário final para mais detalhes.

Procedimento

Para importar o módulo da plataforma CCAI para o projeto, siga estas etapas:

  1. Copie os arquivos a seguir do app de exemplo e cole-os no projeto, conforme apropriado:

    1. app/src/native_modules/UJETInterfaces.ts
    2. app/src/native_modules/UJETNativeModule.ts
    3. app/ios/UJETModule.h
    4. app/ios/UJETModule.m
    5. app/android/src/main/java/com/sampleapp/UJETModule.kt

  2. Abra UJETNativeModule.ts

    1. Remova a seguinte linha:

      import AsyncStorage from '@react-native-async-storage/async-storage';

    2. Edite a função getUserData para retornar informações precisas do usuário final:

      async function getUserData({ name: anonymousName }: SignPayloadData): Promise<Object> {
  // fetch the end user information from your application
  return {
    name: 'John Doe',
    identifier: 'id1234',
    email: 'jdoe@example.com',
    phone: '+12223334444'
  }
}

    3. Atualize SIGNING_BASE_URL para apontar para o endpoint de assinatura.

  3. Inicialize e inicie usando o exemplo de código a seguir:

    import { UJET } from '../path/UJETNativeModule';

UJET.initialize({
  key: 'your-key',
  baseUrl: 'your-base-url'
});

const startUJET = () => {
  UJET.start({
    skipSplashScreen: true
  });
};
    • Substitua your-key pelo ID da empresa.
    • Substitua your-base-url pelo endpoint de API do host da plataforma CCAI, por exemplo, https://ccaas-host.uc1.ccaiplatform.com/api/v2/.

Continuar a integração

Para continuar a integração usando o React Native, consulte uma das páginas a seguir, dependendo da sua plataforma para dispositivos móveis: