NativeScript-Vueを使って、社内仮想通貨決済&送金アプリを作ってみる（途中）
こんばんは。こんにちは。 １ヶ月以上間が空きましたが、久しぶりに更新します。 4月の最後の更新の後に体調を3,4週間ぐらい崩してキツかったので、そのまま更新しませんでした。(2週間で2回、39度後半の発熱) 人生で一番体調を崩した期間が、入社してすぐの時期に被ってしまったのはしんどかったです。治ってよかったー。
昨日は会社の開発合宿というものに行ってきました。 会社の業務時間を使って、業務とは全く関係ない自分が作りたいものを作るという合宿です。 複数人でチームを組み、一泊で何か作り翌朝にデモをします。 こういうイベントはほんとにありがたいなと思います。 ちなみに他のチームでは、音声認識でミニ四駆を動かしたり、機械学習で大谷の投球球種を当てる、など面白い作品ばかりでした。
僕は、最近リリースされたというNativeScript-Vueを使って、社内仮想通貨の決済＆送金アプリの開発を試みました。 会社では、100円を払ってお菓子を買えるやつがあるのですが（実は使ったことない）、小銭を持つという面倒を省く、個人間での送金のやり取りを行えるようにという目的があります。 androidやiosアプリの開発ではjavaやswiftが使われますが、NativeScript-Vueを使うことでvue, html, cssでコーディング出来るというものです。
先輩と2人でチームを組み、僕はNativeScript-Vueでアプリを作成、先輩は送金処理の方を担当しました。 ちなみにNativeScript-Vueを触ったのは初めてで、Vue.jsも初でした。 なおこの通貨はEthereumベースのものです。 結論から言うと、僕のアプリの方は完成しませんでした。くそう。
実際に作った画面がこんな感じです。xdebugのsimulatorでiPhone6を起動させてます。
コードはこんな感じです。（送金画面のみ）
<template>
<Page class="page">
<ActionBar class="action-bar" title="アドレス入力">
<NavigationButton text="Go Back" android.systemIcon="ic_menu_back" @tap="$router.push('/home')"/>
</ActionBar>
<StackLayout class="hello-world">
<!-- <Label :text="sender" /> -->
<Label class="body" textWrap=true text="送金先のアドレスを入力してください"/>
<TextField v-model="sendee" />
<Label class="body" textWrap=true text="金額を入力してください"/>
<TextField v-model="price" />
<Button class="btn btn-primary" @tap="sendEther()" text="送金！"/>
<Label class="body" textWrap=true text="バーコードを読み取る"/>
<Button class="btn btn-primary" text="カメラ起動"/>
</StackLayout>
</Page>
</template>
<script>
const httpModule = require("http");
var BarcodeScanner = require("nativescript-barcodescanner").BarcodeScanner;
var barcodescanner = new BarcodeScanner();
// import send from "./send";
export default {
data() {
return {
address: null,
// sender: "someone's address"
}
},
methods: {
sendEther(){
console.log('kawano');
httpModule.request({
url: "https://httpbin.org/post",
method: "POST",
headers: { "Content-Type": "application/json" },
content: JSON.stringify({
sendee: this.sendee,
price: this.price,
sender: this.sender,
})
}).then((response) => {
const result = response.content.toJSON();
}, (e) => {
});
},
scanbarcode() {
barcodescanner.scan({
formats: "QR_CODE,PDF_417", // Pass in of you want to restrict scanning to certain types
cancelLabel: "EXIT. Also, try the volume buttons!", // iOS only, default 'Close'
cancelLabelBackgroundColor: "#333333", // iOS only, default '#000000' (black)
message: "Use the volume buttons for extra light", // Android only, default is 'Place a barcode inside the viewfinder rectangle to scan it.'
showFlipCameraButton: true, // default false
preferFrontCamera: false, // default false
showTorchButton: true, // default false
beepOnScan: true, // Play or Suppress beep on scan (default true)
torchOn: false, // launch with the flashlight on (default false)
closeCallback: function () { console.log("Scanner closed"); }, // invoked when the scanner was closed (success or abort)
resultDisplayDuration: 500, // Android only, default 1500 (ms), set to 0 to disable echoing the scanned text
orientation: "landscape", // Android only, optionally lock the orientation to either "portrait" or "landscape"
openSettingsIfPermissionWasPreviouslyDenied: true // On iOS you can send the user to the settings app if access was previously denied
}).then((result) => {
console.log("Scan format: " + result.format);
console.log("Scan text: " + result.text);
},(error) => {
console.log("No scan: " + error);
});
}
}
}
</script>
社内用を考えているので、ログイン認証はAWSのAmazon Cognitoを使う予定でしたが、それの実装が難しく時間を取られすぎていたので途中で断念しました・・・。 また送金画面では、カメラを起動してバーコードからアドレスを取得する機能をつけようとしていました。 これもまた色々エラーが出て解決できなかったというのと、僕が持つiPhoneで実機テストをしたかったのですが上手くデバイスを認識してくれなかったというので、間に合いませんでした。 先読みした準備が足りなかったというのが今回の反省点です。色々と悔しいものが残りましたー。
送金処理は先輩が完成させてくれました。ブラウザ上でテストしたところ、jsで送金できるようになったので、これからアプリに組み込んでいかないといけません。
初めてNativeScript-VueとVue.jsを使ってみた感想としては、 - android・ios問わずアプリ開発ができるのでラク - JSのフレームワークvue.js超ラクじゃん って感じです。
送金処理の方も触ってみたいなーと思います。
ちなみに、今回の合宿は直方のいこいの村であったのですが、静かで良いとこでした。 いつもと違う旅館の環境や、畳で寝転がって開発するのは気分が違って楽しかったです。
