FlaskとSQLiteでURL短縮サービスを作成する方法

序章

Flask はPythonを使用してWebアプリケーションを構築するためのフレームワークであり、SQLiteはPythonでアプリケーションデータを保存するために使用できるデータベースエンジンです。

このチュートリアルでは、 URL短縮サービスを構築します。これは、任意のURLを受け取り、bit.lyのような短くて読みやすいバージョンを生成するサービスです。

Hashids は、整数から短い一意のIDを生成するライブラリです。 たとえば、次のような数値を変換するために使用できます 12 のようなユニークな文字列に 1XcId. Hashidsを使用して、URLIDの一意の文字列を生成します。

一意の文字列を使用して、動画共有サイトの動画のIDを生成したり、画像をアップロードするサービスの画像のIDを生成したりできます。 この一意の文字列は、予測できないIDを提供します。 したがって、ユーザーがで画像にアクセスできる場合 your_domain/image/J32Fr、他の画像の場所を予測することはできません。 これは、URL短縮サービスで整数IDを使用する場合は不可能です。たとえば、 your_domain/image/33 ユーザーが他の画像の場所を予測できるようにします。 予測できないURLは、ユーザーが他のユーザーによって短縮された別のURLを処理することを妨げるため、サービスに一種のプライバシーを追加します。

Flask、SQLite、および Hashids ライブラリを使用して、URL短縮サービスを構築します。 アプリケーションでは、ユーザーがURLを入力して短いバージョンを生成できるほか、ユーザーがURLがクリックされた回数を表示できる統計ページを使用できます。 Bootstrapツールキットを使用してアプリケーションのスタイルを設定します。

前提条件

• ローカルのPython3プログラミング環境については、 Python3シリーズのローカルプログラミング環境をインストールしてセットアップする方法のチュートリアルに従ってください。 このチュートリアルでは、プロジェクトディレクトリを呼び出します flask_shortener.

• ルートの作成、HTMLテンプレートのレンダリング、SQLiteデータベースへの接続などの基本的なFlaskの概念の理解。 これらの概念に精通していない場合は、 Python3でFlaskを使用してWebアプリケーションを作成する方法とPython3でsqlite3モジュールを使用する方法を確認してください。

ステップ1—依存関係を設定する

このステップでは、Python環境をアクティブ化し、pipパッケージインストーラーを使用してFlaskとHashidsライブラリをインストールします。 次に、URLの保存に使用するデータベースを作成します。

まず、プログラミング環境をまだアクティブにしていない場合はアクティブにします。

source env/bin/activate

プログラミング環境をアクティブにしたら、次のコマンドを使用してFlaskとHashidsライブラリをインストールします。

pip install flask hashids

次に、というデータベーススキーマファイルを作成します schema.sql、を作成するためのSQLコマンドが含まれています urls テーブル。 というファイルを開きます schema.sql あなたの中に flask_shortener ディレクトリ：

nano schema.sql

このファイル内に次のSQLコマンドを入力します。

DROP TABLE IF EXISTS urls;

CREATE TABLE urls (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    created TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
    original_url TEXT NOT NULL,
    clicks INTEGER NOT NULL DEFAULT 0
);

スキーマファイルでは、最初に urls すでに存在する場合はテーブル。 これにより、という名前の別のテーブルの可能性が回避されます urls 既存の場合、混乱を招く可能性があります。 たとえば、列が異なる場合です。 これにより、スキーマファイルが実行されるたびに既存のデータがすべて削除されることに注意してください。

次に、次の列を使用してテーブルを作成します。

• id：URLのID。これは各URLエントリの一意の整数値になります。 これを使用して、ハッシュ文字列から元のURLを取得します。
• created：URLが短縮された日付。
• original_url：ユーザーをリダイレクトする元の長いURL。
• clicks：URLがクリックされた回数。 初期値は 0、リダイレクトごとに増分します。

ファイルを保存して閉じます。

