salesforce開発のheroku入門

Heroku プラットフォームは、マルチクラウドアプリケーションプラットフォームである Salesforce Platform の一部ですちょっと分かりづらいかも知れませんね。簡単に言えば、Salesforce Platform は多数のツールとサービスが密に統合された 1 つのプラットフォームにまとめられているため、貴重なアプリケーションを構築できる、ということです。Heroku は、そのツールセットの一部です。優れたカスタマーエクスペリエンスを促進するカスタムアプリケーションを構築できます。

ご存知かもしれませんが、Lightning Platform では従業員向けアプリケーションを構築し、Salesforce CRM のカスタマイズと拡張を行うことができます。Heroku ではさらに、Java、Ruby、Python、PHP、JavaScript、Go などのオープンソース言語で顧客向けのピクセル単位まで完璧なアプリケーションを構築できます。

この記事では私個人の開発過程を記録するものとなります。heroku開発入門に関する以下内容が分かるようになります。
・Herokuアカウントの作成
・Heroku Connect
・Salesforce Connect


## 1.Herokuアカウントを取得
Heroku開発の下準備としてHerokuアカウントの取得が必要となります。
実際に公式ホームページに入って新規登録をクリックしましょう。
https://jp.heroku.com/free
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/18fe21a4-f0a1-4288-9285-846e640bb263.png)
必須項目を入力しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/f3e32657-6366-e081-a28b-39afdd48c25a.png)
記入した自分のメールを確認しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/35f94d91-8aa1-6434-d822-655c9a289a19.png)
メール内のアドレスをクリックしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/f2fc1cc8-8d04-119c-56ed-3a7da8c6b4c2.png)
パスワードを入力しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/c42b20b0-d138-e6f0-6ee6-16ce2dac1d32.png)
クリックして次へ進みましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/c8a9c588-e6ac-ef55-020a-42ae5cb55c4b.png)
承認ボタンをクリックしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/8cc8cdc0-d0c9-0383-6ae5-845ea79afa4f.png)
これで無事にアカウントの作成できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/f45ec687-1ce9-ed43-cd53-03646e9968b3.png)

## 2.Heroku Connectの活用
このセクションでHerokuを使うアプリ開発する方法及びローカル環境での動作などを一通り紹介します。
### 2-1.Herokuでのアプリ作成
herokuを使うアプリ開発は色々ありますが、今回はjames wardさん開発したPhone changeを用いて開発を行います。herokuにログインした状態でdeployをクリックしましょう。
https://github.com/jamesward/heroku-connect-phone-change
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/f75f7641-f97d-35b9-3482-d863194de7c4.png)
アプリ名を決めてDeploy appをクリックしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/b732d644-63a9-947b-b69a-91ad307767be.png)
アプリの環境は自動的に整えますので終わりましたらManage Appをクリックしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/5fdfcfbe-393f-ca15-0365-16f1d366fb8a.png)
このように最初のアプリが作成できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/ca50be19-d849-7674-e415-053cd96872c3.png)
Open appをクリックしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/04a4a02c-83fe-9560-0501-7e2f66a35b9f.png)
これがアプリの内容です。またsalesforceと連携してないので動作しません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/7294a8e9-aa8b-1748-4f00-76bec5ce6362.png)

### 2-2.HerokuアプリにpostgresとHeroku Conectを加えよう
manage画面に戻ってResourcesタブをクリックしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/7d351c23-f17f-2e62-aeb4-7830c2a41086.png)
Add onsの検索欄にpostを入力し「Heroku postgres」を選択しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/ca5d9630-f4da-edaf-2973-a5b8cce5e222.png)
Submit Order Rormをクリックしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/28cda207-175d-c83a-0601-c4beed5058ff.png)
これでpostgresqlがデータベースとしてセットされました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/97f73341-34d6-a089-256d-1661386a93c6.png)
次はHeroku Conectを加えよう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/06414168-2f25-7930-b0c8-aa9bb4b4e507.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/a0df3b52-fd9d-15cc-1775-e20fe946398f.png)
Heroku Conectをsalesforceと連携しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/590bbc04-dc0b-1533-27a4-8f5f2319eda7.png)
nextをクリックしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/a1e12d14-04fd-5286-f7db-b2ae7acb84f4.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/d5bf7005-571e-8edd-929d-4e3dc39c0464.png)
ログインしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/fd2b33cc-9d65-d158-831d-7b19d88d626f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/ae583bff-a161-4d10-6931-25208bb3efae.png)
データベースが無事に接続しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/c8344a7a-2e67-20e3-6892-cc434e37ae73.png)
Mappingタブを開いてCreate Mappingをクリックしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/123a7268-0682-5bf7-6df4-116599574499.png)
Contactをクリックしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/f1b0d002-f4e1-b6e1-0593-2275b63dbaf4.png)
Phone,HomePhone,MobilePhone,LastName,FirstName,Emailにチェックしましょう。Databaseからsalesforceに書き込みできるよにチェックする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/e48a5079-40d6-53d6-18cf-e42dde35cc1f.png)
saveをクリックしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/dbaf52ba-640b-284e-d52e-3bce3e512e6b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/92ffeb84-ac00-24fd-e833-25a17a3ca83c.png)

