やってみたよVueNative

Transcript

1. やってみたよ Vue Native 2019/11/21 @v-sendai #4 ヒツジハネタ

2. 自己紹介 高橋翔太 hitsuji-haneta LasTrust株式会社 h1tsuj1_haneta https://lastrust.io 元はフリーランス でした ・ブロックチェーン証明書の発行 ・証明書の管理アプリの開発

   （ヒツジハネタ）

3. ちょっと宣伝を

4. ▪1/16(木) 19:00 ~ ブロックチェーンハンズオン ▪12/19(木) 19:00 ~ git ハンズオン

5. 本題

6. Sendai Frontend Meetup の二次会にて…

7. React Native使ったことあります？

8. Vueにもありますよね。 Vue NativeとかNative Scriptとか。

9. 知ってるけどやったことないなぁ。 ！

10. 次のLTテーマ決まったでこれ

11. Vue Nativeとは何か？ ✋

12. JavaScriptでアプリ作る隊 Cordova (Ionic) ReactNative (Expo) NativeScript VueNative PWA クロスプラットフォーム！

13. Cordova (Ionic) NativeScript VueNative Vueに対応してる人たち ビルドめんどくさそう ReactNative (Expo) 兄貴！ ちょー簡単

14. $ npm install —-global expo-cli vue-native-cli $ vue-native init <projectName>

    $ cd <projectName> $ npm run start どんな感じで作る？ コンソールに出るよ！

15. Expo簡単すぎ

16. <template> <view class="container"> <text class="text-color-primary">My Vue Native App</text> </view> </template>

    <style> .container { background-color: white; align-items: center; justify-content: center; flex: 1; } .text-color-primary { color: blue; } </style>

17. 何を作った？

18. 写真とったら画像解析してくれるアプリ

19. デモ

20. 構成図 Firebase Storage Firebase Function Cloud Vision Firestore ①画像 ②フック

    ③解析 ④結果 ⑤読み込み

21. 意外と簡単！ Cloud Visionやばす

22. 苦労したこと Expoの仕様変更に VueNativeの公式サイトが 追いついてなかった

23. 苦労したこと 情報が少なすぎて 自分で考えなきゃいけない ことが多い 設計とか プラグインとか

24. 苦労したこと iOSで開発してたら Android特有のバグに最後まで 気づけなかった

25. 苦労したこと 楽しすぎて仕事そっちのけで 作りたくなってしまった プッシュ通知やりたかった！

26. まとめ ・VueNative意外と簡単 ・Expo最高 ・Cloud Vision最高 ・他のもやってみたい！

27. ありがとうございました