إنشاء برامج تتبُّع صوتية لأجهزة Android باستخدام Dialogflow Essentials مرفرفة

1. قبل البدء

في هذا الدرس التطبيقي حول الترميز، ستتعلّم كيفية دمج نص Dialogflow Essentials (ES) بسيط وبرنامج تتبُّع صوتي في تطبيق Flutter. Dialogflow ES هي حزمة تطوير لإنشاء واجهات مستخدم قائمة على المحادثة. وبالتالي، روبوتات الدردشة والروبوتات الصوتية ومداخل الهواتف. يمكنكم جميعًا إنشاء هذه المنصة باستخدام الأداة نفسها، بل يمكنكم أيضًا إتاحة عدة قنوات بأكثر من 20 لغة مختلفة. تتكامل منصة Dialogflow مع العديد من منصات المحادثات الرائجة، مثل "مساعد Google" وSlack وFacebook Messenger. إذا كنت تريد إنشاء وكيل لإحدى هذه المنصات، عليك استخدام أحد خيارات الدمج المتعدّدة. ومع ذلك، لإنشاء روبوت دردشة للأجهزة الجوّالة، سيتعين عليك إنشاء تكامل مخصص. ستنشئ الأهداف من خلال تحديد عبارات تدريب لتدريب نموذج تعلُّم الآلة الأساسي.

تم تصميم هذا التمرين ليعكس التجربة الشائعة للمطورين على السحابة الإلكترونية:

  1. إعداد البيئة
  • Dialogflow: إنشاء وكيل جديد في Dialogflow ES
  • Dialogflow: إعداد Dialogflow
  • Google Cloud: إنشاء حساب خدمة
  1. Flutter: إنشاء تطبيق محادثات
  • إنشاء مشروع Flutter
  • ضبط الإعدادات والأذونات
  • إضافة التبعيات
  • جارٍ الربط بحساب الخدمة.
  • تشغيل التطبيق على جهاز افتراضي أو جهاز فعلي
  1. Flutter: إنشاء واجهة محادثة تتيح تحويل الكلام إلى نص
  • إنشاء واجهة المحادثة
  • ربط واجهة المحادثة
  • دمج حزمة Dialogflow gRPC في التطبيق
  1. Dialogflow: إعداد نماذج لوكيل Dialogflow
  • ضبط إعدادات الترحيب الأهداف الاحتياطية
  • الاستفادة من قاعدة معلومات الأسئلة الشائعة

المتطلبات الأساسية

  • تجربة استخدام Dart/Flutter الأساسية
  • تجربة Google Cloud Platform الأساسية
  • تجربة أساسية مع Dialogflow ES

ما الذي ستقوم ببنائه

يعرض لك هذا الدرس التطبيقي كيفية إنشاء برنامج تتبُّع للأسئلة الشائعة على الأجهزة الجوّالة، والذي يمكنه الإجابة عن الأسئلة الأكثر شيوعًا حول أداة Dialogflow. يمكن للمستخدمين النهائيين التفاعل مع واجهة النص أو بث صوت عبر الميكروفون المدمَج في الجهاز الجوّال للحصول على إجابات.

ما ستتعرَّف عليه

  • كيفية إنشاء روبوت دردشة باستخدام Dialogflow Essentials
  • كيفية دمج Dialogflow في تطبيق Flutter باستخدام حزمة Dialogflow gRPC
  • كيفية رصد أهداف النص باستخدام Dialogflow
  • كيفية بث صوت عبر الميكروفون إلى Dialogflow
  • كيفية الاستفادة من موصِّل قاعدة المعلومات لاستيراد الأسئلة الشائعة العلنية
  • اختبِر روبوت الدردشة من خلال واجهة نصية وصوتية على جهاز افتراضي أو جهاز فعلي

المتطلبات

  • ستحتاج إلى عنوان Google Identity أو Gmail لإنشاء وكيل Dialogflow.
  • ستحتاج إلى الوصول إلى Google Cloud Platform لتنزيل حساب خدمة
  • بيئة تطوير Flutter

إعداد بيئة تطوير Flutter

  1. اختَر نظام التشغيل الذي تريد تثبيت Flutter عليه.
  1. يمكنك إنشاء تطبيقات باستخدام Flutter باستخدام أي محرِّر نصوص إلى جانب أدوات سطر الأوامر. ولكن ستستخدم ورشة العمل هذه استوديو Android. يوفر لك المكوّنان الإضافيان Flutter وDart في "استوديو Android" إكمال الرموز البرمجية وتمييز البنية وأدوات المساعدة في تعديل التطبيقات المصغّرة وتشغيل ودعم تصحيح الأخطاء والمزيد. اتّبِع الخطوات الواردة على https://flutter.dev/docs/get-started/editor

2. إعداد البيئة

