reorganised Docs based on PR 481 and issue #500. Fixes issue #500

aeternity · Jun 21, 2019 · 76afa79 · 76afa79
1 parent bfc7c8f
commit 76afa79
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 37 deletions.
diff --git a/README.md b/README.md
@@ -24,22 +24,34 @@ check out the [develop branch].
 [develop branch]: https://github.com/aeternity/aepp-sdk-js/tree/develop
 
 ## Table of content
-- [Æternity's Javascript SDK](#%C3%A6ternitys-javascript-sdk)
-      - [Disclaimer](#disclaimer)
-  - [Table of content](#table-of-content)
-  - [Quick Start](#quick-start)
-    - [1. Install the SDK](#1-install-the-sdk)
-    - [2. Import (a chosen Flavor)](#2-import-a-chosen-flavor)
-    - [3. Create an Account and get some _AEs_](#3-create-an-account-and-get-some-aes)
-  - [Guides & Examples](#guides--examples)
-  - [CLI - Command Line Client](#cli---command-line-client)
-  - [Contributing](#contributing)
-  - [Change Log](#change-log)
-  - [License](#license)
+- [Æternity's Javascript SDK](#%C3%86ternitys-Javascript-SDK)
+      - [Disclaimer](#Disclaimer)
+  - [Table of content](#Table-of-content)
+  - [Quick Start](#Quick-Start)
+    - [1. Install SDK](#1-Install-SDK)
+      - [A) Simple Usage: with `<script>` tag](#A-Simple-Usage-with-script-tag)
+      - [B) Advanced Usage: with `npm` or similar](#B-Advanced-Usage-with-npm-or-similar)
+    - [2. Create an Account](#2-Create-an-Account)
+      - [A) Using the Command Line](#A-Using-the-Command-Line)
+      - [B) Using the SDK](#B-Using-the-SDK)
+    - [3. Give yourself some "testnet tokens"](#3-Give-yourself-some-%22testnet-tokens%22)
+    - [4. Import (a chosen Flavor)](#4-Import-a-chosen-Flavor)
+    - [5. Play with Aetenity's blockchain features](#5-Play-with-Aetenitys-blockchain-features)
+  - [More: Guides & Examples](#More-Guides--Examples)
+  - [CLI - Command Line Client](#CLI---Command-Line-Client)
+  - [Contributing](#Contributing)
+  - [Change Log](#Change-Log)
+  - [License](#License)
 
 ## Quick Start
 
-### 1. Install the SDK
+### 1. Install SDK
+#### A) Simple Usage: with `<script>` tag
+For those not using any JS bundling/complilation or compilation technique or tools like [_Codepen_](https://codepen.io/pen/) or similar online Editors, please check our [**Import SDK bundle with `<script>` tag**](docs/guides/import-script-tag.md).
+
+If you're using bundling/compilation techniques (eg. `webpack`), please continue reading.
+
+#### B) Advanced Usage: with `npm` or similar
 Add the latest `@aeternity/aepp-sdk` release from npmjs.com to your project using one of these commands
 
 ```bash
@@ -56,33 +68,59 @@ npm i @aeternity/aepp-sdk@next
 npm i https://github.com/aeternity/aepp-sdk-js#develop
 ```
 
-**Note #2:** To include the SDK directly in an html page you can use the `<script>` tag with as follows:
+### 2. Create an Account
+You can do many more things now, but you'll probably have to start with:
+
+#### A) Using the Command Line
+Create an account using the [💻 CLI](#cli---command-line-client)
 
-```html
-<script src="https://unpkg.com/@aeternity/aepp-sdk/dist/aepp-sdk.browser-script.js"></script>
-```
-That will use the latest available release, to lock the project to a specific release you can use 
-```html
-<script src="https://unpkg.com/@aeternity/aepp-sdk@VERSION/dist/aepp-sdk.browser-script.js"></script>
+#### B) Using the SDK
+
+```javascript
+  import { Crypto } from '@aeternity/aepp-sdk/es'
+  const keypair = Crypto.generateKeyPair()
+  console.log(`Secret key: ${keypair.secretKey}`)
+  console.log(`Public key: ${keypair.publicKey}`)
 ```
-where `VERSION` is the version number of the SDK you want to use.
 
-### 2. Import (a chosen Flavor)
+### 3. Give yourself some "testnet tokens"
+To get yourself some _AEs_ you can use the [🚰 Faucet Aepp](https://faucet.aepps.com/). Just add your publicKey, and you'll immediately get some test tokens.
+
+
+### 4. Import (a chosen Flavor)
 
 Import the right [flavor](docs/README.md#flavors--entry-points). For this example with get the `Universal` flavor, which contains all the features of the SDK:
 
 ```js
+// Import Flavor
 import Ae from '@aeternity/aepp-sdk/es/ae/universal' // or other flavor
 ```
 
-### 3. Create an Account and get some _AEs_
-You can do many more things now, but you'll probably have to start with:
+### 5. Play with Aetenity's blockchain features
 
-1. Create an account using the [💻 CLI](#cli---command-line-client)
-2. Give yourself some initial _AEs_ using the [🚰 Faucet Aepp](https://faucet.aepps.com/)
-3. Enjoy building Aepps 🤓
+```js
+// Use Flavor
+Ae({
+  url: 'https://sdk-testnet.aepps.com',
+  internalUrl: 'https://sdk-testnet.aepps.com',
+  compilerUrl: 'https://compiler.aepps.com',
+  keypair: { secretKey: 'A_PRIV_KEY', publicKey: 'A_PUB_ADDRESS' },
+  networkId: 'ae_uat' // or any other networkId your client should connect to
+}).then(ae => {
+  // Interacting with the blockchain client
+  // getting the latest block height
+  ae.height().then(height => {
+    // logs current height
+    console.log('Current Block Height:', height)
+  }).catch(e => {
+    // logs error
+    console.log(e)
+  })
+})
+
+```
 
-## Guides & Examples
+## More: Guides & Examples
 
 Check out our [Guides](docs/README.md) and [Examples](examples/README.md).
 

diff --git a/docs/guides/import-script-tag.md b/docs/guides/import-script-tag.md
@@ -1,12 +1,21 @@
 ## Browser bundle
 
-The browser bundle is relevant in two seperate cases: Either the SDK is to be
-loaded traditionally through a `<script>` tag, or the bundler / compiliation is
-not sufficient to use and compile the SDK's ES Modules.
+In case you're not using any JS bundling/compilation technnique, the SDK can also be loaded with the traditional `<script>` tag, as follows:
 
-### Browser `<script>` tag
+### Latest SDK version
 
-The bundle will assign the SDK to a global `var` called `Ae`.
+```html
+<script src="https://unpkg.com/@aeternity/aepp-sdk/dist/aepp-sdk.browser-script.js"></script>
+```
+
+### Specific SDK version
+```html
+<script src="https://unpkg.com/@aeternity/aepp-sdk@VERSION/dist/aepp-sdk.browser-script.js"></script>
+```
+...where `VERSION` is the version number of the SDK you want to use (eg. `4.0.1`).
+
+### Browser `<script>` tag
+The bundle will assign the SDK to a global `var` called `Ae`, and you can use it like so:
 
 ```html
 <!doctype html>
@@ -15,14 +24,21 @@ The bundle will assign the SDK to a global `var` called `Ae`.
   <meta charset="utf-8">
 </head>
 <body>
-  <script src="aepp-sdk.browser-script.js"></script>
+  <!-- include latest SDK version -->
+  <script src="https://unpkg.com/@aeternity/aepp-sdk/dist/aepp-sdk.browser-script.js"></script>
   <script type="text/javascript">
-    Ae.Wallet().then(ae => {
-      ae.height().then(height => {
-        console.log('Current Block', height)
+    Ae.Wallet({
+      url: 'https://sdk-testnet.aepps.com',
+      internalUrl: 'https://sdk-testnet.aepps.com'
+    }).then(aeInstance => {
+      aeInstance.height().then(height => {
+        console.log("Current Block Height:" + height)
       })
     })
   </script>
 </body>
 </html>
 ```
+
+### CodePen Example
+Immediately [**START**](https://codepen.io/ricricucit/pen/JQWRNb) playing with our latest SDK release in Codepen.