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

11323 ワード
TypeORM Vue.js Vuex monaca onsenui monaca テキストリンク

初めに

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

背景

昨年末に
「アプリを作ってほしいんだよね
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

  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. トラブル・・・

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

できたよー

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