Dialogflow: إنشاء وكيل جديد في Dialogflow ES

  1. افتح
  2. في الشريط الأيمن، أسفل الشعار مباشرةً، اختَر "إنشاء وكيل جديد". في القائمة المنسدلة. (ملاحظة: لا تنقر على القائمة المنسدلة المكتوب عليها "عام"، لأنّنا نحتاج إلى مثيل Dialogflow عام للاستفادة من قاعدة معلومات الأسئلة الشائعة.)
  3. تحديد اسم وكيل yourname-dialogflow (باستخدام اسمك الخاص)
  4. اختَر الإنجليزية - en كلغة تلقائية.
  5. اختَر المنطقة الزمنية الأقرب إليك كمنطقة زمنية تلقائية.
  6. لا تختَر "الوكيل الضخم". (باستخدام هذه الميزة، يمكنك إنشاء وكيل شامل يمكنه التنسيق بين الوكلاء "الفرعيين". لسنا بحاجة إليها الآن).
  7. انقر على إنشاء.

إنشاء شاشة مشروع جديد

إعداد Dialogflow

  1. انقر على رمز الترس في القائمة اليمنى بجانب اسم مشروعك.

إنشاء قائمة منسدلة لمشروع جديد

  1. أدخِل الوصف التالي للوكيل: الأسئلة الشائعة حول برنامج الدردشة المبرمَجة بشأن Dialogflow
  2. تفعيل الميزات التجريبية، اقلب مفتاح التبديل.

الإصدار 2 من Dialogflow Essentials 1

  1. انقر على علامة التبويب الكلام، وتأكَّد من أنّ المربع التكيّف التلقائي للكلام نشط.
  2. ويمكنك أيضًا قلب مفتاح التحكّم الأول، لأنّ ذلك سيؤدي إلى تحسين "نموذج الكلام"، ولكنّه لا يتوفّر إلّا عند ترقية الإصدار التجريبي من Dialogflow.
  3. انقر على حفظ.

Google Cloud: الحصول على حساب خدمة

بعد إنشاء وكيل في Dialogflow، يجب إنشاء مشروع Google Cloud في Google Cloud Console.

  1. افتح Google Cloud Console: .
  2. تأكَّد من تسجيل الدخول باستخدام حساب Google نفسه المستخدَم في Dialogflow، واختَر المشروع: yourname-dialogflow في الشريط الأزرق العلوي.
  3. بعد ذلك، ابحث عن Dialogflow API في شريط الأدوات العلوي وانقر على نتيجة Dialogflow API في القائمة المنسدلة.

تفعيل واجهة برمجة تطبيقات Dialogflow

  1. انقر على الزر الأزرق إدارة، وانقر على بيانات الاعتماد في شريط القائمة الأيمن. (عندما يكون Dialogflow غير مفعَّل بعد، انقر على تفعيل أولاً)

وحدة تحكّم Google Cloud Platform لبيانات الاعتماد

  1. انقر على إنشاء بيانات اعتماد (في أعلى الشاشة) واختر حساب الخدمة.

إنشاء بيانات اعتماد

  1. حدِّد اسم حساب الخدمة: flutter_dialogflow ورقم التعريف والوصف، ثم انقر على إنشاء.

إنشاء حساب خدمة

  1. في الخطوة 2، سيكون عليك اختيار الدور: "Dialogflow API Admin"، ثم النقر على متابعة وتم.
  2. انقر على حساب خدمة flutter_dialogflow، ثم انقر على علامة التبويب المفاتيح واضغط على إضافة مفتاح > إنشاء مفتاح جديد

إنشاء مفتاح

  1. أنشِئ مفتاح JSON. يمكنك إعادة تسميته إلى credentials.json وتخزينه في مكان آمن على محرك الأقراص الثابتة. سنستخدمها لاحقًا.

مفتاح JSON

ممتاز، جميع الأدوات التي نحتاجها تم إعدادها بشكل صحيح. يمكننا الآن دمج Dialogflow في تطبيقنا.

3- Flutter: إنشاء تطبيق Chat

إنشاء تطبيق Boilerplate

  1. افتح "استوديو Android" وانقر على بدء مشروع Flutter جديد.
  2. اختَر تطبيق Flutter كنوع المشروع. ثم انقر على "التالي".
  3. تأكَّد من أنّ مسار Flutter SDK يحدّد موقع حزمة تطوير البرامج (SDK) (اختَر "تثبيت حزمة SDK"... إذا كان الحقل النصي فارغًا).
  4. أدخِل اسم المشروع (على سبيل المثال، flutter_dialogflow_agent). بعد ذلك، انقر على التالي.
  5. عدِّل اسم الحزمة وانقر على إنهاء.

إنشاء تطبيق Flutter جديد

سيؤدي هذا إلى إنشاء نموذج تطبيق يحتوي على مكونات المواد.

انتظِر حتى يتم تثبيت حزمة تطوير البرامج (SDK) وإنشاء المشروع في "استوديو Android".

