ReactNativeとWordPressを使用したモバイルアプリの構築

公開: 2022-03-10
クイックサマリー↬WordPressは、特にコンテンツ主導型またはオンラインショップの場合、次のネイティブアプリの優れたバックエンドプラットフォームとして機能します。 この記事では、ReactNativeとWordPressを使用してモバイルアプリを構築するための基礎を学びます。

Web開発者として、モバイルアプリの開発には、別のプログラミング言語を使用した新しい学習曲線が必要だと思われたかもしれません。 おそらく、iOSとAndroidの両方で実行を開始するには、スキルセットにJavaとSwiftを追加する必要があり、それはあなたを困惑させる可能性があります。

しかし、この記事はあなたを驚かせます！ バックエンドとしてWooCommerceプラットフォームを使用して、iOSおよびAndroid用のeコマースアプリケーションを構築する方法を見ていきます。 これは、ネイティブのクロスプラットフォーム開発に積極的に参加する人にとって理想的な出発点になります。

クロスプラットフォーム開発の簡単な歴史

2011年で、ハイブリッドモバイルアプリの開発が始まります。 Apache Cordova、PhoneGap、IonicFrameworkなどのフレームワークが徐々に登場しています。 すべてが良さそうです。Web開発者は、既存の知識を使ってモバイルアプリを熱心にコーディングしています。

ただし、モバイルアプリは依然としてモバイル版のウェブサイトのように見えました。 AndroidのマテリアルデザインやiOSのフラットな外観のようなネイティブデザインはありません。 ナビゲーションはWebと同様に機能し、トランジションはスムーズではありませんでした。 ユーザーは、ハイブリッドアプローチを使用して構築されたアプリに満足せず、ネイティブエクスペリエンスを夢見ていました。

2015年3月に早送りすると、ReactNativeが登場します。 開発者は、多くの開発者に人気のJavaScriptライブラリであるReactを使用して、真にネイティブなクロスプラットフォームアプリケーションを構築できます。 彼らは、JavaScriptで知っていることに加えて、小さなライブラリを簡単に学ぶことができるようになりました。 この知識により、開発者は現在、Web、iOS、およびAndroidをターゲットにしています。

ジャンプした後もっと！ 以下を読み続けてください↓

さらに、開発中にコードに加えられた変更は、ほぼ瞬時にテストデバイスに読み込まれます。 他のアプローチによるネイティブ開発があった場合、これには数分かかりました。 開発者は、Web開発で気に入っていたフィードバックをすぐに楽しむことができます。

React開発者は、彼らが従った既存のパターンを新しいプラットフォームに完全に使用できることに満足しています。 実際、彼らはすでによく知っていることで、さらに2つのプラットフォームをターゲットにしています。

これはすべてフロントエンド開発に適しています。 しかし、バックエンドテクノロジーにはどのような選択肢がありますか？ 新しい言語やフレームワークを学ぶ必要がありますか？

WordPress REST API

2016年後半、WordPressは待望のREST APIをコアにリリースし、バックエンドが分離されたソリューションへの扉を開きました。

したがって、WordPressとWooCommerceのWebサイトを既にお持ちで、Webサイトとネイティブアプリ全体でまったく同じオファリングとユーザープロファイルを保持したい場合は、この記事が役に立ちます。

この記事でなされた仮定

WordPressスキルを使用して、ReactNativeを使用してWooCommerceストアでモバイルアプリを構築する方法を説明します。 この記事の前提は次のとおりです。

  • 少なくとも初心者レベルでは、さまざまなWordPressAPIに精通しています。
  • あなたはReactの基本に精通しています。
  • WordPress開発サーバーの準備ができています。 私はUbuntuとApacheを使用しています。
  • ExpoでテストするAndroidまたはiOSデバイスがあります。

このチュートリアルで構築するもの

