SDKs para dispositivos móveis

Os SDKs para dispositivos móveis da plataforma Contact Center AI (CCAI) 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 de CCAI de várias maneiras, incluindo a integração dos SDKs para dispositivos móveis aos apps, conforme indicado no guia do SDK Android ou no guia do SDK iOS. Você também pode integrar os SDKs para dispositivos móveis aos seus apps usando Flutter ou React Native.

Integrar usando o Flutter

Esta seção fornece as etapas iniciais para usar o Flutter e 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, continue usando instruções específicas para o SDK do Android ou do iOS, dependendo da sua plataforma móvel.

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

Executar o app de exemplo localmente

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

  • Flutter: um framework 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 desenvolvimento de apps iOS.

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

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

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

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

  3. Insira o seguinte código no terminal:

    cd example
cp .env.example .env

  4. Insira os valores das variável de ambiente no arquivo .env. Por exemplo, API_KEY=your_api_key. Não é necessário usar aspas.

  5. Para instalar as dependências, digite 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 de iOS.

  8. Digite flutter run no terminal.

Importar o módulo da plataforma CCAI para seu projeto

Para importar o módulo da plataforma CCAI para seu projeto, você precisa do seguinte:

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

  • Para 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 seu projeto, siga estas etapas:

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

  2. Acesse example/android/app/src/main/kotlin/co/ujet/flutter_example_app e copie os seguintes arquivos para o projeto Flutter onde 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 de usuário final do SDK.

Inicializar e iniciar

Para inicializar e iniciar, insira o seguinte código 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 representante durante uma sessão de navegação conjunta (somente iOS).

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

      1. Abra o arquivo info.plist.

      2. Defina a chave FLTEnableImpeller como false, conforme mostrado 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 seguintes páginas, dependendo da sua plataforma móvel:

Integrar usando o React Native

Esta seção mostra as etapas iniciais para usar o React Native e 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, continue usando instruções específicas para o SDK do Android ou do iOS, dependendo da sua plataforma móvel.

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

Executar o app de exemplo localmente

Para executar o app de exemplo localmente:

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

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

Executar o app de amostra em um servidor local

O app de exemplo que você baixou 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 do exemplo do React Native.

  2. Acesse o diretório em que a amostra do servidor está implantada.

  3. Digite 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. Digite 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 (IDE) de sua escolha.

Importar o módulo da plataforma CCAI para seu projeto

Nesta seção, mostramos como importar o módulo da plataforma CCAI para seu projeto.

Requisitos

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

Procedimento

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

  1. Copie os seguintes arquivos do app de exemplo e cole-os no seu projeto quando 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. Abrir 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 seu 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 seguintes páginas, dependendo da sua plataforma móvel: