伝説のSpice特別企画 いまさらIOT

[前のページ] [TOPページ] [次のページ]

PC側デバッグ環境を整える

このページではPCからのリモート開発のためのエディタの設定と、リモート接続の確認をします。
youtubePC側にVisual Studio Code(VSCode)をインストール設定する

PC側にVisual Studio Code(VSCode)をインストール

nodeプログラムを開発するとき、プログラムが動作するのはraspberry-piの中です。 PCからSSHでCUIモードで扱っています。 この状態ではプログラム開発は困難です。 Visual Studio Code はPC上にIDE(開発環境)おいて、リモートで開発する道具です。 下記を参照してインストールします。

Visual Studio Code (Windows版) のインストール
Visual Studio Code の日本語化(locale.jsonの設定だけでは日本語化されない場合)

インストールと日本語化が出来たらデバッグ環境の設定です。

VSCodeに node プラグインパッケージをインストール

インストールも書かれていますが、最初の「インストール作業」から「VSCodeの基本的な使い方」直前まではすでに行っているので不要です。 gitはご自由にどうぞ。 慣れるまで難しいのでここでは使用しません。
「VSCodeの基本的な使い方」から始めます

Visual Studio CodeとNode.jsの導入について

VSCodeに SFTP プラグインパッケージをインストール

raspberry-piと接続するパッケージとしてFSTPを使用します。 このパッケージはファイルをサーバー(今回はraspberry-pi)に上げたり編集したりするパッケージです。 ホームページをサーバーに上げるものと同じ仕組みです。
その中で「sftp.json」の設定ファイルは下記の様に書きます

{
"name": "xbeeIOT robot",
"host": "raspberrypi.local",
"protocol": "sftp",
"port": 22,
"username": "pi",
"password": "raspberry",
"remotePath": "/home/pi/xbeeIOT/robo",
"uploadOnSave": true
}

下記に設定と詳細が説明されています。 参照して設定します

VSCode(Visual Studio Code)でSFTP・FTP経由でファイルを自動アップロードや同期できる拡張機能「SFTP」が超便利

raspberry-piからダウンロード

すでにraspberry-piにはexpressのサーバーが出来ています。 それをPC側にダウンロードします。
VSCodeの「表示」->「コマンドパレット」を選択して入力ボックスに sftp:download project とコマンドを入れます。 sftp:doあたりまで入れるとヘルプでコマンドが出てきますからそれを選択します。 途中で EPERM: operation not permitted, symlink  のエラーが出ますが、ここでは無視してxマークでダイアログを閉じます。 これでPC側にraspberry-piのプロジェクトのコピーが出来たと思います。 

うまく編集できるか確認してみます。 VSCodeの左側からファイルマークを選択してファイルツリーの中から routes/index.jsをクリックする開かれます。 6行目にあるコードを変更します

 res.render('index', { title: 'Express' });

 res.render('index', { title: 'Express xbee' });

xbeeを文字列に追加しました。

そして、TeraTermですでにログインしているCUIコンソール(パス位置pi@raspberrypi:~/xbeeIOT/robo $)からサーバー起動のコマンドを入力します

DEBUG=robo:* npm start

サーバーが起動したら PCのブラウザで「http://raspberrypi.local:3000」アドレスでアクセスすると、変更した文字列 Express xbee で表示されます。

続いて、xbeeの開発環境 CodeWarrior XCTU の準備です。

[前のページ] [TOPページ] [次のページ]