この記事で構築するプロジェクトは、ファッションストアアプリです。 アプリには次の機能があります。

  • すべての商品を掲載したショップページ、
  • 選択したアイテムの詳細が記載された単一の製品ページ、
  • 「カートに追加」機能、
  • 「カートに商品を表示する」機能、
  • 「カートからアイテムを削除する」機能。

この記事は、React Nativeを使用して複雑なモバイルアプリを構築するための出発点として、このプロジェクトを使用するように促すことを目的としています。

注：完全なアプリケーションについては、Githubで私のプロジェクトにアクセスし、クローンを作成できます。

私たちのプロジェクトを始める

公式のReactNativeドキュメントに従ってアプリの構築を開始します。 開発環境にNodeをインストールしたら、コマンドプロンプトを開き、次のコマンドを入力して、Create React NativeAppをグローバルにインストールします。

 npm install -g create-react-native-app

次に、プロジェクトを作成できます

create-react-native-app react-native-woocommerce-store

これにより、Expoでテストできる新しいReactNativeプロジェクトが作成されます。

次に、テストするモバイルデバイスにExpoアプリをインストールする必要があります。 iOSとAndroidの両方で利用できます。

Expoアプリをインストールすると、開発マシンでnpmstartを実行できます。

 cd react-native-woocommerce-store npm start
Expoを介してコマンドラインからReactNativeプロジェクトを開始します。 （大プレビュー）

その後、ExpoアプリからQRコードをスキャンするか、アプリの検索バーに指定されたURLを入力できます。 これにより、モバイルで基本的な「HelloWorld」アプリが実行されます。 これで、App.jsを編集して、電話で実行されているアプリに即座に変更を加えることができます。

または、エミュレーターでアプリを実行することもできます。 ただし、簡潔さと正確さのために、実際のデバイスでの実行について説明します。

次に、次のコマンドを使用して、アプリに必要なすべてのパッケージをインストールしましょう。

 npm install -s axios react-native-htmlview react-navigation react-redux redux redux-thunk

WordPressサイトのセットアップ

この記事はReactNativeアプリの作成に関するものであるため、WordPressサイトの作成については詳しく説明しません。 UbuntuにWordPressをインストールする方法については、この記事を参照してください。 WooCommerce REST APIにはHTTPSが必要なため、Let'sEncryptを使用して設定されていることを確認してください。 ハウツーガイドについては、この記事を参照してください。

モバイルデバイスでアプリを実行するため、またHTTPSが必要なため、ローカルホストにWordPressインストールを作成していません。

WordPressとHTTPSが正常にセットアップされたら、WooCommerceプラグインをサイトにインストールできます。

WooCommerceプラグインをWordPressインストールにインストールします。 （大プレビュー）

プラグインをインストールしてアクティブ化した後、ウィザードに従ってWooCommerceストアのセットアップを続行します。 ウィザードが完了したら、[ダッシュボードに戻る]をクリックします。

別のプロンプトが表示されます。

サンプル製品をWooCommerceに追加します。 （大プレビュー）

「Let'sgo」をクリックして「Addexampleproducts」に移動します。 これにより、アプリに表示する独自の製品を作成する時間を節約できます。

定数ファイル

WooCommerce REST APIからストアの商品を読み込むには、アプリ内に関連するキーを配置する必要があります。 この目的のために、 constans.jsファイルを作成できます。

まず、「src」というフォルダを作成し、次のようにその中にサブフォルダを作成します。

constansフォルダー内にファイル「Constants.js」を作成します。 （大プレビュー）

それでは、WooCommerceのキーを生成しましょう。 WordPressダッシュボードで、WooCommerce→設定→API→キー/アプリに移動し、「キーの追加」をクリックします。

次に、ReactNativeという名前の読み取り専用キーを作成します。 次のように、ConsumerKeyとConsumerSecretをconstants.jsファイルにコピーします。

 const Constants = { URL: { wc: 'https://woocommerce-store.on-its-way.com/wp-json/wc/v2/' }, Keys: { ConsumerKey: 'CONSUMER_KEY_HERE', ConsumerSecret: 'CONSUMER_SECRET_HERE' } } export default Constants;

