Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Firebase and React Native

Firebase and React Native

SAWA, Norihiko

July 13, 2016
Tweet

More Decks by SAWA, Norihiko

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

  3. 'JSFCBTF3FBMUJNF%BUBCBTF
    3

    View full-size slide

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

    View full-size slide

  5. 3FBDU/BUJWF
    5

    View full-size slide

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

    View full-size slide

  7. 7
    3FBDU/BUJWF4IPXDBTF
    IUUQTGBDFCPPLHJUIVCJPSFBDUOBUJWFTIPXDBTFIUNM

    View full-size slide

  8. 9
    'PMMPXJOHUIJT1PTU
    IUUQTpSFCBTFHPPHMFCMPHDPNUIFCFHJOOFSTHVJEFUPSFBDUOBUJWFBOE@IUNM

    View full-size slide

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

    View full-size slide

  10. 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 full-size slide

  11. 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 full-size slide

  12. 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 full-size slide

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

    View full-size slide

  14. 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 full-size slide

  15. $PODMVTJPO
    16

    View full-size slide

  16. 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 full-size slide

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

    View full-size slide

  18. IUUQTOJLLFJDPNTBJZP
    +PJOVT%
    19

    View full-size slide