アプリのページに戻ってOpen appをクリックしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/505047ae-dd58-f6cd-5370-13e79e4955c2.png)
salesforceに実在する取引責任者を選んで更新してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/b8887cbc-0d28-ea48-47c0-e4e702e14bd6.png)
入力した通りに電話番号が書き換えました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/2f17ea71-447f-2261-c230-948f7f2754b6.png)



### 2-3.Herokuアプリのローカル環境を整えよう
まずはsamplephonechangetest1のActivityをクリックしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/a92a9346-e1a5-92b0-a2e9-e3477d06511b.png)
次は環境構築の情報を確認しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/c3f39b83-5459-56bb-2fdb-a58bae61712c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/7e787ece-99ec-0e57-c546-769b15485333.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/accd1111-098a-c781-51aa-3393edc90358.png)

Herokuアプリを実行できるローカル環境を整えましょう。先ずはバージョンが一致するNode.jsをインストールしましょう。
https://nodejs.org/ja/download/releases/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/76bf03de-8503-774e-b57e-e3d2ceeacecb.png)
pgもインストールしましょう。
```
npm  install pg@4.5.7 
```

次はHeroku toolbeltをインストールしましょう。
https://devcenter.heroku.com/articles/heroku-cli
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/43cf83df-625d-706e-4661-8b16d67220bd.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/10b498ea-688f-761a-f60a-ae888238da58.png)

最後はgitをインストールしましょう。
 https://gitforwindows.org/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/1a67f94f-695a-b15b-2aad-f97f4ad2e0d2.png)
ダウンロードした後にインストールしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/6dc82fb4-f699-378a-09a2-117c984bce75.png)

cmdを開いて確認しましょう。
```
heroku --version
```

```
node --version
```
```
git --version
```


### 2-4.ローカル環境でのアプリ実行
まずはCMDを使いログインしましょう。
```
heroku login
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/daef25f8-095a-08ac-90c4-eb4cdd51ed77.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/4e9bd1e5-269d-3324-49d0-a812fcb2eda6.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/3f5aa427-21f4-3f80-ef4a-703082e7f5f2.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/2270919b-96bd-baa9-ea3d-bd180f727eae.png)
次はgitでphone changeアプリをローカルにクローンしましょう。
```
git clone https://github.com/jamesward/heroku-connect-phone-change 自分が決めた名前
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/bc324853-5e8a-00bd-0e62-16a785a40f42.png)
publicフォルダのindex.htmlを開きましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/696e5f13-3c5d-4b34-b90c-eb997f5fa219.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/8a3cf063-46c9-46fb-9b90-ea9ff046ac77.png)
クローンしたフォルダに入りherokuでリモートにしましょう。
```
cd 自分が決めた名前
```
```
heroku git:remote -a 自分が決めた名前
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/c7a6d9fd-6d7c-ac1f-dbb9-8a5859f38a42.png)
npmをアップデートしよう
```
npm update
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/e5a037e0-8bec-28f5-c99b-6a3a79978b90.png)

herokuを開いてアプリのセットを開きましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/5793d9b5-91c4-7253-b170-b1a97478bc63.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/e445290f-b98c-bd15-531d-09606f236b94.png)
Reveal Config Varsをクリックしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/b1472c55-2c0e-f677-5d50-029535a20694.png)
この値をコピーして以下命令を実行しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/7437b99c-2931-473c-9113-aec17ffe119e.png)

```
SET DATABASE_URL=`heroku config:get DATABASE_URL`
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/eb7c7f71-c341-8125-fc7d-f110c3aebb0c.png)

次はPGSSLMODEの命令を実行しましょう。
```
SET PGSSLMODE=require
```
```
npm start
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/18bc6355-ac34-ae70-109d-9a6e76e7075b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/fad70ca5-39a3-77b6-04ed-f078ace0cd29.png)
ブラウザでhttp://localhost:5000　
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/15d1c74d-a298-e821-e4a3-820deba6e0f5.png)


## 3.Salesforce Connectの活用
Salesforce Connect では、ユーザが Salesforce 組織外に保存されているデータを表示、検索、および変更できるようにすることで、システムの境界を越えてデータをシームレスに統合できます。このセクションでは外部データソースを作成して実践を行います。