الإعدادات الأذونات

  1. تتطلّب مكتبة مسجّل الصوت sound_stream التي سنستخدمها توفُّر minSdk 21 على الأقلّ. لذا، سنغيّر هذا الإعداد في android/app/build.gradle في مجموعة defaultConfig. (يُرجى العِلم أنّ هناك ملفَّين Build.gradle في مجلد android، ولكن الملف الصحيح هو الملف الصحيح).
defaultConfig {
   applicationId "com.myname.flutter_dialogflow_agent"
   minSdkVersion 21
   targetSdkVersion 30
   versionCode flutterVersionCode.toInteger()
   versionName flutterVersionName
}
  1. لمنح الأذونات للميكروفون والسماح للتطبيق بالتواصل مع وكيل Dialogflow الذي يتم تشغيله في السحابة الإلكترونية، عليك إضافة إذنَي INTERNET وRECORD_AUDIO إلى ملف app/src/main/AndroidManifest.xml. يتضمّن مشروع Flutter العديد من ملفات AndroidManifest.xml، ولكنك ستحتاج إلى الملف المتوفّر في المجلد الرئيسي. يمكنك إضافة السطور مباشرةً داخل علامات البيان.
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.RECORD_AUDIO" />

إضافة التبعيات

سنستخدم الحزم sound_stream وrxdart وdialogflow_grpc.

  1. إضافة الاعتمادية sound_stream
$ flutter pub add sound_stream
Resolving dependencies...
  async 2.8.1 (2.8.2 available)
  characters 1.1.0 (1.2.0 available)
  matcher 0.12.10 (0.12.11 available)
+ sound_stream 0.3.0
  test_api 0.4.2 (0.4.5 available)
  vector_math 2.1.0 (2.1.1 available)
Downloading sound_stream 0.3.0...
Changed 1 dependency!
  1. إضافة الاعتمادية dialogflow_grpc
flutter pub add dialogflow_grpc
Resolving dependencies...
+ archive 3.1.5
  async 2.8.1 (2.8.2 available)
  characters 1.1.0 (1.2.0 available)
+ crypto 3.0.1
+ dialogflow_grpc 0.2.9
+ fixnum 1.0.0
+ googleapis_auth 1.1.0
+ grpc 3.0.2
+ http 0.13.4
+ http2 2.0.0
+ http_parser 4.0.0
  matcher 0.12.10 (0.12.11 available)
+ protobuf 2.0.0
  test_api 0.4.2 (0.4.5 available)
+ uuid 3.0.4
  vector_math 2.1.0 (2.1.1 available)
Downloading dialogflow_grpc 0.2.9...
Downloading grpc 3.0.2...
Downloading http 0.13.4...
Downloading archive 3.1.5...
Changed 11 dependencies!
  1. إضافة الاعتمادية rxdart
$ flutter pub add rxdart
Resolving dependencies...
  async 2.8.1 (2.8.2 available)
  characters 1.1.0 (1.2.0 available)
  matcher 0.12.10 (0.12.11 available)
+ rxdart 0.27.2
  test_api 0.4.2 (0.4.5 available)
  vector_math 2.1.0 (2.1.1 available)
Downloading rxdart 0.27.2...
Changed 1 dependency!

جارٍ تحميل معلومات حساب الخدمة والمشروع على Google Cloud

  1. أنشئ دليلاً في مشروعك وتسميته: assets.
  2. انقِل ملف credentials.json الذي نزّلته من وحدة التحكّم في Google Cloud إلى مجلد credentials.json.
  3. افتح pubspec.yaml وأضِف حساب الخدمة إلى قالب Flutter.
flutter:
  uses-material-design: true
  assets:
    - assets/credentials.json

تشغيل التطبيق على جهاز فعلي

عندما يكون لديك جهاز Android، يمكنك توصيل هاتفك بمصدر الطاقة باستخدام كابل USB وتصحيح الأخطاء في الجهاز. اتّبِع هذه الخطوات لإعداد هذا الخيار من خلال شاشة خيارات المطوّرين على جهاز Android.

تشغيل التطبيق على جهاز افتراضي

في حال أردت تشغيل التطبيق على جهاز افتراضي، استخدم الخطوات التالية:

  1. انقر على الأدوات>. مدير AVD (أو حدد مدير AVD من شريط الأدوات العلوي، وفي الشكل أدناه، يتم تمييزه باللون الوردي)

شريط الأدوات العلوي في &quot;استوديو Android&quot;

  1. وسننشئ جهازًا افتراضيًا مستهدفًا يعمل بنظام Android، حتى نتمكن من اختبار التطبيق بدون جهاز مادي. لمعرفة التفاصيل، يُرجى الاطّلاع على إدارة متوسّط مدة المشاهدة. بعد اختيار جهاز افتراضي جديد، يمكنك النقر عليه مرّتين لبدء تشغيله.

إدارة متوسّط مدة المشاهدة

جهاز افتراضي

  1. في شريط أدوات "استوديو Android" الرئيسي، اختَر جهاز Android كجهاز مستهدف من خلال القائمة المنسدلة واحرص على اختيار main.dart. بعد ذلك، اضغط على الزر تشغيل (مثلّث أخضر).

