際際滷

際際滷Share a Scribd company logo

Navigate users from assistant app to android app

?Download as PPTX, PDF?
?
Yoichiro Tanaka
Yoichiro Tanaka

This document discusses how to navigate users from an Assistant app to an Android app. It provides code to: 1. Check if the user's device supports screen output and send a basic card with a link button if so. If not, it checks if another device is available that supports screen output and requests a transfer. 2. Define functions for the welcome intent and handling a new surface. 3. Build a basic card rich response with a link button that will launch the LINE app when clicked, and provide example HTML to redirect to the LINE app after 5 minutes.

1 of 28
Navigate users from Assistant App to Android App 2017/12/19 APP DOJO
Yoichiro Tanaka Software Engineer / IT Architect Google Developers Expert (Web) twitter.com/yoichiro google.com/+YoichiroTanaka
Navigate users from assistant app to android app
Surfaces Support audio experiences only Support screen experiences only Support both audio and screen experiences
App surface capabilities
Simple Responses Supported on ¢ actions.capability.AUDIO_OUTPUT ¢ actions.capability.SCREEN_OUTPUT
Rich Responses - Basic Card Supported on ¢ actions.capability.SCREEN_OUTPUT Image, Title, Sub-title, Text body, Link button, Border
Navigate users from assistant app to android app
1. Check whether a surface the user is using supports a screen. [Yes] 2. Send a Basic Card with a Link Button. [No] 3. Check whether the user has a surface which is supporting a screen. [Yes] 4. Request to transfer the user to the surface. [Yes] 5. Send a Basic Card with a Link Button. Send a Basic Card w/ a Link Button ?
Navigate users from assistant app to android app
Navigate users from assistant app to android app
Navigate users from assistant app to android app
"use strict"; process.env.DEBUG = "actions-on-google:*"; const App = require("actions-on-google").DialogflowApp; const functions = require("firebase-functions"); exports.dialogflowFirebaseFulfillment = functions.https.onRequest((request, response) => { const app = new App({request, response}); const inputWelcome = (app) => { // for Default Welcome Intent }; const actionMap = new Map(); actionMap.set("input.welcome", inputWelcome); app.handleRequest(actionMap); });
// 1. Check whether a surface the user is using supports a screen const screenSupported = app.hasSurfaceCapability(app.SurfaceCapabilities.SCREEN_OUTPUT); if (screenSupported) { // 2. Send a Basic Card with Link Button } else { // 3. Check whether the user has a surface which is supporting a screen. const screenAvailable = app.hasAvailableSurfaceCapabilities(app.SurfaceCapabilities.SCREEN_OUTPUT); if (screenAvailable) { // 4. Request to transfer the user to the surface. const context = "<context>"; const notificationTitle = "<title>"; app.askForNewSurface( context, notificationTitle, [app.SurfaceCapabilities.SCREEN_OUTPUT]); } else { ... } }
Navigate users from assistant app to android app
Navigate users from assistant app to android app
Navigate users from assistant app to android app
Navigate users from assistant app to android app
Navigate users from assistant app to android app
Navigate users from assistant app to android app
exports.dialogflowFirebaseFulfillment = functions.https.onRequest((request, response) => { const app = new App({request, response}); const inputWelcome = (app) => { ... }; const newSurface = (app) => { // 5. Send a Basic Card with a Link Button. }; const actionMap = new Map(); actionMap.set("input.welcome", inputWelcome); actionMap.set("new_surface", newSurface); app.handleRequest(actionMap); });
app.ask( app.buildRichResponse() .addSimpleResponse("<simple>") .addBasicCard( app.buildBasicCard("This is a **Basic Card** output.") .setTitle("Go to LINE app") .addButton("Launch", "https://server/launch_line.html") ) );
Navigate users from assistant app to android app
<!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="refresh" content="5;URL=line://nv/chat"> <meta charset="utf-8"> </head> <body> <p>Launch LINE App after 5 minutes.</p> </body> </html>
Navigate users from assistant app to android app
Navigate users from assistant app to android app
Conclusion Surface Capabilities ¢ AUDIO_OUTPUT and SCREEN_OUTPUT Check Methods ¢ hasSurfaceCapability ¢ hasAvailableSurfaceCapabilities Basic Card Rich Response with Link Button
Thanks!

More Related Content

Navigate users from assistant app to android app

  • 1. Navigate users from Assistant App to Android App 2017/12/19 APP DOJO
  • 2. Yoichiro Tanaka Software Engineer / IT Architect Google Developers Expert (Web) twitter.com/yoichiro google.com/+YoichiroTanaka
  • 4. Surfaces Support audio experiences only Support screen experiences only Support both audio and screen experiences
  • 6. Simple Responses Supported on ¢ actions.capability.AUDIO_OUTPUT ¢ actions.capability.SCREEN_OUTPUT
  • 7. Rich Responses - Basic Card Supported on ¢ actions.capability.SCREEN_OUTPUT Image, Title, Sub-title, Text body, Link button, Border
  • 9. 1. Check whether a surface the user is using supports a screen. [Yes] 2. Send a Basic Card with a Link Button. [No] 3. Check whether the user has a surface which is supporting a screen. [Yes] 4. Request to transfer the user to the surface. [Yes] 5. Send a Basic Card with a Link Button. Send a Basic Card w/ a Link Button ?
  • 13. "use strict"; process.env.DEBUG = "actions-on-google:*"; const App = require("actions-on-google").DialogflowApp; const functions = require("firebase-functions"); exports.dialogflowFirebaseFulfillment = functions.https.onRequest((request, response) => { const app = new App({request, response}); const inputWelcome = (app) => { // for Default Welcome Intent }; const actionMap = new Map(); actionMap.set("input.welcome", inputWelcome); app.handleRequest(actionMap); });
  • 14. // 1. Check whether a surface the user is using supports a screen const screenSupported = app.hasSurfaceCapability(app.SurfaceCapabilities.SCREEN_OUTPUT); if (screenSupported) { // 2. Send a Basic Card with Link Button } else { // 3. Check whether the user has a surface which is supporting a screen. const screenAvailable = app.hasAvailableSurfaceCapabilities(app.SurfaceCapabilities.SCREEN_OUTPUT); if (screenAvailable) { // 4. Request to transfer the user to the surface. const context = "<context>"; const notificationTitle = "<title>"; app.askForNewSurface( context, notificationTitle, [app.SurfaceCapabilities.SCREEN_OUTPUT]); } else { ... } }
  • 21. exports.dialogflowFirebaseFulfillment = functions.https.onRequest((request, response) => { const app = new App({request, response}); const inputWelcome = (app) => { ... }; const newSurface = (app) => { // 5. Send a Basic Card with a Link Button. }; const actionMap = new Map(); actionMap.set("input.welcome", inputWelcome); actionMap.set("new_surface", newSurface); app.handleRequest(actionMap); });
  • 22. app.ask( app.buildRichResponse() .addSimpleResponse("<simple>") .addBasicCard( app.buildBasicCard("This is a **Basic Card** output.") .setTitle("Go to LINE app") .addButton("Launch", "https://server/launch_line.html") ) );
  • 24. <!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="refresh" content="5;URL=line://nv/chat"> <meta charset="utf-8"> </head> <body> <p>Launch LINE App after 5 minutes.</p> </body> </html>
  • 27. Conclusion Surface Capabilities ¢ AUDIO_OUTPUT and SCREEN_OUTPUT Check Methods ¢ hasSurfaceCapability ¢ hasAvailableSurfaceCapabilities Basic Card Rich Response with Link Button

Editor's Notes

  1. 書晩は、赫看看乙鉛艶アシスタント鬚吋▲廛蠅ら、ユ`ザを粥稼糸姻看庄糸アプリへ嗾擬するための匯つのやり圭について府初したいと房います。
  2. 徭失府初です。
  3. さて、Googleアシスタントは、gは峻さんのかなり附除なところに屡にいます。Android極挑をお隔ちであれば、HomeボタンをL兀しすることで柵び竃すことができますし、iOSをお聞いの圭は、Googleアシスタントアプリを秘れることで、旋喘することができます。また、Alloというメッセ`ジングアプリの嶄にも、Googleアシスタントがいます。もちろん、Google Homeの鬚海箸砲癲Googleアシスタントが棋ちえています。ここで嶷勣なポイントは、それぞれユ`ザが採で荷恬をし、どのようにフィ`ドバックを誼るか、です。Google Homeであれば蕗で、Androidであれば蕗もしくはテキストで、Alloであればテキストのみ、という`いがあります。
  4. ユ`ザと赫看看乙鉛艶アシスタントの俊泣のことを仝サ`フェス々と柵んでいます。嶬撻稀`フェスは、粥雨禽鴛或、皆遺檎掘掘鰻、そしてそのI圭の3嶽窃があります。
  5. アシスタントアプリを蝕kして戻工する縞に、どのサ`フェスを駅勣とするかを僉kすることができます。駅勣とするサ`フェスの怏み栽わせによって、そのアシスタントアプリを柵び竃すことができる魁侭が畳まります。箭えば、粥雨禽鴛或を駅倬と僉kした縞には、粥鉛鉛看からそのアシスタントアプリを柵び竃すことはできません。
  6. アシスタントアプリがユ`ザに戻工する鬴陲砲蓮△いつかのNがあります。まず、Simple Responseは、gなメッセ`ジです。これは、燕幣することもiみ貧げることもできるため、AUDIOとSCREENのI圭でサポ`トされています。
  7. それにして、Rich Responseの嶄にあるBasic Cardという鬴陲蓮△修涼の宥り、メッセ`ジだけでなく、鮫颪、そしてリンクなどを根んでいます。これはiみ貧げられないので、SCREEN Surfaceのみがサポ`トされます。つまり、鮫中を隔つデバイスにいるGoogleアシスタントでしか燕幣できないことになります。ここでは、このBasic Cardの嶄でサポ`トされているリンクを聞います。
  8. つまり、Googleアシスタントからユ`ザにリンクつきBasic Cardを戻幣してクリックしてもらうことで、そのリンク枠としてAndroidアプリを軟咾気擦襪海箸できます。
  9. ここでは、アシスタントアプリからユ`ザにLinkButtonを隔つBasic Cardを僕佚するための返をB初します。まず、ユ`ザがSCREEN Surfaceをサポ`トする侭からアシスタントアプリを聞っているかどうかをチェックします。もしSCREEN Surfaceをサポ`トしていれば、鬴陲箸靴銅閑にBasic Cardを僕ります。そうではなく、もしAUDIO Surfaceのみをサポ`トしている侭からだった栽は、鬴陲箸靴Basic Cardをユ`ザに僕佚することができません。そのHには、ユ`ザをSCREEN Surfaceをサポ`トした侭に仝TА垢垢覬慴があります。そのためには、まずユ`ザがSCREEN Surfaceをサポ`トしたデバイスを隔っているかどうかをチェックします。もし隔っていなかった栽は、Basic Cardを僕ることはできませんので、そこで僅廷です。侑いにもSCREEN Surfaceをサポ`トしたデバイスを隔っていれば、その侭にTГ垢襪燭瓩離螢エストを鬴陲箸靴瞳気靴泙后これにより、Googleアシスタントはユ`ザに仝TГ靴茲Δ箸靴討襪韻鼻△匹Δ垢襭拭垢い栽わせをします。ユ`ザがそれを阻覚したHには、SCREEN Surfaceをサポ`トしたデバイスにいるGoogleアシスタントに氏が哈き@がれ、アシスタントアプリはBasic Cardを鬴陲箸靴橡熔鼎垢襪海箸如△瓩任燭ユ`ザに燕幣されます。
  10. ではgHにしてみましょう。まず、Dialogflowで恷兜から恬られているWelcomeインテントにして、鬴陲垢襪茲Δ砲靴泙后Default Welcome Intentをクリックしてください。
  11. コ`ドをいてSurfaceの彜Bをチェックするため、Fulfillmentの朕にあるUser webhookにチェックを秘れてください。
  12. 肝に、酷顎鉛韓庄鉛鉛馨艶稼岳メニュ`をクリックして、インラインエディタを嗤燭砲靴泙后
  13. そして、庄稼沿顎岳.敬艶鉛界看馨艶アクションにするI尖をするハンドラv方を恬ります。
  14. ここで、枠ほどB初したSurfaceの鮉rをチェックする返をg廾していきます。まず、hasSurfaceCapabilityにSCREEN_OUTPUTを局すことで、そのユ`ザがF壓SCREENをサポ`トしたデバイスを聞っているかどうかを_Jすることができます。Y惚がtrueの栽のBasic Cardを鬴陲垢襯芥`ドは、瘁でB初しましょう。F壓SCREENをサポ`トしたデバイスを聞っていない栽は、さらにhasAvailableSurfaceCapabilitiesにSCREEN_OUTPUTを局すことで、そのユ`ザがSCREENをサポ`トしたデバイスを嗤しているかどうかを_Jします。そのY惚、SCREENをサポ`トしたデバイスを嗤していた栽は、askForNewSurfaceにSCREEN_OUTPUTを局して柵び竃します。askForNewSurfaceによって、SCREENをサポ`トしたデバイスにユ`ザをTГ垢襪海箸できます。
  15. ただし、ドキュメントには、嶬旃囂ロケ`ルでしか温壊一酷看姻鰻艶敬皆顎姻韓温界艶が字嬬しないことが慕かれています。晩云囂ロケ`ルでも除い繍栖聞えるようになるはずなので、Sしみに棋つことにしましょう。
  16. さて、枠ほどいたコ`ドがどのようにC嬬するか、_Jしてみましょう。シミュレ`タでは、サポ`トするSurfaceを俳り紋えることができます。ここでは、AUDIO Surfaceのみサポ`トするモ`ドにします。
  17. さっそくアシスタントアプリにつないでみましょう。すると、Default Welcome Intentが恬咾靴泙后ここで、"<context>. Is it okay if I send that to your phone?"という鬴陲Googleアシスタントから卦ってきます。つまり、あなたのAndroid極挑に宥岑を僕っても措いですか燭搬いてきています。Ok、と卦しましょう。
  18. すると、このように粥稼糸姻看庄糸極挑に或皆の宥岑が栖ます。氏三が宥岑U喇で哈き@がれようとしています。
  19. さて、ユ`ザがOkをして氏がo並哈き@がれたHには、Dialogflowに蒙協のイベントがwんできます。それを鞭け函るためのインテントを恬りましょう。CREATE INTENTをクリックしてください。
  20. インテント兆を癖輝につけた朔、掘厩艶稼岳壊として温界岳庄看稼壊喝庄稼岳艶稼岳喝鰻掘安喝皆雨檎酷粥遺掘と秘薦してください。これが、仟しい皆顎姻韓温界艶にユ`ザが欺器したときに敬んでくるイベントです。このI尖もコ`ドでg廾するため、アクションをつけて、安艶恢鞄看看一を嗤燭砲靴泙后
  21. そして、いま恬ったインテントのアクションをI尖するためのハンドラv方を弖紗します。
  22. ここでは、SCREEN Surfaceをサポ`トしたデバイスからのリクエストになりますので、めでたくBasic Cardを鬴陲箸靴橡熔鼎垢I尖をくことができます。addBasicCardの嶄で、addButtonにURLを局すことで、LinkButtonを弖紗することができます。ただし、ここで峺協辛嬬なURLはhttpまたがhttpsのみです。そのため、岷俊Androidアプリを軟咾垢襪海箸できませんので、ウェブペ`ジをU喇して軟咾垢襪茲Δ砲靴泙后
  23. 枠ほど鞭佚した宥岑をタップすると、Basic Cardを僕佚するI尖がg佩され、このようにAndroid箸Googleアシスタント坪でカ`ドが燕幣されます。Launchをタップすることで、枠ほど峺協したURLにwびます。
  24. HTMLの嶄では、箭えばこのようにline://を聞ってLINEアプリのURL Schemeを峺協しておけば、
  25. 匯稀堰意珂晦が燕幣され、
  26. 馨艶岳温タグの姻艶韓姻艶壊鞄によって、めでたく晦鴛鰻掘が軟強しました。
  27. まとめです。Googleアシスタントは、AUDIOおよびSCREENというSurfaceと柵ばれる侭の曝eがあり、ユ`ザがどのSurfaceにいるか、そしてどのSurfaceを聞えるかをチェックすることができます。そして、Basic Card Rich ResponseのLinkButtonを旋喘することで、AndroidアプリへのTГgFすることが辛嬬なことをB初しました。
  28. 參貧です。ありがとうございました。