Ionic2でTodoAppを写経tryするも挫折

とりあえず、Winows8に、Ionic2をインストールして、HelloWorldと、Herokuで公開、Androidアプリにするところ(apkファイルの作成)までできた。

Windows8.1にIonic2をインストール
Angular2でWEBサイト、スマホアプリを作成する際に、UIをどうするかで、 ・Ionic 2 ・Onsen UI 2 ・Bo...
Ionic2サイトをHerokuにdeploy
前回は、HelloWorldアプリを、apkファイルにして、スマホで起動することを確認した。 次は、Herokuにデプロイして...
Ionic2をandroidでデバッグ
前回、Windows8.1にIonic2をインストールして、ionic serveでChromeで表示するところまでやった。 ...

ここからは、具体的にAngular2, Ionic2のアプリをがしがし写経して、自分の作りたいアプリを作れるように筋トレしまくるしかない。

Angular2、最初にソースコードを見たときは何ともいやな気分になったが、だんだん慣れてきた(ような気がする)。

Ionic2(の、もとのAngular2)は、component指向といって、ページをcomponentに分割して、それぞれに、HTML, CSS(SCSS), javascript(typescript)を設定してビューを作成する。モデルとコントローラーがどこにあるのかは私にはさっぱりわからないが、serviceというものを設定して、ビューに変化を加えるらしい。。。

といってもさっぱりなので、以下のAngular2の解説本の全体構成の説明である、

図4-10 Angular2の構成

と、第4章で扱う、「testProgram」(税込み金額計算システム)の説明の、

図4-11(テストプログラムの2画面の構成)
図4-12(テストプログラムの内部構成)

が、非常に分かりやすい。Ionic2やAngular2をこれから始めてみようという初心者の方には、少し高いけど、ぜひ購入をお勧めします。


2017/1/18発売
http://ec.nikkeibp.co.jp/nsp/dl/09653/

(環境)
Windows8.1
Node 6.9.1
cordova 6.5.0
Ionic 2
VisualStudioCode

(参考)今回、写経にtryするのは以下のページ

Create A Simple Todo List App Using Ionic 2 For Android And iOS
June 3, 2016  Nic Raboy
https://www.thepolyglotdeveloper.com/2016/06/create-a-simple-todo-list-app-using-ionic-2-for-android-and-ios/

フォルダ構成など、少し変わっているので、自分で改変。。。はたして最後まで行けるのだろうか、、、

(1)C:/angular2/ フォルダに、TodoAppアプリ(フォルダは、C:/angular2/todoapp)を新規作成

image

cd TodoApp

ionic platform add android

image image

(2)Mainl List Pageを作成

image

src/pages/todos フォルダと、その下に、

todos.html
todos.scss
todos.ts

ができる。

● src/pages/todos/todos.ts の変更

(変更前)
image

(変更後)
image

image

● src/pages/todos/todos.ts の変更

(変更前)
image

(変更後)
image

● src/pages/todos/todos.scss はそのまま。

image

(3)Adding Todo Itemsのページの作成

image

src/pages/add フォルダと、その下に、

add.html
add.scss
add.ts

ができる。

● src/pages/add/add.ts の変更

(変更前)
image

(変更後)
image

● src/pages/add/add.html の変更

(変更前)
image

(変更後)
image

(4)Updating the Application Theme

src/theme/variables.scss

(変更前)
image

(変更後)
image

(5)Updating the Parent Application Component

src/app/app.components.ts の変更

(変更前)
image

(変更後)
image

ここまでやったところで、以下のエラー

image

うう。わからん。

src/app/app.module.ts の変更

(変更前)
image

(変更後)
image

これでも、まだ、

Cannot find module “./pages/todos/todos”

のエラー。

もう一度、app.component.ts を見る。

(誤)
image

ここの7行目が以下のように、間違っていた。タイプミス怖い!

(誤) import { TodosPage } from ‘./pages/todos/todos’;

(正) import { TodosPage } from ‘../pages/todos/todos’;

(正)
image

自動的にcompile(?)してくれて、

image

どうだろうか、、、

image

image

ギャー!。言われた通りに、app.modules.ts の、@NgModule.entryComponentsあたりに、AddPageを入れる。import文も入れる。

(変更前)
image

(変更後)
image

また、ブラウザ上で試してみる。

image

image

しかし、ここに test と入力して「チェックボタン」を教えても、消えてしまう。。。

うう、うまくいかない。挫折。。。

(途中)2016/11/19
Ionicでモバイルアプリを作ろう!(7)データの永続化/Storageを使う
http://tech.pjin.jp/blog/2016/11/19/create_ionic_app_7/

2017/3/13 クラウド
Firebaseとionicで掲示板アプリを作成する シリーズ
http://tech.pjin.jp/blog/category/server/cloud/

Ionicで困ったことの解消法覚え書き
qwertytoki
2017年04月01日に更新
http://qiita.com/qwertytoki/items/1799fdc0709c0ba485c7

(6)下記サイトを参考に、試してみる。

Ionicでモバイルアプリを作ろう!(7)データの永続化/Storageを使う
http://tech.pjin.jp/blog/2016/11/19/create_ionic_app_7

以下をやっておくと、androidでsqliteが使えるようになるらしい。

ionic plugin add cordova-sqlite-storage –save
npm install @ionic/storage –save

image

Storageモジュールをアプリ全体でSeviceとして用いたいのでNgModuleで宣言

app.modules.ts

image

image

——————–

なんかこれは違ったらしい。
自分でうまくコードを変換できない。あきらめる。

以下のサイトを写経したら、できるだろうか。。。とほほ。

Get and Set Data In LocalStorage In Ionic 2 app
November 16, 2016  Jayant Paliwal
http://jayantpaliwal.com/2016/11/get-and-set-data-in-localstorage-in-ionic-2-app/

● C:/angular2 フォルダから、新規ionic2アプリ「StudentsList」作成

ionic start StudentsList blank –v2

cd StudentsList
ionic serve

image image

image

ionic g page lists

src/pages/home/home.html
image

src/pages/home/home.ts
image

ionic serve

image

src/pages/lists/lists.html
image

src/pages/lists/lists.ts
image

image

Ctrl+C、y、Enter でサーバ停止。

ionic g page global

src/global/global.ts
image

ionic serve

image

image

image

やっぱり、src/app/の中身を変更する必要がある

ありがたいことにソースコードがあるので、見る。

https://github.com/jayantpaliwal/LocalStorage-in-Ionic2-app

src/app/app.module.ts
image

やってみる。

image

image

お!

image

image

キター!できた。なんとかWEBサイトでlocalStorageを触れるようになった。

Androidアプリでは、おそらく、下の作業が必要と思われる。

(参考)
Ionicでモバイルアプリを作ろう!(7)データの永続化/Storageを使う
http://tech.pjin.jp/blog/2016/11/19/create_ionic_app_7

using LocalStorage ionic 2

https://stackoverflow.com/questions/37232455/using-localstorage-ionic-2

関連記事
Count per Day
    Popular Posts
    スポンサーリンク

    シェアする

    • このエントリーをはてなブックマークに追加

    フォローする