Firebase and React Native

Transcript

1. 6TJOH'JSFCBTF3FBMUJNF%BUBCBTFCZ3FBDU/BUJWF
   4"8" /PSJIJLP೔ຊܦࡁ৽ฉࣾσδλϧฤ੒ہ
   3FBDU/BUJWFBOE'JSFCBTF
   

   View Slide

2. 2
   4"8" /PSJIJLP
   %FWFMPQBOE1MBO/JLLFJ0OMJOF
   %KT3FBDU/BUJWF
   "CPVUNF
   

   View Slide

3. 'JSFCBTF3FBMUJNF%BUBCBTF
   3
   

   View Slide

4. 4
   #BB4 σʔλߋ৽͕Ϋϥ΢υʹอଘ͞ΕϦΞϧλΠϜͰಉظ
   Ͱ͖Δ
   'JSFCBTF3FBMUJNF%BUBCBTF
   IUUQTZPVUVCF6BF.EW6Q"
   

   View Slide

5. 3FBDU/BUJWF
   5
   

   View Slide

6. 6
   +BWB4DSJQU &4
   ͰJ04"OESPJEΞϓϦ͕ॻ͚Δ
   3FBDU/BUJWF
   IUUQTGBDFCPPLHJUIVCJPSFBDUOBUJWF
   

   View Slide

7. 7
   3FBDU/BUJWF4IPXDBTF
   IUUQTGBDFCPPLHJUIVCJPSFBDUOBUJWFTIPXDBTFIUNM
   

   View Slide

8. -FU`TTUBSU
   8
   

   View Slide

9. 9
   'PMMPXJOHUIJT1PTU
   IUUQTpSFCBTFHPPHMFCMPHDPNUIFCFHJOOFSTHVJEFUPSFBDUOBUJWFBOE@IUNM
   

   View Slide

10. 10
    OQNͰ'JSFCBTFΛΠϯετʔϧ
    'JSFCBTFTFUVQ
    KTϑΝΠϧͰಡΈࠐΈ
    const Firebase = require('firebase');
    npm install firebase --save
    

    View Slide

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("/items");
    9 }
    

    View Slide

12. 12
    *OJUJBMJ[FMJTUXIFOUIFDPNQPOFOUIBTpSTUCFFOSFOEFSFE
    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 }
    

    View Slide

13. 13
    DPNQPOFOUT
    1 render() {
    2 return (
    3
    4 5 dataSource="{this.state.dataSource}"
    6 renderRow=“{this._renderItem.bind(this)}"
    7 style="{styles.listview}/">
    8
    9 );
    10 }
    

    View Slide

14. 14
    "EE*UFN
    1 this.itemsRef.push({
    2 title: this.tmpText,
    3 post_time: Firebase.ServerValue.TIMESTAMP,
    4 userID: userID
    5 });
    

    View Slide

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
    15 );
    16 }
    

    View Slide

16. $PODMVTJPO
    16
    

    View Slide

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.”
    

    View Slide

18. 18
    OBUJWF4%,ΛΠϯετʔϧͯ͠ͳ͍
    A4MPX"OJNBUJPOTAϞʔυͩͱ
    8FC7JFX͕ݟ੾ΕΔ
    ͓ͦΒ͘+4Ͱಈ͍ͯΔ
    )PXUPXPSL
    

    View Slide

19. IUUQTOJLLFJDPNTBJZP
    +PJOVT%
    19
    

    View Slide