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](https://www.geekfeed.co.jp/geekblog/windows-subsystem-for-linux-with-kali-linux)


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

- [UbuntuでPostgreSQLをインストールからリモートアクセスまでの手順 - Qiita](https://qiita.com/ibara1454/items/40ce2d82926f48cf02bc)


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

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

- [CREATE TABLE - PostgreSQL 9.3.2](https://www.postgresql.jp/document/9.3/html/sql-createtable.html)

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

- [[Entity Framework] コードファーストで、データベース・テーブル作成、データの書き込み・読み込みをしてみた。 - 東京で働く、ある開発者のメモ](http://hokatsu.net/c-sharp/entity-framework-by-code-first/)
- [Djangoでマイグレーションを実行しDBテーブルを生成する - ゼロイチ](https://programming-beginner-zeroichi.jp/articles/147)



## Xamarin on Windows

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

- [Install Visual Studio - Microsoft](https://docs.microsoft.com/ja-jp/visualstudio/install/install-visual-studio?view=vs-2019)


### プロジェクト作成
公式サイトのチュートリアルを一通り実施。

- [Xamarin の概要 - Microsoft](https://docs.microsoft.com/ja-jp/xamarin/get-started/)


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

- [NpgsqlとEntityFramework Coreを使ってPostgreSQLをCRUDする - け日記](https://ohke.hateblo.jp/entry/2017/03/03/000000)

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

```cs
...
        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](https://www.sejuku.net/blog/83204)

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

- [Ubuntuにpip/pip3をインストールする - Pythonプログラミング物語](https://pcl.solima.net/pyblog/archives/57)

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

- [Virtualenv の使い方 - Python入門](https://python.keicode.com/devenv/virtualenv.php)


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

- [はじめての Django アプリ作成、その 1 - Django](https://docs.djangoproject.com/ja/2.2/intro/tutorial01/)

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

- [[Django]既存のデータベースを利用する方法 - Qiita](https://qiita.com/okoppe8/items/82a9cc2bb99de05f8dbb)

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


### AdminLTE

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

- [Quickstart - Django AdminLTE2](https://django-adminlte2.readthedocs.io/en/latest/)



# 実装手順

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

## スマホアプリ

1. Xamarinでプロジェクト作成
2. 「[公式チュートリアル](https://docs.microsoft.com/ja-jp/xamarin/get-started/quickstarts/)」を一通り実施(僕は「クイックスタート」だけやった)
3. チュートリアルの「[データベース](https://docs.microsoft.com/ja-jp/xamarin/get-started/quickstarts/database?pivots=windows)」SQLiteなので、PostgreSQLを使えるように修正（[上記の手順](https://qiita.com/hnkyi/items/fff1914785d497beeec6#entityframewark)を参考に修正）
4. MVCモデルのModelに対応するDAOクラスを作成
5. 2と同時にSQLでCREATE文を作成
6. 4と併せてSQLでINSERT文も作成
7. 5と6のSQLを実行
8. プロジェクトを実行し、想定した挙動になるか確認

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

## 管理アプリ

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

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

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


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

- 上にも書いたけど、Xamarin側でDB接続の時の接続文字列。WSLのIPアドレス変わるの知らなかったからデータアクセスせずに死んだ
- Djangoでサイドバーにアプリ追加しようと思ったらできなくて「何でや！」って困ってたら、過去にも同じハマり方してた
    - [django-jetの利用手順 > サイドバーにアプリケーションを並べたい - Qiita](https://qiita.com/hnkyi/items/50eaa000eeb5aff0501f#%E3%82%B5%E3%82%A4%E3%83%89%E3%83%90%E3%83%BC%E3%81%AB%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E4%B8%A6%E3%81%B9%E3%81%9F%E3%81%84)



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

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

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