Go to Qiita Advent Calendar 2024 Top
LoginSignup
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@hubin616(彬 胡)

salesforce開発のheroku入門

Last updated at Posted at 2022-08-29

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
必須項目を入力しましょう。
image.png
記入した自分のメールを確認しましょう。
image.png
メール内のアドレスをクリックしましょう。
image.png
パスワードを入力しましょう。
image.png
クリックして次へ進みましょう。
image.png
承認ボタンをクリックしましょう。
image.png
これで無事にアカウントの作成できました。
image.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
アプリ名を決めてDeploy appをクリックしましょう。
image.png
アプリの環境は自動的に整えますので終わりましたらManage Appをクリックしましょう。
image.png
このように最初のアプリが作成できました。
image.png
Open appをクリックしましょう。
image.png
これがアプリの内容です。またsalesforceと連携してないので動作しません。
image.png

2-2.HerokuアプリにpostgresとHeroku Conectを加えよう

manage画面に戻ってResourcesタブをクリックしましょう。
image.png
Add onsの検索欄にpostを入力し「Heroku postgres」を選択しましょう。
image.png
Submit Order Rormをクリックしましょう。
image.png
これでpostgresqlがデータベースとしてセットされました。
image.png
次はHeroku Conectを加えよう
image.png
image.png
Heroku Conectをsalesforceと連携しましょう。
image.png
nextをクリックしましょう。
image.png
image.png
ログインしましょう。
image.png
image.png
データベースが無事に接続しました。
image.png
Mappingタブを開いてCreate Mappingをクリックしましょう。
image.png
Contactをクリックしましょう。
image.png
Phone,HomePhone,MobilePhone,LastName,FirstName,Emailにチェックしましょう。Databaseからsalesforceに書き込みできるよにチェックする
image.png
saveをクリックしましょう。
image.png
image.png

アプリのページに戻ってOpen appをクリックしましょう。
image.png
salesforceに実在する取引責任者を選んで更新してみましょう。
image.png
入力した通りに電話番号が書き換えました。
image.png

2-3.Herokuアプリのローカル環境を整えよう

まずはsamplephonechangetest1のActivityをクリックしましょう。
image.png
次は環境構築の情報を確認しましょう。
image.png
image.png
image.png

Herokuアプリを実行できるローカル環境を整えましょう。先ずはバージョンが一致するNode.jsをインストールしましょう。
https://nodejs.org/ja/download/releases/
image.png
pgもインストールしましょう。

npm  install pg@4.5.7

次はHeroku toolbeltをインストールしましょう。
https://devcenter.heroku.com/articles/heroku-cli
image.png
image.png

最後はgitをインストールしましょう。
https://gitforwindows.org/
image.png
ダウンロードした後にインストールしましょう。
image.png

cmdを開いて確認しましょう。

heroku --version

node --version

git --version

2-4.ローカル環境でのアプリ実行

まずはCMDを使いログインしましょう。

heroku login

image.png
image.png
image.png
image.png
次はgitでphone changeアプリをローカルにクローンしましょう。

git clone https://github.com/jamesward/heroku-connect-phone-change 自分が決めた名前

image.png
publicフォルダのindex.htmlを開きましょう。
image.png
image.png
クローンしたフォルダに入りherokuでリモートにしましょう。

cd 自分が決めた名前

heroku git:remote -a 自分が決めた名前

image.png
npmをアップデートしよう

npm update

image.png

herokuを開いてアプリのセットを開きましょう。
image.png
image.png
Reveal Config Varsをクリックしましょう。
image.png
この値をコピーして以下命令を実行しましょう。
image.png

SET DATABASE_URL=`heroku config:get DATABASE_URL`

image.png

次はPGSSLMODEの命令を実行しましょう。

SET PGSSLMODE=require

npm start

image.png
image.png
ブラウザでhttp://localhost:5000　
image.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
以下内容を選択してインストールしましょう。
image.png
Set Customer IDsをクリックしましょう。
image.png
最後は完了をクリックしましょう。
image.png
image.png
アプリケーションマネージャーでlightningにアップグレードしましょう。
image.png

image.png
image.png

3-2.外部データソースを作成

まず、salesforce組織にログインした後にホーム画面に入ります。
image.png
検索欄から検索して外部データソースを選択しましょう。新規外部データソースをクリックしましょう。
image.png
外部データソースの名前をOrderDB、種別をSalesforce Connect:O Data 2.0、URlはhttps://orderdb.herokuapp.com/orders.svc/とする。保存ボタンを押しましょう
image.png
検証して同期を押しましょう
image.png
今回同期するのがOrderDetailとOrder、同期を押しましょう
image.png
外部オブジェクトを選択して同期成功したかを確認しましょう。
image.png
外部オブジェクトを一つ選んで確認しましょう。外部オブジェクトは基本的に__xで終わる
image.png

3-3.外部オブジェクトがデータアクセス用のタブを作成

まず、ホームの検索欄にタブを検索してクリックしましょう。次は新規を押しましょう。
image.png
まずはOrderのタブを作成しましょう。
image.png
image.png

作成しましたらアプリでタブを確認しましょう。
image.png

3-4.外部参照関係のリレーションを作成

まずはOrderDetailを開いて
image.png
次はorderIDを開いて編集をクリック
image.png
image.png
データ型の変更をクリック
image.png
外部参照関係を選択する
image.png
関連先はOrderに変更する
image.png
文字数を18とする
image.png
参照可能にチェックしましょう。
image.png
保存しましょう。
image.png
orderタブから参照関係を確認しましょう。
image.png
適当に開いて関連性が着いたかを確認しましょう。
image.png
image.png

3-4.外部オブジェクトと標準オブジェクトに間接参照関係を作成

まずは外部オブジェクトを開きましょう。Orderをひらいてレコードを編集
image.png
カスタム項目customerIDを編集する
image.png
image.png
image.png
間接参照関係を選択する
image.png
関連先を取引先と選択する
image.png
Customer_ID_cを選択する
image.png
image.png
参照可能にチェックしましょう。
image.png
image.png
Orderタブを開いて詳細ページで確認しましょう。
image.png

4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?