を実行するには schema.sql 作成するファイル urls テーブル、という名前のファイルを開きます init_db.py あなたの中に flask_shortener ディレクトリ：

nano init_db.py

次に、次のコードを追加します。

import sqlite3

connection = sqlite3.connect('database.db')

with open('schema.sql') as f:
    connection.executescript(f.read())

connection.commit()
connection.close()

ここで、というファイルに接続します database.db このプログラムを実行すると、プログラムが作成します。 このファイルは、アプリケーションのすべてのデータを保持するデータベースです。 次に、 schema.sql ファイルを作成し、複数のSQLステートメントを一度に実行する executescript（）メソッドを使用して実行します。 これにより、 urls テーブル。 最後に、変更をコミットして接続を閉じます。

ファイルを保存して閉じます。

プログラムを実行します。

python init_db.py

実行後、という新しいファイル database.db あなたに表示されます flask_shortener ディレクトリ。

これで、FlaskとHashidsライブラリをインストールし、データベーススキーマを作成し、次のテーブルを使用してSQLiteデータベースを作成しました。 urls URL短縮サービスの元のURLを保存します。 次に、Flaskを使用して、ユーザーがURLを入力して短縮URLを生成できるインデックスページを作成します。

ステップ2—URLを短縮するためのインデックスページを作成する

このステップでは、インデックスページのFlaskルートを作成します。これにより、ユーザーはURLを入力して、データベースに保存できます。 ルートはURLのIDを使用して、Hashidsライブラリで短縮文字列ハッシュを生成し、短縮URLを作成して、結果としてレンダリングします。

まず、という名前のファイルを開きます app.py あなたの中に flask_shortener ディレクトリ。 これはメインのFlaskアプリケーションファイルです。

nano app.py

次のコードをファイルに追加します。

import sqlite3
from hashids import Hashids
from flask import Flask, render_template, request, flash, redirect, url_for


def get_db_connection():
    conn = sqlite3.connect('database.db')
    conn.row_factory = sqlite3.Row
    return conn

このコードでは、最初にインポートします sqlite3 モジュール、 Hashids からのクラス hashids ライブラリ、およびFlaskヘルパー。

The get_db_connection() 関数はへの接続を開きます database.db データベースファイルを作成し、row_factory属性を次のように設定します。 sqlite3.Row. その結果、名前に基づいて列にアクセスできます。 データベース接続は、通常のPythonディクショナリのように動作する行を返します。 最後に、関数は conn データベースへのアクセスに使用する接続オブジェクト。

次に、以下を追加します。

. . .
app = Flask(__name__)
app.config['SECRET_KEY'] = 'this should be a secret random string'

hashids = Hashids(min_length=4, salt=app.config['SECRET_KEY'])

Flaskアプリケーションオブジェクトを作成し、秘密鍵をセキュアセッションに設定します。 秘密鍵は秘密のランダムな文字列であるため、Hashidsライブラリのsaltを指定するためにも使用します。 これにより、塩が変化するたびにハッシュも変化するため、ハッシュが予測できないことが保証されます。

あなたは hashids ハッシュが少なくともあるべきであることを指定するオブジェクト 4 に値を渡すことによって長い文字 min_length パラメータ。 アプリケーションの秘密鍵をソルトとして使用します。

次に、ファイルの最後に次のコードを追加します。

. . .
@app.route('/', methods=('GET', 'POST'))
def index():
    conn = get_db_connection()

    if request.method == 'POST':
        url = request.form['url']

        if not url:
            flash('The URL is required!')
            return redirect(url_for('index'))

        url_data = conn.execute('INSERT INTO urls (original_url) VALUES (?)',
                                (url,))
        conn.commit()
        conn.close()

        url_id = url_data.lastrowid
        hashid = hashids.encode(url_id)
        short_url = request.host_url + hashid

        return render_template('index.html', short_url=short_url)

    return render_template('index.html')

