第1部:埋め込みウィジェットの作成

私の初めてのブログ記事へようこそ!これは、私はあなたが埋め込まれたチャットウィジェットを作成することによってあなたを歩いていくシリーズの第1部になるでしょう、あなたは、販売代理店または何にでも話すことができるサイトでポップアップするそれらのもののうちの1つを知っています.

一般的な考え、我々は何を作りますか？

私は、私たちが多くのウェブサイトをホストして、問題または彼らのサイトの構成で援助を必要とする顧客の支持を提供する私の日々の仕事の一部としてこれをしています.私たちを呼び出したり、Zendeskのチケットを作成する代わりに私は彼らのウェブサイトに埋め込まれることができるチャットウィジェットを使用して私たちに連絡するための方法を作成したい.
それは3つの部分からなるプロジェクトです.

ソケットサーバ

チャットポータル

チャットウィジェット

これはまだ少し漠然としているかもしれませんが、詳細については、それぞれの部分を意味する説明しましょう.

ソケットサーバ

これはプロジェクトのバックボーンとなります.これはポータルとウィジェットの両方が話すソケットサーバです.と呼ばれるWeb技術を使用しますWebSockets . これを使用して、クライアントとウィジェット間でメッセージを送ることができます.

チャットポータル

誰かがチャットウィジェットを開き、入力を開始すると、チャットはチャットポータル(例えばWhatsAppのような)で表示され、そこからメッセージを送信することができます.

チャットウィジェット

これはAとしてパックされた小さなプロジェクトになりますWebComponent を追加するだけですべてのウェブサイトに挿入することができますscript タグとカスタムHTML要素.Webコンポーネントの詳細についてはhere
我々が我々が作るものの考えがある今、それに入ることができます!

ツールと技術の迅速な要約

私は快適に感じる技術でこれを作りますので、ここでいくつかのツールを使用します.

vue ( version 3 )

Quasar ( Vue Framework )

タイプスクリプト

ノード.バックエンド用

ソケット.io

エディタとしてVSコードを使います.

プロジェクトの設定

私は最初にセクションに沿ってコードとしてこれを書き始めました、しかし、私の若干のステップは私の感覚に来て、これを楽しむだろう自分自身に尋ねました?セットアップが基本的にすべてボイラープレートコードとプロジェクト構成であるので、私は確かにそうしません.
しかし、それはとても楽しいです(私はそう考えます)Boilerplateコードのまわりであなたを歩かせて、私がどのようにプロジェクトをセットアップするかについて、あなたに示すために.

コードを得る

このシリーズのコードはホストされますhere .
そのプロジェクトでは、このシリーズのすべての部分のためのブランチを作成します.枝があるpart-1 この部分の最終結果が含まれます.

それは何ですか。

以下はフォルダ構造のスクリーンショットです.

それを壊しましょう🚀

糸のワークスペース

私はここで何かを使いますworkspaces . ワークスペースを使用してmonorepo , 複数のプロジェクトをホストするリポジトリ.我々の3つの部分が基本的に3つの異なるプロジェクトであるので、私はそれがこれをためす良い時間であると決めました.フォルダportal , server and widget すべての独自のプロジェクトが含まれています.tsconfig.json ) と自身のパッケージ.JSONしかし、依存関係はルートレベルにインストールされます.
これは、あなたが走るだけであることを意味しますyarn ルートレベルで一度、すべてのプロジェクトの依存関係をインストールするには、ニース!🎉
これをrootにするにはpackage.json これらの行を含む:

 "workspaces": [
    "./portal",
    "./server",
    "./widget"
 ],

をサポートします.tsconfig.json これらの行を含む:

"references": [
    { "path": "./portal" },
    { "path": "./widget" },
    { "path": "./server" }
]

これは、すべてのプロジェクトが自分自身を持つことができることを意味しますtsconfig.json したがって、それ自身の設定です.🙂

エディタ設定

幸せな私(そして、うまくいけばあらゆる開発者)にとって重要な1つのことは、あなたが働くプロジェクトがあなたの人生をより簡単にするということです.
それをするVSコード拡張子がたくさんあります、そして、幸運にも、あなたはあなたが使用するどんな拡張と彼らの構成を含むことができますか.vscode すべてのコードベースのフォルダ.
このプロジェクトをロードしたとき、おそらくコードを推奨します.あなたがその時それをしなかったならば、拡大タブとフィルタ@recommended どこで手動でそれを行うことができます.
以下のような設定があります.

を使用したコードの書式設定

ESLILTを使用したコードのリント

これは、あなたが自動的に修正することはできません何か間違ったことをしている場合、ファイルをフォーマットし、VSのコードについて心配する必要はありませんことを意味します.ダブル・ヨイ!🎉

ポータルフォルダ内

ポータルフォルダ内でクエーサーを使用してスタータープロジェクトを作成しました.クエーサーを知らない人のために.check 出て行け.要するに、すべてを行うことができます!SSR、SPA、PWAなどのためのビルド構成と組み合わせる大規模なコンポーネントライブラリ.
CLIを使用して、BoilerPlateプロジェクトを作成することができます

yarn create quasar

これは、作成するプロジェクトの種類についていくつかの質問をするでしょう.興味を持っている人には、ここに私が入ったものがあります.

√ What would you like to build? » App with Quasar CLI, let's go!
√ Project folder: ... portal
√ Pick Quasar version: » Quasar v2 (Vue 3 | latest and greatest)
√ Pick script type: » Typescript
√ Pick Quasar App CLI variant: » Quasar App CLI with Vite (BETA stage)
√ Package name: ... portal
√ Project product name: (must start with letter if building mobile apps) ... Chat portal
√ Project description: ... A Quasar Project
√ Author: ... _______________
√ Pick a Vue component style: » Composition API
√ Pick your CSS preprocessor: » Sass with SCSS syntax
√ Check the features needed for your project: » ESLint, State Management (Pinia)
√ Pick an ESLint preset: » Prettier

私はいくつかのeslintといくつかの設定をこのboilerplateからルートレベルに移動し、いくつかのtsconfig.json 変更以外のコードはそのままです.

サーバーフォルダ内

ここで1つのセットアップindex.ts ファイルは、最も基本的なExpressのアプリケーションでは、それだけではなく、実行されていることを指示します.しかし、それはこの部分のポイントではありません:)

ウィジェットフォルダ内

これは少し研究しなければならなかった.私は、前にこれのような何かをした誰かがいなければならないと思いましたvite community templates 私はすぐに探していたものを見つけた.a webcomponent vite template
私はこのフォルダにこのテンプレートを加えてtsconfig.json and vite.config.ts それは私のユースケース、汗なしで動作するように!😄

ランニングとビル

私が設定した最後のものはscripts 根のセクションpackage.json これは異なる部分を構築して実行します.別々に、または、すぐに、あなたの好みは何でも.見てください、私はそれが全く自明であると思います.
迅速な先端として⚡, また、npm scripts エクスプローラのタブ内のセクションをすばやくスクリプトを実行します.こちら

ラッピング

それはこの部分のためです!たぶん、私たちは、いくつかの実際のコーディングをまだ取得しなかったので、少し失望しているが、次の部分のために調整されている場合は確かにケースになります.
また、フィードバックと反応が大歓迎です!これが私の最初のポストとして、私は何を改善できるかを知りたい😇
また会いましょう!