BlocosIA Wiki Editor

Talk to Kodular and App Inventor apps

Export as HTML, open it in a WebViewer and exchange events, requests and data with the app.

Getting ready

  1. Add the App (Kodular / App Inventor) extension and code your project.
  2. Export as HTML (Pro plan) and put the file in the app Media (or at an https address).
  3. In the app, use a WebViewer with the page: file:///android_asset/game.html (App Inventor) or the media path in Kodular. You can pass parameters: game.html?level=2.

Project → app

  • send text … to the app and send event … with data … fire the WebViewer.WebViewStringChange event. Read the value property (text or JSON).
  • JSON formats: {"tipo":"evento","nome":"points","dados":10}, {"tipo":"acao","acao":"toast","valor":"Hi"} and {"tipo":"pedido","id":3,"nome":"tinydb_ler","dados":{"tag":"record"}}.
  • In the app, turn the text into a dictionary (JsonTextDecode / make dictionary from JSON) and choose what to do by tipo and acao: toast, vibrar, abrir_link, compartilhar, falar, copiar, notificacao, tela_ligada, orientacao, abrir_tela, fechar, tinydb_salvar.

App → project

  • WebViewer.RunJavaScript (App Inventor) or Evaluate JavaScript (Kodular): blocosiaApp('back') or blocosiaApp('coin', 5) fire when the app sends the event ….
  • To answer a request: blocosiaApp.responder(3, 'value') (use the same id).
  • Or change the WebViewString property: plain text becomes a message; {"nome":"x","dados":1} becomes an event; {"resposta":3,"valor":…} answers a request.

Tips

  • Phone Back button: in Screen.BackPressed, call blocosiaApp('back') and handle it in the project.
  • There is no app in the editor: use simulate the app sending the event … to test.
  • am I inside an app? helps hide buttons that only make sense on the phone.