في أسفل بيئة التطوير المتكاملة، ستظهر السجلّات في وحدة التحكّم. ستلاحظ أنّه يتم تثبيت Android وتطبيق Flutter للمبتدئين. سيستغرق ذلك دقيقة، وعندما يصبح الجهاز الافتراضي جاهزًا، سيصبح إجراء التغييرات سريعًا للغاية. بعد الانتهاء من تنفيذ جميع الخطوات، سيتم فتح تطبيق Flutter للمبتدئين.

تطبيق نموذجي

  1. لنفعِّل الميكروفون لتطبيق المحادثة المبرمَجة. انقر على زر الخيارات في الجهاز الافتراضي لفتح الخيارات. في علامة التبويب "الميكروفون"، فعِّل جميع مفاتيح التبديل الثلاثة.

خيارات متوسّط مدة المشاهدة

  1. لنجرب إعادة التحميل السريع لتوضيح مدى سرعة إجراء التغييرات.

في lib/main.dart، غيِّر عنوان MyHomePage في فئة MyApp إلى: Flutter Dialogflow Agent. وغيِّر primarySwatch إلى Colors.orange.

الرمز الأول

احفظ الملف أو انقر على رمز البرغي في شريط أدوات استوديو Android. ومن المفترض أن يظهر لك التغيير الذي تم إجراؤه مباشرةً في الجهاز الافتراضي.

4. Flutter: إنشاء واجهة Chat باستخدام خدمة STT

إنشاء واجهة المحادثة

  1. أنشِئ ملف Flutter المصغّر جديدًا في المجلد lib. (انقر بزر الماوس الأيمن على مجلد lib، جديد > تطبيق Flutter Widget > التطبيق المصغَّر ذي الحالة)، عليك استدعاء هذا الملف: chat.dart

الصق الرمز التالي في هذا الملف. ينشئ ملف dart هذا واجهة الدردشة. لن يعمل Dialogflow بعد، لأنّه يقتصر على تنسيق جميع المكونات ودمج مكوّن الميكروفون للسماح بالبث. وستوضّح التعليقات في الملف المكان الذي سندمج فيه Dialogflow لاحقًا.

// Copyright 2021 Google LLC
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:rxdart/rxdart.dart';
import 'package:sound_stream/sound_stream.dart';

// TODO import Dialogflow


class Chat extends StatefulWidget {
  Chat({Key key}) : super(key: key);

  @override
  _ChatState createState() => _ChatState();
}

class _ChatState extends State<Chat> {
  final List<ChatMessage> _messages = <ChatMessage>[];
  final TextEditingController _textController = TextEditingController();

  bool _isRecording = false;

  RecorderStream _recorder = RecorderStream();
  StreamSubscription _recorderStatus;
  StreamSubscription<List<int>> _audioStreamSubscription;
  BehaviorSubject<List<int>> _audioStream;

  // TODO DialogflowGrpc class instance

  @override
  void initState() {
    super.initState();
    initPlugin();
  }

  @override
  void dispose() {
    _recorderStatus?.cancel();
    _audioStreamSubscription?.cancel();
    super.dispose();
  }

  // Platform messages are asynchronous, so we initialize in an async method.
  Future<void> initPlugin() async {
    _recorderStatus = _recorder.status.listen((status) {
      if (mounted)
        setState(() {
          _isRecording = status == SoundStreamStatus.Playing;
        });
    });

    await Future.wait([
      _recorder.initialize()
    ]);



    // TODO Get a Service account

  }

  void stopStream() async {
    await _recorder.stop();
    await _audioStreamSubscription?.cancel();
    await _audioStream?.close();
  }

  void handleSubmitted(text) async {
    print(text);
    _textController.clear();

    //TODO Dialogflow Code

  }

  void handleStream() async {
    _recorder.start();

    _audioStream = BehaviorSubject<List<int>>();
    _audioStreamSubscription = _recorder.audioStream.listen((data) {
      print(data);
      _audioStream.add(data);
    });


    // TODO Create SpeechContexts
    // Create an audio InputConfig

    // TODO Make the streamingDetectIntent call, with the InputConfig and the audioStream
    // TODO Get the transcript and detectedIntent and show on screen

  }