The index() 関数はFlaskビュー関数で、特殊な機能を使用して装飾された関数です。 @app.route デコレータ。 その戻り値は、WebブラウザなどのHTTPクライアントが表示するHTTP応答に変換されます。

内部 index() ビュー関数では、渡すことでGETリクエストとPOSTリクエストの両方を受け入れます methods=('GET', 'POST') に app.route() デコレータ。 データベース接続を開きます。

次に、リクエストがGETリクエストの場合、リクエストはスキップされます。 if request.method == 'POST' 最後の行までの状態。 これは、と呼ばれるテンプレートをレンダリングする場所です index.html、ユーザーが短縮するURLを入力するためのフォームが含まれます。

リクエストがPOSTリクエストの場合、 if request.method == 'POST' 条件はtrueです。これは、ユーザーがURLを送信したことを意味します。 URLをに保存します url 変数; ユーザーが空のフォームを送信した場合は、メッセージをフラッシュします The URL is required! インデックスページにリダイレクトします。

ユーザーがURLを送信した場合は、 INSERT INTO 送信されたURLをに格納するSQLステートメント urls テーブル。 あなたは ? execute（）メソッドのプレースホルダーであり、送信されたURLを含むタプルを渡して、データベースにデータを安全に挿入します。 次に、トランザクションをコミットして接続を閉じます。

と呼ばれる変数で url_id、データベースに挿入したURLのIDを保存します。 lastrowid 属性を使用して、URLのIDにアクセスできます。この属性は、最後に挿入された行の行IDを提供します。

を使用してハッシュを作成します hashids.encode() メソッド、それにURLIDを渡します。 結果をという変数に保存します hashid. 例として、呼び出し hashids.encode(1) 次のような一意のハッシュが生成される可能性があります KJ34 使用する塩によって異なります。

次に、を使用して短縮URLを作成します request.host_url、これはフラスコの属性です request オブジェクトは、アプリケーションのホストのURLにアクセスするために提供します。 これは次のようになります http://127.0.0.1:5000/ 開発環境で your_domain アプリケーションをデプロイする場合。 たとえば、 short_url 変数は次のような値になります http://127.0.0.1:5000/KJ34、これは、ハッシュと一致するIDを持つデータベースに保存されている元のURLにユーザーをリダイレクトする短縮URLです。 KJ34.

最後に、レンダリングします index.html テンプレートを渡す short_url それに可変。

すべての追加後、ファイルは次のようになります。

import sqlite3
from hashids import Hashids
from flask import Flask, render_template, request, flash, redirect, url_for


def get_db_connection():
    conn = sqlite3.connect('database.db')
    conn.row_factory = sqlite3.Row
    return conn


app = Flask(__name__)
app.config['SECRET_KEY'] = 'this should be a secret random string'

hashids = Hashids(min_length=4, salt=app.config['SECRET_KEY'])


@app.route('/', methods=('GET', 'POST'))
def index():
    conn = get_db_connection()

    if request.method == 'POST':
        url = request.form['url']

        if not url:
            flash('The URL is required!')
            return redirect(url_for('index'))

        url_data = conn.execute('INSERT INTO urls (original_url) VALUES (?)',
                                (url,))
        conn.commit()
        conn.close()

        url_id = url_data.lastrowid
        hashid = hashids.encode(url_id)
        short_url = request.host_url + hashid

        return render_template('index.html', short_url=short_url)

    return render_template('index.html')

ファイルを保存して閉じます。

次に、ベーステンプレートと index.html テンプレートファイル。

あなたの中で flask_shortener ディレクトリ、作成 templates ディレクトリを開き、というファイルを開きます base.html その中：

mkdir templates
nano templates/base.html

