ReactNative x shopfiy storefrontでネイティブアプリのテンプレート作ったので誰か興味ないですか？
対象者
- 自社でshopfiyで運営していて、ネイティブアプリが欲しいと思っている方
- 既存のアプリ（ReactNativeで開発されている）にECなどの機能をつけたい方
- これからECを始めたい方でアプリも欲しい方
- ReactNativeでShopifyを連携するのがわからない方(お話とか気軽にしましょう)
この記事の背景
ブランドのECでShopifyなどを使っている方に使ってもらいたい
前提としてECの最低限の機能あればいいとかであれば、appfiyなどのサービスがあるのでそっちの方がおすすめだと思います。エンジニアが自社にいて、独自機能を開発したい・ブランドとして世界観(UIやビジュアルなど)を大事にしたいなので、運用として足りないなどの課題が既存サービスであるのならこのコードをベースにどんどん拡張していく前提で使ってみてもらいたいなと思いました。
自分自身も開発のサポートは副業にはなりますができたりします。
ソースコードを売る・zennなどのサービスで書籍として売る
多少時間かけて開発したので下記の記事をみて何か使い道ないかなとか思ったりしました
個人開発アプリのソースコード売れました - その後のその後
ポートフォリオ目的
ReactNativeの開発者を副業で探してる方連絡ください
本業を今すごく頑張りたいですが、興味ある業界などであれば副業もしてみたいです
希望としてはデザイナーの方に近いポジションでお仕事がしたいです。
技術スタック
- ReactNative
- Expo
- shopfiy storefront api
- apollo client (上記がgraphQLなため)
コードをクローンしてshopfiy storefront apiのtokenを紐付けたら最低限のECのアプリができる状態です。(特別難しいことはしておらず、expo使っているのである程度Reactが書けたらコードの変更・新機能の追加はできそうです)
下記の二つを切り替えることによってshopごとの情報が取得できるようになっています
STOREFRONT_API_URL
https:// {自分のshop名 }.myshopify.com/api/graphql.json
STOREFRONT_ACCESS_TOKEN
store frontのアクセストークン
import { ApolloClient, InMemoryCache } from "@apollo/client";
import { STOREFRONT_ACCESS_TOKEN, STOREFRONT_API_URL } from "@env";
const client = new ApolloClient({
uri: STOREFRONT_API_URL,
headers: {
"X-Shopify-Storefront-Access-Token": STOREFRONT_ACCESS_TOKEN,
},
cache: new InMemoryCache(),
});
export default client;
デザイン (イメージ)
最初に構想していた物なのでできてない部分も多々あるのでご了承ください🙇♂️
今回実装していること
- トップ画面
- コレクション詳細
- プロフィール画面
- 検索・カテゴリー一覧画面
- カテゴリー詳細
- 商品詳細
- カート画面
- 商品詳細
- 決済機能
トップ画面
Store front Api
collection
Shopfiyの管理画面
概要・説明
コレクションと商品タイプに関してはECモール的なブロダクトを想定して、いろんなブランドが入る可能性があったので、ブランドロゴなどを登録したいなどの要件が出そうだったので画像と紐付けができるコレクションにしたが検索画面にある商品タイプにも画像が欲しいと思っているのでアプリの要件によっては将来的に変えるかも
実際の画像
コレクション詳細
Store front Api
collectionByHandle
Shopfiyの管理画面
概要・説明
ECモールであればコレクションの画像部分にブランドやショップのロゴや画像を入れて
ページを作ったりできるなと思ったりしてます。
実装画像
プロフィール画面・認証周り
Store front api
customer
Shopfiyの管理画面
概要・説明
メールアドレスとユーザーネームを登録ができます
ユーザータイプなどがadminのapiを使わないと登録できないなどがあるので将来的には
adminのapiを使って、新規登録時にユーザーのタイプを分けて登録して、広告やマーケティングがしやすいようにしたいなと思ってます
実際の画像
検索・カテゴリー一覧画面
Store front api
productTypes
Shopfiyの管理画面
概要・説明
商品タイプ別をカテゴリーという概念で表示しています
一般的に商品タイプという感じで表示するよりカテゴリーという名前の方が理解しやすいと思ったからです。
検索に関しては見た目だけでUIはできてますが裏側の処理ができてないので実質今は飾り状態です
今後は実装頑張ります
実際の画像
カテゴリー詳細
Store front api
products : query { product_type }
概要・説明
productsのqueryの引数でproduct_typeをreactnative navigationのparamsを使って渡してる感じです
実際の画像
商品詳細
Store front api
productByHandle
Shopfiyの管理画面
概要・説明
テーブル
独自実装
tableL|40|40|40|40|M|30|30|30|30|S|20|20|20|20
上記を商品説明の中に入れてtableから下のテキストを処理で回してtableを無理やり作ってます
既存のshopfiyの関連アプリなどはhtmlなどでweb用にできていたりするし、月額料金がかかりそうだったので使ってないです。
商品の属性によっては使い勝手が良くない実装の要件になっているのでここもアップデート対象です。
カラー
オプションで固定の値にして自作しているオブジェクトに入れてます
UIの構成上このようにしてますが時間かけたら管理画面の入力の項目をわざわざ統一する必要もなくなると思います。
export const ProductColor = {
ホワイト: {
code: "#ffffff",
name: "ホワイト",
},
ブラック: {
code: "#000000",
name: "ブラック",
},
レッド: {
code: "#FF000A",
name: "レッド",
}
}
実際の画像
| 上 | 下 |
|---|---|
 |
 |
カート画面
Store front api
cart
実際の画像
決済機能
Store front api
cart
概要・説明
cartがcheckouturlという値を持っているのでそれを
WebViewで飛ばしているので実際のshopfiyのwebと変わらない画面になります
実際に自分で運営しているshopで決済ができたので大丈夫だと思います
購入履歴
Store front api
orders
Shopfiyの管理画面
概要・説明
ユーザーと紐づているordersから取得
厳密に配送ステータスまではまだ出しわけなどができてないので
できる範囲でやっていこうと思います
実際の画像
まとめ
テストフライトまでやっているわけではないので決済周りでappleの審査が通らない場合などは対応を考える必要はありそうです。
しかし物販などの実際にアプリ外で製品が届くサービスなどは確か大丈夫だったような、、
他にもまだ運用として使用したことないのでapi通信の上限やセキュリティ的に大丈夫なのかなどは
詳しい友人に相談しながらやっていけたらと思ってます
ここまで読んで興味ある方は気軽に連絡ください
Discussion