Reactナビゲーションから始める

React Navigationは、異なる画面間を移動するためのコミュニティソリューションであり、スタンドアロンライブラリです。 これにより、開発者は数行のコードでReactNativeアプリの画面を設定できます。

React Navigationには、さまざまなナビゲーション方法があります。

  • スタック、
  • スイッチ、
  • タブ、
  • 引き出し、
  • もっと。

このアプリケーションでは、 StackNavigationとDrawerNavigationの組み合わせを使用して、さまざまな画面間を移動します。 StackNavigationは、ブラウザの履歴がWeb上でどのように機能するかに似ています。 ヘッダーとヘッダーナビゲーションアイコンのインターフェイスを提供するため、これを使用しています。 データ構造のスタックと同様のプッシュとポップがあります。 プッシュとは、ナビゲーションスタックの一番上に新しい画面を追加することを意味します。 Popは、スタックから画面を削除します。

このコードは、 StackNavigationが実際にDrawerNavigationをそれ自体の中に格納していることを示しています。 また、ヘッダースタイルとヘッダーボタンのプロパティも取得します。 ナビゲーションドロワーボタンを左側に、ショッピングカートボタンを右側に配置しています。 引き出しボタンは引き出しのオンとオフを切り替えますが、カートボタンはユーザーをショッピングカート画面に移動させます。

 const StackNavigation = StackNavigator({ DrawerNavigation: { screen: DrawerNavigation } }, { headerMode: 'float', navigationOptions: ({ navigation, screenProps }) => ({ headerStyle: { backgroundColor: '#4C3E54' }, headerTintColor: 'white', headerLeft: drawerButton(navigation), headerRight: cartButton(navigation, screenProps) }) }); const drawerButton = (navigation) => ( <Text style={{ padding: 15, color: 'white' }} onPress={() => { if (navigation.state.index === 0) { navigation.navigate('DrawerOpen') } else { navigation.navigate('DrawerClose') } } }> ( <Text style={{ padding: 15, color: 'white' }} onPress={() => { navigation.navigate('CartPage') }} > <EvilIcons name="cart" size={30} /> {screenProps.cartCount} </Text> );  const StackNavigation = StackNavigator({ DrawerNavigation: { screen: DrawerNavigation } }, { headerMode: 'float', navigationOptions: ({ navigation, screenProps }) => ({ headerStyle: { backgroundColor: '#4C3E54' }, headerTintColor: 'white', headerLeft: drawerButton(navigation), headerRight: cartButton(navigation, screenProps) }) }); const drawerButton = (navigation) => ( <Text style={{ padding: 15, color: 'white' }} onPress={() => { if (navigation.state.index === 0) { navigation.navigate('DrawerOpen') } else { navigation.navigate('DrawerClose') } } }> ( <Text style={{ padding: 15, color: 'white' }} onPress={() => { navigation.navigate('CartPage') }} > <EvilIcons name="cart" size={30} /> {screenProps.cartCount} </Text> );

一方、 DrawerNavigationは、ホーム、ショップ、カートの間を移動できるサイドドロワーを提供します。 DrawerNavigatorには、ユーザーがアクセスできるさまざまな画面（ホームページ、製品ページ、製品ページ、カートページ）が一覧表示されます。 また、引き出しコンテナを取得するプロパティもあります。ハンバーガーメニューをクリックすると開くスライドメニューです。

 const DrawerNavigation = DrawerNavigator({ Home: { screen: HomePage, navigationOptions: { title: "RN WC Store" } }, Products: { screen: Products, navigationOptions: { title: "Shop" } }, Product: { screen: Product, navigationOptions: ({ navigation }) => ({ title: navigation.state.params.product.name }), }, CartPage: { screen: CartPage, navigationOptions: { title: "Cart" } } }, { contentComponent: DrawerContainer });
＃
左：ホームページ（ homepage.js ）。 右：開いているドロワー（DrawerContainer.js）。

ReduxストアをApp.jsに挿入する

このアプリではReduxを使用しているため、ストアをアプリに挿入する必要があります。 これは、 Providerコンポーネントを使用して行います。

 const store = configureStore(); class App extends React.Component { render() { return ( <Provider store={store}> <ConnectedApp /> </Provider> ) } }

次に、 ConnectedAppコンポーネントを作成して、ヘッダーにカート数を含めることができるようにします。

 class CA extends React.Component { render() { const cart = { cartCount: this.props.cart.length } return ( <StackNavigation screenProps={cart} /> ); } } function mapStateToProps(state) { return { cart: state.cart }; } const ConnectedApp = connect(mapStateToProps, null)(CA);

Reduxストア、アクション、およびレデューサー

Reduxには、次の3つの部分があります。

  1. 店
    アプリケーション全体の状態全体を保持します。 状態を変更する唯一の方法は、アクションをディスパッチすることです。
  2. 行動
    状態を変更する意図を表すプレーンオブジェクト。
  3. レデューサー
    状態とアクションタイプを受け入れ、新しい状態を返す関数。

Reduxのこれら3つのコンポーネントは、アプリ全体の予測可能な状態を実現するのに役立ちます。 簡単にするために、製品がどのように取得され、Reduxストアに保存されるかを見ていきます。

まず、ストアを作成するためのコードを見てみましょう。

 let middleware = [thunk]; export default function configureStore() { return createStore( RootReducer, applyMiddleware(...middleware) ); }

次に、製品アクションは、リモートWebサイトから製品をフェッチする役割を果たします。

 export function getProducts() { return (dispatch) => { const url = `${Constants.URL.wc}products?per_page=100&consumer_key=${Constants.Keys.ConsumerKey}&consumer_secret=${Constants.Keys.ConsumerSecret}` return axios.get(url).then(response => { dispatch({ type: types.GET_PRODUCTS_SUCCESS, products: response.data } )}).catch(err => { console.log(err.error); }) }; }

製品レデューサーは、データのペイロードと、データを変更する必要があるかどうかを返す責任があります。

 export default function (state = InitialState.products, action) { switch (action.type) { case types.GET_PRODUCTS_SUCCESS: return action.products; default: return state; } }

WooCommerceショップの表示

products.jsファイルはショップページです。 基本的にWooCommerceの製品リストを表示します。

 class ProductsList extends Component { componentDidMount() { this.props.ProductAction.getProducts(); } _keyExtractor = (item, index) => item.id; render() { const { navigate } = this.props.navigation; const Items = ( <FlatList contentContainerStyle={styles.list} numColumns={2} data={this.props.products || []} keyExtractor={this._keyExtractor} renderItem={ ({ item }) => ( <TouchableHighlight style={{ width: '50%' }} onPress={() => navigate("Product", { product: item })} underlayColor="white"> <View style={styles.view} > <Image style={styles.image} source={{ uri: item.images[0].src }} /> <Text style={styles.text}>{item.name}</Text> </View> </TouchableHighlight> ) } /> ); return ( <ScrollView> {this.props.products.length ? Items : <View style={{ alignItems: 'center', justifyContent: 'center' }}> <Image style={styles.loader} source={LoadingAnimation} /> </View> } </ScrollView> ); } }

this.props.ProductAction.getProducts()およびthis.props.productsは、 mapStateToPropsおよびmapDispatchToPropsにより可能です。

商品一覧画面。 （大プレビュー）

mapStateToPropsおよびmapDispatchToProps

StateはReduxストアであり、Dispatchは私たちが実行するアクションです。 これらは両方とも、コンポーネントの小道具として公開されます。

 function mapStateToProps(state) { return { products: state.products }; } function mapDispatchToProps(dispatch) { return { ProductAction: bindActionCreators(ProductAction, dispatch) }; } export default connect(mapStateToProps, mapDispatchToProps)(ProductsList);

スタイル

Reactでは、ネイティブスタイルは通常同じページで定義されます。 CSSに似ていますが、ハイフンでつながれたプロパティの代わりにcamelCaseのプロパティを使用します。

 const styles = StyleSheet.create({ list: { flexDirection: 'column' }, view: { padding: 10 }, loader: { width: 200, height: 200, alignItems: 'center', justifyContent: 'center', }, image: { width: 150, height: 150 }, text: { textAlign: 'center', fontSize: 20, padding: 5 } });

単一の製品ページ

このページには、選択した製品の詳細が含まれています。 製品の名前、価格、説明がユーザーに表示されます。 また、「カートに追加」機能もあります。

単一の製品ページ。 （大プレビュー）

カートページ

この画面には、カート内のアイテムのリストが表示されます。 アクションには、 getCart 、 addToCart 、およびremoveFromCartという関数があります。 レデューサーも同様にアクションを処理します。 アクションの識別は、actionTypes（別のファイルに格納されているアクションを記述する定数）を介して行われます。

 export const GET_PRODUCTS_SUCCESS = 'GET_PRODUCTS_SUCCESS' export const GET_PRODUCTS_FAILED = 'GET_PRODUCTS_FAILED'; export const GET_CART_SUCCESS = 'GET_CART_SUCCESS'; export const ADD_TO_CART_SUCCESS = 'ADD_TO_CART_SUCCESS'; export const REMOVE_FROM_CART_SUCCESS = 'REMOVE_FROM_CART_SUCCESS';

CartPageコンポーネントのコードは次のとおりです。

 class CartPage extends React.Component { componentDidMount() { this.props.CartAction.getCart(); } _keyExtractor = (item, index) => item.id; removeItem(item) { this.props.CartAction.removeFromCart(item); } render() { const { cart } = this.props; console.log('render cart', cart) if (cart && cart.length > 0) { const Items = <FlatList contentContainerStyle={styles.list} data={cart} keyExtractor={this._keyExtractor} renderItem={({ item }) => <View style={styles.lineItem} > <Image style={styles.image} source={{ uri: item.image }} /> <Text style={styles.text}>{item.name}</Text> <Text style={styles.text}>{item.quantity}</Text> <TouchableOpacity style={{ marginLeft: 'auto' }} onPress={() => this.removeItem(item)}><Entypo name="cross" size={30} /></TouchableOpacity> </View> } />; return ( <View style={styles.container}> {Items} </View> ) } else { return ( <View style={styles.container}> <Text>Cart is empty!</Text> </View> ) } } }

ご覧のとおり、カートアイテムを反復処理するためにFlatListを使用しています。 配列を取り込んで、画面に表示する項目のリストを作成します。

＃
左：アイテムが入っているカートページ。 右：空のカートページ。

結論

app.jsonファイルで、名前やアイコンなどのアプリに関する情報を構成できます。 このアプリは、npmがexpをインストールした後に公開できます。

総括する：

  • これで、ReactNativeを使用した適切なeコマースアプリケーションができました。
  • Expoを使用して、スマートフォンでプロジェクトを実行できます。
  • WordPressなどの既存のバックエンドテクノロジーを使用できます。
  • Reduxは、アプリ全体の状態を管理するために使用できます。
  • Web開発者、特にReact開発者は、この知識を活用してより大きなアプリを構築できます。

完全なアプリケーションについては、Githubの私のプロジェクトにアクセスしてクローンを作成できます。 気軽にフォークしてさらに改善してください。 演習として、次のような機能をプロジェクトに組み込み続けることができます。

  • チェックアウトページ、
  • 認証、
  • カートデータをAsyncStorageに保存して、アプリを閉じてもカートがクリアされないようにします。