Laravel を使用してオンライン カスタマー サービス システムを開発する方法

はじめに:
オンライン カスタマー サービス システムは、現(xiàn)代の企業(yè)において重要な役割を果たしています。企業(yè)が顧客とリアルタイムでコミュニケーションし、質(zhì)問に答え、サポートを提供し、ユーザー エクスペリエンスを向上させるのに役立ちます。この記事では、Laravel フレームワークを使用して、シンプルで実用的なオンライン接客システムを開発する方法を紹介します。

1. データベースの設(shè)計
オンライン カスタマー サービス システムはユーザーと會話の記録を保存する必要があるため、まず適切なデータベース モデルを設(shè)計する必要があります。 Laravel では、移行ツールを使用してデータベースのテーブルとリレーションシップを作成できます。以下は、移行ファイルのサンプルです。

use IlluminateDatabaseMigrationsMigration;
use IlluminateDatabaseSchemaBlueprint;
use IlluminateSupportFacadesSchema;

class CreateConversationsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('conversations', function (Blueprint $table) {
            $table->increments('id');
            $table->unsignedInteger('user_id');
            $table->text('message');
            $table->timestamps();

            $table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('conversations');
    }
}

上記の例では、conversations という名前のテーブルを作成しました。このテーブルには、id、user_id が含まれています。 #、message、および timestamps フィールド。 user_id フィールドはユーザー ID の保存に使用され、message フィールドは會話レコードの保存に使用されます。また、外部キーの関連付けを使用して、user_id フィールドを users テーブルの id フィールドに関連付けます。

2. モデルとコントローラーの作成

Laravel アプリケーションを開発する場合、モデルとコントローラーは必須のコンポーネントです。アーティザン コマンドを使用して、それらを迅速に生成できます。以下は、
Conversation モデルと対応する ConversationController を生成するコマンドの例です。

php artisan make:model Conversation -c

生成された

Conversation モデルと ConversationControllerこれは、app/Models および app/Http/Controllers ディレクトリにあります。

3. ユーザーのログインと認(rèn)証の実裝

オンライン カスタマー サービス システムを使用するには、ユーザーはログインと認(rèn)証を行う必要があります。 Laravel は、シンプルかつ強(qiáng)力な認(rèn)証システムを提供します。
make:auth Artisan コマンドを使用すると、ユーザー認(rèn)証関連のルート、コントローラー、ビューを迅速に生成できます。ユーザー認(rèn)証関連コンポーネントを生成するコマンドの例を次に示します。

php artisan make:auth

生成された認(rèn)証関連コンポーネントは、

app/Http/Controllers/Auth および resources/views/ に配置されます。 auth コンテンツの下。

4. 會話ページを作成する

オンライン カスタマー サービス システムには、會話を表示および処理するためのページが必要です。
chats.blade.php という名前の Blade ビューを作成して、このページを?qū)g裝できます。このビューは、Laravel が提供するテンプレートの継承と動的コンテンツを使用して構(gòu)築できます。

@extends('layouts.app')

@section('content')
  <div id="app">
    <chat-component :user="{{ auth()->user() }}"></chat-component>
  </div>

  <script src="{{ mix('js/app.js') }}"></script>
@endsection

上の例では、

app レイアウト テンプレートを使用し、コンテンツ領(lǐng)域で chat-c??omponent という名前の Vue.js コンポーネントを參照しました。このコンポーネントは、現(xiàn)在ログインしているユーザーの情報を受け入れます。

5. Vue.js を利用してリアルタイム會話機(jī)能を?qū)g裝する

リアルタイムに會話を表示?処理するには、Vue.js と Laravel Echo を利用して WebSocket 通信を?qū)g裝します。まず必要な依存関係をインストールします:

npm install laravel-echo pusher-js

次に、

resources/js/bootstrap.js で Laravel Echo を初期化します:

import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    forceTLS: true
});

次に、Vue コンポーネントでリッスンして処理します。會話イベント:

mounted() {
  window.Echo.private('conversations.' + this.user.id)
      .listen('ConversationEvent', (e) => {
        // 更新對話內(nèi)容
        this.messages.push(e.message);
      });
},
methods: {
  sendMessage() {
    // 發(fā)送對話消息
    window.Echo.private('conversations.' + this.user.id)
        .whisper('typing', {
            message: this.newMessage
        });
    this.newMessage = '';
  },
},

6. ルーティングとミドルウェアの構(gòu)成

最後に、
routes/web.php ファイルでルーティングとミドルウェアを構(gòu)成する必要があります。以下はルーティング設(shè)定のサンプルです:

Route::middleware('auth')->group(function () {
    Route::get('/chat', [ConversationController::class, 'index'])->name('chat.index');
    Route::get('/conversations', [ConversationController::class, 'getConversations'])->name('conversation.get');
});

上記の例では、

/chat および /conversations パスに対して ConversationController を定義しました。 index メソッドと getConversations メソッド、および対応するルートの名前。

概要:

Laravel フレームワークを使用すると、シンプルで実用的なオンライン カスタマー サービス システムを簡単に開発できます。 Laravel の移行ツールを使用してデータベース モデルを作成し、対応するモデルとコントローラーを作成し、ユーザー認(rèn)証を?qū)g裝し、會話ページを作成し、Vue.js と Laravel Echo を使用してリアルタイム會話機(jī)能を?qū)g裝します。この記事がオンライン接客システム開発の參考になれば幸いです。

參考リソース:

Laravel ドキュメント: https://laravel.com/docs
• Vue.js ドキュメント: https://vuejs.org/
• Laravel Echo ドキュメント: https://laravel.com/docs/7.x/broadcasting

以上がLaravel を使用してオンライン顧客サービス システムを開発する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。