福岡都市圏共通フォーマットオープンデータを使ったアプリ開発のハンズオンセミナーの資料

1. 71
O / 0
IP
L
1

2. https://odcs.bodik.jp/fukuoka-toshiken/
LOD
1
0
2

3. 3

4. • Expo
• Expo
• React Native
• SDK
• React Native
• JavaScript React
• HTML5
• React UI
• Snack
• Expo
• Web
• Codepen JSFiddle
•
4

5. •
•
•
•
5

6. ü
•
•
6

7. 7

8. • Expo
• https://expo.io/
•
• iOS App Store Expo Client
• Nametag
• Android Google Play Expo
• Expo Project
8

9. 1.
• https://snack.expo.io/
2.
3. Run on device
• QR
• iOS
QR
4.
5.
iOS
9

10. 1. App.js View
2.
3. assets components
4.
• SearchEvacuationSpot
•
• https://snack.expo.io/@tygoto/empty
10

11. 11

12. • https://snack.expo.io/@tygoto/map_step1
1.
• MapComponent.js
MapComponent.js
• MapView
• MapView Expo SDK
• react-native-maps
• react-native-maps github
2.
• App.js View
MapComponent
View
MapComponent
MapViewState
View
12

13. •
•
•
• React UI
• React React.Component
Functional
• React Props
•
UI
13

14. • https://snack.expo.io/@tygoto/map_step2
• MapComponent
1.
• Permissions.askAsync(Permissions.LOCATION)
2.
• Location.getCurrentPositionAsync
3.
• state location
• MapView.Marker
• (state) Map
14

15. state
• state
• state
• render
• setState
• state
•
• shouldComponentUpdate
shouldComponentUpdate(nextProps, nextState){
if (this.state.region !== nextState.region){
return false; //
}
return true; //
}
15

16. 16

17. • CKAN
• https://snack.expo.io/@tygoto/data_step1
1.
• Data.js
•
• Key
convertKey
•
2. CKAN
• fetch CKAN API
3.
• Snack
17

18. CKAN API
• datastore API
• {CKAN_URL}/api/action/datastore_search?resource_id={RES
OURCE_ID}
• JSON
• 100
• limit 100
• ID CKAN
• https://odcs.bodik.jp/fukuoka-toshiken/
•
•
•
• URL resource ID
• http://data.bodik.jp/dataset/401307_ftoshiken_hinanjo_hinanbasho/reso
urce/ac92ac54-8613-4d35-afda-aab28305b20b
18

19. •
• https://snack.expo.io/@tygoto/data_step2
1. state
• state records
2.
• records MapView.Marker
• LIMIT 1000
19

20. •
• https://snack.expo.io/@tygoto/data_step3
1.
• package.js
• react-navigation ver. 2.17.0
2.
• DetailComponent.jp
3.
• App.js MapStack
4.
• onPress
5.
6. 20

21. •
• React Native iOS
• React Navigation React Native Navigation
• React Navigation
• https://reactnavigation.org/
•
const MapStack = createStackNavigator({
Map: MapContainer,
Details: DetailComponent,
}, {
initialRouteName: 'Map',
});
this.props.navigation.navigate('Details', {fields: this.state.fields, record})
DetailComponent
static navigationOptions = () => ({
header: null,
}); header
•
•
21

22. 22

23. • SQLite
• https://snack.expo.io/@tygoto/search_step1
1.
• DB.js
2.
3.
• CKAN
4.
• record
23

24. SQLite
• RDBMS
• DB
• Expo SDK
•
• SQL
• tx.executeSql(sqlStatement, arguments, success, error)
let name = ‘anzu’;
let age = 0.6;
db.transaction(
tx => {
tx.executeSql('insert into pets (name, age) values (?, ?)’, [name, age]);
}
, null, null);
SQL
24

25. • ES2015(ES6) Promise, ES2017(ES8)
async/await
extract(‘test.txt’, function(data1){
transform(data1, function(data2){
load(data2, function(data3){
console.log(‘done: ’, data3);
});
});
});
var promise = Promise.resolve();
promise
.then(()=> extract(‘text.txt’));
.then(data1=> transform(data1))
.then(data2=> load(data2))
.then((data3)=> console.log(‘done: , data3 ’))
async ()=>{
let data1 = await extract(‘test.txt’);
let data2 = await transform(data1);
let data3 = await load(data2);
console.log(‘done: ’, data3);
}
ES5
25

26. •
• https://snack.expo.io/@tygoto/search_step2
1.
•
• ButtonComponent.js
•
• Data.js
•
• ModalComponent.js
•
2.
•
•
3. state records
26

27. • React Native
•
• UI
• UI
• NativeBase
• https://nativebase.io/
• React Native Elements
• https://react-native-training.github.io/react-native-elements/
• React Native UI Kitten
• https://akveo.github.io/react-native-ui-kitten/#/home
27

28. •
•
•
•
•
•
•
•
• Expo SDK
• SMS AR
• SDK
• https://docs.expo.io/versions/v30.0.0/sdk/
•
28