Javascript API

Adam1982Adam1982 Member Posts: 5
Hi there

I would like to embedd ethereum-projects into webpages. I guess, the easiest way of doing this is using the javascript API. Unfortunately, I couldn't find out how this is done.

I have found the following tutorial:

https://forum.ethereum.org/discussion/1636/tutorial-3-introduction-to-the-javascript-api/p1

However, as I understand, this tutorial only works when running the html-file from within Alethzero. I would like to have it run from any web browser, so that any users can use it.

Is there a documentation / tutorial that explains how this is done? Is the Javascript API the right "tool" for that? Or is there an alternative way of doing this... Maybe I am missing something...?

Thanks for your answer / help in advance.

Adam



Comments

  • Adam1982Adam1982 Member Posts: 5
    Maybe my question above isn't clear enough... Very generally, how can I use / embedd Ethereum as part of a bigger project / piece of software, etc. (with what tool / API)? Thanks a lot for an anwer in advance. Adam
  • JeffreyBPetersenJeffreyBPetersen Santa Cruz, CaliforniaMember Posts: 5
    For users who have a local node or for anyone?
  • SouptacularSouptacular Member, Administrator, Moderator Posts: 14 admin
    edited September 2015
    Here is what I did. It requires that the user using your page has an Ethereum client (geth, eth, Alethzero) running while they use your site AND that they connect to your site via RPC.

    In your HTML page add this to as a script so it can access web3, which is Ethereum's Javascript bridge.
    <script src="http://rawgit.com/ethereum/web3.js/master/dist/web3.js"></script>

    Then, in a separate JS file, store both your ABI and make some calls to have a local node connect.
    var web3 = require('web3');
    web3.setProvider(new web3.providers.HttpProvider( "http://localhost:8080" ));
    someContract= web3.eth.contract(abi).at("0x5548e21695f8f5e4edbcd8abc2de0924c718daca");
    Note: you may want to switch the port on the localhost or just allow the user to set that variable for whichever client they connect with.

    The ABI would be something like:
    var abi = [
      {
        "constant": true,
        "inputs": [
          {
            "name": "",
            "type": "bytes32"
          }
        ],
        "name": "namePlacement",
        "outputs": [
          {
            "name": "",
            "type": "address"
          }
        ],  {
        "anonymous": false,
        "inputs": [
          {
            "indexed": false,
            "name": "blockNumber",
            "type": "uint256"
          },
          {
            "indexed": true,
            "name": "someData",
            "type": "bytes32"
          },
          {
            "indexed": true,
            "name": "from",
            "type": "address"
          },
          {
            "indexed": true,
            "name": "to",
            "type": "address"
          }
        ],
        "name": "SomeEvent",
        "type": "event"
      }
    ]
    and that would be on the page in a tag or in an external JS file you call from your HTML page.

    Maran did a very cool Notary project that I got a lot of these tips from. Visit his demo and look at his code for some pointers. --> https://github.com/maran/notareth
  • Adam1982Adam1982 Member Posts: 5
    Thanks a lot for your answers. I will try the example.

    Jeffrey, you are asking whether with local node or for anyone. Basically, my intention is to have it running for everyone. Without the necessity to have geth, eth, etc installed. What options do I have here...?



Sign In or Register to comment.