How to Build a Backend for jQuery?

はじめに このチュートリアルでは、 jqueryのバックエンドを構築する方法 を学びます。 私たちは、データベース管理、cloud code、restおよびgraphql api、ユーザー認証、リアルタイムクエリなど、back4appの基本機能を統合して、安全でスケーラブルなバックエンドを作成します。 このバックエンドは、ajax呼び出しやその他の一般的なjqueryメソッドを通じて、jqueryベースのフロントエンドと通信します。 back4appの直感的な環境は、サーバーやデータベースのセットアップに必要な時間を短縮します。 いくつかの簡単なステップに従うことで、acl、クラスレベルの権限、データモデリング、ファイルアップロードなどの実践的な経験を得ることができます。 このチュートリアルの終わりまでには、back4appバックエンドに接続された完全に機能するjqueryベースのアプリのためのしっかりとした基盤を持つことができます。 カスタムロジックを追加し、外部apiを統合し、データを細かく制御して保護する準備が整います。 前提条件 このチュートリアルを完了するには、次のものが必要です back4appアカウントと新しいback4appプロジェクト back4appの始め方。 https //www back4app com/docs/get started/new parse app アカウントを持っていない場合は、無料で作成できます。上記のガイドに従ってプロジェクトを準備してください。 基本的なjquery環境 jqueryは 公式ウェブサイト https //jquery com/download/ からダウンロードできます。 node js（バージョン14以上）がインストールされていること（オプション） ブラウザでのjqueryにはnode jsは厳密には必要ありませんが、ローカルテストサーバーを実行したり、ローカルテストを行うためにnpmパッケージをインストールする場合には必要になることがあります。 node jsのインストール https //nodejs org/en/download/ javascriptとjqueryの基本に精通していること jquery公式ドキュメント。 https //api jquery com/ jqueryベースのフロントエンドを構築し、back4appに接続する際にスムーズに進めるように、これらの前提条件がすべて整っていることを確認してください。 ステップ1 – back4appプロジェクトの設定 新しいプロジェクトを作成する jqueryバックエンドプロジェクトを始めるには、新しいback4appプロジェクトを作成します back4appアカウントにログインする 「新しいアプリ」ボタンをクリックする あなたのback4appダッシュボードで。 アプリに名前を付ける （例：「jquery backend tutorial」）。 プロジェクトが作成されると、あなたのback4appダッシュボードに表示されます。これがjqueryのバックエンド設定の基盤となります。 parse sdkを接続する back4appはデータとリアルタイム機能のためにparseプラットフォームを使用しています。jqueryでparse sdkを直接使用したい場合は、htmlにスクリプトとして読み込むことができます。 parseキーを取得する back4appダッシュボードで、アプリの「アプリ設定」または「セキュリティとキー」を開いて見つけてください アプリケーションid javascriptキー parseサーバーurl (通常は https //parseapi back4app com ) parse sdkを含める あなたのhtmlファイルに 「 jquery 」環境では、最初にjqueryを読み込み、その後parseを読み込み、スクリプト内でparseオブジェクトと対話できます。この接続により、すべてのデータ呼び出しがback4appバックエンドを通じてparseプラットフォームを経由することが保証されます。 ステップ2 – データベースの設定 データの保存とクエリ parse sdkを統合した後、back4appデータベースからデータを保存および取得できます。以下は、jqueryとparseを使用して「todo」オブジェクトを作成および取得する簡単な例です curlを使用してrest apiを呼び出すこともできます curl x post \ h "x parse application id your application id" \ h "x parse rest api key your rest api key" \ h "content type application/json" \ d '{"title" "buy groceries", "iscompleted" false}' \ https //parseapi back4app com/classes/todo またはgraphqlを使用します mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } スキーマ設計とデータ型 back4appのダッシュボードで 「データベース」に移動します。 新しいクラスを作成します （例：「todo」）およびタイトル（string）やiscompleted（boolean）などのカラムを追加します。 オブジェクトを初めて保存する際に、parseが自動的にカラムを作成することもできます。 aiエージェントの使用 back4appにはデータモデリングのためのaiエージェントがあります aiエージェントを開きます アプリのダッシュボードまたはメニューで。 データモデルを説明します （例：「クラススキーマを持つtodoアプリを作成します。」）。 aiエージェントにスキーマを生成させます 。 リレーショナルデータ もしあなたが多くの カテゴリー クラスにリンクされた todo アイテムを持っているなら、ポインタまたはリレーションを使用できます ライブクエリ jqueryアプリでリアルタイム更新を行うには ライブクエリを有効にする をあなたのback4appダッシュボードの サーバー設定 の下で ライブクエリのサブスクリプションを初期化する このサブスクリプションは、「todo」オブジェクトが作成、更新、または削除されるたびにリアルタイムで通知します。 ステップ 3 – acl と clp を使用したセキュリティの適用 back4app セキュリティメカニズム acl（アクセス制御リスト） と clp（クラスレベルの権限） を使用すると、オブジェクトまたはクラスレベルでデータの読み取りと書き込みを誰が行えるかを制御できます。 アクセス制御リスト (acl) aclは、個々のオブジェクトに設定され、アクセスを制限します クラスレベルの権限 (clp) clpは、クラス全体のデフォルトの権限を制御します back4appダッシュボードで , データベース セクションを開きます。 クラスを選択します （例 “todo”）。 クラスレベルの権限 タブに移動して、公開、認証済み、または役割ベースのアクセスを設定します。 オブジェクトレベルのセキュリティのためにaclを、より広範な制限のためにclpを組み合わせます。詳細については、 アプリセキュリティガイドライン https //www back4app com/docs/security/parse security をご覧ください。 ステップ4 – クラウド関数の作成とデプロイ クラウドコード は、サーバー側でカスタムjavascriptを実行し、ビジネスロジック、データ検証、または外部api呼び出しを追加できます。 仕組み あなたはコードを main js (または類似のファイル) に配置し、back4app にデプロイし、parse server に実行を任せます。より複雑なロジックには npm モジュールを使用することもできます。 // main js const axios = require('axios'); parse cloud define('fetchexternaldata', async (request) => { const url = request params url; if (!url) { throw new error('url parameter is required'); } const response = await axios get(url); return response data; }); parse cloud beforesave('todo', (request) => { const todo = request object; if (!todo get('title')) { throw new error('todo must have a title'); } }); 関数をデプロイする 次の方法で、 back4app cli b4a deploy ダッシュボードを通じて アプリのダッシュボードで、 cloud code > functions に移動します。 関数を main js にコピー/ペーストします。 「 デプロイ 」をクリックします。 関数を呼び出す jqueryから、次のようにcloud functionを呼び出すことができます ステップ5 – ユーザー認証の設定 back4appにおけるユーザー認証 back4appは、 parse user クラスを使用して認証を行います。パスワードのハッシュ化、セッショントークン、および安全なストレージは自動的に処理されます。 ユーザー認証の設定 セッション管理 現在のユーザーを取得できます const currentuser = parse user current(); if (currentuser) { console log('logged in user ', currentuser getusername()); } else { console log('no user is logged in'); } ログアウト parse user logout(); ソーシャルログイン統合 back4appはgoogle、facebook、apple、その他のoauthプロバイダーをサポートしています。詳細については、 ソーシャルログインドキュメント https //www back4app com/docs/platform/sign in with apple をご覧ください。 ステップ6 – ファイルストレージの処理 ファイルのアップロードと取得 アップロードを処理するには、 parse file を使用します フィールドに割り当てることで、クラスにファイルを保存できます const photo = parse object extend('photo'); const photo = new photo(); photo set('imagefile', parsefile); photo save(); ファイルurlの取得 const imagefile = photo get('imagefile'); const imageurl = imagefile url(); ファイルセキュリティ parse serverでファイルアップロード設定を変更することで、誰がファイルをアップロードできるかを管理できます { "fileupload" { "enableforpublic" true, "enableforanonymoususer" true, "enableforauthenticateduser" true } } ステップ 7 – クラウドジョブによるタスクのスケジューリング クラウドジョブ 古いデータを削除するなどの定期的なタスクを実行できます // main js parse cloud job('cleanupoldtodos', async (request) => { const todo = parse object extend('todo'); const query = new parse query(todo); const now = new date(); const thirty days = 30 24 60 60 1000; const cutoff = new date(now thirty days); query lessthan('createdat', cutoff); try { const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; } catch (err) { throw new error('error during cleanup ' + err message); } }); ダッシュボードで、 アプリ設定 > サーバー設定 > バックグラウンドジョブ に移動してスケジュールします。 ステップ 8 – ウェブフックの統合 webhooks は、特定のイベントが発生するたびにアプリが外部サービスにhttpリクエストを送信できるようにします 「 more > webhooks 」に移動します。 新しいwebhookを追加 し、外部エンドポイントを設定します。 トリガーを設定 し、「todoクラスに新しいレコードが追加された」などのイベントに対応します。 slackやstripeのような決済ゲートウェイをwebhookを通じてイベントデータを送信することで統合できます。 ステップ9 – back4app管理パネルの探索 「 back4app admin app 」は、crud操作のための非技術的なウェブベースのインターフェースを提供します。 管理アプリの有効化 移動する アプリダッシュボード > もっと > 管理アプリ をクリックして「管理アプリを有効にする」を選択します 最初の管理ユーザーを作成する , これにより新しい役割（b4aadminuser）とスキーマ内のクラスが自動的に作成されます サブドメインを選択する 管理アプリにアクセスするために ログインする 新しい管理者の資格情報を使用して 有効にすると、この管理アプリは、コーディングなしでデータを管理したり、チームメンバーにアクセスを許可したりできます。 結論 このガイドでは、back4appを使用してjqueryのバックエンドを構築する方法を学びました。あなたは バックエンドの基盤として新しいback4appプロジェクトを作成しました。 スキーマ設計とデータ関係を含むデータベースを設定しました。 細かいセキュリティのためにaclとclpを使用しました。 カスタムサーバーサイドロジックのためにcloud codeをデプロイしました。 ユーザー認証、ファイルストレージ、リアルタイム更新を設定しました。 バックグラウンドジョブをスケジュールし、外部サービスのためにwebhookを統合しました。 データ管理を簡素化するためにback4app管理パネルを探索しました。 これで、基本的なjquery + back4appのセットアップをフルプロダクションソリューションに拡張する準備が整いました。ソーシャルログインやより詳細なセキュリティルールなどの高度な機能を統合し続けてください。スケーラブルでデータ駆動型のアプリケーションを構築するのを楽しんでください！ 次のステップ プロダクション準備を整える 高度な役割ベースの権限、キャッシング戦略、パフォーマンスチューニングを追加します。 サードパーティapiを統合する 支払い、メッセージング、または分析のために。 back4appのドキュメントを探索する 高度なセキュリティ、ログ、または分析についてさらに深く掘り下げます。 実世界のアプリを作成する jqueryのシンプルさとback4appの強力なバックエンドサービスを組み合わせて使用します。