  // The chat interface
  //
  //------------------------------------------------------------------------------------
  @override
  Widget build(BuildContext context) {
    return Column(children: <Widget>[
      Flexible(
          child: ListView.builder(
            padding: EdgeInsets.all(8.0),
            reverse: true,
            itemBuilder: (_, int index) => _messages[index],
            itemCount: _messages.length,
          )),
      Divider(height: 1.0),
      Container(
          decoration: BoxDecoration(color: Theme.of(context).cardColor),
          child: IconTheme(
            data: IconThemeData(color: Theme.of(context).accentColor),
            child: Container(
              margin: const EdgeInsets.symmetric(horizontal: 8.0),
              child: Row(
                children: <Widget>[
                  Flexible(
                    child: TextField(
                      controller: _textController,
                      onSubmitted: handleSubmitted,
                      decoration: InputDecoration.collapsed(hintText: "Send a message"),
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.symmetric(horizontal: 4.0),
                    child: IconButton(
                      icon: Icon(Icons.send),
                      onPressed: () => handleSubmitted(_textController.text),
                    ),
                  ),
                  IconButton(
                    iconSize: 30.0,
                    icon: Icon(_isRecording ? Icons.mic_off : Icons.mic),
                    onPressed: _isRecording ? stopStream : handleStream,
                  ),
                ],
              ),
            ),
          )
      ),
    ]);
  }
}


//------------------------------------------------------------------------------------
// The chat message balloon
//
//------------------------------------------------------------------------------------
class ChatMessage extends StatelessWidget {
  ChatMessage({this.text, this.name, this.type});

  final String text;
  final String name;
  final bool type;

  List<Widget> otherMessage(context) {
    return <Widget>[
      new Container(
        margin: const EdgeInsets.only(right: 16.0),
        child: CircleAvatar(child: new Text('B')),
      ),
      new Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(this.name,
                style: TextStyle(fontWeight: FontWeight.bold)),
            Container(
              margin: const EdgeInsets.only(top: 5.0),
              child: Text(text),
            ),
          ],
        ),
      ),
    ];
  }

  List<Widget> myMessage(context) {
    return <Widget>[
      Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: <Widget>[
            Text(this.name, style: Theme.of(context).textTheme.subtitle1),
            Container(
              margin: const EdgeInsets.only(top: 5.0),
              child: Text(text),
            ),
          ],
        ),
      ),
      Container(
        margin: const EdgeInsets.only(left: 16.0),
        child: CircleAvatar(
            child: Text(
              this.name[0],
              style: TextStyle(fontWeight: FontWeight.bold),
            )),
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.symmetric(vertical: 10.0),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: this.type ? myMessage(context) : otherMessage(context),
      ),
    );
  }
}

ابحث في ملف chat.dart عن إصدار الأداة Widget ، يؤدي ذلك إلى إنشاء واجهة روبوت الدردشة التي تحتوي على:

  • ListView الذي يحتوي على جميع بالونات الدردشة التابعة للمستخدم وروبوت الدردشة. ويستخدم التطبيق الصف ChatMessage، الذي ينشئ رسائل محادثة تتضمّن صورة رمزية ونص.
  • TextField لإدخال طلبات البحث النصية
  • IconButton مع رمز الإرسال لإرسال طلبات بحث نصية إلى Dialogflow
  • IconButton مزوّد بميكروفون لإرسال مجموعات البث الصوتي إلى Dialogflow، مما يؤدي إلى تغيير حالة الضغط عند الضغط عليه.

ربط واجهة المحادثة

  1. افتح main.dart وغيِّر Widget build، لكي تنشئ مثيلاً لواجهة Chat() فقط. يمكن إزالة جميع الرموز التجريبية الأخرى.
import 'package:flutter/material.dart';
import 'chat.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.orange,
      ),
      home: MyHomePage(title: 'Flutter Dialogflow Agent'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Chat())
    );
  }
}
  1. شغِّل التطبيق. (إذا تم تشغيل التطبيق من قبل. أوقِف الجهاز الافتراضي، ثم أعِد تشغيل main.dart). عند تشغيل تطبيقك باستخدام واجهة المحادثة للمرة الأولى ستظهر نافذة منبثقة لإذنك تسألك إذا كنت تريد السماح بالميكروفون. النقر: أثناء استخدام التطبيق.

الأذونات

  1. يمكنك استخدام منطقة النص والأزرار. عند كتابة طلب بحث نصي والضغط على Enter أو النقر على زر الإرسال، سيظهر لك الطلب النصي المسجّل في علامة التبويب تشغيل في "استوديو Android". عند النقر على زر الميكروفون وإيقافه، سترى البث الصوتي مسجَّلاً في علامة التبويب تشغيل.

سجلّ البث الصوتي

رائع، نحن الآن جاهزون لدمج التطبيق مع Dialogflow.

دمج تطبيق Flutter مع Dialogflow_gRPC

  1. افتح chat.dart وأضِف عمليات الاستيراد التالية:
import 'package:dialogflow_grpc/dialogflow_grpc.dart';
import 'package:dialogflow_grpc/generated/google/cloud/dialogflow/v2beta1/session.pb.dart';
  1. في أعلى الملف، أضِف السطر التالي مباشرةً ضمن // TODO DialogflowGrpcV2Beta1 class instance للاحتفاظ بمثيل فئة Dialogflow:
DialogflowGrpcV2Beta1 dialogflow;
  1. ابحث عن طريقة initPlugin()، ثم أضِف الرمز التالي ضمن تعليق قائمة المهام مباشرةً:
    // Get a Service account
    final serviceAccount = ServiceAccount.fromString(
        '${(await rootBundle.loadString('assets/credentials.json'))}');
    // Create a DialogflowGrpc Instance
    dialogflow = DialogflowGrpcV2Beta1.viaServiceAccount(serviceAccount);

