Airtable REST

2019/05/05

Airtable

Airtable是個雲端服務，提供類似試算表的資料庫，可以利用airtable提供的javascript library或者利用REST存取資料。在這邊先介紹如何透過REST存取資料。

react native可以利用javascript內建的fetch來呼叫RESTful web services，也可以利用Axios，採用Axios的好處是，Axios會自動處理json的內容 (詳參: Fetch vs. Axios.js for making http requests)。

首先，先安裝axios

npm install axios

先利用react裡的axios+rest範例，先把UI的部分改成react native的FlatList

import React from 'react';

import axios from 'axios';

import { View, Text, FlatList  } from 'react-native';

export default class PersonList extends React.Component {

  state = {

    persons: []

  componentDidMount() {

    axios.get(`https://jsonplaceholder.typicode.com/users`)

      .then(res => {

        const persons = res.data;

        this.setState({ persons });

})

  render() {

    return (

      <View style={{flex: 1, paddingTop:20}}>

        <FlatList

          data={this.state.persons}

          renderItem={({item}) => <Text>{item.id}, {item.name}</Text>}

          keyExtractor={({name}, index) => name}

/>

      </View>

連接airtable，是透過Bearer token，所以，要設定header，並將airtable的API取代程式中的XXXXXXXXXXXXXXXXX。

Authorization: 'Bearer XXXXXXXXXXXXXXXXX'

也要將appLNbQOB0WL1ZeDD取代為你的Base id，Table%201，取代為你的table名稱，如果table名稱有空白，就要用%20取代(URI Encode)。

    axios.get(`https://api.airtable.com/v0/appLNbQOB0WL1ZeDD/Table%201?maxRecords=30&view=Grid%20view`)

取得的資料格式:

    "records": [

            "id": "rec6USTCW7WQS1D4H",

            "fields": {

                "City": "台北市",

                "Age": 8,

                "Name": "Ben"

},

            "createdTime": "2019-03-08T06:18:45.000Z"

},

            "id": "recM3qifn7g8hlLhy",

            "fields": {

                "City": "新北市",

                "Age": 6,

                "Name": "Ana"

},

            "createdTime": "2019-03-08T06:18:45.000Z"

},

            "id": "rec9yMWV1aqzQv0g3",

            "fields": {

                "City": "台北市",

                "Age": 7,

                "Name": "Mary"

},

            "createdTime": "2019-03-08T06:18:45.000Z"

],

    "offset": "rec9yMWV1aqzQv0g3"

因為資料會包在records裡，所以，取得資料時，要多records

const persons = res.data.records;

因為資料內容又包在fields中，取得時要加fields

renderItem={({item}) => <Text>{item.fields.Name}, {item.fields.Age}</Text>}

如果在FlatList中使用ListItem，可以另外定義在renderItem裡(也可以像上面那樣寫在裡面)

        <FlatList

          data={this.state.persons}

          renderItem={this.renderItem}

          keyExtractor={({id}, _index) => id}

/>

renderItem的內容

renderItem = ({ item }) => (

    <ListItem

      title={item.fields.Name}

      onPress={() => this.onPress(item.fields)}

/>

程式碼:

import React from 'react';

import axios from 'axios';

import { View, FlatList,Alert  } from 'react-native';

import { ListItem } from 'react-native-elements';

export default class PersonList extends React.Component {

  state = {

    persons: []

  componentDidMount() {

    axios.defaults.headers = {

      'Content-Type': 'application/json',

      Authorization: 'Bearer XXXXXXXXXXXXXXXXX'

    axios.get(`https://api.airtable.com/v0/appLNbQOB0WL1ZeDD/Table%201?maxRecords=30&view=Grid%20view`)

      .then(res => {

        const persons = res.data.records;

        this.setState({ persons});

})

  onPress = (fields) => (

    //console.log('Age:'+age)

    Alert.alert(fields.Name, 'Age:'+fields.Age +' City:'+fields.City)

    //alert('Age:'+age +' City:'+city)

  renderItem = ({ item }) => (

    <ListItem

      title={item.fields.Name}

      onPress={() => this.onPress(item.fields)}

/>

  render() {

    return (

      <View style={{flex: 1, paddingTop:20}}>

        <FlatList

          data={this.state.persons}

          renderItem={this.renderItem}

          keyExtractor={({id}, _index) => id}

/>

      </View>

接下來

Report abuse