アプリ開発ナレッジ

アプリ開発のナレッジを掲載します

マッチングアプリを個人開発する~Djangoバックエンドその1 環境構築~

はじめに

マッチングアプリはWebアプリの基本を学べるよい教材だと感じるので、バックエンドにDjango・フロントエンドにFlutterを利用して個人開発で自作してみようと思います
なお実運用したい場合は有償無償を問わず「インターネット異性紹介業」の開業を警視庁に申請しなければならないのと、免許証もしくはクレジットカードを必ず扱うため個人情報の扱いを厳重に行う必要があります
実装とは別に運用面でハードルがありますが、マッチングアプリの自作に挑戦してみたい方の参考になれば幸いです
また、手前味噌で恐縮ですが、この記事はかなり詳しめに書いていまして、初学者にとってはかゆいところに手が届く内容にもなっているので、バックエンド・フロントエンド・デプロイにかけてのフルスタックなのWEBアプリ開発を一通り学んでみたい方にも特におすすめです
想定読者としては、プログラミングを一通り学んでおり、WEBアプリの仕組みについてもなんとなくわかるが、具体的な開発についてはどこから手を付けていいかわからないという人が最適かと思います

マッチングアプリはおそらく実運用が最も肝心なので開発は一つの通過点に過ぎないです
パパっと作ってスモールスタートする方がよさそうな気はしますね

では始めましょう


目次

要件定義

まずは作る目的、業務要件、機能要件、システム構成をざっくり整理しましょう
開発プロジェクトの最も基本であり、目的が重要であればあるほど作るモチベーションにも影響します

目的

自作マッチングアプリでモテモテになる

達成条件

自作マッチングアプリで集客した女性100人と出会う

業務要件

Must

本サービスに認可・認証されたユーザーのみが利用することができる
年齢確認をすることができる
ユーザーは異性ユーザーのプロフィールを一覧で閲覧することができる
ユーザーは異性ユーザーに「いいね」を送ることができる
ユーザー双方が「いいね」を送り合うと「マッチング」が成立する
マッチングが成立したユーザー同士はメッセージを使用することができる

Try

本人確認をすることができる
ユーザーはユーザーごとにレコメンドされた異性のプロフィールを一覧画面で閲覧することができる

機能要件

Must

ログイン認証機能
クレジットカード決済ができる
WEBアプリとして当然備えているべき一通りの基本的な機能が実装されている

Try

(プロフィール・免許証)画像のアップロードができる
email認証(アカウント作成時)
eKYC(Know Your Customer) 機能が備わっている
OAuth認証

システム構成

簡略図(draw.ioで作成)
f:id:shinseidaiki:20220206095532p:plain

※Next.jsではなくFlutterを使いました

さて一通り要件定義を済ませたので早速開発していきましょう

開発環境

バックエンド開発 Django

まずはバックエンド側の開発です
Django(ジャンゴと読みます)を用いてRestAPIを作成していきます
ちなみにDjangoPythonを元にしたWebアプリ開発フレームワークの一つで、YoutubeInstagramなど有名なサービスにも使われている実績のあるフレームワークです

バックエンド側Djangoの開発環境

  • Django バージョン:4.0.2
  • Python バージョン:3.8
  • 仮想環境:Anaconda Navigator Individual Edition
  • エディタ:PyCharm

インストール~環境構築

以下ではpythonとAnaconda NavigatorとPyCharmを利用します
インストールしていない人はインストールしてください

最新版をインストール
Download Python | Python.org

  • Anaconda Navigator

なお、個人向け無料のエディションはAnaconda Individual Edition
Anaconda | Individual Edition

  • PyCharm

無料で使用したいためCommunityの方を選択
ダウンロード PyCharm:JetBrainsによるプロの開発者向けのPython IDE

1. 仮想環境作成

まずは仮想環境を作成しましょう
ここで言っている仮想環境とはDjangoでこれからいろいろなパッケージをインストールして使っていくので、そのバージョン管理を行うための環境です
これを行わないとPC上に直接パッケージがインストールされて他のアプリ開発をするときに面倒なことが起きる可能性があります
特段理由がなければ少し手間はあるがこちらの手順を行っておくのが吉

