ReactNativeで簡単な歩数計アプリを開発する

今日、プログラマーの輪の中で、ほとんど誰もがFacebookライブラリ-Reactについて知っています。

Reactはコンポーネントに基づいています。 これらはブラウザのDOM要素に似ており、HTMLではなくJavaScriptを使用して記述されています。 Facebookによると、コンポーネントを使用すると、インターフェースを1回作成してすべてのデバイスに表示できます。 ブラウザではすべてが明確になっています（これらのコンポーネントはDOM要素に変換されます）が、モバイルアプリケーションについてはどうでしょうか。 ここでも予測可能です。Reactコンポーネントはネイティブコンポーネントに変換されます。

この記事では、簡単な歩数計アプリケーションの開発方法を説明します。 ハイライトを示すコードが表示されます。 プロジェクト全体はGitHubへのリンクから入手できます 。

それでは始めましょう。

必要条件

iOS開発には、Xcodeを使用したOS Xが必要です。 Androidを使用すると、すべてがシンプルになります。Linux、OS X、Windowsから選択できます。 また、Android SDKをインストールする必要があります。 戦闘テストには、iPhoneとLollipopを搭載したAndroidスマートフォンが必要です。

プロジェクト構造の作成

最初に、プロジェクト構造を作成します。 アプリケーション内のデータを操作するために、フラックスの考え方、つまり実装としてReduxを使用します。 ルーターも必要です。 すぐにReduxをサポートするため、react-native-router-fluxをルーターとして選択しました。

Reduxについて一言。 Reduxは、アプリケーションの状態を保存するシンプルなライブラリです。 レンダリングレンダリングなど、状態の変化にイベントハンドラーをアタッチできます。 ビデオチュートリアルでreduxを理解することをお勧めします。

実装に取り​​かかりましょう。 npmを使用してreact-native-cliをインストールします。npmを使用して、プロジェクトでのすべての操作を引き続き実行します。

npm install -g react-native-cli 

次に、プロジェクトを作成します。

 react-native init AwesomeProject 

依存関係をインストールします。

 npm install 

その結果、iosおよびandroidフォルダーはプロジェクトのルートに作成され、それぞれのプラットフォームに「ネイティブ」ファイルがあります。 index.ios.jsおよびindex.android.jsファイルは、アプリケーションのエントリポイントです。

必要なライブラリをインストールします。

 npm install —save react-native-router-flux redux redux-thunk react-redux lodash 

ディレクトリ構造を作成します。

  app/ actions/ components/ containers/ constants/ reducers/ services/ 

アクションフォルダーには、ストア内のデータに何が起こるかを記述する関数が含まれます。
名前に基づいたコンポーネントには、個々のインターフェース要素のコンポーネントが含まれます。
コンテナには、アプリケーションの各ページのルートコンポーネントが含まれます。
定数-名前はそれ自身を表しています。
減速機には、いわゆる「減速機」があります。 これらは、受信したデータに応じてアプリケーションの状態を変更する関数です。

app / containersフォルダーにapp.jsを作成します。 アプリケーションのルート要素はreduxラッパーです。 すべてのルートは通常のコンポーネントとして登録されます。 初期プロパティは、アプリケーションの初期化時に機能するルートをルーターに指示します。 ルートのコンポーネントプロパティでは、ルートに切り替えるときに表示されるコンポーネントを渡します。

 app/containers/app.js <Provider store={store}> <Router hideNavBar={true}> <Route name="launch" component={Launch} initial={true} wrapRouter={true} title="Launch"/> <Route name="counter" component={CounterApp} title="Counter App"/> </Router> </Provider> 

app / containerディレクトリで、launch.jsを作成します。 launch.js-カウンターページに移動するためのボタンを持つ通常のコンポーネント。

 app/containers/launch.js import { Actions } from 'react-native-router-flux'; … <TouchableOpacity onPress={Actions.counter}> <Text>Counter</Text> </TouchableOpacity> 

アクション-各ルートにメソッドがあるオブジェクト。 そのようなメソッドの名前は、ルートのnameプロパティから取得されます。
ファイルapp / constants / actionTypes.jsで、可能なカウンターイベントについて説明します。

 export const INCREMENT = 'INCREMENT'; export const DECREMENT = 'DECREMENT'; 

app / actionsフォルダーで、内容を含むcounterActions.jsファイルを作成します。

 app/actions/counterActions.js import * as types from '../constants/actionTypes'; export function increment() { return { type: types.INCREMENT }; } export function decrement() { return { type: types.DECREMENT }; } 

