00.ionic4:08.ionic4でタイマーアプリ

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

--- 00.ionic4:08.ionic4でタイマーアプリ [2019/02/13] – [src/app/home/home.page.tsの編集] adash333
+++ 00.ionic4:08.ionic4でタイマーアプリ [2019/08/28] (現在) – [Ionic4でタイマーアプリ] adash333
@@ 行 7: / 行 7: @@
 </html>
+===== ソースコードとDEMOサイト ======
+https://github.com/adash333/ionic4-timer
+DEMO
+https://confident-raman-5dbccc.netlify.com/
 ===== すること =====
   -スタートボタンを押すと、00：00：00からカウントアップする
@@ 行 14: / 行 19: @@
 ソースコード
+https://github.com/adash333/ionic4-timer
 DEMO
+https://confident-raman-5dbccc.netlify.com/
+{{:00.ionic4:pasted:20190213-153449.png}}
 ===== 開発環境 =====
@@ 行 24: / 行 30: @@
 Panasonic CF-RZ6
 Windows10 Pro (1803)
 VisualStudioCode
+git version 2.20.1.windows.1
-nvm-windows 1.1.7
+Node v10.15.1
-Node 10.15.1
 npm 6.4.1
-yarn 1.13.0
+Ionic (Ionic CLI) 4.10.2
-ionic@4.10.2
+@ionic/angular 4.0.1
-cordova@8.1.2
+@angula/pwa 0.13.1
 </code>
@@ 行 115: / 行 121: @@
 </code>
 のところは、後で、home.page.tsで、timerを定義します。
-{{:00.ionic4:pasted:20190210-151954.png}}
+{{:00.ionic4:pasted:20190213-151155.png}}
 ===== src/app/home/home.page.tsの編集 =====
@@ 行 195: / 行 201: @@
 <code>
 ng add @angular/pwa
+// だめな場合は、npm run ng add @angular/pwa
 </code>
 {{:00.ionic4:pasted:20190212-081615.png}}
@@ 行 201: / 行 208: @@
 {{:00.ionic4:pasted:20190213-083156.png}}
-===== ソースコード =====
+===== GitHubに登録 =====
+  -https://github.com/ にログインして、新規リポジトリを作成（今回は、ionic4-timerという名前にしました）
+  -以下を入力して、GitHubにpush
+<code>
+git add .
+git commit -m "first commit"
+git remote add origin https://github.com/adash333/ionic4-timer.git
+git push -u origin master
+</code>
+{{:00.ionic4:pasted:20190213-152316.png}}
+{{:00.ionic4:pasted:20190213-152406.png}}
+{{:00.ionic4:pasted:20190213-152559.png}}
+{{:00.ionic4:pasted:20190213-152612.png}}
+https://github.com/adash333/ionic4-timer
+===== Netlifyにデプロイ =====
+  -https://www.netlify.com/ にログイン
+  -New site from Git　をクリック
+  -GitHubから、ionic4-timerを選択
+  -''%%npm run build --prod%%''と、''www/''と入力して、Deploy site をクリック
+  -デプロイがうまくいったら、リンクをクリックして、確認します
+  -スマホで、上のアドレスへ行き、スマホにアプリとして登録できるかチェックします
+{{:00.ionic4:pasted:20190213-152816.png}}
+{{:00.ionic4:pasted:20190213-152841.png}}
+{{:00.ionic4:pasted:20190213-153142.png}}
+{{:00.ionic4:pasted:20190213-153247.png}}
+===== ソースコード =====
+https://github.com/adash333/ionic4-timer
 DEMO
+https://confident-raman-5dbccc.netlify.com/
+{{:00.ionic4:pasted:20190213-153449.png}}
 ===== 今回写経した本 =====

00.ionic4/08.ionic4でタイマーアプリ.1550046719.txt.gz · 最終更新: 2019/02/13 by adash333