diff --git a/content/_code-samples/rippleapi_quickstart/browser-demo.html b/content/_code-samples/rippleapi_quickstart/browser-demo.html index 7424c7be27..cd3e0a72e0 100644 --- a/content/_code-samples/rippleapi_quickstart/browser-demo.html +++ b/content/_code-samples/rippleapi_quickstart/browser-demo.html @@ -1,8 +1,8 @@ - - + + + +``` + +_jsDelivr_ + +```html + + +``` + + + +Instead of using Node.js's "require" syntax, the browser version creates a global variable named `ripple`, which contains the `RippleAPI` class. ## Build a Browser-Compatible Version of RippleAPI -To use RippleAPI in a browser, you need to build a browser-compatible version. The following process compiles RippleAPI into a single JavaScript file you can include in a webpage. +You can also build a browser-compatible version of the code yourself. Use the following steps to build it from the source code. ### 1. Download a copy of the RippleAPI git repository @@ -285,50 +305,45 @@ yarn ``` -### 4. Use Gulp to build a single JavaScript output +### 4. Build with Yarn -RippleAPI comes with code to use the [gulp](http://gulpjs.com/) package to compile all its source code into browser-compatible JavaScript files. Gulp is automatically installed as one of the dependencies, so all you have to do is run it, such as with following command: +RippleAPI comes with the necessary dependencies and code to build it for the browser. Trigger the build script as follows: -``` +```sh yarn run build ``` Output: -``` -> ripple-lib@0.16.5 build /home/username/ripple-lib -> gulp - -[14:11:02] Using gulpfile /home/username/ripple-lib/gulpfile.js -[14:11:02] Starting 'build'... -[14:11:03] Starting 'build-debug'... -[14:11:03] Starting 'build-min'... -[14:11:18] Finished 'build-debug' after 15 s -[14:11:18] Finished 'build' after 16 s -[14:11:18] Finished 'build-min' after 15 s -[14:11:18] Starting 'default'... -[14:11:18] Finished 'default' after 19 μs +```text +yarn run v1.22.4 +$ yarn build:schemas && yarn build:lib && yarn build:web +$ mkdir -p dist/npm/common && cp -r src/common/schemas dist/npm/common/ +$ tsc --build +$ webpack +Done in 10.29s. ``` This may take a while. At the end, the build process creates a new `build/` folder, which contains the files you want. -The file `build/ripple-.js` is a straight export of RippleAPI (whatever version you built) ready to be used in browsers. The file ending in `-min.js` is the same thing, but with the content [minified](https://en.wikipedia.org/wiki/Minification_%28programming%29) for faster loading. +The file `build/ripple-latest.js` is a direct export of RippleAPI (whatever version you built) ready to be used in browsers. The file ending in `build/ripple-latest-min.js` is the same thing, but with the content [minified](https://en.wikipedia.org/wiki/Minification_%28programming%29) for faster loading. ## Demo RippleAPI in a Browser -The following HTML file demonstrates basic usage of the browser version of RippleAPI to connect to a public `rippled` server and report information about that server. Instead of using Node.js's "require" syntax, the browser version creates a global variable named `ripple`, which contains the `RippleAPI` class. +The following HTML file demonstrates basic usage of the browser version of RippleAPI to connect to a public `rippled` server and report information about that server. -To use this example, you must first [build a browser-compatible version of RippleAPI](#build-a-browser-compatible-version-of-rippleapi) and then copy one of the resulting output files to the same folder as this HTML file. (You can use either the minified or full-size version.) Change the second ` + +``` + + - - - + +On this page, that's already done, so continue to the next step! + + +## 2. First Script + +The following code gets the latest [ledger version](ledgers.html) and a list of transactions that were newly-validated in that ledger version, using the [`getLedger()` method](rippleapi-reference.html#getledger). Try running it as-is, or change the code and see what happens. + +**Tip:** If you can, open your browser's Developer Tools by pressing **F12**. The "Console" tab provides a native JavaScript console and can give insight into what code is running on any webpage. + +

 const mainnet = new ripple.RippleAPI({
-  server: 'wss://s1.ripple.com' // Ripple's public cluster
-  // server: 'wss://s2.ripple.com' // Ripple's full history cluster
-  // server: 'wss://xrpl.ws' // XRPL Labs full history cluster
-  // server: 'wss://s.altnet.rippletest.net/' // Testnet
-  // server: 'wss://s.devnet.rippletest.net/' // Devnet
+  server: 'wss://s1.ripple.com'
 });
 
 (async function(api) {
   await api.connect();
-  let ledger = await api.getLedger();
-  console.log(ledger);
+
+  let response = await api.getLedger({
+    includeTransactions: true
+  });
+  console.log(response);
+
 })(mainnet);
- +

+ + +

Output

