Google Developers Japan: NativeScript

Firebase ãä½¿ã£ã¦ NativeScript + Angular 2 ã¢ãã¤ã«ã¢ããªãæ§ç¯ãã

2017å¹´1æ17æ¥ç«ææ¥

Jen Looper

Developer Advocate at ProgressSW

NativeScript、Firebase、Angular 2 ã¨ããå¼·åãªçµã¿åãããæ´»ç¨ããã°、ã¢ããªã®æ§ç¯ãä¸æ°ã«å éããããã¨ãã§ãã¾ã。ã¯ãªã¹ãã¹ä¼æã®æéä¸ã¯、ã¢ããªã®éçºãã¹ãã¼ãã¢ããããã¦、ãã¬ã¼ã³ããè´ãããã¨ããå®¶æã®ãã¼ãºã«å¿ããªããã°ãªããªããã、ç¹ã«ãã®ç¹ãéè¦ã«ãªãã¾ã。ã¡ããã©ãããã¨ã«、Angular 2 ãã¼ã¹ã® NativeScript ã¢ããªã§ Firebase ãä½¿ãæ¹æ³ã®ãã¢ãçããã«ãã¬ã¼ã³ããããã¨ãã§ãã¾ã（ä»¥ä¸ããè¦§ãã ãã ð）。ããã¯、Eddy Verbruggen æ°ã«ããæåãª NativeScript-Firebase ãã©ã°ã¤ã³ã®ããã¤ãã®ã³ã³ãã¼ãã³ããä½¿ã£ããã®ã§ã。

ãã®ãã¥ã¼ããªã¢ã«ã§ã¯、ããä½¿ããã¦ããæ¬¡ã® 4 ã¤ã® Firebase æ©è½ã NativeScript ã¢ããªã§ä½¿ç¨ããæ¹æ³ãèª¬æãã¾ã。4 ã¤ã®æ©è½ã«ã¯、ãã°ã¤ã³ã¨ã¦ã¼ã¶ã¼ç»é²ã®æ©è½ãæä¾ãã Authentication、ãªã¢ã«ã¿ã¤ã ã«ã¢ãããã¼ãããããã¼ã¿ ã¹ãã¬ã¼ã¸ã® Realtime Database、ãªã¢ã¼ãã§ã¢ããªãå¤æ´ã§ãã Remote Config、åçãä¿åãã Storage ãããã¾ã。èª¬æããã«ããã£ã¦、ä»¥åã« Ionic ã§æ¸ãã Giftler ã¢ããªãæ¸ãç´ããã¨ã«ãã¾ãã。

å®éã®ããã¸ã§ã¯ãã§ä½æ¥ã«çæããåã«、ããã¥ã¡ã³ãã«ç®ãéã、ä»¥ä¸ã®åæäºé ã«ã¤ãã¦ç¢ºèªãããã¨ããå§ããã¾ã。

ãã¼ã«ã«ãã·ã³ã« NativeScript ãã¤ã³ã¹ãã¼ã«ããã¦ãã、CLI ãåé¡ãªãåä½ãã¦ãããã¨ãç¢ºèªãã¾ã。
ãå¥½ã¿ã® IDE ã§、NativeScript ã¨ Angular ã®éçºç°å¢ãè¨å®ãã¾ã。TypeScript ãå¿è¦ã«ãªãã®ã§、ãã©ã³ã¹ãã¤ã« ããã»ã¹ãåä½ãããã¨ãç¢ºèªãã¦ããã¾ã。Visual Studio、Visual Studio Code、Jetbrains å¯¾å¿ã® IDE ãªã©ã§å©ç¨ã§ããåªãã NativeScript ãã©ã°ã¤ã³ãããã¾ãã、ä¸ã§ã Visual Studio Code ã«ã¯、éçºãå éãããä¾¿å©ãªã¹ãããããããã¾ã。
Firebase ã¢ã«ã¦ã³ãã«ãã°ã¤ã³ã、ã³ã³ã½ã¼ã«ãéãã¾ã。
Firebase ã³ã³ã½ã¼ã«ã§æ°ããããã¸ã§ã¯ããä½æãã¾ã。ããã§ã¯、「Giftler」ã¨ããååã«ãã¾ãã。ããã«、Firebase ã³ã³ã½ã¼ã«ã§ iOS ã¨ Android ã®ã¢ããªãä½æãã¾ã。ãã®éã«、GoogleServices-Info.plist ãã¡ã¤ã«ã¨ google-services.json ãã¡ã¤ã«ããã¦ã³ãã¼ããã¾ã。å¾ã»ã©å¿è¦ã«ãªãã®ã§、ãã¡ã¤ã«ãéç½®ããå ´æã¯è¦ãã¦ããã¦ãã ãã。

ä¾åã¢ã¸ã¥ã¼ã«ã®ã¤ã³ã¹ãã¼ã«

ãã°ã¤ã³、ãã°ã¢ã¦ã、ã¦ã¼ã¶ã¼ç»é²、ããã³「ãã¹ã¯ã¼ããå¿ãã」å ´åã®å¦çã®å®è¡
ã¦ã¼ã¶ã¼ã«ãããªã¹ãã¸ã®ã®ããé ç®ã®ç»é²
ã¦ã¼ã¶ã¼ã«ãããªã¹ãããã®ã®ããé ç®ã®åé¤
ã¦ã¼ã¶ã¼ã«ãããªã¹ãã®åã®ããé ç®ã®ç·¨é（èª¬æãåçã®è¿½å ）
ããã¯ã¨ã³ãã§ããã«å¤æ´ã§ãã Firebase ã® Remote Config ãµã¼ãã¹ã«ããã¡ãã»ã¼ã¸ã³ã°

Firebase ãããã¦ã³ãã¼ããã google.services.json ãã¡ã¤ã«ã /app/App_Resources/Android folder ã«éç½®ãã¾ã。
åæ§ã«、Firebase ãããã¦ã³ãã¼ããã GoogleService-Info.plist ãã¡ã¤ã«ã /app/App_Resources/iOS folder ã«éç½®ãã¾ã。

"nativescript-angular":"1.2.0",
"nativescript-camera": "^0.0.8",
"nativescript-iqkeyboardmanager": "^1.0.1",
"nativescript-plugin-firebase": "^3.8.4",
"nativescript-theme-core": "^1.0.2",

tns
run ios

ããã§、tns livesync ios --watch ã¾ãã¯

tns livesync android
--watch

// this import should be first in order to load some required settings (like globals and reflect-metadata)
 import { platformNativeScriptDynamic } from "nativescript-angular/platform";

 import { AppModule } from "./app.module";
 import { BackendService } from "./services/backend.service"; 
 

 import firebase = require("nativescript-plugin-firebase"); 


 firebase.init({
   //persist should be set to false as otherwise numbers aren't returned during 
 livesync
  persist: false,
  storageBucket: 'gs://giftler-f48c4.appspot.com',
  onAuthStateChanged: (data: any) => {
    console.log(JSON.stringify(data))
    if (data.loggedIn) {
      BackendService.token = data.user.uid;
    }
    else {
      BackendService.token = "";
    }
   }
 }).then(
   function (instance) {
     console.log("firebase.init done");
   },
   function (error) {
     console.log("firebase.init error: " + error);
   }
   );
 platformNativeScriptDynamic().bootstrapModule(AppModule);

æåã«、ãã©ã°ã¤ã³ãã firebase ãã¤ã³ãã¼ãã、.init() ãå¼ã³åºãã¾ã。æ¬¡ã« storageBucket ããããã£ãç·¨éã、Firebase ã³ã³ã½ã¼ã«ã® [Storage] ã¿ãã«è¡¨ç¤ºããã¦ããå¤ãè²¼ãä»ãã¾ã。

ã³ã¼ãã®æ§é ã¨èªè¨¼

—list …

—list-detail …

—models

gift.model.ts
user.model.ts
index.ts

—services

backend.service.ts
firebase.service.ts
utils.service.ts
index.ts

app.component.ts

app.css

app.module.ts

app.routes.ts

auth-guard.service.ts

main.ts

Firebase ã®èªè¨¼ã Angular 2 ã® auth-guard.service ã¨é£æºããæ¹æ³ã«æ³¨ç®ãã¦ãã ãã。åè¿°ã®ããã«、ã¢ããªã® app/main.ts ã§ Firebase ãåæåããã¾ã。ãã®éã«、onAuthStateChanged é¢æ°ãå¼ã³åºããã¾ã。

onAuthStateChanged: (data: any) => { 
    console.log(JSON.stringify(data))
    if (data.loggedIn) {
      BackendService.token = data.user.uid;
    }
    else {
      BackendService.token = "";
    }
  }

ã¢ããªãèµ·åããéã«、Firebase ããè¿ããããã¼ã¿ãæåååãããã®ãã³ã³ã½ã¼ã«ã§ç¢ºèªãã¦ãã ãã。ãã®ã¦ã¼ã¶ã¼ã« loggedIn ãã©ã°ãç«ã£ã¦ããå ´å、Firebase ããéãè¿ããã userId ã token ã¨ãã¦è¨å®ãã¾ã。NativeScript ã¢ããªã±ã¼ã·ã§ã³è¨å®ã¢ã¸ã¥ã¼ã«ãä½¿ã£ã¦、ãã® userId ãä¿åãããã¤、ããããä½æãããã¼ã¿ã¨é¢é£ä»ãã¾ã。ãã®ã¢ã¸ã¥ã¼ã«ã¯、localStorage ã®ãããªæ©è½ãæã¤ã¢ã¸ã¥ã¼ã«ã§ã。ãã®ãã¼ã¯ã³ã¨ãã¼ã¯ã³ãä½¿ãèªè¨¼ãã¹ãã¯ app/services/backend.service.ts ãã¡ã¤ã«ã§ç®¡çããã¦ãã、app/auth-guard.service.ts ãã¡ã¤ã«ã§å©ç¨ã§ãã¾ã。auth-guard ãã¡ã¤ã«ã¯、ã¢ããªã®ãã°ã¤ã³ããã³ãã°ã¢ã¦ãç¶æãé©åã«ç®¡çããæ¹æ³ãæä¾ãã¦ãã¾ã。

AuthGuard ã¯ã©ã¹ã¯、Angular Router ã¢ã¸ã¥ã¼ã«ã® CanActivate ã¤ã³ã¿ã¼ãã§ã¼ã¹ãå®è£ãã¦ãã¾ã。

export class AuthGuard implements CanActivate {
  constructor(private router:Router) { } 

  canActivate() {
    if (BackendService.isLoggedIn()) {
      return true;
    }
    else {
      this.router.navigate(["/login"]);
      return false;
    }
  }

const listRoutes:Routes = [
  { path: "", component:ListComponent, canActivate: [AuthGuard] },
];

ãªã¹ãã®ä½æã¨ããã«ãã§ãã¯


public gifts$: Observable;

ngOnInit(){
  this.gifts$ = this.firebaseService.getMyWishList();
}

getMyWishList():Observable {
   return new Observable((observer: any) => { 
       let path = 'Gifts';
         let onValueEvent = (snapshot: any) => {
           this.ngZone.run(() => {
             let results = this.handleSnapshot(snapshot.value);
             console.log(JSON.stringify(results))
              observer.next(results);
           });
         };
         firebase.addValueEventListener(onValueEvent, `/${path}`);
     }).share(); 
   }

handleSnapshot(data: any) {
    //empty array, then refill and filter 
    this._allItems = [];
    if (data) {
      for (let id in data) {
        let result = (Object).assign({id: id}, data[id]);
        if(BackendService.token === result.UID){
          this._allItems.push(result);
        }
      }
      this.publishUpdates();
    }
    return this._allItems;
 }

publishUpdates() {
    // here, we sort must emit a *new* value (immutability!)
    this._allItems.sort(function(a, b){
         if(a.date < b.date) return -1;
         if(a.date > b.date) return 1;
       return 0;
    })
    this.items.next([...this._allItems]);
  }

ç£è¦å¯è½ãªãã¸ã§ã¯ã $gifts ã«ãã¼ã¿ãè¨å®ãããã¨、è¦ç´ ã®ç·¨éãåé¤ãè¡ããã³ã«ãªã¹ãã¼ãå¼ã°ã、ããã³ãã¨ã³ããé©åã«ã¢ãããã¼ãããã¾ã。getMyWishList ã¡ã½ããåã® onValueEvent é¢æ°ã§ ngZone ãä½¿ããã¦ãããã¨ã«æ³¨æãã¦ãã ãã。ããã«ãã£ã¦、éåæã«è¡ããããã¼ã¿ã®ã¢ãããã¼ãã«å¿ãã¦ UI ãé©åã«ã¢ãããã¼ãããã¾ã。NativeScript ã¢ããªã® ngZone ã®æ¦è¦ã«ã¤ãã¦ã¯、ãã¡ãããè¦§ãã ãã。

ã¡ãã»ã¼ã¸ã®ãªã¢ã¼ãè¨å®

ãã 1 ã¤ã®åªãã Firebase ãµã¼ãã¹ã«「Remote Config」ãããã¾ã。ããã¯、Firebase ã®ããã¯ã¨ã³ãããã¢ããªãã¢ãããã¼ãã§ããæ©è½ã§ã。Remote Config ãä½¿ãã¨、ã¢ããªã®æ©è½ã®ãªã³、ãªããåãæ¿ããã、UI ãå¤æ´ãããã§ãã¾ã。ããã§ã¯、ãµã³ã¿ããããã¡ãã»ã¼ã¸ãéãæ©è½ãè¿½å ãã¦ã¿ã¾ããã。

app/list/list.html ã«ã¯、æ¬¡ã®ã¡ãã»ã¼ã¸ ããã¯ã¹ãããã¾ã。


<Label class="gold card" textWrap="true" [text]="message$ | async"></Label>

ngOnInit(){
  this.message$ = this.firebaseService.getMyMessage();
}

ç§å¯ã¯、æ¬¡ã«ç¤ºããµã¼ãã¹ã¬ã¤ã¤（app/services/firebase.service.ts）ã«ããã¾ã。

getMyMessage():Observable{
    return new Observable((observer:any) => {
      firebase.getRemoteConfig({ 
      developerMode: false,
      cacheExpirationSeconds: 300,
      properties: [{
      key: "message",
      default:"Happy Holidays!"
    }]
  }).then(
        function (result) {
          console.log("Fetched at " + result.lastFetch + (result.throttled ? " (throttled)" : "")); 
          for (let entry in result.properties)
            {
              observer.next(result.properties[entry]);
            }
          }
       );
     }).share();
 }

å¥½ããªã ãæ°ããã¡ãã»ã¼ã¸ãçºè¡å¯è½
æ³¨: ã¢ããªããå¿è¦ã®ãªãé«é »åº¦ã§ Remote Config ã®å¤ãåå¾ããã¨、Remote Config ã®å©ç¨ãå¶éããã¦ãã¾ãå ´åãããã¾ãã®ã§、æéã«éçºãã¦ãã ãã。

åçãæ®ã

ãã®ããã¸ã§ã¯ãã®ãããããã¨ããã¯、é¸ãã ãã¬ã¼ã³ãã®åçãæ®ã£ã¦ Firebase Storage ã«æ ¼ç´ã§ããç¹ã§ããã。åè¿°ã®ããã«、ãã®é¨åã«ã¯ Camera ãã©ã°ã¤ã³ãä½¿ãã¾ãã。ããã§ãã¼ãã¦ã§ã¢ã®ç®¡çãå°ãæ¥½ã«ãªãã¾ã。æåã«、app/list-detail/list-detail.component.ts ã® ngOnInit() ã¡ã½ããã§ãã¼ããã·ã§ã³ ã»ãããåå¾ã、ã¢ããªãã«ã¡ã©ããã¤ã¹ã«ã¢ã¯ã»ã¹ã§ããããã«ãã¾ã。

ngOnInit() {
   camera.requestPermissions();
   ...
  }

takePhoto() {
  let options = {
            width:300,
            height:300,
            keepAspectRatio: true,
            saveToGallery: true
         };
     camera.takePicture(options)
          .then(imageAsset => {
              imageSource.fromAsset(imageAsset).then(res => {
                  this.image = res;
                  //save the source image to a file, then send that file path to firebase
                  this.saveToFile(this.image);
              })
          }).catch(function (err) {
              console.log("Error -> " + err.message);
          });
}

saveToFile(res){
  let imgsrc = res;
        this.imagePath =
this.utilsService.documentsPath(`photo-${Date.now()}.png`);
        imgsrc.saveToFile(this.imagePath, enums.ImageFormat.png); 
}

editGift(id: string){
  if(this.image){
    //upload the file, then save all
    this.firebaseService.uploadFile(this.imagePath).then((uploadedFile: any) => 
{
          this.uploadedImageName = uploadedFile.name;
          //get downloadURL and store it as a full path;
this.firebaseService.getDownloadUrl(this.uploadedImageName).then((downloadUrl: string) => {
this.firebaseService.editGift(id,this.description,downloadUrl).then((result:any) => { 
               alert(result)
             }, (error: any) => {
                 alert(error);
             });
           })
          }, (error: any) => {
            alert('File upload error: ' + error);
          });
        }
        else {
          //just edit the description
          this.firebaseService.editDescription(id,this.description).then((result:any) => {
               alert(result)
            }, (error: any) => {
               alert(error);
            });
          }
        }

uploadFile(localPath: string, file?: any): Promise {
      let filename = this.utils.getFilename(localPath);
      let remotePath = `${filename}`;
      return firebase.uploadFile({
        remoteFullPath: remotePath,
        localFullPath: localPath,
        onProgress: function(status) {
            console.log("Uploaded fraction: " + status.fractionCompleted);
            console.log("Percentage complete: " + status.percentageCompleted);
        }
      });
  }
  getDownloadUrl(remoteFilePath: string): Promise {
      return firebase.getDownloadUrl({
     remoteFullPath: remoteFilePath})
      .then(
        function (url:string) {
          return url;
        },
        function (errorMessage:any) {
          console.log(errorMessage);
        });
}
editGift(id:string, description: string, imagepath: string){
    this.publishUpdates();
    return firebase.update("/Gifts/"+id+"",{
        description: description,
        imagepath: imagepath})
      .then(
        function (result:any) {
          return 'You have successfully edited this gift!';
        },
        function (errorMessage:any) {
          console.log(errorMessage);
        });
  }

ããã¾ã§、åå®ããã¦ã£ãã·ã¥ãªã¹ãç®¡çã¢ããªã®ä½æã«åãã¦é èª¿ã«é²ãã§ãã¾ãã。ããã、ãµã³ã¿ããã«é¡ããã¨ãä¼ããæé«ã®æ¹æ³ã¯ã¾ã æ¨¡ç´¢ä¸ã¨è¨ããã§ããã。æ¬¡ã®ã¹ãããã¨ãã¦ã¯、Mailgun ã®ã¡ã¼ã«ã¨ã®çµ±åãããã·ã¥éç¥ã®å©ç¨ãèãããã¾ã。ããã¾ã§ã®é、ãã°ãããã¯ãªã¹ãã¹ä¼æããéãããã ãã。çããã Firebase ãå©ç¨ãã¦ãã¦ããª NativeScript ã¢ããªãä½ããããã«ãç¥ããã¾ã。

NativeScript ã«ã¤ãã¦ããã«è©³ããå¦ã³ããæ¹ã¯、http://www.nativescript.org ããè¦§ãã ãã。è³ªåãããæ¹ã¯、ãã¡ããã NativeScript ã® Slack ãã£ã³ãã«ã«åå ãã¦ãã ãã。

Posted by Khanh LeViet - Developer Relations Team

ãã®è¨äºã¯ã²ã¹ã ããã¬ã¼ Jen Looper ã«ãã The Firebase Blog ã®è¨äº "The Firebase Blog: Building a NativeScript + Angular 2 Mobile App using Firebase" ãåã«ç¿»è¨³・å çãããã®ã§ã。è©³ããã¯åè¨äºããè¦§ãã ãã。

Jen Looper

Developer Advocate at ProgressSW

ãã¬ã¼ã³ãNativeScript-Firebase ãã©ã°ã¤ã³

AuthenticationRealtimeDatabaseRemote ConfigStorageGiftler ã¢ããªããã¥ã¡ã³ã

ãå¥½ã¿ã® IDE ã§、NativeScript ã¨ Angular ã®éçºç°å¢ãè¨å®ãã¾ã。TypeScript ãå¿è¦ã«ãªãã®ã§、ãã©ã³ã¹ãã¤ã« ããã»ã¹ãåä½ãããã¨ãç¢ºèªãã¦ããã¾ã。Visual Studio、Visual Studio Code、Jetbrains å¯¾å¿ã® IDE ãªã©ã§å©ç¨ã§ããåªãã NativeScript ãã©ã°ã¤ã³ãããã¾ãã、ä¸ã§ã Visual Studio Code ã«ã¯、éçºãå éãããä¾¿å©ãªã¹ãããããããã¾ã。

Firebase ã¢ã«ã¦ã³ãã«ãã°ã¤ã³ã、ã³ã³ã½ã¼ã«ãéãã¾ã。

Firebase ã³ã³ã½ã¼ã«ã§æ°ããããã¸ã§ã¯ããä½æãã¾ã。ããã§ã¯、「Giftler」ã¨ããååã«ãã¾ãã。ããã«、Firebase ã³ã³ã½ã¼ã«ã§ iOS ã¨ Android ã®ã¢ããªãä½æãã¾ã。ãã®éã«、GoogleServices-Info.plist ãã¡ã¤ã«ã¨ google-services.json ãã¡ã¤ã«ããã¦ã³ãã¼ããã¾ã。å¾ã»ã©å¿è¦ã«ãªãã®ã§、ãã¡ã¤ã«ãéç½®ããå ´æã¯è¦ãã¦ããã¦ãã ãã。

ä¾åã¢ã¸ã¥ã¼ã«ã®ã¤ã³ã¹ãã¼ã«

ã¦ã¼ã¶ã¼ã«ãããªã¹ãã¸ã®ã®ããé ç®ã®ç»é²

ã¦ã¼ã¶ã¼ã«ãããªã¹ãããã®ã®ããé ç®ã®åé¤

Giftler ã®ã½ã¼ã¹ã³ã¼ã

Firebase ãããã¦ã³ãã¼ããã google.services.json ãã¡ã¤ã«ã /app/App_Resources/Android folder ã«éç½®ãã¾ã。

åæ§ã«、Firebase ãããã¦ã³ãã¼ããã GoogleService-Info.plist ãã¡ã¤ã«ã /app/App_Resources/iOS folder ã«éç½®ãã¾ã。

package.json"nativescript-angular":"1.2.0", "nativescript-camera": "^0.0.8", "nativescript-iqkeyboardmanager": "^1.0.1", "nativescript-plugin-firebase": "^3.8.4", "nativescript-theme-core": "^1.0.2", platformstns run iostns run android

tns livesync ios --watchtns livesync android --watch

app/main.ts// this import should be first in order to load some required settings (like globals and reflect-metadata) import { platformNativeScriptDynamic } from "nativescript-angular/platform"; import { AppModule } from "./app.module"; import { BackendService } from "./services/backend.service"; import firebase = require("nativescript-plugin-firebase"); firebase.init({ //persist should be set to false as otherwise numbers aren't returned during livesync persist: false, storageBucket: 'gs://giftler-f48c4.appspot.com', onAuthStateChanged: (data: any) => { console.log(JSON.stringify(data)) if (data.loggedIn) { BackendService.token = data.user.uid; } else { BackendService.token = ""; } } }).then( function (instance) { console.log("firebase.init done"); }, function (error) { console.log("firebase.init error: " + error); } ); platformNativeScriptDynamic().bootstrapModule(AppModule);

app/login/login.component.tsuser@nativescript.org

iOS ã¨ Android ã®ãã°ã¤ã³ç»é¢ ã³ã¼ãã®æ§é ã¨èªè¨¼

gift.model.ts

user.model.ts

index.ts

backend.service.ts

firebase.service.ts

utils.service.ts

index.ts

app/main.tsonAuthStateChangedonAuthStateChanged: (data: any) => { console.log(JSON.stringify(data)) if (data.loggedIn) { BackendService.token = data.user.uid; } else { BackendService.token = ""; } } loggedIntokenapp/services/backend.service.tsapp/auth-guard.service.tsexport class AuthGuard implements CanActivate { constructor(private router:Router) { } canActivate() { if (BackendService.isLoggedIn()) { return true; } else { this.router.navigate(["/login"]); return false; } } const listRoutes:Routes = [ { path: "", component:ListComponent, canActivate: [AuthGuard] }, ]; ãªã¹ãã®ä½æã¨ããã«ãã§ãã¯

app/list/list.htmlapp/list/list.component.ts public gifts$: Observable; ngOnInit(){ this.gifts$ = this.firebaseService.getMyWishList(); } getMyWishList():Observable { return new Observable((observer: any) => { let path = 'Gifts'; let onValueEvent = (snapshot: any) => { this.ngZone.run(() => { let results = this.handleSnapshot(snapshot.value); console.log(JSON.stringify(results)) observer.next(results); }); }; firebase.addValueEventListener(onValueEvent, `/${path}`); }).share(); } handleSnapshothandleSnapshot(data: any) { //empty array, then refill and filter this._allItems = []; if (data) { for (let id in data) { let result = (Object).assign({id: id}, data[id]); if(BackendService.token === result.UID){ this._allItems.push(result); } } this.publishUpdates(); } return this._allItems; } publishUpdates() { // here, we sort must emit a *new* value (immutability!) this._allItems.sort(function(a, b){ if(a.date < b.date) return -1; if(a.date > b.date) return 1; return 0; }) this.items.next([...this._allItems]); } ngZoneãã¡ã ã¡ãã»ã¼ã¸ã®ãªã¢ã¼ãè¨å®

app/list/list.html <Label class="gold card" textWrap="true" [text]="message$ | async"></Label> message$ngOnInit(){ this.message$ = this.firebaseService.getMyMessage(); } app/services/firebase.service.tsgetMyMessage():Observable{ return new Observable((observer:any) => { firebase.getRemoteConfig({ developerMode: false, cacheExpirationSeconds: 300, properties: [{ key: "message", default:"Happy Holidays!" }] }).then( function (result) { console.log("Fetched at " + result.lastFetch + (result.throttled ? " (throttled)" : "")); for (let entry in result.properties) { observer.next(result.properties[entry]); } } ); }).share(); }

å¥½ããªã ãæ°ããã¡ãã»ã¼ã¸ãçºè¡å¯è½ åçãæ®ã

app/list-detail/list-detail.component.tsngOnInit() { camera.requestPermissions(); ... } takePhoto() { let options = { width:300, height:300, keepAspectRatio: true, saveToGallery: true }; camera.takePicture(options) .then(imageAsset => { imageSource.fromAsset(imageAsset).then(res => { this.image = res; //save the source image to a file, then send that file path to firebase this.saveToFile(this.image); }) }).catch(function (err) { console.log("Error -> " + err.message); }); } saveToFile(res){ let imgsrc = res; this.imagePath = this.utilsService.documentsPath(`photo-${Date.now()}.png`); imgsrc.saveToFile(this.imagePath, enums.ImageFormat.png); } /GiftseditGift(id: string){ if(this.image){ //upload the file, then save all this.firebaseService.uploadFile(this.imagePath).then((uploadedFile: any) => { this.uploadedImageName = uploadedFile.name; //get downloadURL and store it as a full path; this.firebaseService.getDownloadUrl(this.uploadedImageName).then((downloadUrl: string) => { this.firebaseService.editGift(id,this.description,downloadUrl).then((result:any) => { alert(result) }, (error: any) => { alert(error); }); }) }, (error: any) => { alert('File upload error: ' + error); }); } else { //just edit the description this.firebaseService.editDescription(id,this.description).then((result:any) => { alert(result) }, (error: any) => { alert(error); }); } } uploadFile(localPath: string, file?: any): Promise { let filename = this.utils.getFilename(localPath); let remotePath = `${filename}`; return firebase.uploadFile({ remoteFullPath: remotePath, localFullPath: localPath, onProgress: function(status) { console.log("Uploaded fraction: " + status.fractionCompleted); console.log("Percentage complete: " + status.percentageCompleted); } }); } getDownloadUrl(remoteFilePath: string): Promise { return firebase.getDownloadUrl({ remoteFullPath: remoteFilePath}) .then( function (url:string) { return url; }, function (errorMessage:any) { console.log(errorMessage); }); } editGift(id:string, description: string, imagepath: string){ this.publishUpdates(); return firebase.update("/Gifts/"+id+"",{ description: description, imagepath: imagepath}) .then( function (result:any) { return 'You have successfully edited this gift!'; }, function (errorMessage:any) { console.log(errorMessage); }); }

http://www.nativescript.orgãã¡ãKhanh LeViet - Developer Relations Team

Firebase ãä½¿ã£ã¦ NativeScript + Angular 2 ã¢ãã¤ã«ã¢ããªãæ§ç¯ãã

ä¾åã¢ã¸ã¥ã¼ã«ã®ã¤ã³ã¹ãã¼ã«

ã³ã¼ãã®æ§é ã¨èªè¨¼

ãªã¹ãã®ä½æã¨ããã«ãã§ãã¯

ã¡ãã»ã¼ã¸ã®ãªã¢ã¼ãè¨å®

åçãæ®ã

ã©ãã«

ããã° ã¢ã¼ã«ã¤ã

Feed

Firebase ãä½¿ã£ã¦ NativeScript + Angular 2 ã¢ãã¤ã«ã¢ããªãæ§ç¯ãã

ä¾å­ã¢ã¸ã¥ã¼ã«ã®ã¤ã³ã¹ãã¼ã«

ã³ã¼ãã®æ§é ã¨èªè¨¼

ãªã¹ãã®ä½æã¨ããã«ãã§ãã¯

ã¡ãã»ã¼ã¸ã®ãªã¢ã¼ãè¨­å®

åçãæ®ã

ã©ãã«

ãã­ã° ã¢ã¼ã«ã¤ã

Feed

Firebase ãä½¿ã£ã¦ NativeScript + Angular 2 ã¢ãã¤ã«ã¢ããªãæ§ç¯ãã

ä¾åã¢ã¸ã¥ã¼ã«ã®ã¤ã³ã¹ãã¼ã«

ã³ã¼ãã®æ§é ã¨èªè¨¼

ãªã¹ãã®ä½æã¨ããã«ãã§ãã¯

ã¡ãã»ã¼ã¸ã®ãªã¢ã¼ãè¨å®

åçãæ®ã

ã©ãã«

ããã° ã¢ã¼ã«ã¤ã