AngularJS+Node.js+ionicでアプリ作成1

こんにちは、寒さにやられて家から出なくなったまみたすです。

Amazon の Fire TV Stick買いました!良い!!
引きこもりが捗ります。
今の所はひたすらyoutube流してます。

さて、ここ半年くらい何かアプリを作りたいなあみたいなことはずっと言っているのですが、なかなか成果物が出ないまま来てしまいました。

せっかくのニート期間なので、今度こそ成果物を出そうと思い、ちょっとAngularJS+Node.js+ionicを試してみることに。Node.js使いたかっただけです。
参考はCode4startUpのTinderアプリ作成です。
英語だけど動画なのでだいたい理解できるかと。

環境はMac、今回はionicの立ち上げまでやります。

 

Node.jsのインストール

  
公式ページからインストールします。

今の所は推奨版の8.9.3をインストール。

インストールが終わったら、ターミナルを開いて

 

node -v

 

でバージョン確認。

v8.9.3と表示されたらOKです。

この時、npmも一緒にインストールされます。

  

ionicを入れる

   

ionicとは、モバイルアプリ版bootstrapのようなものです。

こちらも公式に従って入れて行きます・・・が、バージョンのせいか?うまく行かなかったので以下の手順で入れました。

sudo npm install -g cordova

sudo npm install -g ionic

本当はnpm install -g cordova ionicだけでいけるはずなのですが・・・。

sudoなしでやると、「Please try running this command again as root/Administrator.」のエラーが出てしまいますのでsudoでインストールします。

アプリを立ち上げる

   
今回は下にタブがついたアプリを作成したいので、以下のコマンドを打ちます。

 

ionic start myApp tabs

 

 

立ち上げるアプリの種類によってコマンドが違って来ます。

 

 

完了!

早速立ち上げてみましょう。

 

myApp

ionic serve

 

これが出ればOKです!

   

詰まったところ

   
nodeのバージョン違いでインストールだけでもだいぶ詰まりました…nodeのバージョンが5とかだとダメですね。6より上じゃないと必要なライブラリが入っていなくてionicが動きません。

また、npmインストールの際にずっと権限のエラーが出ていてフォルダの権限を変更する必要がありました。

参考:

npmでpermission deniedになった時の対処法[mac]

 

短いですが以上!次回から色々やってみます。

The following two tabs change content below.
まみたす

まみたす

1992年生まれ。知識ゼロ文系女子からSEになっているところ。 カメラ、猫、お酒、旅行がすきです。
この記事の内容が役に立ったと思ったら、SNSで記事を共有してもらえると幸いです。

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)