Xamarinでスマホアプリを作り、Djangoで管理する。

「とりあえずアプリ作ってみようかな」という事で、どんな手順で作っていってるのか備忘録。
（具体的な手順は書いておらず「こういうところを参考に作ったよ」という程度にしか書いてないです。すみません。）
（一部手順漏れがある気がするので、見つかり次第更新します。）

開発環境

• OS
  • Windows 10 Pro
• スマホアプリ
  • Xamarin + EntityFramewark
    • 利用想定として、スマホを使用するため、LinuxではなくWindowsで構築
    • クロスプラットフォームで作りたかったので『Xamarin』を採用
    • ORマッパーは知見のある『EntityFramewark』を採用
• 管理アプリ
  • Django + AdminLTE
    • 利用想定として、Webサーバを立てる必要があるので、WindowsではなくLinuxで構築
    • 知見がある＋掘り下げて勉強したかったので『Django』を採用
    • イケてる見た目にしたいので『AdminLTE』を採用
• データベース
  • PostgreSQL 11.5
    • 利用想定として、DBサーバを立てる必要があるので、WindowsではなくLinuxで構築
    • 知見がある＋最近触ってなかったので『PostgreSQL』を採用

開発PCがMacではなくWindowsなので、Linux環境を作る必要がある。
サーバ借りるのは面倒なので()、WindowsにLinux環境を立てる必要がある。
なので『Windows Subsystem for Linux(以下WSL)』でLinux環境を構築する。

構築手順

WSL

以下の手順を参考に構築。
今回は興味本位で『Kali Linux』で作った。（Kaliってペネトレーションが強いディストリビューションだけど、システム開発とかできるかなっていう興味）

• Windows10のWSLでKali LinuxをインストールしてLinuxコマンドを使いこなそう。 - Geekfeed

PostgreSQL on WSL

以下の手順を参考に構築。「Ubuntuじゃないけどapt-get使えるし大丈夫やろ」と思ったらできた。

• UbuntuでPostgreSQLをインストールからリモートアクセスまでの手順 - Qiita

テーブル作成

EntityFramewarkとかDjangoを使えばmigrateした時にテーブル作成も一緒にできるけど、あんまり好きじゃないので直でSQL書きした。なので手順なし。

CREATE文は以下の記法で書ける。

• CREATE TABLE - PostgreSQL 9.3.2

EntityFramewarkとかDjangoとか使ってテーブル作成したいならこちら。

• [Entity Framework] コードファーストで、データベース・テーブル作成、データの書き込み・読み込みをしてみた。 - 東京で働く、ある開発者のメモ
• Djangoでマイグレーションを実行しDBテーブルを生成する - ゼロイチ

Xamarin on Windows

Visual Studi 2019

公式サイトの手順でインストール。
ワークロードから「.NETによるモバイル開発」も選択しておく。

• Install Visual Studio - Microsoft

プロジェクト作成

公式サイトのチュートリアルを一通り実施。

• Xamarin の概要 - Microsoft

EntityFramewark

以下の手順でPostgreSQLとの繋ぎこみをした。

• NpgsqlとEntityFramework Coreを使ってPostgreSQLをCRUDする - け日記

※IPアドレスについては注意が必要。
（XamarinはローカルPCで開発しているが、PostgreSQLはWSLに構築している＝IPアドレスが違うのでlocalhostでは繋がらない＝WSL側でifconfigなどでIPアドレスを特定して設定する必要あり。また、WSLのIPアドレスが毎度変わるので毎度設定変更が必要）

...
        protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
        {
            // 「Host=localhost」ってなってるけど接続失敗するから気を付けてね
            optionsBuilder.UseNpgsql("Host=localhost;Username=ohke;Password=ohke;Database=test");
        }
...

Django on WSL

Python

以下の手順を参考にインストール。PostgreSQL同様、「Ubuntuじゃないけどapt-get使えるし大丈夫やろ」と思ったらできた。

• Ubuntu18.04にPyhton3.7を導入や設定をしよう！ - Samrai Blog

ライブラリ管理は『pip』でやるのでpipもインストール。

• Ubuntuにpip/pip3をインストールする - Pythonプログラミング物語

UbuntuやKaliはデフォルトでPython2系が使われるので、仮想環境『virtualenv』も入れてPython3が使われるようにする。（aliasの設定だけじゃダメ）

• Virtualenv の使い方 - Python入門

Django

公式サイトのチュートリアルを一通り実施。

• はじめての Django アプリ作成、その 1 - Django

なお、今回は既存のDBを使用するため、以下を使ってModelを作成。

• [Django]既存のデータベースを利用する方法 - Qiita

また、IPアドレスについてはlocalhostでOK。
（Xamarinでは開発環境に乖離があったが、こちらはPostgreSQLもDjangoも同じWSL上に構築されているためlocalhostでよい）

AdminLTE

以下の手順で設定。意外と簡単。

• Quickstart - Django AdminLTE2

実装手順

スマホアプリが主体になるので、まずはXamarinから。
実際の利用想定だと管理アプリからデータのCRUDする事になるので、次にDjango。

スマホアプリ

1. Xamarinでプロジェクト作成
2. 「公式チュートリアル」を一通り実施(僕は「クイックスタート」だけやった)
3. チュートリアルの「データベース」SQLiteなので、PostgreSQLを使えるように修正（上記の手順を参考に修正）
4. MVCモデルのModelに対応するDAOクラスを作成
5. 2と同時にSQLでCREATE文を作成
6. 4と併せてSQLでINSERT文も作成
7. 5と6のSQLを実行
8. プロジェクトを実行し、想定した挙動になるか確認

ここまで一通りできたら、後はカスタマイズするだけなのでスマホアプリ側はOK。

管理アプリ

1. Pythonの仮想環境を構築(上記の手順を参照)
2. Djangoでプロジェクト作成(上記の手順を参照、公式チュートリアルの「はじめての Django アプリ作成、その2」まで出来てればOK)
3. python manage.py runserverで起動し、想定した挙動になるか確認(先ほどINSERTしたデータが取得できているか。)
4. AdminLTEの導入(上記の手順を参照)
5. python manage.py runserverで起動し、想定した挙動になるか確認(AdminLTEのレイアウトが適用されているか。)

ここまで一通りできたら、後はカスタマイズするだけなので管理アプリ側もOK。

実装してから気づいたけど、僕はModelから作っていくタイプらしい。
人によってはViewから作ったりControllerから作ったり色々あるだろうけど、僕はModelからだった。(どうでもいい)

詰まりポイント(箇条書き)

• 上にも書いたけど、Xamarin側でDB接続の時の接続文字列。WSLのIPアドレス変わるの知らなかったからデータアクセスせずに死んだ
• Djangoでサイドバーにアプリ追加しようと思ったらできなくて「何でや！」って困ってたら、過去にも同じハマり方してた
  • django-jetの利用手順 > サイドバーにアプリケーションを並べたい - Qiita

まとめ

ちょっと前まで「ふぇ～ん::(∩´～`∩)::一人で開発とか無理だよぉ～～(泣)」って感じだったけど、

「一人でスマホアプリもWebアプリもDB構築もできるようになったんだなぁ」と我ながら成長を実感してる。。。

という事で、絶賛作成中。