telegram tt

電報ウェブA

このプロジェクトが最優秀賞を受賞しました? Telegram Lightweight Client Contest で優勝し、現在は web.telegram.org/a で誰でも利用できる公式 Telegram クライアントです。

元のコンテストのルールによれば、依存関係はほぼゼロで、完全に独自の Teact フレームワーク (React パラダイムを再実装する) に基づいています。また、MTProto 実装として GramJS のカスタム バージョンを使用します。

このプロジェクトには、多くの技術的に高度な機能、最新の Web API および技術が組み込まれています。WebSocket、Web Workers および WebAssembly、マルチレベル キャッシングおよび PWA、音声録音およびメディア ストリーミング、暗号化および生のバイナリ データ操作、オプティミスティックおよびプログレッシブ インターフェイス、複雑な CSS/ Canvas/SVG アニメーション、リアクティブ データ ストリームなど。

自由に探索し、フィードバックを提供し、貢献してください。

ローカルセットアップ

mv .env.example .env

npm i

my.telegram.org で API ID と API ハッシュを取得し、 .envファイルを作成します。

開発モード

npm run dev

コンソールからAPIを呼び出す

開発サーバーを起動し、コンソール コンテキストで GramJS ワーカーを見つけます。

すべてのコンストラクターと関数はグローバルGramJs変数で使用できます。

npm run gramjs:tl full実行して、利用可能なすべての Telegram リクエストにアクセスします。

使用例:

 await invoke ( new GramJs . help . GetAppConfig ( ) ) 

電子

Electron を使用すると、Windows、macOS、Linux にインストールできるネイティブ アプリケーションを構築できます。

NPM スクリプト

• npm run dev:electron

Electron を開発モードで実行し、変更を監視しながら 3 つのプロセスを同時に開始します: main (メイン Electron プロセス)、レンダラ (FE コード)、および Webpack for Electron (TypeScript からメイン Electron プロセスをコンパイル)。

• npm run electron:webpack

プリロード機能を含む Electron のメイン プロセス コードは TypeScript で記述され、 webpack-electron.config.js構成を使用してコンパイルされ、JavaScript コードが生成されます。

• npm run electron:build

レンダラー (FE コード) ビルドの準備、Electron メイン プロセス コードのコンパイル、ネイティブ依存関係のインストールとビルドは、パッケージ化または公開前に使用されます。

• npm run electron:staging

APP_ENV stagingとして使用して、macOS、Windows、および Linux 用のパッケージをdist-electronフォルダーに作成します (DevTools を開くことができ、ソースマップが含まれ、ビルドされた JavaScript コードは縮小されません)。パッケージ化されたアプリケーションの手動配布とテストに使用できます。

• npm run electron:production

APP_ENVをproductionとしてdist-electronフォルダーに macOS、Windows、Linux 用のパッケージを作成し (DevTools を無効にし、ビルドされた JavaScript コードを縮小)、パッケージ化されたアプリケーションの手動配布とテストに使用できます。

• npm run deploy:electron

dist-electronフォルダーに macOS、Windows、Linux 用のパッケージを作成し、リリースを GitHub に公開すると、自動更新のサポートが可能になります。詳細については、「GitHub リリース ワークフロー」を参照してください。

MacOS でのコード署名

アプリケーションのコードに署名するには、次の手順に従います。

• /certsフォルダーからキーチェーンのloginフォルダーに証明書をインストールします。
• Apple PKI ページからDeveloper ID - G2証明書をダウンロードしてインストールします。
• キーチェーン アプリケーションの下で、開発者証明書に関連付けられた秘密キーに移動します。次に、 key > Get Info > Access Controlを実行します。その下で、アプリケーション (Xcode) がリストにあることを確認してください。 Always allow access by these applications 、 Confirm before allowing accessオンになっていることを確認してください。
• アプリケーションを公開するときに、キーチェーンからの有効かつ適切な ID が自動的に使用されます。

詳細については、公式ドキュメントを参照してください。

MacOS での公証

アプリケーションの公証は、electron-builder モジュールで自動的に行われます。これには、 APPLE_IDおよびAPPLE_APP_SPECIFIC_PASSWORD環境変数を渡す必要があります。

アプリ固有のパスワードを取得する方法:

• appleid.apple.com にサインインします。
• 「サインインとセキュリティ」セクションで、「アプリ固有のパスワード」を選択します。
• [アプリ固有のパスワードを生成する] を選択するか、[追加] ボタンを選択して、画面の手順に従います。

GitHub リリース

GitHubアクセストークン

新しいリリースを公開するには、GitHub アクセス トークンを.envに追加する必要があります。 https://github.com/settings/tokens/new に移動して、GitHub アクセス トークンを生成します。アクセス トークンにはリポジトリのスコープ/権限が必要です。トークンを取得したら、それを環境変数に割り当てます。

 # .env
GH_TOKEN="{YOUR_TOKEN_HERE}"

設定の公開

src/electron/config.yml設定ファイルで設定を公開すると、GitHub リポジトリの所有者/名前を設定できます。

リリースワークフロー

• npm run electron:publish実行します。これにより、新しいドラフト リリースが作成され、ビルド アーティファクトが新しく作成されたリリースにアップロードされます。作成したリリースのバージョンはpackage.jsonと同じになります。
• 完了したら、リリースを公開します。 GitHub は最新のコミットにタグを付けます。

依存関係

• GramJS (MIT ライセンス)
• パコ (MITライセンス)
• 暗号化 (Apache License 2.0)
• 絵文字データ (MIT ライセンス)
• twemoji-parser (MIT ライセンス)
• rlottie (MIT ライセンス)
• opus-recorder (各種ライセンス)
• qr コード スタイル (MIT ライセンス)
• クロッピー (MIT ライセンス)
• mp4box (BSD-3 条項ライセンス)
• 音楽メタデータブラウザ (MIT ライセンス)
• ローライト (MIT ライセンス)
• idb-keyval (Apache ライセンス 2.0)
• ファストテキストウェブ
• ウェブプワズム
• 速いぼかし

バグレポートと提案

このアプリに問題が見つかった場合は、提案プラットフォームを使用して Telegram に知らせてください。