alt

サーバーサイドのウェブ開発と自動化に興味のあるフルスタックGolang & TypeScript開発者。

10分で読める

はじめに

REST APIはどこにでもあります — これらがなければ、ウェブサイトははるかに退屈なものになるでしょう。これらはウェブサイトの SurgeLingoの文の例 と フロントエンド を統合するものであり、今日は5分以内に自分たちで1つを構築します。

REST APIの定義

REST API — つまり representational state transfer application program interface の略 — は、異なるプログラミング言語やアプリケーションの部分が互いに通信できるようにするものです。本来、これらの言語は互いのコードを理解できないため、互いに通信することができません。これは大きな損失となるでしょう。なぜなら、一部のプログラミング言語は特定の分野でより優れたパフォーマンスを発揮したり、特定の作業に適していたりするからです — 例えば、機械学習にJavaScriptを使用することは決してありません。しかし、Pythonはこの分野で定番の言語です — そしてここでREST APIがその価値を示すのです。

要するに、これらのAPIはサーバーを上下に情報を送信し、その情報はデコードされてクライアントに送信されます。このタイプのAPIの強みは、データベースに非常に適していることです - 4つの基本的な HTTPメソッド が使用できます。

  • GET - サーバーからデータを取得
  • POST - サーバーにレコードを作成
  • PUT/PATCH - サーバーのレコードを更新
  • DELETE - サーバーの既存のレコードを削除

これらは、CRUD（作成、読み取り、更新、削除）という頭字語で覚えることができます。

使用するツールの概要

REST APIを作成するには、いくつかの前提条件をインストールする必要があります（それについては 次のセクションで説明します）。しかし、始める前に、実際に使用するツールを簡単に見てみましょう。

まず、APIの フロントエンド 部分 - データベースを扱い、incoming requestsを処理し、データを変更する部分 - には、Pythonと、素晴らしいライブラリである Flaskを使用します。Pythonにあまり詳しくなくても心配いりません - コードは短く、よく説明されています。このライブラリ以外には、バックエンド側で実際に必要なものはありません！

Flaskの人気のある代替案として、興味のある人のために、 Django. ただし、これはFlaskよりも一歩進んだものであり、多くの場合はるかに複雑なので、この投稿ではFlaskに固執します。

RESTful APIのフロントエンド部分では、JavaScriptを使用してユーザーが見るHTMLページを変更し、APIが機能していることを視覚的に証明します。同様に、JavaScriptを知らなくても心配しないでください - コードはバックエンドよりもさらに単純になります！

要件とインストール

要件

  • Python >= 3.4
  • Flask == 1.1.2
  • ウェブブラウザ

セットアップから始めましょう。まだPythonをお持ちでない場合は、ダウンロードしてください ここ.

最初の実際のインストールに進みましょう - Flask。Pythonのバージョンが3.4以上の場合（ python3 -V ターミナルで確認できます）、次のステップに進んでも大丈夫です。そうでない場合は、 pip をインストールするか、Pythonをより新しいバージョンにアップグレードする必要があります - 説明は彼らのウェブサイトにあります ここ.

Flaskをインストールしたら、 python3 -m pip install Flask をターミナルのどこかで入力すると、1〜2分後にFlaskライブラリがインストールされます。先に進みましょう！

バックエンドの構築

まず、構築を始めます フロントエンド — これはクライアントには見えない部分で、アプリケーションの中核となり、HTTPリクエストを処理します。これはPythonとFlaskを使って構築します。

まず、ライブラリをインポートする必要があります。新しいファイルを作成し、好きな名前を付けてください — ただし、Pythonファイルとして認識されるように、必ず .py 拡張子で終わるようにしてください。私の場合は app.py.

次に、以下でFlaskをインポートすることから始めましょう。

からインポートする必要があります flask import Flask

そして、Flaskのウェブアプリケーションを初期化する必要があります。

app = Flask(__name__）

次に、Flaskの routeを作成しましょう。これは基本的に、ユーザーがコンテンツにアクセスするために移動するURLです。 /helloにルートを作成し、ユーザーがそのURLにアクセスしてそこにあるデータにアクセスできるようにします。このルートは デコレータ を使って作成できます — 基本的に別の関数をラップする関数です。

デコレータだけで1つの投稿になりうるほど深い話題ですが、本質的には何かを行い、「装飾」する関数を実行し、その後また何かを行います — 基本的に別の関数の周りに指示をラップしています。

Pythonでは、"@"記号を使用してデコレータを指定できます。数行下に移動して、Flaskルートデコレータを設定しましょう。

@app.route("/hello"、 methods=["GET"])

上記のコードは、ホームページにアプリケーションルートを設定し、（JavaScriptがデータにアクセスできるように） GET リクエストをサポートします。実際にユーザーがそこにアクセスしたときに実行される関数を作成しましょう。デコレータの直下の行に、次のコードを入力してください（または、 完全なコード までスキップして、すべてのコードを一度にコピーすることもできます）。

def hello(): # you can name this anything you want
    return {"response"に対してエッジを与える追加機能の一部です: "Hello from Python!"}

上記で設定した関数は、JSONの形式でデータを返します — JSONはJavaScript Object Notationの略で、他の主要なプログラミング言語のほとんどが読み取ることができる言語です。これは「response」という名前と「Hello from Python」という値を持つ オブジェクトの形でデータを送信します — Pythonの辞書に多少似ています。

最後に、アプリケーションを実行できるようにする必要があります。これは、ファイルの最後に app.run() 関数を追加することで行えます。

if __name__ == "__main__"に対してエッジを与える追加機能の一部です:
    app.run(debug = True）

app.run() は、コマンドラインからコードを実行したときにアプリケーションが実行されることを意味し、 debug を True に設定しているので、すべての動作を確認し、潜在的なエラーを捕捉することができます。

これでバックエンドとPythonは終わりです！たった7行のコードで、シンプルなフロントエンドの準備が整いました。JavaScriptとHTMLファイルを提供できるように、このファイルを少し修正する必要がありますが、それはほんの数行のコードを追加するだけです。 できる すでに実行してみてください。ターミナルを開き、現在のPythonファイルがあるディレクトリに移動して、次のように入力してください python3 my-file-name.py.

そうすると、サーバーがlocalhost:5000で実行されているという情報がコンソールに表示されます。 http://localhost:5000/helloにアクセスすると、すでにJSONが表示されているはずです！送信したとおりの形式で表示されます（ただしJSON形式になります）。以下のようなものが表示されるはずです：

{"response"に対してエッジを与える追加機能の一部です: "Hello from Python!"}

ただし、データを手動で取得するために、JavaScriptとHTMLをさらに追加する予定です。多くの場合、これらのREST APIはアプリケーションによって使用されることを意図しており、ユーザーが直接閲覧するものではありません。

フロントエンドのセットアップ

APIにアクセスするためにJavaScriptを使用し、ユーザーが閲覧できるインデックスページを作成するために超シンプルなHTMLを使用します。始めましょう。

まず、Pythonファイルと同じディレクトリに templates という名前のフォルダを作成し、その中に次の名前のファイルを作成します index.html. これは、ユーザーが私たちのlocalhostウェブサイトにアクセスしたときに レンダリングされる Pythonによって処理されるファイルです。私はこの index.html ファイルの内容の詳細には触れません — それは単純な見出しとJavaScriptがコードを挿入するためのスペースがあるだけのファイルです。



 lang="en">

     charset="UTF-8">
     name="viewport" content="width=device-width, initial-scale=1.0">
    </span>REST API Sandbox<span class="nt">


    
Data from Python below!
     id="fromJS">