本当の初心者がmonaca(cordova)+vue+typeormでハイブリッドアプリを作るまでの試行錯誤（随時更新）

初めに

試行錯誤のログです。
間違いも書きますがなおします。
だってメモだから。
アドバイスは随時募集です！

---

背景

昨年末に
「アプリを作ってほしいんだよね
monaca使うと楽なんでしょ？
もうやること決まっているから」
って言われて着手。
割と殺意わきました。

---

構築者のスキルセット

ここ数年Ruby+Railsしか書いていないロートルです。

• 理解度
  
  • vue?...聞いたことある
    
  • webpack?...聞いたことある
    
  • babel?...塔？
    
  • ES5?ES6?ES2015?TypeScript...なぜ1言語にこんなに多数の書き方あるのか意味不明
    
  • Cordova...Javascriptで開発出来るってさ
    
  • monacaとcordovaの違い...monacaはcordovaを使いやすくしてくれるサービス！
    

---

構築の想定ステップ

1. 画面モックを作る
2. OB周りの構築（ローカルのブラウザ開発では何のDBを使えばいいのでしょうか?
   typeorm使ってローカルWebSQL・実機SQLiteで動きました°˖☆◝(⁰▿⁰)◜☆˖°
3. アプリケーションスコープの情報の扱い方考える（Vuex?なの?
   vuex使うっきゃないよね
4. nativeのブリッジどうしようっかなー
   cordova plugin内製で乗り切り
5. CI/CDとかdeployとか・・・
   vue標準？？？のmocha+headlesschromeで回しました

---

環境構築

公式手順にのっとって、プロジェクト作ってみる

setup

# 社内環境ってproxy面倒ですよね😞
# git global settings
git config --global http.proxy XXXXXXX
git config --global https.proxy XXXXXXX
git config --global http.sslVerify false
git config --global url."https://".insteadOf ssh://

# npm global settings
npm -g config set proxy XXXXXXX
npm -g config set https-proxy XXXXXXX
npm -g config set strict-ssl false
npm install -g monaca
npm install -g vue-cli
set NODE_TLS_REJECT_UNAUTHORIZED=0

monaca config proxy XXXXXXX
monaca login

npm install
monaca transpile

monaca preview

---

開発環境の設定

VSCodeで行くぞ！

• extension List

  • doiuse
    CSSチェッカー
  • ESLint
    構文check
  • HTML Snippets
    HTML のスニペット
    
  • language-stylus
    vscodeのstylusサポート
  • Vetur
    vscodeのvueサポート
    ※もしシンタックスハイライト効かない場合はVeter Eを入れてみたください
  • VueHelper
    vueのコード補完

• setting ファイル=>基本設定=>設定

settings.json

{
  /*
   Html, JavaScript, Vue
  */
  "files.associations": {
    "*.vue": "vue"
  },
  // 1 つのタブに相当するスペースの数。`editor.detectIndentation` がオンの場合、この設定はファイル コンテンツに基づいて上書きされます。
  "editor.tabSize": 2,
  // vueにcssのemmet追加
  "emmet.syntaxProfiles": {
    "vue": "css"
  },
  // vueだけで追加したい設定
  "[vue]": {
    "editor.formatOnSave": true
  },
  "eslint.enable": true,
  // 適応するファイルタイプを決定
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  // プロジェクト配下のeslintrc.jsを読み込み
  "eslint.options": {
    "configFile": "C:/${ファイルパス}/.eslintrc.js"
  },
  // 保存時に自動フォーマット
  "eslint.autoFixOnSave": true,
  // 保存時に末尾の空白削除
  "files.trimTrailingWhitespace": true,
  //-------- HTTP configuration --------
  // The proxy setting to use. If not set will be taken from the http_proxy and https_proxy environment variables
  "http.proxy": "XXXXXX,
  // Whether the proxy server certificate should be verified against the list of supplied CAs.
  "http.proxyStrictSSL": false,
  "extensions.ignoreRecommendations": true,
  "window.zoomLevel": 0,
}

---

ソフトウェアスタック

• テーマ
  
  • 今風
    
  • OSS使い倒す
    
  • 共通処理は薄く・薄く・薄く・ruby的にmixinで必要な時に必要なものだけを入れる感じで
  • ORMapper使いたい（Rails長いから・・・ほら・・・
  • 可能な限り実機から離れてブラウザ開発したい

---

モック作るよー

1. フォルダ構成
   
2. ファイル名
3. ファイル単位
4. vueファイルにすべきか、jsファイルにすべきか

更新中°˖☆◝(⁰▿⁰)◜☆˖°

---

OB周り構築するよー

1. ORMapper調査

プロダクト	TypeORM	Sequelize
websql	〇	×
sqljs	〇	×
cordova対応	〇	×

1. TypeORM

   • browserとcordovaの両環境で動くナイスなORMだと思いました。
     https://github.com/typeorm/typeorm

2. not TypeScript環境
   名前が示す通り、TypeORMはTypeScriptを前提としたORMです。
   しかし、サンプルを見ればわかるのですがES6でも動くし、何でもできちゃう感を感じるORMですね。

3. ローカル・端末をワンソースで

4. 実装方式

   1. async/await

5. 色々発生したエラー

6. 使い方

   1. select
   2. insert
   3. update
   4. delete
   5. join
   6. eager_load

7. テストデータ

8. トラブル・・・

---

vuex使うよー

1. 利用方針
2. 管理方針
3. 管理単位
4. 実装方式
5. 使い方
6. トラブル・・・
7. 更新中°˖☆◝(⁰▿⁰)◜☆˖°

---

Bluetooth機器と繋ぐよー

1. 実装方針
2. ローカル・・・だと・・・？
3. トラブル・・・

更新中°˖☆◝(⁰▿⁰)◜☆˖°

---

CI回すよー

1. karma設定
2. mocha設定
3. chromeheadless（もうphantomは嫌だ！
4. gilab runner
5. UTで本物DB使う
6. トラブル・・・

更新中°˖☆◝(⁰▿⁰)◜☆˖°

---

できたよー

まだできてません
更新中°˖☆◝(⁰▿⁰)◜☆˖°