سيؤدي هذا الإجراء إلى إنشاء مثيل Dialogflow مسموح به لمشروعك على Google Cloud باستخدام حساب الخدمة. (تأكَّد من توفُّر الملف credentials.json في المجلد credentials.json).

مرة أخرى، لأغراض العرض التوضيحي حول كيفية استخدام Dialogflow gRPC، لا بأس بذلك، ولكن بالنسبة إلى تطبيقات الإنتاج، لا تريد تخزين ملف credentials.json في مجلد "مواد العرض"، لأنّ هذا الإجراء لا يُعد آمنًا.

إجراء استدعاء deleteIntent

  1. الآن يمكنك البحث عن طريقة handleSubmitted()، وهنا يأتي دور السحر. أسفل تعليق TODO مباشرة، أضف التعليمة البرمجية التالية.سيضيف هذا الرمز رسالة المستخدم المكتوبة إلى ListView:
ChatMessage message = ChatMessage(
 text: text,
 name: "You",
 type: true,
);

setState(() {
 _messages.insert(0, message);
});
  1. وأسفل الرمز السابق مباشرةً، سنُجري استدعاء revealIntent، ونمرر النص من الإدخال، وlanguageCode. - ستتم طباعة النتيجة (ضمن data.queryResult.fulfillment) في ListView:
DetectIntentResponse data = await dialogflow.detectIntent(text, 'en-US');
String fulfillmentText = data.queryResult.fulfillmentText;
if(fulfillmentText.isNotEmpty) {
  ChatMessage botMessage = ChatMessage(
    text: fulfillmentText,
    name: "Bot",
    type: false,
  );

  setState(() {
    _messages.insert(0, botMessage);
  });
}
  1. ابدأ تشغيل الجهاز الافتراضي واختبِر استدعاء رصد النية. النوع: hi من المفترض أن تظهر لك رسالة الترحيب التلقائية. عند كتابة نص آخر، سيتم عرض الإجراء الاحتياطي التلقائي لك.

