アンビルについて

Anvil はPython以外の完全なスタックWebアプリケーションを構築するプラットフォームです.JS、HTML、CSS、Python、SQLとすべてのフレームワークと格闘する必要はありません.我々のうちの1つから始めてくださいtutorials またはexample app . 詳細については、詳細を持っているdeveloper documentation そして、フレンドリーCommunity Forum .

クライアントサーバアーキテクチャ入門

Anvil Webアプリケーションでコードを書くとき、2つの異なる場所を実行できます.the client or the server . サーバーコードは、あなたがコントロールする中央のコンピュータ上で実行している間、クライアントのコードは、ユーザーのブラウザで実行されます.あなたがウェブ開発に新しいならば、クライアントとサーバーの区別は最初に混乱することがありえます.アンビルを使用する場合は、伝統的なWeb開発の難しさを心配する必要はありませんが、まだあなたのコードが実行される場所を分離する必要があります.
この記事の目的は、クライアント・サーバー・アーキテクチャへの導入を提供して、2つの異なる場所でAnvilアプリのためにコードを書く必要がある理由を説明することです.では、Feedback Form Tutorial クライアント側とサーバー側のコードの両方を使用する必要がある理由を理解するための例として.
この記事では、以下を説明します.

The client and client-side code

The server and server-side code

Communication between the client and server in Anvil

The Feedback Form app as an example

クライアント

前線

クライアント側のコードは、ユーザーのブラウザで実行し、アプリケーションのビジュアルコンポーネントを表示するだけでなく、ユーザーとの対話に責任があります.クライアント上で実行されるこのコードは、Webアプリケーションのフロントエンドを構成します.アンビルでは、あなたのアプリのフロントエンドはForms Pythonコンポーネントをドラッグ&ドロップする場所build a user interface そして、クライアント側のPythonコードを書きます.
ユーザーがWebアプリケーションを開くと、フロントエンドコードのすべてがブラウザにダウンロードされ、ユーザーはそのコードを完全に制御できます.このため、クライアントコードは信頼できません.これは、サーバー上で他のコードを実行するコードが欲しい理由です.ユーザーを認証するコードへのアクセスをユーザーに要求したり、支払いを処理したりしないようにします.

クライアント側パイソン

従来の(非Anvil)ウェブアプリでは、フロントエンドコードはHTMLとJavaScriptで書かれています.なぜなら、それらはブラウザが理解できる言語だからです.アンビルは、Pythonですべてのフロントエンドコードを書くことができます.Anvilは、クライアント側のフォームとモジュールのPythonコードを実行するブラウザのJavaScriptに変換するので、動作します.すべてのPythonライブラリを翻訳することはできませんcannot be used on the client-side in Anvil . サーバー側のPythonはブラウザで動作しませんので、JavaScriptに翻訳する必要はありません.このため、余分なPythonライブラリはused in server code またはthe Uplink . あなたが興味があるならば、AnvilはSkulpt JavaScriptコンパイラへのPython.これはオープンソースプロジェクトでありwe contribute heavily to it .

サーバ側コード

バックエンド

ユーザーのブラウザで実行されるクライアントコードとは異なり、サーバー側のコードは、ユーザーのデバイスとは別のコンピュータ上で実行されます.これは、Webアプリのバックエンドです.アンビルアプリケーションの書き込みコードServer Module 決してあなたのアプリケーションのユーザーが見られることはありません.これは、中央のリソースのためのゲートキーパーとして動作することができることを意味Data Tables ) そして、許可チェックを実施してください.
詳しく知るbuilding secure apps 我々のドキュメンテーションで.
Anvilでは、サーバー側のコードを実行するサーバーを提供するので、どこにホストすることを心配する必要はありません.Anvilアプリケーションでは、サーバーモジュールでコードを書くだけで、コンピュータが実行されます.これは、クラウド、またはServerlessコンピューティングと呼ばれます.

アップリンク

ただし、サーバー側のコードはAnvilのサーバー上で生きる必要はありません.サーバー側のコードをローカルまたは別のサーバーで実行する場合は、Anvil Uplink . アップリンクはどこか他のスクリプトで実行しているPythonコードにAnvilアプリを接続する方法です.例えば、あなたはconnect a script running in a Google Colab notebook アップリンクを介してWebアプリに.この場合、Google Colab ノートブックは、あなたのアプリケーションのバックエンドであり、Googleはサーバーを提供するでしょう.
また、ローカルのコードをホストし、アップリンクを使用してアプリケーションに接続してサーバーとして独自のコンピュータを使用することができます.ただし、一度コンピュータをシャットダウンしたり、スリープ状態に設定すると、アップリンクが切断され、スクリプトが実行されなくなります.アプリケーションが正常に動作するようにスクリプトを実行するには、仮想プライベートサーバーにアップグレードスクリプトをホストすることができますAWS Lightsail or Digital Ocean Droplets . 外部サーバー上のアップリンクスクリプトをホスティングする詳細についてはour guide on using Docker コンテナを作成し、スクリプトを実行します.

クライアントとサーバ間の通信

Anvilでは、クライアント側のコードからサーバー側の関数を呼び出すことで、アプリケーションが通信します.クライアントを使用してサーバー機能を利用できます @anvil.server.callable そして、クライアントコードからそれを呼び出しますanvil.server.call . 次のセクションでこの例を見ます.

フィードバックフォーム：すべてをまとめる

しましょうFeedback Form Tutorial クライアントサーバーアーキテクチャを使用する単純なWebアプリケーションの例として.アプリは、ユーザー入力を取り、データテーブルに格納するためのシンプルなユーザーインターフェイスをしています.

クライアント側

アプリケーションのフロントエンドは、ユーザーインターフェイスとクライアントの入力を収集するクライアント側のコードです.ユーザーがそれと相互作用しているので、このコードはクライアントに住んでいます.ユーザーが入力に入ると“送信”ボタンをクリックした後、我々は使用するanvil.server.call() この関数をデータテーブルに追加するには、サーバー関数を呼び出します.

  def submit_button_click(self, **event_args):
    name = self.name_box.text
    email = self.email_box.text
    feedback = self.feedback_box.text
    # Call the 'add_feedback' server function
    # pass in name, email and feedback as arguments
    anvil.server.call('add_feedback', name, email, feedback)

サーバ側

サーバー機能とデータテーブルは、我々のアプリのバックエンドです.サーバーはユーザーのデバイスとは別ですので、ユーザーに公開したくないコードを実行するために使用できます.フィードバックフォームの場合、他のユーザーのデータが含まれているため、データテーブルを変更するコードにユーザーがアクセスできないようにします.デフォルトでは、サーバー側のコードだけがpermission to access a Data Table . ユーザ入力をサーバ関数に渡し、データテーブルを更新します.

@anvil.server.callable
def add_feedback(name, email, feedback):
  app_tables.feedback.add_row(
    name=name, 
    email=email, 
    feedback=feedback, 
    created=datetime.now()
  )

概要

この記事では、なぜ我々はアンビルのアプリで2つの異なる場所でコードを書く必要があるかを見た.我々は両方のコードを書く理由をカバーclient and server , and how to communicate between the two in Anvil . 最後に、どのようにclient-server architecture works in the Feedback Form Tutorial app .