建物の買い物アプリ-日1

Disclaimer: This is not a tutorial

これはちょうど私がログ/ドキュメントをShopifyアプリを構築し、うまくいけば、それを起動するドキュメントをログにしようとしている🤞

何を建てているのですか。

私はいくつかの良い進歩をするまで、アプリのアイデアを明らかにしないことを決めた.それには十分な理由がある.Shopifyアプリ市場は急速に成長しており、人々は常にアプリを作り、それらを販売するアイデアを探しています.
まあ、それは私は次の画期的なアプリを構築しようとしている私のようではない😅 ちょうどそれを安全に再生しようとすると、最初.
私はアイデアについていくつかの研究を行う上でいくつかの時間を費やしている、どのように動作しますか?どのような問題を解決するのですか?といくつかの他の質問.私は信じて、誰もがプロジェクトを開始する前に行う必要があります.

Teaser: This app has something to do with offering discounts 🙈

どのようなツールを使用する計画ですか？

私はlaravelのfanboyであるので、疑いなく、バックエンドはラーラベルと一緒に構築されます.

APP UIの

、私は使用する準備ができている成分を反応させるShopify Polarisを使用しています.

フロントエンドとバックエンドの間のコミュニケーションのための

は、Inertia.jsを使います.そのものすごいものすごい.

誰かがtypescriptと言いましたか?👨🏽‍💻 まあ、多分!

Day 1の進捗時間

は、新しいラーラヴェルプロジェクト

をセットアップします
Shopify Partners Dashboardで新しいアプリをセットアップして、API資格情報を得てください

App name becomes URI of the app in Shopify Admin when a merchant opens the app. Therefore, I tend to create 3 apps on partner dashboard ( appname, appname-local, appname-staging) to reserve the appname as URI )

を必要とセットアップlaravel-shopifyパッケージ私は本当にSafify Authとより多くのとすぐに開始を取得します.

セットアップのためのLaravel Shopify Wikiページからのドキュメンテーションの後の

.

裸の最小限のアプリはShopify開発店にインストールされて

次に、私は反応を準備して、ポラリスを買い物します.また、app.scssファイルでポラリススタイルを輸入してください.

これは混乱した部分(私は思う)ですので、私はちょうどいくつかのコードを共有します.

我々がそれにいる間、慣性と慣性はアダプターに反応します.

アプリ.js
エントリポイントファイル

import React from 'react';
import { render } from 'react-dom';
import { App } from '@inertiajs/inertia-react';

const el = document.getElementById('app');

render(
    <App
        initialPage={JSON.parse(el.dataset.page)}
        resolveComponent={(name) =>
            import(`./Pages/${name}`).then((module) => module.default)
        }
    />,
    el,
);

Make sure to create Pages directory under resources/js

webpackミックス.js

const mix = require('laravel-mix');
const path = require('path');

mix.react('resources/js/app.js', 'public/js')
    .sass('resources/css/app.scss', 'public/css')
    .webpackConfig((webpack) => {
        return {
            output: {
                chunkFilename: 'js/[name].js?id=[chunkhash]',
            },
            resolve: {
                alias: {
                    '@': path.resolve('resources/js'),
                },
            },
        };
    });

アプリ.SCSS

@import '~@shopify/polaris/dist/styles.css';

慣性を設置.バックエンドのためのJS laravelアダプタ.

は、NPM実行腕時計が走っていなかったとわかるためにだけ20分を費やしました🤦🏽‍♂️ (おそらく眠る必要がある)

まあ、ここでは反応+ポラリス+慣性と基本的なShopifyアプリです.ララベル

今日のサインオフ.😴
私は、ララベルについてつぶやき、買い物をして、ものを反応させます.これのいずれかがあなたのものであるならば、あなたはツイッターでありえます.