らいふうっどの閑話休題

興味のあることをゆる～く書いていく

Angular とCHIRIMEN とDocker とRaspberry Pi で、L チカする話しようとしてハマっている話（現在進行系）

Angular CHIRIMEN Docker Git Raspberry Pi Advent Calendar

f:id:ic_lifewood:20210111125029p:plain

qiita.com

これは Angular Advent Calendar 2021 の16日目の記事です。
現在の時刻は2021年12月19日です。16日投稿予定が、盛大に遅刻しました。
人生初のアドベントカレンダー遅刻です。

結論から言います。
残念ながら目指したモノに現時点では辿り着けていません。
皆様の話のネタになれば幸いです。

このブログで使う技術

以下の技術を使います。
理由は、Angular と CHIRIMEN のコミュニティを手伝っていて、混ぜたら面白いものが出来るのでは無いか？というのが発想の原点です。

Angular

  • Angular（アンギュラー）は、Googleと個人や企業のコミュニティによって開発されているTypeScriptベースのオープンソースのフロントエンドWebアプリケーションフレームワークである。

CHIRIMEN

  • CHIRIMEN とは、Web ブラウザや Node.js の JavaScript からハードウェア制御が可能なプロトタイピング環境です。

Docker

  • Docker（ドッカー）は、コンテナ仮想化を用いてアプリケーションを開発・配置・実行するためのオープンプラットフォームである。

Raspberry Pi

事前準備

ハードウェア

  • パソコン
  • Raspberry Pi
  • ブレッドボード
  • ジャンパーピン
  • LED
  • 抵抗

環境構築

Docker と Nginx

➜  mkdir angular-iot 
➜  cd angular-iot 
➜  mkdir iot-app
➜  cd iot-app
➜  mkdir docker
➜  cd  dcoker
➜  mkdir nginx
➜  cd nginx
➜  vi nginx.conf

➜  cd ../..
➜  vi Dockerfile

➜  vi .dockerignore

➜  cd ..
➜  vi docker-compose.yaml

Angular と node-web-gpio

フォルダとAngular プロジェクトを作成します。

➜  cd  iot-app 
➜  ng new front --prefix=ngiot

CHIRIMEN コミュニティの node-web-gpio の追加

  • npm install
➜  cd  iot-app/front
➜  npm install https://github.com/gurezo/node-web-gpio.git\#build/esnext --save

CHIRIMEN コミュニティの node-web-gpio のフォークしたものを使う理由

node-web-gpio をAngularに実装

ディレクトリ構造

➜  angular-iot git:(main) tree
.
|-- README.md
|-- docker-build.sh // ビルド用シェル
|-- docker-compose.yaml
|-- docker-down.sh // 停止用シェル 
|-- docker-prune.sh // イメージ削除用シェル
|-- docker-re-build.sh // 再ビルド用シェル
|-- enviroment
|   |-- docker-compose-setup.sh // docker-compose インストールシェル
|   |-- docker-setup.sh // docker インストールシェル
|   |-- node-setup.sh // node インストールシェル
|   `-- vscode-setup.sh // vscode  インストールシェル
|-- iot-app
|   |-- Dockerfile
|   |-- docker
|   |   `-- nginx
|   |       `-- nginx.conf
|   `-- front
|       |-- README.md
|       |-- angular.json
|       |-- e2e
|       |   |-- protractor.conf.js
|       |   |-- src
|       |   |   |-- app.e2e-spec.ts
|       |   |   `-- app.po.ts
|       |   `-- tsconfig.json
|       |-- karma.conf.js
|       |-- package-lock.json
|       |-- package.json
|       |-- src
|       |   |-- app
|       |   |   |-- app.component.html
|       |   |   |-- app.component.scss
|       |   |   |-- app.component.spec.ts
|       |   |   |-- app.component.ts
|       |   |   `-- app.module.ts
|       |   |-- assets
|       |   |   `-- img
|       |   |       `-- schematic.png
|       |   |-- environments
|       |   |   |-- environment.prod.ts
|       |   |   `-- environment.ts
|       |   |-- favicon.ico
|       |   |-- index.html
|       |   |-- main.ts
|       |   |-- polyfills.ts
|       |   |-- styles.scss
|       |   `-- test.ts
|       |-- tsconfig.app.json
|       |-- tsconfig.json
|       |-- tsconfig.spec.json
|       `-- tslint.json
`-- package-lock.json

16 directories, 55 files
➜  angular-iot git:(main)

Lチカをする回路図

f:id:ic_lifewood:20210111184055p:plain

Angular x CHIRIMEN x Docker x Raspberry Pi 完成イメージ

  • ※現時点では、画面上からLEDを光らせられません

Angular x CHIRIMEN x Docker x Raspberry Pi 完成イメージ
Angular x CHIRIMEN x Docker x Raspberry Pi 完成イメージ

現在の状況

Uncaught SyntaxError: import declarations may only appear at top level of a module #15
Uncaught SyntaxError: import declarations may only appear at top level of a module #15

angular-iot のリポジトリ

github.com

今後の展望

  • 上記問題をクリアすれば、SPAとIoTでの新たな世界が創れると思います。
  • 年末年始はコレを解決したいと思います。

参考資料