[Ethereum] How to interact with a deployed smart contract in the real world

You will need to create an HTML page that uses the web3 library to interact with your Ethereum-enabled browser (MetaMask, Mist, etc.).

First include web3.js or web3.min.js in your HTML, then you will be able to call JavaScript functions that interact with accounts and contracts, check syncing status and block numbers, etc.

<script src="web3.min.js"></script>

Here is an example of how to instantiate a web3 instance:

if (typeof web3 !== 'undefined') {
  web3 = new Web3(web3.currentProvider);
} else {
  // browser is not web3-enabled
}

Then you can use it like this:

web3.eth.getBlock(48, function(error, result){
    if(!error)
        console.log(result)
    else
        console.error(error);
})

Here is the API reference: https://github.com/ethereum/wiki/wiki/JavaScript-API

Heads up: The API reference has a lot of examples of synchronous calls, but web3 has deprecated them in a lot of cases. Most of the function calls will need to specify callbacks.

For Question 1 :

You don't need metamask to connect to private chain, even to a testnet or a live net if you have a full node running locally, meta mask provides a similar to a light client when you can't run a full node.

For Question 2:

Your onClick function doesn't refer to the function in the app.js since App is not defined.