前回はデモ環境を構築するための前提条件の紹介、そして OrderCloud のアカウントの作成まで紹介をしました。今回は、デモ環境のサンプルソースコードを手元に準備して GitHub のリポジトリと連携するところまで紹介をします。
Headstart リポジトリをコピーする
Headstart のリポジトリは Sitecore とは別で OrderCloud のアカウントが提供しています。URL は以下の通りです。
サイトにアクセスをして、Code のボタンをクリック、Download Zip のボタンをクリックしてリポジトリのデータを Zip ファイルとしてダウンロードしてください。
ダウンロードした zip ファイルを c:¥projects¥Headstart というフォルダに展開をします。
続いてこのフォルダをローカルのリポジトリとして、かつ GitHub のリポジトリにもアップロードします。この部分は Git のコマンドに慣れている人であればコマンドで実行してください。ここでは GitHub Desktop を利用して手順を進めていきます。 GitHub Desktop を立ち上げて、File - Add local repository のメニューを選択します。以下のような画面となります。
ここではローカルのリポジトリを作るために、create a repository をクリックします。クリックをするとダイアログが変更されて次のようになります。
ここではデフォルトのまま Create repository のボタンをクリックします。これで c:¥projects¥Headstart のディレクトリがローカルのリポジトリとなります。すでに GitHub のアカウントと連携している状況であれば、処理が終わると以下の画面となります。
Publish repository のボタンをクリックすると以下のダイアログが表示されます。
今回はプライベートリポジトリとして GitHub にコードをアップロードするため、チェックを入れたまま publish repository のボタンをクリックしてください。しばらくすると、GitHub にリポジトリが作成されます。
これでデモ環境を立ち上げるためのコードの準備が完了しました。
中身の確認
Sitecore OrderCloud の Headstart には３つのアプリケーションが含まれています。
Middleware
さまざまな処理をするためのミドルウェアのコードが src¥middleware の中に含まれています。このミドルウェアを起動して OrderCloud と繋げていくという処理が今後続いていきます。
Buyer および Seller
この２つのアプリケーションは JavaScript の Angular で記述されています。それぞれ src¥UI¥buyer および src¥UI¥seller のフォルダの中にコードが格納されており、buyer はいわゆる EC のストアフロントとなるサイト、seller は EC の管理画面のサイトになります。この２つのアプリケーションは上記のミドルウェアと Sitecore OrderCloud と連携して動作するコードとなります。
まとめ
今回はデモ環境を構築するために必要となるコードの準備となりました。文章として紹介しているため長くなっていますが、リポジトリからコードをダウンロードして、手元で操作できるように準備をしただけという形ですので慣れればこの部分は数分で終わる手順です。
更新履歴
2023年8月に最新情報に合わせて更新しました。