### 3-1.Lightning Connect Quickstartをインストールしましょう。
まず、Lightning Connectを行うためのパッケージをインポートしましょう。
https://developerforce.github.io/lightning-connect-tutorial/install-schema-package.html
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/5d6c4598-9ea8-e72e-2d5c-0f89a56d0297.png)
以下内容を選択してインストールしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/8ae5f7fe-1d9d-eefb-f2c8-abbfd15c2d1f.png)
Set Customer IDsをクリックしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/a345f197-4aeb-65a6-fa77-b979b80f07c2.png)
最後は完了をクリックしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/52ac18bf-66cb-0ca2-736b-bde9731b9d46.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/46d9f3e2-2665-1b28-cda9-6623ab38029b.png)
アプリケーションマネージャーでlightningにアップグレードしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/08a21b34-f03f-a781-8c9b-e5bbd1e1d19d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/86822608-a512-c10a-8b6a-b9508741235b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/ca619166-ef6d-f74d-1798-b29bc17e6ff7.png)

### 3-2.外部データソースを作成
まず、salesforce組織にログインした後にホーム画面に入ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/5ef3cf38-32da-2c51-e925-318300b092af.png)
検索欄から検索して外部データソースを選択しましょう。新規外部データソースをクリックしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/8b8a3be7-6cea-20d3-3949-6ef957c92899.png)
外部データソースの名前をOrderDB、種別をSalesforce Connect:O Data 2.0、URlはhttps://orderdb.herokuapp.com/orders.svc/とする。保存ボタンを押しましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/2cb97367-90fc-aaa4-f8f6-220d87dc0475.png)
検証して同期を押しましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/94bc5ca6-ef48-d5ef-db25-734ef075b38c.png)
今回同期するのがOrderDetailとOrder、同期を押しましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/58344d59-1a9f-a0e9-c281-fbfcc994747e.png)
外部オブジェクトを選択して同期成功したかを確認しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/b949b0a0-89ee-0539-4f8b-77bc5d3298fd.png)
外部オブジェクトを一つ選んで確認しましょう。外部オブジェクトは基本的に__xで終わる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/74ee1ffb-4c83-7506-4180-fdef35734f42.png)

### 3-3.外部オブジェクトがデータアクセス用のタブを作成
まず、ホームの検索欄にタブを検索してクリックしましょう。次は新規を押しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/522a4c8c-bddf-52fb-cb1a-6411581d40c1.png)
まずはOrderのタブを作成しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/a354bacc-f218-5e29-2df0-b8a323c96e41.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/ca6809d9-be3d-1419-bd5b-b252078462d9.png)

作成しましたらアプリでタブを確認しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/5fcada4f-bd7e-a1f1-2cc1-1ef5f07210ca.png)

### 3-4.外部参照関係のリレーションを作成
まずはOrderDetailを開いて
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/fce0c574-9430-d782-dc60-99a47e493d5c.png)
次はorderIDを開いて編集をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/1ccd6ca1-602e-72ac-69b0-3ee1daf0a5d6.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/b3ff0113-62d2-920b-ec65-df04fcaf7ae1.png)
データ型の変更をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/1abba8e7-6aaa-6bde-a27c-7b5f4caf1b60.png)
外部参照関係を選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/75755712-3932-7705-5d5d-1d3669386036.png)
関連先はOrderに変更する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/731b1acd-609b-776e-47b9-454d355c381a.png)
文字数を18とする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/4e23d686-7333-15d8-26b4-69b4bad89f3a.png)
参照可能にチェックしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/55b5e1f4-28c8-e9f9-b4f6-18e280d1ed3f.png)
保存しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/55d3c427-9b37-0faa-41ec-1386e8f859b2.png)
orderタブから参照関係を確認しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/163514ea-a76d-43f0-c661-688f430bddb0.png)
適当に開いて関連性が着いたかを確認しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/7e12e41e-d7ff-7fe0-9896-337ca84c39dc.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/9c77d261-7e20-2b35-8cc4-43e36495c961.png)

### 3-4.外部オブジェクトと標準オブジェクトに間接参照関係を作成
まずは外部オブジェクトを開きましょう。Orderをひらいてレコードを編集
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/cb0e702b-ce4b-206d-0fb4-8ccfed12bcf4.png)
カスタム項目customerIDを編集する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/82899696-de0f-d2eb-a3e7-a155a8625234.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/57c26b8a-a1fe-9f03-a9d5-aac12872caf7.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/94fae752-7ff0-4480-57bf-5f18e80a24c4.png)
間接参照関係を選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/92d465ad-a79f-82f5-8378-b5792f9e8d15.png)
関連先を取引先と選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/668cd219-4572-9055-e1e7-57f1d6309b4f.png)
Customer_ID_cを選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/c6d0c7e2-80ff-7e7b-9da5-0322a00e8b71.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/ba313d9a-0fdf-cafa-9ffd-5877c30d59a4.png)
参照可能にチェックしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/61a6ea97-9519-ce81-4151-398307fa079c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/03e779ec-db7f-6ae4-b5e8-b85115af784d.png)
Orderタブを開いて詳細ページで確認しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/9e3e041c-08f8-dd5f-772d-ff8796c2f548.png)