tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:Quip Live Appsの開発を試してみました

Quip Live Appsを試してみました。Quipのトライアル環境作成などはこちら。


Live Appsのイメージ

プロジェクトに必要なもの

  • Quipアカウント
  • Node.jsがインストールされたローカル環境

Nodeってそういえば最新バージョンいくつだろうと確認してみたところ、v9.3.0まででてました。せっかくなのでアップデート。
f:id:tyoshikawa1106:20171228125927p:plain

Install the Quip SDK

下記リンク先からダウンロードできます。

https://quip.com/dev/sdk/download

デスクトップにappフォルダを用意してそこに解答しました。
f:id:tyoshikawa1106:20171228130234p:plain


ターミナルを起動してcdコマンドで移動します。
f:id:tyoshikawa1106:20171228130256p:plain


Quipにはシークレット・ウィンドウモードでログインしておきます。(Chromeで実施)

Quip Developer Portalを開く

サイドメニューのアプリを選択します。
f:id:tyoshikawa1106:20171228130516p:plain:w200


ポップアップが表示されます。
f:id:tyoshikawa1106:20171228130559p:plain


Build your own live app のリンクをクリックします。
f:id:tyoshikawa1106:20171228130715p:plain


次の画面が表示されました。
f:id:tyoshikawa1106:20171228130745p:plain

ライブアプリを作成する

右上のCreate a Live Appのリンクをクリックします。App IDが画面に表示されるので記録します。
f:id:tyoshikawa1106:20171228131022p:plain

Quip Live アプリをビルド

基本的なコードは用意されています。先ほどcdコマンドでSDKフォルダに移動したのでそこから下記コマンドを実行します。

./bin/quip-apps init “$APP_NAME” $APP_ID 

※$APP_NAMEは任意の名前に変更します。
※$APP_ID は先ほど確認したIDに変更します。

$ ./bin/quip-apps init my_quip_app VXXXXXD

f:id:tyoshikawa1106:20171228131508p:plain


これでmy_quip_appフォルダが生成されます。React.jsアプリとのこと。

ライブアプリをパッケージ化する

パッケージ化してQuipプラットフォームにアップロードしてQuip内でアプリを実行できます。まずはcdコマンドで移動します。

$ cd <quip-sdk-folder>/apps/<your app name>

f:id:tyoshikawa1106:20171228131738p:plain


npm install を実行します。
f:id:tyoshikawa1106:20171228131917p:plain


npm run build を実行します。
f:id:tyoshikawa1106:20171228132127p:plain


warningという文字が出ましたがひとまず問題ありませんでした。次のコマンドを実行します。(※my-quip-appは最初に指定したアプリ名)

$ cd ../../
$ bin/quip-apps pack apps/my-quip-app/app

f:id:tyoshikawa1106:20171228133041p:plain


これで「app.ele」ファイルが生成されます。
f:id:tyoshikawa1106:20171228133121p:plain


QuipのEdit Live Appページに戻りapp.eleファイルをアップロードします。
f:id:tyoshikawa1106:20171228133323p:plain


検証時には何かがうまくいかなかったみたいでもう一度実施したのですが、次の画面が表示されれば成功です。
f:id:tyoshikawa1106:20171228133801p:plain

あなたのライブアプリをQuipでテストする

Quipに移動して新規文書を作成します。@の挿入機能を使い、アプリ名を入力します。
f:id:tyoshikawa1106:20171228133955p:plain


これで自作のアプリをQuipで動かすことができました。
f:id:tyoshikawa1106:20171228134025p:plain


今回はHello Woldとテキストが表示されるだけですが、いろいろなQuipアプリを開発できそうです。