中に次のコードを追加します base.html. スタイリングには、ここでもBootstrapを使用していることに注意してください。 FlaskのHTMLテンプレートに慣れていない場合は、 Python3でFlaskを使用してWebアプリケーションを作成する方法のステップ3を参照してください。

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>{% block title %} {% endblock %}</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-md navbar-light bg-light">
        <a class="navbar-brand" href="{{ url_for('index')}}">FlaskShortener</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">About</a>
            </li>
            </ul>
        </div>
    </nav>
    <div class="container">
        {% for message in get_flashed_messages() %}
            <div class="alert alert-danger">{{ message }}</div>
        {% endfor %}
        {% block content %} {% endblock %}
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

前のブロックのコードのほとんどは、標準のHTMLであり、Bootstrapに必要なコードです。 The <meta> タグは、Webブラウザの情報を提供します。 <link> タグはブートストラップCSSファイルとリンクします <script> タグは、いくつかの追加のブートストラップ機能を可能にするJavaScriptコードへのリンクです。 詳細については、ブートストラップドキュメントを確認してください。

The <title>{% block title %} {% endblock %}</title> タグを使用すると、継承するテンプレートでカスタムタイトルを定義できます。 あなたは for message in get_flashed_messages() フラッシュされたメッセージ（警告、アラートなど）を表示するためにループします。 The {% block content %} {% endblock %} プレースホルダーは、継承するテンプレートがコンテンツを配置する場所であり、すべてのテンプレートがこの基本テンプレートにアクセスできるようにします。これにより、繰り返しが回避されます。

ファイルを保存して閉じます。

次に、を作成します index.html これを拡張するファイル base.html ファイル：

nano templates/index.html

次のコードを追加します。

{% extends 'base.html' %}

{% block content %}
    <h1>{% block title %} Welcome to FlaskShortener {% endblock %}</h1>
    <form method="post">
    <div class="form-group">
        <label for="url">URL</label>
        <input type="text" name="url"
               placeholder="URL to shorten" class="form-control"
               value="{{ request.form['url'] }}" autofocus></input>
    </div>

    <div class="form-group">
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
    </form>

    {% if short_url %}
    <hr>
    <span>{{ short_url }}</span>
    {% endif %}
{% endblock %}

ここで拡張します base.html、タイトルを定義し、という名前の入力を使用してフォームを作成します url. The url 入力により、ユーザーは短縮するURLを入力できます。 の値は request.form['url']、送信が失敗した場合にデータを保存します。 つまり、ユーザーがURLを提供しない場合です。 送信ボタンも追加します。

次に、 short_url 変数には任意の値があります。これは、フォームが送信され、短縮URLが正常に生成された場合に当てはまります。 条件が真の場合、フォームの下に短縮URLを表示します。

Flaskが必要とする環境変数を設定し、次のコマンドを使用してアプリケーションを実行します。

export FLASK_APP=app
export FLASK_ENV=development
flask run

The FLASK_APP 環境変数は、実行するアプリケーションを指定します（ app.py ファイル）。 The FLASK_ENV 環境変数はモードを指定します。 development これは、デバッガーが実行されている状態でアプリケーションが開発モードで実行されることを意味します。 本番環境でこのモードを使用することは避けてください。 を使用してアプリケーションを実行します flask run 指図。

ブラウザを開き、URLを入力します http://127.0.0.1:5000/. Welcome toFlaskShortenerページがあります。

URLを送信すると、短縮URLが届きます。

URLを受け入れて短いページを生成するページを使用してFlaskアプリケーションを作成しましたが、URLはまだ何もしていません。 次のステップでは、短縮URLからハッシュを抽出し、元のURLを見つけて、ユーザーをそのURLにリダイレクトするルートを追加します。

ステップ3—リダイレクトルートを追加する

このステップでは、アプリケーションが生成する短いハッシュを取得し、ハッシュを元のURLのIDである整数値にデコードする新しいルートを追加します。 新しいルートも整数IDを使用して、元のURLを取得し、 clicks 価値。 最後に、ユーザーを元のURLにリダイレクトします。

まず、 app.py 新しいルートを追加するには：

nano app.py

次のコードをファイルの最後に追加します。

. . .