増分および減分関数は、レデューサーに何が起こるかを記述します。 アクションに応じて、リデューサーはアプリケーションの状態を変更します。 initialState-リポジトリの初期状態を説明します。 アプリケーションが初期化されると、カウンターは0に設定されます。

 app/reducers/counter.js import * as types from '../constants/actionTypes'; const initialState = { count: 0 }; export default function counter(state = initialState, action = {}) { switch (action.type) { case types.INCREMENT: return { ...state, count: state.count + 1 }; case types.DECREMENT: return { ...state, count: state.count - 1 }; default: return state; } } 

counter.jsファイルには、カウンター値を増減するための2つのボタンが含まれており、現在の値も表示されます。

 app/components/counter.js const { counter, increment, decrement } = this.props; … <Text>{counter}</Text> <TouchableOpacity onPress={increment} style={styles.button}> <Text>up</Text> </TouchableOpacity> <TouchableOpacity onPress={decrement} style={styles.button}> <Text>down</Text> </TouchableOpacity> 

イベントハンドラとカウンタ値自体は、コンテナコンポーネントから渡されます。 以下を検討してください。

 app/containers/counterApp.js import React, { Component } from 'react-native'; import {bindActionCreators} from 'redux'; import Counter from '../components/counter'; import * as counterActions from '../actions/counterActions'; import { connect } from 'react-redux'; class CounterApp extends Component { constructor(props) { super(props); } render() { const { state, actions } = this.props; return ( <Counter counter={state.count} {...actions} /> ); } } /*      .   props.state     */ export default connect(state => ({ state: state.counter }), /*    .      props.actions.increment()  props.actions.decrement() */ (dispatch) => ({ actions: bindActionCreators(counterActions, dispatch) }) )(CounterApp); 

その結果、必要なコンポーネントを含む簡単なアプリケーションができました。 このアプリケーションは、ReactNativeを使用して開発されたアプリケーションの基礎として使用できます。

チャート

歩数計アプリケーションを開発しているため、それに応じて、測定結果を表示する必要があります。 最良の方法は、私には思えるが、チャートです。 したがって、単純な棒グラフを作成します。Y軸はステップ数を示し、Xは時間を示します。

ReactNativeはそのままではcanvasをサポートしていません。さらに、canvasを使用するにはwebviewが必要です。 したがって、2つのオプションがあります。各プラットフォームのネイティブコンポーネントを記述するか、コンポーネントの標準セットを使用します。 最初のオプションは最も労働集約的ですが、その結果、生産的で柔軟なソリューションが得られます。 2番目のオプションについて説明します。

