sueboy: ionic2

顯示具有 ionic2 標籤的文章。顯示所有文章

Flutter ionic framwork7

有寫一支離線APP(不需要網路)，app有上架android和ios，andorid有開廣告，而ios賣出去一些。

一開始開發使用framework 7 (純javascrip、html、css)，開發速度是最快的，照著官網教學做，顏色不大改、版型照用，真的很快，然後用codova包一包，就上架了，操作起來也順，介面看起來都很像ios，唯一的問題是要花時間了解fromework 7架構上，第一次使用當然很痛苦，痛點在於framework，優點在於 html、css、javascript自由。
整體開發時程：一周內肯定解決。

後來改版了，花一些時間了解ionic，發現ionic跟Framework7用法差不多，但卻可以使用ionic native跟底層溝通(不過實際上這支APP根本不用到native)，硬生生加入一個底層開啟圖片的功能；ionic開發起來也是很快，因為還是html為主的方式，另外也有花時間了解react，和react不同是，一開始的jsx就一堆問題，不過這是在很早期react會發生的問題(現在已經沒有這些問題)；除react外，Angular也同樣有花時間了解，那時 Angular 1 基本上也是放棄，因為太複雜、反人類… Angular 2在寶哥展示後，發現“真的“不反人類了，就決定可以用ionic；ionic開發快在Angular 2+的底層架構，實際開發中的痛苦點反而比Framework7少，畢竟有Framework7可以對照開發，只需要進行語法上的轉換，不用花心思在架構上，Angular也是可以用javascript，Framework7上的array、object可以直接照搬來使用，唯一花時間在上廣告和圖片呼叫底層，有痛到。
一周內肯定解決。

ionic 2 -> ionic 3 ，基本上印象中 1天內解決吧，處理一些不相容問題而已。

ionic 2或3 順暢度，覺得差不多，唯一碰到的是原生的元件，在中文顯示小標題時，有一點被裁到，這問題在網頁上看時是正常的，在app上看時是不正常，這令人很困擾，但也懶得再用css調整了，就是這問題成為往flutter開發前進的關鍵原因。

Flutter官方展示對我最重要的點：修改後即時更新顯示和 Material的元件。
改版撰寫時期發現即時更新顯示正常情況下是沒問題，但會有失效的情況，最終還是要重新complie app，但這功能只要運作正常時，是非常好用，可以慢慢調整畫面，真的太好用了！
之前開發都是跟web相關，即使在web broswer看是正常的，套入app後還是要把所有的情況再點擊測試一次(會有網頁正常、APP不正常情況)，撰寫過程中發現問題進行修正後，需要再度complie app，然後再執行再調整，重覆web模式，和原生android開發也差不多，app每次complie完再操作，再調整，再重來一次complie執行…一直循環

能即時更新這點……真的節省非常多的時間！

但！！！這次使flutter開發卻是有始以來花費時間最久的，Dart…Flutter Framework，Widget.......開發總時間已經逼進三星期以上，現在也只不過開發80%而己。

1、圖片要能兩指縮放，最終網上有大神有做出plug，但為了套到去，就花了一星期以上，先參考官方demo app，移值失敗，用大神才成功。好處：終於離開底層的縮放，也不是css或javascript假縮放。

2、搜尋看了一堆demo後，官方有比較推的方式，照做，照完後，發現是有BUG的，可能官網的做法，最後的搜尋完的點選，是在同一頁，但實際肯定會nav push到新頁，回到搜尋頁後，就不能搜尋了，debug查了整整一天，試了各種方式後，放棄！改找網路上土砲法，自己做搜尋在header，然後再參考官方控制操作，這樣終於改完了。這也是一周以上的時間。

3、文章式的顯示：多塊區域組合，這裡也是花一堆時間，ListView怎麼處理widget [] 和chrild、chrildren等等，這裡正式踢鐵版，卻更了解上述一些架構上的問題。

改版到這裡就花了三星期以上的時間，這樣開發不是一次三星期，而是下班後斷斷續續的開發，到現在還是沒開發完畢，以之前的開發經驗，接下來肯定有

1、admob
2、androdi ios 實際創建app問題 android應該最少，ios最多

真的開發的話，有時間壓力的話，ionic還是最快的，但為了app畫面精緻度，也許Flutter………

ionic2 Messaging Push

簡單來說：

getDeviceToken 方法有三：

