GithubHelp home page GithubHelp logo

isabella232 / actions-builder-canvas-client-fulfillment Goto Github PK

View Code? Open in Web Editor NEW

This project forked from actions-on-google/actions-builder-canvas-client-fulfillment

0.0 0.0 0.0 95 KB

License: Apache License 2.0

HTML 11.08% JavaScript 86.28% CSS 2.64%

actions-builder-canvas-client-fulfillment's Introduction

Actions on Google: Interactive Canvas with Angular Sample

This is an Interactive Canvas sample which shows how to use Client Fulfillment to improve the performance of your game between conversational turns.

This Action benefits from a visually rich experience that allows you to provide interactive content combined with an intuitive conversational flow for users where existing visual components are not sufficient.

Prerequisites

  1. Node.js and NPM
  2. Install the Firebase CLI
    • We recommend using MAJOR version 8 , npm install -g firebase-tools@^8.0.0
    • Run firebase login with your Google account

Setup

Actions Console

  1. From the Actions on Google Console, New project > Create project > under What kind of Action do you want to build? > Game > Blank project for smart display
    • Take note of the project ID, as this will be used later in the setup.

Firebase Hosting Deployment

  1. Run npm install to install dependencies
  2. Run npm run build to generate a build of the web app
  3. Run firebase deploy --project {PROJECT_ID} --only hosting to deploy the web app to Firebase Hosting
    • To find your Project ID: In the Actions Console console for your project, navigate to ⋮ > Project settings > Project ID.

Actions CLI

  1. Install the Actions CLI
  2. Navigate to sdk/settings/settings.yaml, and replace <PROJECT_ID> with your project ID
  3. Navigate to sdk/custom/global/actions.intent.MAIN.yaml, and replace <PROJECT_ID> with your project ID
  4. Navigate to sdk/custom/global/change_color.yaml, and replace <PROJECT_ID> with your project ID
  5. Navigate to sdk/custom/global/next_level.yaml, and replace <PROJECT_ID> with your project ID
  6. Navigate to sdk/scenes/BaseEmptyScene.yaml, and replace <PROJECT_ID> with your project ID
  7. Navigate to sdk/scenes/TargetScene.yaml, and replace <PROJECT_ID> with your project ID
  8. Run gactions login to login to your account.
  9. Run gactions push to push your project.
  10. Run gactions deploy preview to deploy your project.

Running this Sample

  • You can test your Action on any Google Assistant-enabled device on which the Assistant is signed into the same account used to create this project. Just say or type, “OK Google, talk to my test app”.
  • You can also use the Actions on Google Console simulator to test most features and preview on-device behavior.

Using this Sample

Demo screenshot of Action

  • Use the buttons on the screen to initialize a specific action, and then use your voice to complete the action.
    • For example, press the button "Change Color".
    • Next, give a voice command "Change color to red".
    • The intent is handled locally, without the need for a webhook.

References & Issues

Contributing

Please read and follow the steps in the CONTRIBUTING.md.

License

See LICENSE.

actions-builder-canvas-client-fulfillment's People

Contributors

fleker avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.