{"id":13799514,"url":"https://github.com/actions-on-google-labs/interactive-canvas-editor-nodejs","last_synced_at":"2025-05-13T08:31:33.100Z","repository":{"id":130822731,"uuid":"229116648","full_name":"actions-on-google-labs/interactive-canvas-editor-nodejs","owner":"actions-on-google-labs","description":null,"archived":true,"fork":false,"pushed_at":"2019-12-19T18:52:37.000Z","size":136,"stargazers_count":27,"open_issues_count":0,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-18T14:58:51.047Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/actions-on-google-labs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-12-19T18:36:53.000Z","updated_at":"2024-03-01T00:59:59.000Z","dependencies_parsed_at":"2023-06-19T12:32:16.731Z","dependency_job_id":null,"html_url":"https://github.com/actions-on-google-labs/interactive-canvas-editor-nodejs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actions-on-google-labs%2Finteractive-canvas-editor-nodejs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actions-on-google-labs%2Finteractive-canvas-editor-nodejs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actions-on-google-labs%2Finteractive-canvas-editor-nodejs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actions-on-google-labs%2Finteractive-canvas-editor-nodejs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/actions-on-google-labs","download_url":"https://codeload.github.com/actions-on-google-labs/interactive-canvas-editor-nodejs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253903757,"owners_count":21981747,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-04T00:01:03.510Z","updated_at":"2025-05-13T08:31:32.784Z","avatar_url":"https://github.com/actions-on-google-labs.png","language":"JavaScript","funding_links":[],"categories":["Open source code"],"sub_categories":[],"readme":"# Actions on Google: Interactive Canvas editor\n\n**NOTE**\n\nThis is an experimental project and will receive minimal maintenance. Only bugs for security issues will be accepted. No feature requests will be accepted. Pull requests will be acknowledged and reviewed as soon as possible. There is no associated SLAs.\n\nSome of the projects in this experimental org might mature to a more stable state and move into the main [Actions on Google GitHub org](https://github.com/actions-on-google).\n\n---\n![Interactive Canvas editor](/public/images/screenshot.png?raw=true \"Interactive Canvas editor\")\n\nYou can use this editor to create a web app for [Interactive Canvas](https://developers.google.com/actions/canvas/) that is immediately loaded onto a smart display device. This allows for quick prototyping of web apps for Interactive Canvas.\n\nThis project uses the [Node.js client library](https://github.com/actions-on-google/actions-on-google-nodejs) and is deployed on [Cloud Functions for Firebase](https://firebase.google.com/docs/functions/), [Firebase Hosting](https://firebase.google.com/docs/hosting) and [Firestore](https://firebase.google.com/docs/firestore).\n\n## Background\n\nThe typical workflow for developing an Interacive Canvas web app would require a developer to host the web app on a public HTTPS endpoint. To update the web app would require changes to be pushed to the hosting server which typically add delays to view any changes on a device.\n\nThis project provides basic editors for HTML, CSS and JavaScript which are then combined to form the HTML for the Interacive Canvas web app. Any changes to the HTML code is persisted in a Firestore database.\n\nOn the device a special wrapper Interactive Canvas action is loaded which contains an iframe which is dynamically updated with the HTML obtained from Firestore. All Interactive Canvas API's are proxied to the iframe so that the code from the editor behaves exactly like it is the main web app loaded in an Interactive Canvas Action.\n\nTo link the editor with the Interactive Canvas instance a simple code is generated on the device and which then has to be entered in the editor.\n\n## Setup Instructions\n\n### Prerequisites\n\n1. Node.js and NPM\n   - We recommend installing using [nvm for Linux/Mac](https://github.com/creationix/nvm) and [nvm-windows for Windows](https://github.com/coreybutler/nvm-windows)\n2. Install the [Firebase CLI](https://developers.google.com/actions/dialogflow/deploy-fulfillment)\n   - We recommend using MAJOR version `7` with `7.1.1` or above, `npm install -g firebase-tools@^7.1.1`\n   - Run `firebase login` with your Google account\n\n### Configuration\n\n#### Actions Console\n\n1. From the [Actions on Google Console](https://console.actions.google.com/), add a new project \u003e **Create Project** \u003e under **More options** \u003e **Conversational**\n1. Click **Deploy** in the top menu. Then, click **Additional information**.\n   1. Under **Category**, select **Games \u0026 fun**\n   1. Under **Interactive Canvas** _Do your Actions use Interactive Canvas?_, check **Yes**\n1. Click **Develop** in the top menu. Then, click **Actions** \u003e **Add Your First Action** \u003e **Play game** \u003e **GET STARTED IN DIALOGFLOW** (this will bring you to the Dialogflow console) \u003e Select language and time zone \u003e **CREATE**.\n1. In the Dialogflow console, go to **Settings** ⚙ \u003e **Export and Import** \u003e **Restore from zip** using the `agent.zip` in this sample's directory.\n\n#### Firestore Database\n1. From the [Firebase console](https://console.firebase.google.com), find and select your Actions on Google Project ID\n1. In the left navigation menu under **Develop** section \u003e **Database** \u003e **Create database** button \u003e Select **Start in test mode** \u003e **Enable**\n\n#### Firebase Deployment\n\n1. On your local machine, in the `functions` directory, run `npm install`\n1. Run `firebase deploy --project {PROJECT_ID}` to deploy the function and hosting\n   - To find your **Project ID**: In [Dialogflow console](https://console.dialogflow.com/) under **Settings** ⚙ \u003e **General** tab \u003e **Project ID**.\n\n#### Dialogflow Console\n\n1. Return to the [Dialogflow Console](https://console.dialogflow.com) \u003e select **Fulfillment** \u003e **Enable** Webhook \u003e Set **URL** to the **Function URL** that was returned after the deploy command \u003e **SAVE**.\n   ```\n   https://${REGION}-${PROJECT_ID}.cloudfunctions.net/dialogflowFirebaseFulfillment\n   ```\n1. From the left navigation menu, click **Integrations** \u003e **Integration Settings** under Google Assistant \u003e Enable **Auto-preview changes** \u003e **Test** to open the Actions on Google simulator then say or type `Talk to my test app`.\n\n### Running this Sample\n\n- You can test your Action on any Interactive Canvas [supported devices](https://developers.google.com/actions/interactivecanvas/#supported_devices) 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”.\n- You can also use the Actions on Google Console simulator to test most features and preview on-device behavior.\n- In the simulator, you have to click on the canvas iframe to enable audio playback of the game sounds.\n\n## References \u0026 Issues\n\n- Questions? Go to [StackOverflow](https://stackoverflow.com/questions/tagged/actions-on-google), [Assistant Developer Community on Reddit](https://www.reddit.com/r/GoogleAssistantDev/) or [Support](https://developers.google.com/actions/support/).\n- For bugs, please report an issue on Github.\n- Actions on Google [Interactive Canvas Documentation](https://developers.google.com/actions/canvas/)\n- Actions on Google [Documentation](https://developers.google.com/actions/extending-the-assistant)\n- Actions on Google [Codelabs](https://codelabs.developers.google.com/?cat=Assistant)\n- [Webhook Boilerplate Template](https://github.com/actions-on-google/dialogflow-webhook-boilerplate-nodejs) for Actions on Google\n\n## Make Contributions\n\nPlease read and follow the steps in the [CONTRIBUTING.md](CONTRIBUTING.md).\n\n## License\n\nSee [LICENSE](LICENSE).\n\n## Terms\n\nYour use of this sample is subject to, and by using or downloading the sample files you agree to comply with, the [Google APIs Terms of Service](https://developers.google.com/terms/).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Factions-on-google-labs%2Finteractive-canvas-editor-nodejs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Factions-on-google-labs%2Finteractive-canvas-editor-nodejs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Factions-on-google-labs%2Finteractive-canvas-editor-nodejs/lists"}