إجراء استدعاء StreamDetectIntent

  1. والآن، حان الوقت للتعرّف على طريقة "handleStream()" التي تتيح لك بث المحتوى الصوتي مباشرةً. أولاً، ضمن أول قائمة المهام (TODO)، أنشئ صوت InputConfigV2beta1 صوتيًا يتضمّن مجموعة biasList لانحياز النموذج الصوتي. بما أننا نستخدم هاتفًا (جهازًا افتراضيًا)، فإن sampleHertz ستكون 16000 وسيكون الترميز الخطي 16. يعتمد ذلك على المكونات المادية للجهاز أو الميكروفون الذي تستخدمه. بالنسبة لميكروفون Macbook الداخلي، كان 16000 جيدًا. (اطّلِع على معلومات حزمة https://pub.dev/packages/sound_stream)
var biasList = SpeechContextV2Beta1(
    phrases: [
      'Dialogflow CX',
      'Dialogflow Essentials',
      'Action Builder',
      'HIPAA'
    ],
    boost: 20.0
);

    // See: https://cloud.google.com/dialogflow/es/docs/reference/rpc/google.cloud.dialogflow.v2#google.cloud.dialogflow.v2.InputAudioConfig
var config = InputConfigV2beta1(
    encoding: 'AUDIO_ENCODING_LINEAR_16',
    languageCode: 'en-US',
    sampleRateHertz: 16000,
    singleUtterance: false,
    speechContexts: [biasList]
);
  1. بعد ذلك، سنستدعي الطريقة streamingDetectIntent في الكائن dialogflow، والتي تتضمن جلسة Dialogflow:
final responseStream = dialogflow.streamingDetectIntent(config, _audioStream);
  1. باستخدام ReplyStream، يمكننا أخيرًا الاستماع إلى النص الوارد وطلب بحث المستخدم الذي تم رصده وردّ النية المطابق الذي تم رصده. سنطبع هذا في ChatMessage على الشاشة:
// Get the transcript and detectedIntent and show on screen
responseStream.listen((data) {
  //print('----');
  setState(() {
    //print(data);
    String transcript = data.recognitionResult.transcript;
    String queryText = data.queryResult.queryText;
    String fulfillmentText = data.queryResult.fulfillmentText;

    if(fulfillmentText.isNotEmpty) {

      ChatMessage message = new ChatMessage(
        text: queryText,
        name: "You",
        type: true,
      );

      ChatMessage botMessage = new ChatMessage(
        text: fulfillmentText,
        name: "Bot",
        type: false,
      );

      _messages.insert(0, message);
      _textController.clear();
      _messages.insert(0, botMessage);

    }
    if(transcript.isNotEmpty) {
      _textController.text = transcript;
    }

  });
},onError: (e){
  //print(e);
},onDone: () {
  //print('done');
});

هذا كل ما في الأمر، ابدأ تشغيل تطبيقك واختبِره على الجهاز الافتراضي، ثم اضغط على زر الميكروفون وقل "مرحبًا".

سيؤدي هذا الإجراء إلى ظهور رسالة الترحيب التلقائية في Dialogflow. ستتم طباعة النتائج على الشاشة. بما أنّ Flutter نجح في دمج أداة Dialogflow، يمكننا بدء العمل على محادثة برنامج الدردشة المبرمَجة.

5- Dialogflow: إضافة نماذج لوكيل Dialogflow

Dialogflow Essentials هي حزمة تطوير لإنشاء واجهات مستخدم المحادثة. وبالتالي، روبوتات الدردشة والروبوتات الصوتية ومداخل الهواتف. يمكنكم جميعًا إنشاء هذه المنصة باستخدام الأداة نفسها، بل يمكنكم أيضًا إتاحة عدة قنوات بأكثر من 20 لغة مختلفة. ينشئ مصممو تجربة المستخدم في Dialogflow (مصممو نماذج الوكلاء واللغويون) أو المطوِّرون الأهداف من خلال تحديد عبارات تدريب لتدريب نموذج تعلُّم الآلة الأساسي.

يصنف الغرض نية المستخدم. بالنسبة إلى كل موظّف دعم في Dialogflow ES، يمكنك تحديد العديد من الأهداف، حيث يمكن لأهدافك المجمّعة معالجة محادثة كاملة. يمكن أن يحتوي كل هدف على معلَمات واستجابات.

تُعرف مطابقة النية أيضًا باسم تصنيف النية أو مطابقة الأهداف. هذا هو المفهوم الأساسي في Dialogflow ES. بعد مطابقة الغرض، يمكن أن يتم عرض ردّ أو جمع المَعلمات (استخراج الكيان) أو تشغيل رمز الردّ التلقائي على الويب (التنفيذ)، على سبيل المثال، لاسترجاع البيانات من قاعدة بيانات.

عندما يكتب مستخدم نهائي أو يقول شيئًا في برنامج الدردشة المبرمَجة، ويُشار إليه باسم أحد تعبيرات المستخدم أو قوله، يطابق Dialogflow ES التعبير مع النية المثلى لوكيل Dialogflow، استنادًا إلى عبارات التدريب. وتم تدريب نموذج تعلُّم الآلة الخاص من Dialogflow ES بالتفصيل على عبارات التدريب هذه.

تعمل منصة Dialogflow ES مع مفهوم يسمى السياق. على غرار البشر، تستطيع منصة Dialogflow ES تذكُّر السياق في الدور الثاني والثالث. وهذه هي الطريقة التي يمكن بها تتبع عبارات المستخدم السابقة.

إليك مزيد من المعلومات حول عناصر Dialogflow.

تعديل هدف الترحيب التلقائي

عند إنشاء وكيل Dialogflow جديد، سيتم إنشاء هدفَين تلقائيَين تلقائيًا. هدف الترحيب التلقائي هو الخطوة الأولى التي تظهر لك عند بدء محادثة مع موظّف الدعم. الغرض الاحتياطي التلقائي هو المسار الذي ستحصل عليه عندما يتعذّر على الوكيل فهمك أو عندما يتعذّر عليه مطابقة الهدف مع ما قلته للتو.

في ما يلي رسالة الترحيب لهدف الترحيب التلقائي:

المستخدم

موظّف دعم

مرحبًا

"مرحبًا، أنا برنامج تتبُّع الأسئلة الشائعة من Dialogflow، يمكنني الإجابة عن الأسئلة من خلال Dialogflow."

"ما الذي تريد معرفته؟"

  1. انقر على الأهداف > نيّة الترحيب التلقائية
  2. انتقِل للأسفل إلى الردود.
  3. محو كل الردود النصية.
  4. في علامة التبويب التلقائية، أنشئ الردَين التاليَين:
  • مرحبًا، أنا برنامج تتبُّع الأسئلة الشائعة من Dialogflow، ويمكنني الإجابة عن الأسئلة في Dialogflow. ما الذي تريد معرفته؟
  • مرحبًا، أنا برنامج تتبُّع الأسئلة الشائعة من Dialogflow، هل لديك أي أسئلة حول Dialogflow؟ كيف يمكنني مساعدتك؟

يجب أن تكون الإعدادات مشابهة للقطة الشاشة هذه.

تعديل هدف الترحيب التلقائي

  1. انقر على حفظ.
  2. لنختبر هذا المقصد. أولاً، يمكننا اختباره في Dialogflow Simulator.Type: مرحبًا. من المفترض أن تعرض إحدى الرسائل التالية:
  • مرحبًا، أنا برنامج تتبُّع الأسئلة الشائعة من Dialogflow، ويمكنني الإجابة عن الأسئلة في Dialogflow. ما الذي تريد معرفته؟
  • مرحبًا، أنا برنامج تتبُّع الأسئلة الشائعة من Dialogflow، هل لديك أي أسئلة حول Dialogflow؟ كيف يمكنني مساعدتك؟

تعديل القصد الاحتياطي التلقائي

  1. انقر على الأهداف > الغرض الاحتياطي التلقائي
  2. انتقِل للأسفل إلى الردود.
  3. محو كل الردود النصية.
  4. في علامة التبويب التلقائية، أنشئ الرد التالي:
  • لا أعلم إجابة هذا السؤال. هل راجعت موقعنا الإلكتروني؟ http://www.dialogflow.com?
  1. انقر على حفظ.

الاتصال بقاعدة معلومات على الإنترنت

موصِّلات المعلومات تتكامل مع الأهداف المحدّدة. يحلّلون مستندات المعلومات للعثور على ردود مبرمَجة. (على سبيل المثال، الأسئلة الشائعة أو المقالات من ملفات CSV أو المواقع الإلكترونية على الإنترنت أو حتى ملفات PDF!) لإعدادها، يجب تحديد قاعدة معرفية واحدة أو أكثر، وهي مجموعات من مستندات المعلومات.

اطّلع على مزيد من المعلومات عن "موصِّلات المعلومات".

لنجرب هذا.

  1. اختَر المعرفة (إصدار تجريبي) من القائمة.

قاعدة المعلومات

  1. انقر على الزر الأزرق الأيسر: إنشاء قاعدة معلومات
  2. الكتابة كاسم قاعدة معلومات الأسئلة الشائعة حول Dialogflow والنقر على حفظ.
  3. انقر على إنشاء الرابط الأول.

قاعدة المعلومات الأولى

  1. سيؤدي هذا إلى فتح نافذة.

استخدِم الإعدادات التالية:

اسم المستند: DialogflowFAQ نوع المعرفة: FAQ نوع Mime: text/html

  1. عنوان URL الذي يتم تحميل البيانات منه هو:

https://www.leeboonstra.dev/faqs/

  1. انقر على إنشاء

تم إنشاء قاعدة معرفية:

تم إنشاء قاعدة المعلومات

  1. انتقِل للأسفل وصولاً إلى قسم "الردود" وانقر على إضافة ردّ.

أنشئ الإجابات التالية وانقر على حفظ.

$Knowledge.Answer[1]
  1. انقر على عرض التفاصيل.

عرض التفاصيل

  1. اختَر تفعيل إعادة التحميل التلقائي لجلب التغييرات تلقائيًا عند تحديث صفحة ويب الأسئلة الشائعة، ثم انقر على حفظ.

سيؤدي هذا الإجراء إلى عرض كل الأسئلة الشائعة التي طبّقتها في Dialogflow. هذا إجراء سهل.

يُرجى العِلم أنّه يمكنك أيضًا التوجيه إلى موقع إلكتروني بتنسيق HTML على الإنترنت يتضمّن أسئلة شائعة لاستيراد الأسئلة الشائعة إلى وكيلك. من الممكن أيضًا تحميل ملف PDF يتضمّن مجموعة من النصوص، وسيطرح تطبيق Dialogflow الأسئلة نفسها.

يجب اعتبار الأسئلة الشائعة الآن على أنّها "أسئلة إضافية" لإضافته إلى الوكلاء، بجانب تدفقات النية. لا يمكن للأسئلة الشائعة حول "قاعدة المعلومات" تدريب النموذج. لذا قد لا يتطابق طرح الأسئلة بطريقة مختلفة تمامًا، لأنه لا يستخدم فهم اللغات الطبيعية (نماذج تعلُّم الآلة). لهذا السبب، من المفيد أحيانًا تحويل الأسئلة الشائعة إلى أهداف.

  1. اختبِر الأسئلة في المحاكي على اليمين.
  2. يمكنك الرجوع إلى تطبيق Flutter لاختبار المحادثة والروبوت الصوتي من خلال هذا المحتوى الجديد. اطرح الأسئلة التي حمّلتها في Dialogflow.

النتيجة

6- تهانينا

أحسنت! لقد أنشأت بنجاح أول تطبيق لك على Flutter من خلال دمج روبوت دردشة Dialogflow.

المواضيع التي تناولناها

  • كيفية إنشاء روبوت دردشة باستخدام Dialogflow Essentials
  • كيفية دمج Dialogflow في تطبيق Flutter
  • كيفية رصد أهداف النص باستخدام Dialogflow
  • كيفية بث صوت عبر الميكروفون إلى Dialogflow
  • كيفية الاستفادة من موصِّل قاعدة المعلومات

ما هي الخطوات التالية؟

هل استمتعت بهذا الدرس التطبيقي حول الترميز؟ يمكنك إلقاء نظرة على هذه الميزات الاختبارية من Dialogflow رائعة.

هل يهمّك معرفة طريقة إنشاء حزمة Dialogflow gRPC لمنصة Dart/Flutter؟