React Native

facilitando o desenvolvimento da próxima geração de aplicativos JS

Igor Ribeiro Lima - lima.igorribeiro@gmail.com

http://bit.do/6th-femug-2017

quantas linhas de código?

noites debugando Java/ObjectiveC?

só JS?

existe alguma mágica?

O que é realmente o React Native?

• WebView?
• Transpilador?
• JS?

Um componente simples

import React, { Component } from 'react'
import { Text, View, StyleSheet } from 'react-native'

export default class App extends Component {
  render() {
    return (
      < View style={styles.container}>
        < Text style={styles.paragraph}>
          Change code in the editor and watch it change on your phone!
          Save to get a shareable url. You get a new url each time you save.
        < /Text>
      < /View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
    color: '#34495e',
  },
})
        

Em breve

Dever de casa

Appbase

Configurando

var appbaseRef = new Appbase({
  url: 'https://scalr.api.appbase.io',
  appname: 'talks_2016',
  username: 'aWSlJvIUk',
  password: '58e3edd6-8933-4f61-a648-231c0404d4d7'
})
        

Armazenando dados

appbaseRef.index({
  type: 'getting_started',
  id: 'id123',
  body: {
    date: Date.now(),
    reason: 'tested'
  }
}).on('data', function(response) {
  console.log(response)
}).on('error', function(error) {
  console.log(error)
})
        

Buscando dados

const ES_TYPE = 'getting_started'
const ID_TEST = 'id123'

appbaseRef.get({
  type: ES_TYPE,
  id: ID_TEST
}).on('data', function(response) {
  console.log(response)
}).on('error', function(error) {
  console.log(error)
})

appbaseRef.getStream({
  type: ES_TYPE,
  id: ID_TEST
}).on('data', function(response) {
  console.log(response)
}).on('error', function(error) {
  console.log("getStream() failed with: ", error)
})
        

API REST

const USER = 'aWSlJvIUk'
const PASS = '58e3edd6-8933-4f61-a648-231c0404d4d7'
const APPNAME = 'talks_2016'

const ES_TYPE = 'getting_started'
const ID_TEST = 'id123'

const uri = `https://scalr.api.appbase.io/${APPNAME}/${ES_TYPE}/${ID_TEST}`
// https://aWSlJvIUk:58e3edd6-8933-4f61-a648-231c0404d4d7@scalr.api.appbase.io/talks_2016/getting_started/id123

fetch(uri, {
  method: 'GET',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json; charset=UTF-8',
    'Authorization': `Basic ${btoa(USER + ':' + PASS)}`
  }
}).then((response) => {
  response.json().then((json) => {
    console.log(json)
  })
})

fetch(uri, {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    'Authorization': `Basic ${btoa(USER + ':' + PASS)}`
  },
  body: JSON.stringify({
    date: Date.now(),
    reason: 'tested'
  })
}).then((response) => {
  response.json().then((json) => {
    console.log('---->', json)
  })
})
        

Data Browser

Mãos na massa ;-)

Firebase

Configurando

// Initialize Firebase
// https://firebase.google.com/docs/database/web/start
const config = {
  apiKey: "AIzaSyAp-CLeimcXe59hvyNqpL66R0TQUyyoNjo",
  authDomain: "talk2016-9079a.firebaseapp.com",
  databaseURL: "https://talk2016-9079a.firebaseio.com",
  storageBucket: "talk2016-9079a.appspot.com",
}
firebase.initializeApp(config)
const database = firebase.database()
        

Armazenando dados

const FIREBASE_PROPERTY = 'getting_started'
// save any object
// https://firebase.google.com/docs/database/web/save-data
database.ref(FIREBASE_PROPERTY).set({
  test: 12
})

// update any object
// https://firebase.google.com/docs/database/web/save-data
database.ref(FIREBASE_PROPERTY).update({
  hello: 'hello, firebase!!!'
})
        

Buscando dados

const FIREBASE_PROPERTY = 'getting_started'

// fetch data we alreaday have saved
// and keep watching the data change
// https://firebase.google.com/docs/database/web/retrieve-data
database.ref(FIREBASE_PROPERTY).on('value', (snapshot) => {
  const value = snapshot.val()
  if (value) {
    console.log(value)
  }
})
        

API REST

const URI = 'https://talk2016-9079a.firebaseio.com/getting_started.json'

fetch(URI, {
  method: 'GET',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json; charset=UTF-8'
  }
}).then((response) => {
  response.json().then((json) => {
    console.log(json)
  })
})

fetch(URI, {
  method: 'PUT',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    date: Date.now(),
    reason: 'tested'
  })
}).then((response) => {
  response.json().then((json) => {
    console.log('---->', json)
  })
})
        

Data Browser

Mãos na massa ;-)

Meu primeiro app

import React, { Component } from 'react'
import { Text, View, ListView, StyleSheet } from 'react-native'

/*
React Native is a great option for creating performant iOS and Android apps
that feel at home on their respective platforms.

For further details, feel free to take a look at the great RN documentation.
- https://facebook.github.io/react-native/docs/getting-started.html
**/

const messages = [{
  author: 'João',
  msg: 'Lorem ipsum dolor sit amet'
}, {
  author: 'José',
  msg: 'Vel nisl impetus intellegat at'
}]

class Message extends Component {
  render () {
    const {author, msg} = this.props
    return (
      < View style={styles.messageContainer}>
        < Text style={styles.messageAuthor}>{author}< /Text>
        < Text style={styles.messageText}>{msg}< /Text>
      < /View>
    )
  }
}

class ChatExample extends Component {
  constructor () {
    super()
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
    this.state = {
      dataSource: ds.cloneWithRows(messages),
    }
  }

  render () {
    return (
      < ListView
        style={styles.chatContainer}
        dataSource={this.state.dataSource}
        renderRow={({author, msg}) => < Message author={author} msg={msg} />}
      />
    )
  }
}

export default class App extends Component {
  render() {
    return (
      < View style={styles.appContainer}>
        < Text style={styles.welcome}>
          Welcome to React Native!
        < /Text>
        < ChatExample />
      < /View>
    )
  }
}

const styles = StyleSheet.create({
  appContainer: {
    flex: 1,
    backgroundColor: '#FFF',
  },
  chatContainer: {
    marginTop: 10,
    marginRight: 5,
    marginLeft: 5
  },
  messageContainer: {
    flexGrow: 1,
    flexDirection: 'row',
    marginBottom: 10
  },
  messageAuthor: {
    flex: 0.2,
    fontWeight: 'bold',
    marginRight: 5
  },
  messageText: {
    flex: 1,
    fontStyle: 'italic',
    textAlign: 'justify',
    marginRight: 5
  },
  welcome: {
    color: 'white',
    backgroundColor: 'rgb(245, 123, 45)',
    fontSize: 20,
    textAlign: 'center',
    padding: 15,
    margin: 0,
  }
})

        

Muito Obrigado

Gostou? Compartilhe. Dê um like.

Críticas / dúvidas / sugestões? Ajude a melhorar abrindo issues ou forkando o projeto no GitHub.

Obrigado!!!