データを表示するには、オブジェクトの配列の形式でコンポーネントにデータを転送します。

 [ { label, //     X value, //  color //   } ] 

3つのファイルを作成します。

 app/components/chart.js app/components/chart-item.js app/components/chart-label.js 

以下は、チャートのメインコンポーネントのコードです。

 app/components/chart.js import ChartItem from './chart-item'; import ChartLabel from './chart-label'; class Chart extends Component { constructor(props) { super(props); let data = props.data || []; this.state = { data: data, maxValue: this.countMaxValue(data) } } /*        .*/ countMaxValue(data) { return data.reduce((prev, curn) => (curn.value >= prev) ? curn.value : prev, 0); } componentWillReceiveProps(newProps) { let data = newProps.data || []; this.setState({ data: data, maxValue: this.countMaxValue(data) }); } /*       */ renderBars() { return this.state.data.map((value, index) => ( <ChartItem value={value.value} color={value.color} key={index} barInterval={this.props.barInterval} maxValue={this.state.maxValue}/> )); } /*        */ renderLabels() { return this.state.data.map((value, index) => ( <ChartLabel label={value.label} barInterval={this.props.barInterval} key={index} labelFontSize={this.props.labelFontSize} labelColor={this.props.labelFontColor}/> )); } render() { let labelStyles = { fontSize: this.props.labelFontSize, color: this.props.labelFontColor }; return( <View style={[styles.container, {backgroundColor: this.props.backgroundColor}]}> <View style={styles.labelContainer}> <Text style={labelStyles}> {this.state.maxValue} </Text> </View> <View style={styles.itemsContainer}> <View style={[styles.polygonContainer, {borderColor: this.props.borderColor}]}> {this.renderBars()} </View> <View style={styles.itemsLabelContainer}> {this.renderLabels()} </View> </View> </View> ); } } /*     */ Chart.propTypes = { data: PropTypes.arrayOf(React.PropTypes.shape({ value: PropTypes.number, label: PropTypes.string, color: PropTypes.string })), //    barInterval: PropTypes.number, //    labelFontSize: PropTypes.number, //      labelFontColor: PropTypes.string, //      borderColor: PropTypes.string, //   backgroundColor: PropTypes.string //    } export default Chart; 

グラフ列を実装するコンポーネント：

 app/components/chart-item.js export default class ChartItem extends Component { constructor(props) { super(props); this.state = { /*    ,     */ animatedTop: new Animated.Value(1000), /*       */ value: props.value / props.maxValue } } componentWillReceiveProps(nextProps) { this.setState({ value: nextProps.value / nextProps.maxValue, animatedTop: new Animated.Value(1000) }); } render() { const { color, barInterval } = this.props; /*        */ Animated.timing(this.state.animatedTop, {toValue: 0, timing: 2000}).start(); return( <View style={[styles.item, {marginHorizontal: barInterval}]}> <Animated.View style={[styles.animatedElement, {top: this.state.animatedTop}]}> <View style={{flex: 1 - this.state.value}} /> <View style={{flex: this.state.value, backgroundColor: color}}/> </Animated.View> </View> ); } } const styles = StyleSheet.create({ item: { flex: 1, overflow: 'hidden', width: 1, alignItems: 'center' }, animatedElement: { flex: 1, left: 0, width: 50 } }); 

データ署名コンポーネントコード：

 app/components/chart-label.js export default ChartLabel = (props) => { const { label, barInterval, labelFontSize, labelColor } = props; return( <View style={[{marginHorizontal: barInterval}, styles.label]}> <View style={styles.labelWrapper}> <Text style={[styles.labelText, {fontSize: labelFontSize, color: labelColor}]}> {label} </Text> </View> </View> ); } 

その結果、コンポーネントの標準セットを使用して実装された単純なヒストグラムを得ました。

歩数計

ReactNativeは、ネットワークからデータを取得して表示する単純なアプリケーションを作成するための基本的なツールセットのみを備えたかなり若いプロジェクトです。 ただし、タスクがデバイス自体でデータを生成することである場合、プラットフォーム固有の言語でモジュールを作成する必要があります。

この段階では、歩数計を作成する必要があります。 Objective-CとJava、およびデバイスAPIを知らなければ、これを行うことは困難ですが、可能です。すべては時間に依存します。 幸いなことに、Apache CordovaやAdobe PhoneGapなどのプロジェクトがあります。 彼らはかなり前から市場に出ており、コミュニティは彼らのために多くのモジュールを書いてきました。 これらのモジュールは簡単に移植して対応できます。 すべてのロジックは変更されず、インターフェイス（ブリッジ）を書き換えるだけで済みます。

IOSには、アクティビティデータを取得するための優れたAPI（HealthKit）があります。 Appleには優れたドキュメントがあり、通常の単純なタスクの実装も含まれています。 Androidは別の状況です。 私たちが持っているのはセンサーのセットだけです。 さらに、ドキュメントには、API 19以降、ステップセンサーデータを取得できることが記載されています。 膨大な数のデバイスがAndroidで動作し、真の中国メーカー（有名ブランドを含む）だけでなく、主要なセンサーセット（加速度計、周囲光センサー、近接センサー）のみをインストールしています。 したがって、Android 4.4以降とステップセンサーを備えたデバイス（および古いデバイス）については、コードを個別に記述する必要があります。 これにより、測定の精度が向上します。

実装に取り​​かかりましょう。

すぐに予約します。 コードの品質をおaびします。 私はこれらのプログラミング言語に最初に出くわし、時間がなくなると直感的なレベルで理解する必要がありました。

iOS

コンテンツを含む2つのファイルを作成します。

 ios/BHealthKit.h #ifndef BHealthKit_h #define BHealthKit_h #import <Foundation/Foundation.h> #import "RCTBridgeModule.h" @import HealthKit; @interface BHealthKit : NSObject <RCTBridgeModule> @property (nonatomic) HKHealthStore* healthKitStore; @end #endif /* BHealthKit_h */ ios/BHealthKit.m #import "BHealthKit.h" #import "RCTConvert.h" @implementation BHealthKit RCT_EXPORT_MODULE(); - (NSDictionary *)constantsToExport { NSMutableDictionary *hkConstants = [NSMutableDictionary new]; NSMutableDictionary *hkQuantityTypes = [NSMutableDictionary new]; [hkQuantityTypes setValue:HKQuantityTypeIdentifierStepCount forKey:@"StepCount"]; [hkConstants setObject:hkQuantityTypes forKey:@"Type"]; return hkConstants; } /*         HealthKit */ RCT_EXPORT_METHOD(askForPermissionToReadTypes:(NSArray *)types callback:(RCTResponseSenderBlock)callback){ if(!self.healthKitStore){ self.healthKitStore = [[HKHealthStore alloc] init]; } NSMutableSet* typesToRequest = [NSMutableSet new]; for (NSString* type in types) { [typesToRequest addObject:[HKQuantityType quantityTypeForIdentifier:type]]; } [self.healthKitStore requestAuthorizationToShareTypes:nil readTypes:typesToRequest completion:^(BOOL success, NSError *error) { /*   ,    callback   null,    */ if(success){ callback(@[[NSNull null]]); return; } /*    callback   */ callback(@[[error localizedDescription]]); }]; } /*        .     ,  –   ,   – callback */ RCT_EXPORT_METHOD(getStepsData:(NSDate *)startDate endDate:(NSDate *)endDate cb:(RCTResponseSenderBlock)callback){ NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init]; NSLocale *enUSPOSIXLocale = [NSLocale localeWithLocaleIdentifier:@"en_US_POSIX"]; NSPredicate *predicate = [HKQuery predicateForSamplesWithStartDate:startDate endDate:endDate options:HKQueryOptionStrictStartDate]; [dateFormatter setLocale:enUSPOSIXLocale]; [dateFormatter setDateFormat:@"yyyy-MM-dd'T'HH:mm:ssZZZZZ"]; HKSampleQuery *stepsQuery = [[HKSampleQuery alloc] initWithSampleType:[HKQuantityType quantityTypeForIdentifier:HKQuantityTypeIdentifierStepCount] predicate:predicate limit:2000 sortDescriptors:nil resultsHandler:^(HKSampleQuery *query, NSArray *results, NSError *error) { if(error){ /*      ,     callback */ callback(@[[error localizedDescription]]); return; } NSMutableArray *data = [NSMutableArray new]; for (HKQuantitySample* sample in results) { double count = [sample.quantity doubleValueForUnit:[HKUnit countUnit]]; NSNumber *val = [NSNumber numberWithDouble:count]; NSMutableDictionary* s = [NSMutableDictionary new]; [s setValue:val forKey:@"value"]; [s setValue:sample.sampleType.description forKey:@"data_type"]; [s setValue:[dateFormatter stringFromDate:sample.startDate] forKey:@"start_date"]; [s setValue:[dateFormatter stringFromDate:sample.endDate] forKey:@"end_date"]; [data addObject:s]; } /*   ,  callback,    null,    ,   –  . */ callback(@[[NSNull null], data ]); }]; [self.healthKitStore executeQuery:stepsQuery]; }; @end 

次に、これらのファイルをプロジェクトに追加する必要があります。 Xcodeを開き、ルートディレクトリを右クリック->「プロジェクト名」にファイルを追加します。 [機能]セクションで、HealthKitを有効にします。 次に、[全般]-> [リンクされたフレームワークとライブラリ]セクションで、[+]をクリックしてHealthKit.frameworkを追加します。

ネイティブ部分が完成しました。 さらに、プロジェクトのjs部分のデータの取得に直接進みます。
ファイルapp / services / health.ios.jsを作成します。

 app/services/health.ios.js /*    . BHealthKit   ,     BHealthKit.m */ const { BHealthKit } = React.NativeModules; let auth; //     function requestAuth() { return new Promise((resolve, reject) => { BHealthKit.askForPermissionToReadTypes([BHealthKit.Type.StepCount], (err) => { if (err) { reject(err); } else { resolve(true); } }); }); } //   . function requestData() { let date = new Date().getTime(); let before = new Date(); before.setDate(before.getDate() - 5); /*         ,    .*/ return new Promise((resolve, reject) => { BHealthKit.getStepsData(before.getTime(), date, (err, data) => { if (err) { reject(err); } else { let result = {}; /*           */ for (let val in data) { const date = new Date(data[val].start_date); const day = date.getDate(); if (!result[day]) { result[day] = {}; } result[day]['steps'] = (result[day] && result[day]['steps'] > 0) ? result[day]['steps'] + data[val].value : data[val].value; result[day]['date'] = date; } resolve(Object.values(result)); } }); }); } export default () => { if (auth) { return requestData(); } else { return requestAuth().then(() => { auth = true; return requestData(); }); } } 

Android

コードは膨大であることが判明したため、作業の原則を説明します。

Android SDKはストレージを提供せず、一定期間データを取得できるストレージにアクセスしますが、リアルタイムでデータを受信する機能のみを提供します。 このために、常にバックグラウンドで動作し、必要なタスクを実行するサービスが使用されます。 一方で、非常に柔軟性がありますが、20個の歩数計がデバイスにインストールされ、各アプリケーションには、残りの19と同じタスクを実行する独自のサービスがあるとしましょう。

私たちは2つのサービスを実現します：ステップセンサーのあるデバイスとないデバイス用です。 これらはandroid / app / src / main / java / com / awesomeproject / pedometer / StepCounterService.javaおよびandroid / app / src / main / java / com / awesomeproject / pedometer / StepCounterOldService.javaファイルです。

ファイルandroid / app / src / main / java / com / awesomeproject / pedometer / StepCounterBootReceiver.javaで、デバイスの起動時に、デバイスに応じてどのサービスが起動されるかを説明します。

ファイルandroid / app / src / main / java / com / awesomeproject / RNPedometerModule.javaおよびRNPedometerPackage.javaで、reactとのアプリケーション接続を実装します。

Android / app / src / main / AndroidManifest.xmlに行を追加して、センサーを使用する許可を取得します

 <uses-feature android:name="android.hardware.sensor.stepcounter" android:required="true"/> <uses-feature android:name="android.hardware.sensor.stepdetector" android:required=“true"/> <uses-feature android:name="android.hardware.sensor.accelerometer" android:required="true" />      ,    ,       . <application> … <service android:name=".pedometer.StepCounterService"/> <service android:name=".pedometer.StepCounterOldService" /> <receiver android:name=".pedometer.StepCounterBootReceiver"> <intent-filter> <action android:name="android.intent.action.BOOT_COMPLETED" /> </intent-filter> </receiver> </application> 

モジュールをアプリケーションに接続し、アプリケーションの起動時にサービスを開始します。

 android/app/src/main/java/com/awesomeproject/MainActivity.java … protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), new RNPedometerPackage(this) ); } … @Override public void onCreate(Bundle bundle) { super.onCreate(bundle); Boolean can = StepCounterOldService.deviceHasStepCounter(this.getPackageManager()); /*      ,      */ if (!can) { startService(new Intent(this, StepCounterService.class)); } else { /*     */ startService(new Intent(this, StepCounterOldService.class)); } } 