Anaconda Navigatorを起動する
その後、Environments>Createで新たな仮想環境作成を選択
後は画面に従って、Nameに「Matching_App_API」などを入力していきcreateを押下

2. ターミナルを開き、必要なパッケージをインストールする

Anaconda Navigatorで先ほど作った環境の再生ボタン(△ボタン)をクリックしてターミナルを開き
コマンドラインにpip installを使うことで以下のパッケージをまずはインストールする

pip install ○○
  • django - これから開発に使用するバックエンドのフレームワーク
  • djangorestframework - Rest APIが使用できるようになる
  • djangorestframework-simplejwt - JWTと呼ばれる最近使用されるセキュリティレベルの高いTokenを使用した認証機構(simpleがついていない方も存在したが更新日時がもはや5年前だった)
  • djoser - JWTを便利に使用するためのパッケージ
  • django-cors-headers - バックエンドとフロントエンドをクロスエンジンでつなぐ
  • pillow - 画像を扱うためのパッケージ
  • django-environ - 環境変数を扱うパッケージ

他のパッケージは必要に応じてインストールしていく
インストールが終わったらターミナルを閉じる

3. PyCharmに上記で作成した仮想環境を紐づける

任意の場所にプロジェクトルートとなるフォルダを作成する
例:C:\Users\[YOURNAME]\projects\matching-app

Pycharmを起動する
今作成したそのフォルダを開く
File>Settingを選択
Project>Python Interpreterを選択して、画面の歯車マークからAddを選択する
Existing environmentを選択して、...マークを選択する
%USERPROFILEフォルダ以下で envs\[仮想環境の名前]\python.exe を選択する
例: envs\Matching_App_API\python.exe
すると、Python Interpreterに先ほど作成した仮想環境Matching_App_APIが適用され、Djangoのコマンドなどが利用できるようになる
OKを押して、PyCharmを再起動するとこの仮想環境が適用される

4. プロジェクトとアプリの作成

それではdjangoのプロジェクトを作成していきましょう
PyCharmのターミナルを開いて、まずは以下のコマンドを入力して matchingappapi プロジェクトという名前でバックエンドのプロジェクトフォルダを作成しましょう

django-admin startproject matchingappapi

そしてプロジェクトを作成したら、cdで今作ったプロジェクトフォルダ直下に下るか、PyCharmで今作成したプロジェクトフォルダ直下にフォルダを開きなおすかします
今回は開きなおす方で行います
なお、同じフォルダが二つ作成されているが、プロジェクトフォルダ直下と言っているのは matching-app下のmatchingappapiフォルダのことです
matching-app
┗matchingappapi
 ┗ matchingappapi
なお、フォルダを開きなおすと先ほどの3の手順で行ったPyCharm仮想環境適用の設定をもう一度行う必要があるので、3の手順をもう一度行う

次にアプリを作成する
アプリ名はなんでもよいがここではbasicapiとして作成する

django-admin startapp basicapi

ここまで終わるとフォルダ構成がこのようになっているはずです
matching-app
┗ matchingappapi
 ┗ matchingappapi
 ┗ basicapi
 ┗ manage.py

5. サーバーの起動

ここまででWebアプリの初期導入は完了しています
なので、一度サーバーを起動してアプリが立ち上がるかを動作確認してみましょう

プロジェクト直下の manage.py を右クリックしてrun 'manage'をクリック
そのあと、PyCharm画面の右上にmanageボタンが表示されるので、クリックしてEdit Configurationsを選択する
parametersの箇所に runserver を追記する
この設定を行うことでPyCharmの右上の再生ボタンを押すことでサーバーを起動させることができるようになる

なお他の方法としては、ターミナルで

py manage.py runserver

と入力することでもサーバーを起動することができる

サーバーを起動させるとターミナルに起動URL(http://127.0.0.1:8000/)が表示されるはずなので、ブラウザを開いてそのURLにアクセスすると、Djangoのロケットが打ちあがる初期起動画面が見えるはずである
ロケットの画面が見えれば動作確認は成功です

次回予告

これからDjangoの本格的な開発に入っていこうと思いますが、長くなるのでいったん記事を区切ろうと思います
続きは、Djangoの設定をいじってモデルを作成し、ユーザー一覧を表示させられるまでのAPIの機能を作成しようと思います


次の記事

shinseidaiki.hatenablog.com