App Inventor and HTML/JavaScript


How to use App Inventor and Skulpt to run Python code

It has been asked in the forum: I want to make a python code editor using App Inventor. Is it possible to execute code in some way or the other and show the output? Yes, this is possible!


To find a solution to this problem, I looked around in the internet and found Skulpt: Python. Client side. Skulpt is an entirely in-browser implementation of Python. No preprocessing, plugins, or server-side support required, just write Python and reload. Thank you Scott Graham!

How does it work?


I uploaded the jQuery library, 2 Skulpt libraries and the modified example html code (which has been provided at www.skulpt.org) as assets into App Inventor.

The Python code examples are available as text files and also uploaded as assets. The code to run will be transferred in the WebViewString property to the webviewer. After processing, the result will be provided back to App Inventor in the page title of the webviewer.

App Inventor Blocks

The tools extension offers the method PathToAssets which always returns the correct path to the assets.



Screenshots







HTML/JavaScript

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta name="author" content="puravidaapps.com">

  <!-- more about Skulpt see http://www.skulpt.org Thank you Scott Graham! -->
  <script src="jquery-1.9.0.min.js" type="text/javascript"></script>
  <script src="skulpt.min.js" type="text/javascript"></script>
  <script src="skulpt-stdlib.js" type="text/javascript"></script>
  <title>App Inventor and Skulpt running some Python</title>
</head>

<body>
  <pre id="output"></pre>
  <!-- If you want turtle graphics include a canvas -->
  <canvas id="mycanvas" ></canvas>

  <script type="text/javascript">
  // output functions are configurable. This one just appends some text
  // to a pre element.
  function outf(text) {
    var mypre = document.getElementById("output");
    mypre.innerHTML = mypre.innerHTML + text;

    // print the result to the page title
    window.document.title = mypre.innerHTML;
  }

  function builtinRead(x) {
    if (Sk.builtinFiles === undefined || Sk.builtinFiles["files"][x] === undefined)
    throw "File not found: '" + x + "'";
    return Sk.builtinFiles["files"][x];
  }

  // Here's everything you need to run a python program in skulpt

  // get the code from the window.AppInventor object
  var prog = window.AppInventor.getWebViewString();
  var mypre = document.getElementById("output");
  mypre.innerHTML = '';
  Sk.canvas = "mycanvas";
  Sk.pre = "output";
  Sk.configure({output:outf, read:builtinRead});
  try {
    eval(Sk.importMainWithBody("<stdin>",false,prog));
  }
  catch(e) {
    alert(e.toString())
  }
  </script>
</body>
</html>

Test

Tested successfully on Nexus 5 running Android 4.4.4.


Comic provided by xkcd.com. Thank you.

Download


If you find this example helpful and you are using it in one of your projects,
be nice and donate a small amount!

Donation amount:

or donate some mBTC to Bitcoin Address:
1Jd8kXLHu2Vkuhi15TWHiQm4uE9AGPYxi8
Bitcoin

Thank you! Taifun
 

Download aia file for App Inventor
Back to top of page ...

Creative Commons License
This work by Pura Vida Apps is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License
with attribution (name=Pura Vida Apps and link to the source site) required.


Home | Snippets | Tutorials | Extensions | News | Forums | Links | Search | Contact