javascriptパーツからデータを取得します。 ファイルapp / services / health.android.jsを作成します
const Pedometer = React.NativeModules.PedometerAndroid;

 export default () => { /*      ,     . */ return new Promise((resolve, reject) => { Pedometer.getHistory((result) => { try { result = JSON.parse(result); //      result = Object.keys(result).map((key) => { let date = new Date(key); date.setHours(0); return { steps: result[key].steps, date: date } }); resolve(result); } catch(err) { reject(err); }; }, (err) => { reject(err); }); }); } 

その結果、health.ios.jsとhealth.android.jsの2つのファイルを取得しました。これらのファイルは、ネイティブプラットフォームモジュールからユーザーアクティビティの統計情報を受け取ります。 さらに、アプリケーション内のどこでも、式：

 import Health from '<path>health'; 

React Nativeは、ファイルプレフィックスに基づいて目的のファイルをマウントします。 これで、迷うことなくこの関数を使用できます。アプリケーションはiOSまたはAndroidで実行されています。

その結果、単純な歩数計アプリケーションを作成し、独自のアプリケーションを開発する際に通過する必要がある主要なポイントを調べました。

最後に、ReactNativeの利点と欠点を強調したいと思います。

利点：

1. JavaScriptの経験がある開発者は、簡単にアプリケーションを作成できます。
2. 1つのアプリケーションを開発すると、すぐにAndroidとIOSで実行する機会が得られます。
3. ReactNativeには、多くの場合、すべての要件をカバーする実装済みコンポーネントのかなり大きなセットがあります。
4. さまざまなモジュールを迅速に作成しているアクティブなコミュニティ。

短所：

1. 同じコードが両方のプラットフォームで常にスムーズに機能するとは限りません（多くの場合、表示の問題）
2. 特定のタスクのために、多くの場合、実装されたモジュールがなく、自分でそれらを記述する必要があります。
3. パフォーマンス。 PhoneGapやCordovaと比較すると、反応は非常に高速ですが、ネイティブアプリケーションの方が高速です。

ReactNativeを選択するのが適切なのはいつですか？

サーバーからデータを受信して​​表示する単純なアプリケーションを開発する必要がある場合、選択は明らかです。 クールなデザインを実装するタスクに直面している場合、パフォーマンスが重要であるか、市販のコンポーネントを使用して解決するのが難しいタスクがある場合は、検討する価値があります。 ほとんどはプラットフォームのネイティブ言語で作成する必要があるため、これからピラミッドを構築することは間違いなく最良の選択肢ではありません。

ご清聴ありがとうございました。

作成者： greebn9k （Sergey Gribnyak）、 boozzd （Dmitry Shapovalenko ）、 silmarilion （Andrey Khakharev）