@app.route('/<id>')
def url_redirect(id):
    conn = get_db_connection()

    original_id = hashids.decode(id)
    if original_id:
        original_id = original_id[0]
        url_data = conn.execute('SELECT original_url, clicks FROM urls'
                                ' WHERE id = (?)', (original_id,)
                                ).fetchone()
        original_url = url_data['original_url']
        clicks = url_data['clicks']

        conn.execute('UPDATE urls SET clicks = ? WHERE id = ?',
                     (clicks+1, original_id))

        conn.commit()
        conn.close()
        return redirect(original_url)
    else:
        flash('Invalid URL')
        return redirect(url_for('index'))

この新しいルートは値を受け入れます id URLを介して、それをに渡します url_redirect() ビュー機能。 たとえば、 http://127.0.0.1:5000/KJ34 文字列を渡します 'KJ34' に id パラメータ。

ビュー関数内で、最初にデータベース接続を開きます。 次に、 decode() の方法 hashids ハッシュを元の整数値に変換し、それをに格納するオブジェクト original_id 変数。 あなたは original_id 値があります。これは、ハッシュのデコードが成功したことを意味します。 値がある場合は、そこからIDを抽出します。 として decode() メソッドはタプルを返します。タプルの最初の値を次のようにフェッチします。 original_id[0]、これは元のIDです。

次に、 SELECT 元のURLとそのクリック数をからフェッチするSQLステートメント urls テーブル。URLのIDは、ハッシュから抽出した元のIDと一致します。 次のURLデータを取得します fetchone() 方法。 次に、データを2つに抽出します original_url と clicks 変数。

次に、URLのクリック数を次のように増やします。 UPDATE SQLステートメント。

トランザクションをコミットして接続を閉じ、を使用して元のURLにリダイレクトします。 redirect() フラスコヘルパー機能。

ハッシュのデコードに失敗した場合は、URLが無効であることをユーザーに通知するメッセージをフラッシュし、それらをインデックスページにリダイレクトします。

ファイルを保存して閉じます。

開発サーバーを実行します。

flask run

ブラウザを使用して http://127.0.0.1:5000/. URLを入力し、結果の短縮URLにアクセスします。 アプリケーションは元のURLにリダイレクトします。

ユーザーを短縮URLから元のURLにリダイレクトする新しいルートを作成しました。 次に、各URLにアクセスした回数を示すページを追加します。

ステップ4—統計ページを追加する

このステップでは、各URLがクリックされた回数を表示する統計ページの新しいルートを追加します。 また、ナビゲーションバーのページにリンクするボタンを追加します。

短縮された各リンクが受けた訪問数をユーザーが確認できるようにすることで、各URLの人気を可視化できます。これは、マーケティング広告キャンペーンなどのプロジェクトに役立ちます。 このワークフローは、既存のFlaskアプリケーションに機能を追加する例として使用することもできます。

開ける app.py 統計ページの新しいルートを追加するには：

nano app.py

次のコードをファイルの最後に追加します。

. . .

@app.route('/stats')
def stats():
    conn = get_db_connection()
    db_urls = conn.execute('SELECT id, created, original_url, clicks FROM urls'
                           ).fetchall()
    conn.close()

    urls = []
    for url in db_urls:
        url = dict(url)
        url['short_url'] = request.host_url + hashids.encode(url['id'])
        urls.append(url)

    return render_template('stats.html', urls=urls)

このビュー機能では、データベース接続を開きます。 次に、ID、作成日、元のURL、およびのすべてのエントリのクリック数を取得します。 urls テーブル。 あなたは fetchall() すべての行のリストを取得するメソッド。 次に、このデータをに保存します db_urls 変数を設定し、接続を閉じます。

各エントリの短縮URLを表示するには、それを作成し、データベースから取得したURLのリストの各アイテムに追加する必要があります（db_urls). と呼ばれる空のリストを作成します urls ループします db_urls とリスト for url in db_urls.