- + + +
+ +## 3. Next Steps + +Try editing the code from step 2 to do something different: + +- Connect to the [Testnet](parallel-networks.html) public server at `wss://s.altnet.rippletest.net/` instead. [Answer >](javascript:fill_ex_1()) +- Look up the details of a transaction using the [`getTransaction()` method](rippleapi-reference.html#gettransaction). For the `id`, use one of the `transactionHashes` from the `getLedger()` response! [Answer >](javascript:fill_ex_2()) +- Convert the `totalDrops` from the response to decimal XRP. [Answer >](javascript:fill_ex_3()) + +## Further Reading + + diff --git a/dactyl-config.yml b/dactyl-config.yml index b148a71807..7aba14b28d 100644 --- a/dactyl-config.yml +++ b/dactyl-config.yml @@ -1489,7 +1489,7 @@ pages: funnel: Build doc_type: Tutorials category: Get Started - blurb: Get started with the APIs and libraries available for interacting with the XRP Ledger. + blurb: Unleash the full power of the XRP Ledger's native APIs. cta_text: Get Started targets: - en @@ -1504,32 +1504,12 @@ pages: targets: - ja - - md: tutorials/get-started/set-up-secure-signing.md - html: set-up-secure-signing.html - funnel: Build - doc_type: Tutorials - category: Get Started - blurb: Set up an environment where you can submit transactions securely. - targets: - - en - - - md: tutorials/get-started/set-up-secure-signing.ja.md - html: set-up-secure-signing.html - funnel: Build - doc_type: Tutorials - category: Get Started - blurb: 安全にトランザクションを送信できる環境を設定します。 - targets: - - ja - - # TODO: Send a Transaction with the rippled API - - md: tutorials/get-started/get-started-with-rippleapi-for-javascript.md html: get-started-with-rippleapi-for-javascript.html funnel: Build doc_type: Tutorials category: Get Started - blurb: Build an entry-level JavaScript application for querying the XRP Ledger. + blurb: Build an entry-level JavaScript application for querying the XRP Ledger in Node.js. targets: - en @@ -1542,21 +1522,27 @@ pages: targets: - ja - - md: tutorials/get-started/look-up-transaction-results.md - html: look-up-transaction-results.html + - md: tutorials/use-simple-xrp-payments/send-xrp.md + html: send-xrp.html funnel: Build doc_type: Tutorials category: Get Started - blurb: Find the results of previously-submitted transactions. + blurb: Learn how to send test payments right from your browser. + cta_text: Send XRP + filters: + - interactive_steps targets: - en - - md: tutorials/get-started/look-up-transaction-results.ja.md - html: look-up-transaction-results.html + - md: tutorials/use-simple-xrp-payments/send-xrp.ja.md + html: send-xrp.html funnel: Build doc_type: Tutorials category: Get Started - blurb: 以前に送信したトランザクションの結果を確認します。 + blurb: Test Netを使用してXRPの送金をテストします。 + cta_text: XRPを送金しよう + filters: + - interactive_steps targets: - ja @@ -1582,49 +1568,63 @@ pages: targets: - ja - # TODO: Get Started with API Tools - + # Send old "Use Direct XRP Payments" landing to "Get Started" instead - name: Use Direct XRP Payments html: use-simple-xrp-payments.html funnel: Build doc_type: Tutorials - category: Use Simple XRP Payments + category: Get Started + template: template-redirect.html + redirect_url: get-started.html + targets: + - en + - ja + + # TODO: translate this page name and blurb + - name: Production Readiness + html: production-readiness.html + funnel: Build + doc_type: Tutorials + category: Production Readiness template: template-landing-children.html - blurb: Direct XRP payments from one account to another are the simplest way to transact in the XRP Ledger. This section includes tutorials for how to use simple transactions proficiently and robustly. + blurb: Follow these best practices to build a robust, safe production system for using the XRP Ledger. + targets: + - en + - ja + + - md: tutorials/get-started/set-up-secure-signing.md + html: set-up-secure-signing.html + funnel: Build + doc_type: Tutorials + category: Production Readiness + blurb: Set up an environment where you can submit transactions securely. targets: - en - - name: 直接XRP支払いの送信 - html: use-simple-xrp-payments.html + - md: tutorials/get-started/set-up-secure-signing.ja.md + html: set-up-secure-signing.html funnel: Build doc_type: Tutorials - category: Use Simple XRP Payments - template: template-landing-children.html - blurb: アカウント間でのXRPによる直接支払いは、XRP Ledgerで取引する最も簡単な方法です。このセクションでは、単純なトランザクションの上手で確実な使い方についてのチュートリアルを提供します。 + category: Production Readiness + blurb: 安全にトランザクションを送信できる環境を設定します。 targets: - ja - - md: tutorials/use-simple-xrp-payments/send-xrp.md - html: send-xrp.html + - md: tutorials/get-started/look-up-transaction-results.md + html: look-up-transaction-results.html funnel: Build doc_type: Tutorials - category: Use Simple XRP Payments - blurb: Learn how to send test payments right from your browser. - cta_text: Send XRP - filters: - - interactive_steps + category: Production Readiness + blurb: Find the results of previously-submitted transactions. targets: - en - - md: tutorials/use-simple-xrp-payments/send-xrp.ja.md - html: send-xrp.html + - md: tutorials/get-started/look-up-transaction-results.ja.md + html: look-up-transaction-results.html funnel: Build doc_type: Tutorials - category: Use Simple XRP Payments - blurb: Test Netを使用してXRPの送金をテストします。 - cta_text: XRPを送金しよう - filters: - - interactive_steps + category: Production Readiness + blurb: 以前に送信したトランザクションの結果を確認します。 targets: - ja @@ -1632,7 +1632,7 @@ pages: html: reliable-transaction-submission.html funnel: Build doc_type: Tutorials - category: Use Simple XRP Payments + category: Production Readiness blurb: Build a system that can submit transactions to the XRP Ledger and get their final results safely and quickly. targets: - en @@ -1641,7 +1641,7 @@ pages: html: reliable-transaction-submission.html funnel: Build doc_type: Tutorials - category: Use Simple XRP Payments + category: Production Readiness blurb: XRP Ledgerにトランザクションを送信することができるシステムを構築し、最終結果を素早く安全に受け取ります。 targets: - ja @@ -1651,7 +1651,7 @@ pages: html: cancel-or-skip-a-transaction.html funnel: Build doc_type: Tutorials - category: Use Simple XRP Payments + category: Production Readiness template: template-redirect.html redirect_url: about-canceling-a-transaction.html targets: