Firebase and React Native

Transcript

1. 6TJOH
   'JSFCBTF
   3FBMUJNF
   %BUBCBTF
   CZ
   3FBDU
   /BUJWF 4"8"
   /PSJIJLP
   ೔ຊܦࡁ৽ฉࣾ
   σδλϧฤ੒ہ 3FBDU
   /BUJWF
   BOE
   'JSFCBTF
2. 2 
   4"8"
   /PSJIJLP
   
   %FWFMPQ
   BOE
   1MBO
   /JLLFJ
   0OMJOF
   
   %KT
   
   3FBDU
   /BUJWF "CPVU
   NF
3. 'JSFCBTF
   3FBMUJNF
   %BUBCBTF 3
4. 4 #BB4
   σʔλߋ৽͕Ϋϥ΢υʹอଘ͞ΕϦΞϧλΠϜͰಉظ Ͱ͖Δ 'JSFCBTF
   3FBMUJNF
   %BUBCBTF IUUQTZPVUVCF6BF.EW6Q"
5. 3FBDU
   /BUJWF 5
6. 6 +BWB4DSJQU &4 ͰJ04"OESPJEΞϓϦ͕ॻ͚Δ 3FBDU
   /BUJWF IUUQTGBDFCPPLHJUIVCJPSFBDUOBUJWF
7. 7 3FBDU
   /BUJWF
   4IPXDBTF IUUQTGBDFCPPLHJUIVCJPSFBDUOBUJWFTIPXDBTFIUNM
8. -FU`T
   TUBSU 8
9. 9 'PMMPXJOH
   UIJT
   1PTU IUUQTpSFCBTFHPPHMFCMPHDPNUIFCFHJOOFSTHVJEFUPSFBDUOBUJWFBOE@IUNM
10. 10 
    OQNͰ'JSFCBTFΛΠϯετʔϧ 'JSFCBTF
    TFUVQ 
    KTϑΝΠϧͰಡΈࠐΈ const Firebase = require('firebase'); npm install firebase --save
11. 11 %FDMBSF
    %BUB4PVSDF 1 constructor(props) { 2 super(props); 3 this.state = { 4 dataSource: new ListView.DataSource({ 5 rowHasChanged: (row1, row2) => row1 !== row2, 6 }) 7 }; 8 this.itemsRef = new Firebase("<my-fb-app>/items"); 9 }
12. 12 *OJUJBMJ[F
    MJTU
    XIFO
    UIF
    DPNQPOFOU
    IBT
    pSTU
    CFFO
    SFOEFSFE 1 listenForItems(itemsRef) { 2 itemsRef.on('value', (snap) => { 3 // get children as an array 4 var items = []; 5 snap.forEach((child) => { 6 items.push({ 7 title: child.val().title, 8 post_time: child.val().post_time, 9 userID: child.val().userID, 10 _key: child.key() 11 }); 12 }); 13 this.setState({ 14 dataSource: this.state.dataSource.cloneWithRows(items) 15 }); 16 }); 17 } 18 19 componentDidMount() { 20 this.listenForItems(this.itemsRef); 21 }
13. 13 DPNQPOFOUT 1 render() { 2 return ( 3 <View style="{styles.container}"> 4 <ListView 5 dataSource="{this.state.dataSource}" 6 renderRow=“{this._renderItem.bind(this)}" 7 style="{styles.listview}/"> 8 </View> 9 ); 10 }
14. 14 "EE
    *UFN 1 this.itemsRef.push({ 2 title: this.tmpText, 3 post_time: Firebase.ServerValue.TIMESTAMP, 4 userID: userID 5 });
15. 15 3FNPWF
    *UFN 1 _renderItem(item) { 2 const onPress = () => { 3 AlertIOS.prompt( 4 'Delete', 5 null, 6 [ 7 {text: 'Delete', onPress: (text) => this.itemsRef.child(item._key).remove()}, 8 {text: 'Cancel', onPress: (text) => console.log('Cancel')} 9 ], 10 'default' 11 ); 12 }; 13 return ( 14 <ListItem item={item} onPress={onPress} /> 15 ); 16 }
16. $PODMVTJPO 16
17. 17 
    3FBDU
    /BUJWFͰͷ'JSFCBTFͷه๏ʹετϨε͸ͳ͍
 ʢ·ͩʣ
    
    3FBDUͷTUBUF؅ཧͱɺ'JSFCBTFͷಉظ͸૬ੑ͕ྑͦ͞͏
    $PODMVTJPO “This is where React fits perfectly with Firebase. Because the Firebase database synchronizes application state across multiple devices, and React efficiently re-renders application state changes.”
18. 18 
    OBUJWF
    4%,ΛΠϯετʔϧͯ͠ͳ͍
    
    A4MPX
    "OJNBUJPOTA
    Ϟʔυͩͱ 8FC7JFX͕ݟ੾ΕΔ
    
    ͓ͦΒ͘+4Ͱಈ͍ͯΔ )PX
    UP
    XPSL
19. IUUQTOJLLFJDPNTBJZP +PJO
    VT
    % 19