あなたは dict() 変換するPython関数 sqlite3.Row 割り当てを許可する辞書へのオブジェクト。 と呼ばれる新しいキーを追加します short_url 値を持つ辞書に request.host_url + hashids.encode(url['id'])、これは、インデックスビュー関数で短縮URLを作成するために以前に使用したものです。 この辞書をに追加します urls リスト。

最後に、というテンプレートファイルをレンダリングします stats.html、合格 urls それにリストします。

ファイルを保存して閉じます。

次に、新しいを作成します stats.html テンプレートファイル：

nano templates/stats.html

次のコードを入力します。

{% extends 'base.html' %}

{% block content %}
    <h1>{% block title %} FlaskShortener Statistics {% endblock %}</h1>
    <table class="table">
        <thead>
            <tr>
            <th scope="col">#</th>
            <th scope="col">Short</th>
            <th scope="col">Original</th>
            <th scope="col">Clicks</th>
            <th scope="col">Creation Date</th>
            </tr>
        </thead>
        <tbody>
            {% for url in urls %}
                <tr>
                    <th scope="row">{{ url['id'] }}</th>
                    <td>{{ url['short_url'] }}</td>
                    <td>{{ url['original_url'] }}</td>
                    <td>{{ url['clicks'] }}</td>
                    <td>{{ url['created'] }}</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>

{% endblock %}

ここで拡張します base.html タイトルを指定し、次の列を使用してテーブルを定義することにより、基本テンプレートを作成します。

• #：URLのID。
• Short：短縮URL。
• Original：元のURL。
• Clicks：短縮URLにアクセスした回数。
• Creation Date：短縮URLの作成日。

各行は、 for を通過するループ urls 各URLの各列の値を一覧表示して表示します。

次のコマンドで開発サーバーを実行します。

flask run

ブラウザを使用して http://127.0.0.1:5000/stats. テーブルにすべてのURLがあります。

次に、Statsボタンをナビゲーションバーに追加します。 を開きます base.html ファイル：

nano templates/base.html

次の強調表示された行に従ってファイルを編集します。

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>{% block title %} {% endblock %}</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-md navbar-light bg-light">
        <a class="navbar-brand" href="{{ url_for('index')}}">FlaskTodo</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">About</a>
            </li>

            <li class="nav-item active">
                <a class="nav-link" href="{{ url_for('stats')}}">Stats</a>
            </li>
            </ul>
        </div>
    </nav>
    <div class="container">
        {% for message in get_flashed_messages() %}
            <div class="alert alert-danger">{{ message }}</div>
        {% endfor %}
        {% block content %} {% endblock %}
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

ここに新しいものを組み込みます <li> ナビゲーションバーへのアイテム。 あなたは url_for() リンクする関数 stats() ビュー機能。 これで、ナビゲーションバーから統計ページにアクセスできます。

統計ページには、短いURLやアクセス回数など、各URLに関する情報が表示されます。

このコードを再利用して、ソーシャルメディアサイトで投稿が高く評価または更新された回数や、写真/ビデオが表示された回数を追跡するなど、他のコンテキストでのクリック数を監視できます。

このリポジトリからアプリケーションの完全なコードにアクセスできます。

結論

ユーザーが長いURLを入力し、短いバージョンを生成できるようにするFlaskアプリケーションを作成しました。 整数を短い文字列ハッシュに変換し、ユーザーをあるリンクから別のリンクにリダイレクトし、短縮URLを監視できるように統計用のページを設定しました。 Flaskの操作に関するその他のプロジェクトとチュートリアルについては、次のチュートリアルを確認してください。

• FlaskおよびSQLiteで1対多のデータベース関係を使用する方法。
• FlaskおよびSQLiteとの1対多のデータベース関係でアイテムを変更する方法。
• FlaskおよびSQLiteで多対多のデータベース関係を使用する方法。
• Flaskでアプリに認証を追加する方法-ログイン。