一、ionic Native Push (https://ionicframework.com/docs/v2/native/push/)

二、ionic Native Firebase (https://ionicframework.com/docs/v2/native/firebase/)

三、cordova FCM plugin (https://github.com/fechanique/cordova-plugin-fcm)

之前試用的方式是：
http://sueboy.blogspot.tw/2017/01/ionic2-fcm-send-message-to-device-token.html

．AngularFire2 authstate.auth.getToken() is JWT token for firebase

ionic always update for best New || Speed up initial loading

https://github.com/driftyco/ionic/issues/6776#issuecomment-267961514
https://github.com/driftyco/ionic-app-scripts/issues/596

This problem.... just update

>> ionic info

Ionic Framework
Ionic CLI
Ionic App Lib
Ionic App Scripts

Cordova CLI: 6.5.0
Ionic Framework Version: 2.0.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.1

So
1、npm update to best new

npm update -g

2、uninstall ionic

npm uninstall ionic

3、install ionic

npm install -g ionic

4、update package.js in project

npm install -g npm-check-updates
npm-check-updates
npm-check-updates -u
npm install

or only check

npm outdated

5、update ionic-native (maybe npm-check-updates update to new)

npm update ionic-native

6、maybe
ionic state reset

Finial Step：

ionic info

and

ionic start new-project-for-check-update blank --v2

see package.json is laste new

ok~~

．developer

ionic run android --prod

．release

ionic build android --release --prod

Usually app start down then 1s for black screen

Error: Current working directory is not a Cordova-based project.

https://github.com/driftyco/ionic-cli/issues/935

just put www directory on root

ionic2 icons splashscreen 產生圖片

https://gxiangco.gitbooks.io/m3-app-dev/content/part4/%E6%9B%B4%E6%8F%9Bicons%E5%8F%8Asplashscreen.html

1、 change resource icon.png and splash.png

2、ionic resources

3、check resource android and ios images is changed ?

4、apk
4.1、 ionic platform remove android then ionic platform add android
or
4.2、
ionic build android
copy res android and ios images to platform/android or ios inside

ionic2 PhotoViewer local file

https://ionicframework.com/docs/v2/native/photo-viewer/

follow step just do.

Now focus

https://github.com/sarriaroman/photoviewer/issues/11

ps: declare var cordova: any;
ps2: cordova plugin add cordova-plugin-file

www/assets/img is ionic2 now version, maybe future change, but now this is correct

showImage(imageUrl) {
if (this.platform.is('cordova') && this.platform.is('android')) {
File.readAsDataURL(cordova.file.applicationDirectory + "www/assets/img/", imageUrl)
.then((dataURL:string) => {
PhotoViewer.show(dataURL, "", {share: false})
})
.catch(
(err)=>{alert("err: "+err)
});
} else if (this.platform.is('cordova') && this.platform.is('ios')) {
PhotoViewer.show(cordova.file.applicationDirectory + "www/assets/img/"+imageUrl);
}
}

https://github.com/apache/cordova-plugin-file

==========
https://www.npmjs.com/package/ionic-img-viewer

this.app can't find in app

import { App } from 'ionic-angular';

angularfire2 subscribe once

https://github.com/angular/angularfire2/issues/380

subscription.unsubscribe();

Observable.interval + take(1)

copy keep angularfire list

Maybe

Object.assign but sub itme only reference

So JSON.parse(JSON.stringify(theObject))

ionic2 FCM send message to device token

1、ionic start sendnotify blank --v2

2、cordova plugin add cordova-plugin-whitelist

3、src/index.html

<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-eval' 'unsafe-inline' *; object-src 'self'; style-src 'self' 'unsafe-inline'; media-src *">

4、ionic serve

====if success=====

5、home.ts

add

import { Http, Headers, RequestOptions } from '@angular/http';

import 'rxjs/add/operator/map';

add constructor(private http: Http

sendnotify_devicetoken(devictoken) {

let url = 'https://fcm.googleapis.com/fcm/send';

let headers = new Headers({

'Content-Type': 'application/json',

'Authorization': 'key=your key'

});

let options = new RequestOptions({ headers: headers });

let body = {

"notification":{

"title":"Notification title",

"body":"Notification body",

"sound":"default",

"click_action":"FCM_PLUGIN_ACTIVITY",

"icon":"fcm_push_icon"

"data":{

//"param1":"value1",

//"param2":"value2"

//"to":"/topics/topicExample",

"to": devictoken,

"priority":"high",

"restricted_package_name":""

};

this.http.post(url, body, options).map(

(res) => {return res}//res.json()

).subscribe(

data => {

alert(data);

err => {

alert("ERROR!: "+err);

}

);

a. devictoken： see http://sueboy.blogspot.tw/2017/01/ionic2-fcm-get-device-token.html

b. your key：firebase console -> project setting -> cloud messaging ->

have two new and old api key. Use new is better

6、ionic serve push button, then send success

ionic2 FCM get device token

https://github.com/fechanique/cordova-plugin-fcm

1、 ionic start getdevicetoken blank --v2

2、ionic plugin add cordova-plugin-fcm --save

3、 firebase console -> project setting -> add your project

a. package name: copy from config.xml id="com.ionicframework.getdevicetokenxxxxxx"

b. add project then download google-services.json

4、put google-services.json on getdevicetoken directory, don't put getdevicetoken/platforms/android or ..../ios

5、ionic run android ( remeber open android emule)

=====If success, contiune=====
6、src/pages/home

a. home.html replace <ion-content

<ion-list>
<ion-item>
<ion-textarea rows="6" [value]="devicetoken"></ion-textarea>
</ion-item>
<button ion-button (click)="getdevicetoken()">
getdevicetokens
</button>
<button ion-button (click)="showdevicetoken()">
showdevicetoken
</button>
<button ion-button (click)="Notification()">
Notification
</button>

</ion-list>

b. home.ts

before @Component put

declare var FCMPlugin;

replace export class HomePage{

devicetoken: string;

constructor(public navCtrl: NavController) {

FCMPlugin.onNotification((data) => {

if(data.wasTapped){

//Notification was received on device tray and tapped by the user.

alert( JSON.stringify(data) );

}else{

//Notification was received in foreground. Maybe the user needs to be notified.

alert( JSON.stringify(data) );

}

}, (msg) => {

alert("notification msg:"+msg);

}, (err) => {

alert("notification err:"+err);

});

}

getdevicetoken(){

FCMPlugin.getToken((token) => {

this.devicetoken = token;

}, (err) => {

alert("getdevicetoken err:"+err);

});

}

showdevicetoken(){

alert(this.devicetoken);

}

Notification(){

}

7、save, ionic run android
a. getdevicetoken
b. showdevicetoken then copy devicetoken

8、firebase console -> Notifications -> add send message ->
a. put message text
b. chosses deivce (single deivce) put devicetoken
c. send

9、receive msg on android emule： two way front、background receive~

ionic2 google map

Must Remeber css show MAP

https://forum.ionicframework.com/t/ionic-2-typescript-google-maps/53006/26
https://github.com/vijtad/Ionic-2-using-sebm-google-map
https://github.com/SebastianM/angular2-google-maps

http://www.joshmorony.com/ionic-2-how-to-use-google-maps-geolocation-video-tutorial/

http://vpt-deeplearner.tech/2016/11/24/ionic-2-an-example-of-googlemap-using-sebm-angularjs-directory/

https://forum.ionicframework.com/t/ts2304-cannot-find-name-google/58725/26

ionic2 example

https://github.com/driftyco/ionic-conference-app/tree/typescript

ionic2 firebase FCM FCM_TOKEN Device_token Sender_id

https://forum.ionicframework.com/t/push-notifications-with-ionic-2/63851/4
https://github.com/fechanique/cordova-plugin-fcm
=====

https://www.youtube.com/watch?v=7yXtzhqT1uk
https://medium.com/@ankushaggarwal/push-notifications-in-ionic-2-658461108c59#.ff6hz41ot

．sender_id who is sender or This guy is send message.

．FCM_token (api_key) it's right to use FMC, who get token, then can send

．Device token this device (which device)

Where is come from?

．sender_id 、 FCM_token from FCM (firebase)

．Device_token from device

How to get?

．sender_id 、 FCM_token ： login firebase console -> settings -> colud messageing

．Device_token ： If ionic2, when you use
Push @ionic/cloud-angular push.register().then(t: PushToken)
this time get Push Token. see video 7:54

So how to work? (If see youtube video, I guess)

．FCM_token： Who take token, who can send message. FCM get FCM_token, then send message to send_id under all register.

．sender_id： App or reciver must have this info, when message come from FCM into Phone, then check send_id is correct or not.

．Device_token：
A、Device must send(register) phone's Device_toke to FCM sender_id, then register info(device_token) under send_id. If not register, send_id can't know any devices.

B、Sometime send message to only one device, must use FCM_token + Device_token then only send to one device.

(This Video 9:38 bottom have "Device Options")

(https://github.com/aggarwalankush/push-notification-server
AndroidPush.java see code have "YOUR_DEVICE_TOKEN" )

https://medium.com/@ankushaggarwal/push-notifications-in-ionic-2-658461108c59#.ff6hz41ot
https://devdactic.com/ionic-push-notifications-guide/

angular2 ionic2 angularfire2 json <-> object

authstat json <-> object

import { Storage } from '@ionic/storage';
import { FirebaseAuthState } from 'angularfire2';

// authstate object -> json

this._auth.signInWithEmailAndPassword(this.loginForm.value.email, this.loginForm.value.password)
.then((authData: FirebaseAuthState ) => {
this.storage.set('alluserinfo', JSON.stringify(authData));
});

//json -> authstate object

this.storage.get('alluserinfo').then((t_value) => {
let value: FirebaseAuthState;
value = JSON.parse(t_value);
});

Angular2 View Not Changing After Data Is Updated

[轉]Understanding Zones and Change Detection in Ionic 2 & Angular 2

http://www.joshmorony.com/understanding-zones-and-change-detection-in-ionic-2-angular-2/

Angular2 View Not Changing After Data Is Updated

Finish Use

setTimeout(() => {
this.msgerror = error.message;
}, 10);

[轉]Creating an Asynchronous Login Screen in Ionic 2

https://www.youtube.com/watch?v=5WK9R1y-eKg

================
http://eriyu-blog.logdown.com/posts/773548-study-of-ng2-polyfill

主要是提供ES7提出的Observables特性，

Observables提供了非同步資料fetch時的另一種做法。

我們跟伺服器端抓取完資料，要做後續的動作時，

最早的寫法是用callback，

後來改良的寫法是使用Promise減少callback hell的發生。

Promise已經很好用了，但是它還是有些缺點。

它無法做到發送request後，可以中止或是重送的功能。

它在宣告使用Promise時，就已經被執行了。

而Observables解決了Promise的這些問題，

它可以中止及重送request。

Observables在創建時不會被執行，而是實際呼叫時才被執行。

另外Observables又提供了值組的操作，像是merge、sum、map等功能。

還有Observables就如同它字面的意思，他實作觀察者模式，當資料變更時會發出通知給它的訂閱者。

官方的Angular2教學文件在非同步資料抓取，是直上ES7的規格，提供Observables的寫法，但你也可以依據你的專案需求改成Promise。

一般的專案，也許可以用Promise就能滿足了，但是如果你的專案功能是需要比較互動、即時性的時候，用上Observables就不用費太多功夫做資料的watch。

[轉]observables-in-ionic2

https://www.joshmorony.com/building-mobile-apps-with-ionic-2/observables-in-ionic2.html

this.http.get(url).subscribe(

(data) => {
console.log(data);
},

(err) => {
console.log(err);
},

() => {
console.log("completed");
}
);

In the code above the first event handler handles the onNext response, which basically means "when we detect the next bit of data emitted from the stream, do this". The second handler handles the onError response, which as you might have guessed will be triggered when an error occurs. The final handler handles the onCompleted event, which will trigger once the Observable has returned all of its data.

etc.... just see webpage

ionic2 angularfire example better than google example..............

https://github.com/rodrigoreal/ionic2-angularfire-login

==========
https://github.com/angular/angularfire2/issues/560
https://blog.khophi.co/angularfire2-authentication/

https://github.com/angular/angularfire2/issues/568

https://github.com/angular/angularfire2/issues/566

AngularFire ionic2 auth

Very Important !!

use subscribe

constructor(public af: AngularFire) {
af.auth.subscribe((authstate) => {
console.log(authstate);
authstate == null ? logout() : login(authstate.auth.displayName);
});
}

And Think change to Callback mode .............

==========
First :
everyone use af.auth.getauth() , then check, have value is login, null is not login.

But it's mistack. Reload page, Change page AngularFire miss...... af.auth be free.
Only login page can get af.auth

Second:
af.auth.subscribe ( ....... ) When auth check finish, run subscribe ( ..... )
This is real get auth. But Think login different First way........

訂閱：文章 (Atom)

EExcel 丞燕快速查詢2