| OLD | NEW |
| 1 --- | 1 --- |
| 2 layout: tutorial | 2 layout: tutorial |
| 3 title: "Code Lab: Pirate Convention" | 3 title: "Avast, Ye Pirates: Write a Web App" |
| 4 description: "Write some Dart code. Learn some stuff." | 4 description: "Take your first step to learning Dart fast." |
| 5 snippet_img: images/piratemap.jpg | 5 snippet_img: images/piratemap.jpg |
| 6 has-permalinks: true | 6 has-permalinks: true |
| 7 tutorial: | 7 tutorial: |
| 8 id: trydart | 8 id: trydart |
| 9 js: | 9 js: |
| 10 - url: /js/os-switcher.js | 10 - url: /js/os-switcher.js |
| 11 defer: true | 11 defer: true |
| 12 - url: /js/downloads-analytics.js | 12 - url: /js/downloads-analytics.js |
| 13 defer: true | 13 defer: true |
| 14 - url: /js/editor-version.js | 14 - url: /js/editor-version.js |
| 15 defer: true | 15 defer: true |
| 16 header: | 16 header: |
| 17 css: ["/codelabs/darrrt/darrrt.css"] | 17 css: ["/codelabs/darrrt/darrrt.css"] |
| 18 --- | 18 --- |
| 19 | 19 |
| 20 # {{ page.title }} | 20 # {{ page.title }} |
| 21 | 21 |
| 22 In this code lab, | 22 In this code lab, |
| 23 you build a pirate badge generator from a skeleton app. | 23 you build a pirate badge generator from a skeleton app. |
| 24 The sample app provides a brief look at some Dart language and library features. | 24 The sample app provides a brief look at some Dart language and library features. |
| 25 This code lab assumes that you have some programming experience. | 25 This code lab assumes that you have some programming experience. |
| 26 | 26 |
| 27 <strong>Build this app!</strong> | 27 <strong>Build this app!</strong> |
| 28 | 28 |
| 29 <iframe class="running-app-frame" | 29 <iframe class="running-app-frame" |
| 30 style="height:220px;width:550px;" | 30 style="height:220px;width:550px;" |
| 31 src="examples/6-piratebadge_json/piratebadge.html"> | 31 src="examples/6-piratebadge/piratebadge.html"> |
| 32 </iframe> | 32 </iframe> |
| 33 | 33 |
| 34 <hr> | 34 <hr> |
| 35 | 35 |
| 36 <div class="piratemap" markdown="1" style="min-height:325px"> | 36 <div class="piratemap" markdown="1" style="min-height:325px"> |
| 37 | 37 |
| 38 ## Map | 38 ## Map |
| 39 | 39 |
| 40 * [Step 0: Set up](#set-up) | 40 * [Step 0: Set up](#set-up) |
| 41 * [Step 1: Run the skeleton app](#step-one) | 41 * [Step 1: Run the skeleton app](#step-one) |
| 42 * [Step 2: Add an input field](#step-two) | 42 * [Step 2: Add an input field](#step-two) |
| 43 * [Step 3: Add a button](#step-three) | 43 * [Step 3: Add a button](#step-three) |
| 44 * [Step 4: Create a class](#step-four) | 44 * [Step 4: Create a class](#step-four) |
| 45 * [Step 5: Save to local storage](#step-five) | 45 * [Step 5: Save to local storage](#step-five) |
| 46 * [Step 6: Read names from JSON file using HttpRequest](#step-six) | 46 * [Step 6: Read names from JSON file using HttpRequest](#step-six) |
| 47 * [Step 7: Go forth and learn more about Dart](#step-seven) | 47 * [Step 7: Build the app and run as JavaScript](#step-seven) |
| 48 * [Step 8: Go forth and learn more about Dart](#step-eight) |
| 48 | 49 |
| 49 </div> | 50 </div> |
| 50 | 51 |
| 51 | 52 |
| 52 <hr> | 53 <hr> |
| 53 | 54 |
| 54 ## Step 0: Set up {#set-up} | 55 ## Step 0: Set up {#set-up} |
| 55 | 56 |
| 56 In this step, you download Dart and get the sample code. | 57 In this step, you download Dart and get the sample code. |
| 57 | 58 |
| (...skipping 26 matching lines...) Expand all Loading... |
| 84 [Troubleshooting Dart Editor](/tools/editor/troubleshoot.html) page. | 85 [Troubleshooting Dart Editor](/tools/editor/troubleshoot.html) page. |
| 85 | 86 |
| 86 </div> | 87 </div> |
| 87 | 88 |
| 88 ### <i class="fa fa-anchor"> </i> Get the sample code. | 89 ### <i class="fa fa-anchor"> </i> Get the sample code. |
| 89 | 90 |
| 90 <div class="trydart-step-details" markdown="1"> | 91 <div class="trydart-step-details" markdown="1"> |
| 91 <a href="https://github.com/dart-lang/one-hour-codelab/archive/master.zip">Downl
oad</a> | 92 <a href="https://github.com/dart-lang/one-hour-codelab/archive/master.zip">Downl
oad</a> |
| 92 the sample code. | 93 the sample code. |
| 93 Unzip the ZIP file, | 94 Unzip the ZIP file, |
| 94 which creates a directory called `one-hour-codelab-master`. | 95 which creates a directory called `one-hour-codelab`. |
| 95 </div> | 96 </div> |
| 96 | 97 |
| 97 ### <i class="fa fa-anchor"> </i> Open the one-hour-codelab-master sample. | 98 ### <i class="fa fa-anchor"> </i> Open the one-hour-codelab sample. |
| 98 | 99 |
| 99 <div class="trydart-step-details" markdown="1"> | 100 <div class="trydart-step-details" markdown="1"> |
| 100 In Dart Editor, | 101 In Dart Editor, |
| 101 use **File > Open Existing Folder...** | 102 use **File > Open Existing Folder...** |
| 102 to open the `one-hour-codelab-master` directory. | 103 to open the `one-hour-codelab` directory. |
| 103 </div> | 104 </div> |
| 104 | 105 |
| 105 <div class="row"> <div class="col-md-7" markdown="1"> | 106 <div class="row"> <div class="col-md-7" markdown="1"> |
| 106 | 107 |
| 107  | 108  |
| 108 | 109 |
| 109 </div> <div class="col-md-5" markdown="1"> | 110 </div> <div class="col-md-5" markdown="1"> |
| 110 | 111 |
| 111 <i class="fa fa-key"> </i> <strong> Key Information </strong> | 112 <i class="fa fa-key key-header"> </i> <strong> Key Information </strong> |
| 112 | 113 |
| 113 * The `packages` directory, as well as the `pubspec.yaml` and `pubspec.lock` fil
es are | 114 * The `packages` directory, as well as the `pubspec.yaml` and `pubspec.lock` fil
es are |
| 114 related to package dependencies. | 115 related to package dependencies. |
| 115 This project has all the dependencies set up for you. | 116 This project has all the dependencies set up for you. |
| 116 Dart Editor automatically installs the necessary packages. | 117 Dart Editor automatically installs the necessary packages. |
| 117 | 118 |
| 118 * Several numbered directories contain the completed code for each step. | 119 * Several numbered directories contain the completed code for each step. |
| 119 `1-blankbadge` contains the skeletal version of the app that you begin with. | 120 `1-blankbadge` contains the skeletal version of the app that you begin with. |
| 120 `6-piratebadge_json` contains the final version of the app. | 121 `6-piratebadge` contains the final version of the app. |
| 121 | |
| 122 * The `piratebadge.css` file | |
| 123 provides the CSS styles for all steps of the app. | |
| 124 You don't change this file during this code lab. | |
| 125 | 122 |
| 126 * **Dart SDK** contains the source code for all of the functions, | 123 * **Dart SDK** contains the source code for all of the functions, |
| 127 variables, and classes provided by the Dart Software Development Kit. | 124 variables, and classes provided by the Dart Software Development Kit. |
| 128 | 125 |
| 129 * **Installed Packages** contains the source code for all of the functions, | 126 * **Installed Packages** contains the source code for all of the functions, |
| 130 variables, and classes for the additional libraries that this application depe
nds on. | 127 variables, and classes for the additional libraries that this application depe
nds on. |
| 131 | 128 |
| 132 {% comment %} non-breaking space required for bootstrap/markdown bogosity
{% endcomment %} | 129 {% comment %} non-breaking space required for bootstrap/markdown bogosity
{% endcomment %} |
| 133 | 130 |
| 134 </div> </div> | 131 </div> </div> |
| (...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 168 </div> | 165 </div> |
| 169 | 166 |
| 170 <div class="row"> <div class="col-md-7"> | 167 <div class="row"> <div class="col-md-7"> |
| 171 | 168 |
| 172 <div class="trydart-step-details" markdown="1"> | 169 <div class="trydart-step-details" markdown="1"> |
| 173 {% prettify html%} | 170 {% prettify html%} |
| 174 <html> | 171 <html> |
| 175 <head> | 172 <head> |
| 176 <meta charset="utf-8"> | 173 <meta charset="utf-8"> |
| 177 <title>Pirate badge</title> | 174 <title>Pirate badge</title> |
| 178 <link rel="stylesheet" href="../piratebadge.css"> | 175 <meta name="viewport" |
| 176 content="width=device-width, initial-scale=1.0"> |
| 177 <link rel="stylesheet" href="piratebadge.css"> |
| 179 </head> | 178 </head> |
| 180 <body> | 179 <body> |
| 181 <h1>Pirate badge</h1> | 180 <h1>Pirate badge</h1> |
| 182 | 181 |
| 183 [[highlight]]<div class="widgets">[[/highlight]] | 182 [[highlight]]<div class="widgets">[[/highlight]] |
| 184 [[highlight]]TO DO: Put the UI widgets here.[[/highlight]] | 183 [[highlight]]TO DO: Put the UI widgets here.[[/highlight]] |
| 185 [[highlight]]</div>[[/highlight]] | 184 [[highlight]]</div>[[/highlight]] |
| 186 <div class="badge"> | 185 <div class="badge"> |
| 187 <div class="greeting"> | 186 <div class="greeting"> |
| 188 Arrr! Me name is | 187 Arrr! Me name is |
| 189 </div> | 188 </div> |
| 190 <div class="name"> | 189 <div class="name"> |
| 191 [[highlight]]<span id="badgeName"> </span>[[/highlight]] | 190 [[highlight]]<span id="badgeName"> </span>[[/highlight]] |
| 192 </div> | 191 </div> |
| 193 </div> | 192 </div> |
| 194 | 193 |
| 195 [[highlight]]<script type="application/dart" src="piratebadge.dart"></script
>[[/highlight]] | 194 [[highlight]]<script type="application/dart" src="piratebadge.dart"></script
>[[/highlight]] |
| 196 [[highlight]]<script src="packages/browser/dart.js"></script>[[/highlight]] | 195 [[highlight]]<script src="packages/browser/dart.js"></script>[[/highlight]] |
| 197 </body> | 196 </body> |
| 198 </html> | 197 </html> |
| 199 {% endprettify %} | 198 {% endprettify %} |
| 200 | 199 |
| 201 </div> | 200 </div> |
| 202 <div class="trydart-filename">piratebadge.html</div> | 201 <div class="trydart-filename">piratebadge.html</div> |
| 203 | 202 |
| 204 </div> <div class="col-md-5" markdown="1"> | 203 </div> <div class="col-md-5" markdown="1"> |
| 205 | 204 |
| 206 <i class="fa fa-key"> </i> <strong> Key Information </strong> | 205 <i class="fa fa-key key-header"> </i> <strong> Key Information </strong> |
| 207 | 206 |
| 208 * During this code lab, | 207 * During this code lab, |
| 209 all the changes you make to `piratebadge.html` are within | 208 all the changes you make to `piratebadge.html` are within |
| 210 the <div> element identified with the class `widgets`. | 209 the <div> element identified with the class `widgets`. |
| 211 | 210 |
| 212 * In later steps, | 211 * In later steps, |
| 213 the <span> element with the ID `badgeName` | 212 the <span> element with the ID `badgeName` |
| 214 is programmatically updated by the Dart code | 213 is programmatically updated by the Dart code |
| 215 based on user input. | 214 based on user input. |
| 216 | 215 |
| (...skipping 21 matching lines...) Expand all Loading... |
| 238 [[highlight]]void main() { | 237 [[highlight]]void main() { |
| 239 // Your app starts here. | 238 // Your app starts here. |
| 240 } | 239 } |
| 241 [[/highlight]] | 240 [[/highlight]] |
| 242 {% endprettify %} | 241 {% endprettify %} |
| 243 </div> | 242 </div> |
| 244 <div class="trydart-filename">piratebadge.dart</div> | 243 <div class="trydart-filename">piratebadge.dart</div> |
| 245 | 244 |
| 246 </div> <div class="col-md-5" markdown="1"> | 245 </div> <div class="col-md-5" markdown="1"> |
| 247 | 246 |
| 248 * This file contains the entry point for the app—the `main()` function. | 247 * This file contains the single entry point for the app—the `main()` funct
ion. |
| 249 The <script> tags in the `piratebadge.html` file start the application | 248 The <script> tags in the `piratebadge.html` file start the application |
| 250 by running this function. | 249 by running this function. |
| 251 | 250 |
| 252 * The `main()` function is a top-level function. | 251 * The `main()` function is a top-level function. |
| 253 | 252 |
| 254 * A top-level variable or function is one that is declared outside | 253 * A top-level variable or function is one that is declared outside |
| 255 a class definition. | 254 a class definition. |
| 256 | 255 |
| 257 {% comment %} non-breaking space required for bootstrap/markdown bogosity
{% endcomment %} | 256 {% comment %} non-breaking space required for bootstrap/markdown bogosity
{% endcomment %} |
| 258 </div> </div> | 257 </div> </div> |
| 259 | 258 |
| 260 ### <i class="fa fa-anchor"> </i> Run the app. | 259 ### <i class="fa fa-anchor"> </i> Run the app. |
| 261 | 260 |
| 262 <div class="trydart-step-details" markdown="1"> | 261 <div class="trydart-step-details" markdown="1"> |
| 263 To run the app in Dart Editor, select `piratebadge.html` | 262 To run the app in Dart Editor, right click `piratebadge.html` |
| 264 and click the Run button | 263 and select **Run in Dartium**. |
| 265 <img src="images/run.png" width="16" height="16" | |
| 266 alt="Run button">. | |
| 267 | 264 |
| 268  | 265  |
| 269 | 266 |
| 270 Dart Editor launches _Dartium_, a special build of Chromium | 267 Dart Editor launches _Dartium_, a special build of Chromium |
| 271 that has the Dart Virtual Machine built in, | 268 that has the Dart Virtual Machine built in, |
| 272 and loads the `piratebadge.html` file. | 269 and loads the `piratebadge.html` file. |
| 273 The `piratebadge.html` file loads the app | 270 The `piratebadge.html` file loads the app |
| 274 and calls the `main()` function. | 271 and calls the `main()` function. |
| 275 | 272 |
| 276 You should see a TO DO comment on the left | 273 You should see a TO DO comment on the left |
| 277 and a red and white name badge on the right. | 274 and a red and white name badge on the right. |
| 278 </div> | 275 </div> |
| (...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 316 </div>[[/highlight]] | 313 </div>[[/highlight]] |
| 317 </div> | 314 </div> |
| 318 ... | 315 ... |
| 319 {% endprettify %} | 316 {% endprettify %} |
| 320 </div> | 317 </div> |
| 321 | 318 |
| 322 <div class="trydart-filename">piratebadge.html</div> | 319 <div class="trydart-filename">piratebadge.html</div> |
| 323 | 320 |
| 324 </div> <div class="col-md-5" markdown="1"> | 321 </div> <div class="col-md-5" markdown="1"> |
| 325 | 322 |
| 326 <i class="fa fa-key"> </i> <strong> Key Information </strong> | 323 <i class="fa fa-key key-header"> </i> <strong> Key Information </strong> |
| 327 | 324 |
| 328 * The ID for the input element is `inputName`. | 325 * The ID for the input element is `inputName`. |
| 329 Dart uses CSS selectors, such as `#inputName`, | 326 Dart uses CSS selectors, such as `#inputName`, |
| 330 to get elements from the DOM. | 327 to get elements from the DOM. |
| 331 | 328 |
| 332 {% comment %} non-breaking space required for bootstrap/markdown bogosity
{% endcomment %} | 329 {% comment %} non-breaking space required for bootstrap/markdown bogosity
{% endcomment %} |
| 333 | 330 |
| 334 </div> </div> | 331 </div> </div> |
| 335 | 332 |
| 336 ### <i class="fa fa-anchor"> </i> Edit piratebadge.dart. | 333 ### <i class="fa fa-anchor"> </i> Edit piratebadge.dart. |
| (...skipping 151 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 488 | 485 |
| 489 </div> </div> | 486 </div> </div> |
| 490 | 487 |
| 491 | 488 |
| 492 ### <i class="fa fa-anchor"> </i> Run the app. | 489 ### <i class="fa fa-anchor"> </i> Run the app. |
| 493 | 490 |
| 494 <div class="trydart-step-details" markdown="1"> | 491 <div class="trydart-step-details" markdown="1"> |
| 495 | 492 |
| 496 Save your files with **File > Save All**. | 493 Save your files with **File > Save All**. |
| 497 | 494 |
| 498 Use the Run button | 495 Run the app by right clicking `piratebadge.html` and select **Run in Dartium**. |
| 499 <img src="images/run.png" width="16" height="16" | |
| 500 alt="Run button"> | |
| 501 in Dart Editor to run the app. | |
| 502 | 496 |
| 503 Compare your app to the one running below. | 497 Compare your app to the one running below. |
| 504 | 498 |
| 505 Type in the input field. | 499 Type in the input field. |
| 506 | 500 |
| 507 <iframe class="running-app-frame" | 501 <iframe class="running-app-frame" |
| 508 style="height:220px;width:550px;" | 502 style="height:220px;width:550px;" |
| 509 src="examples/2-inputnamebadge/piratebadge.html"> | 503 src="examples/2-inputnamebadge/piratebadge.html"> |
| 510 </iframe> | 504 </iframe> |
| 511 | 505 |
| (...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 548 </div>[[/highlight]] | 542 </div>[[/highlight]] |
| 549 </div> | 543 </div> |
| 550 ... | 544 ... |
| 551 {% endprettify %} | 545 {% endprettify %} |
| 552 </div> | 546 </div> |
| 553 | 547 |
| 554 <div class="trydart-filename">piratebadge.html</div> | 548 <div class="trydart-filename">piratebadge.html</div> |
| 555 | 549 |
| 556 </div> <div class="col-md-5" markdown="1"> | 550 </div> <div class="col-md-5" markdown="1"> |
| 557 | 551 |
| 558 <i class="fa fa-key"> </i> <strong> Key Information </strong> | 552 <i class="fa fa-key key-header"> </i> <strong> Key Information </strong> |
| 559 | 553 |
| 560 * The button has the ID `generateButton` so | 554 * The button has the ID `generateButton` so |
| 561 the Dart code can get the element. | 555 the Dart code can get the element. |
| 562 | 556 |
| 563 </div> </div> | 557 </div> </div> |
| 564 | 558 |
| 565 ### <i class="fa fa-anchor"> </i> Edit piragebadge.dart. | 559 ### <i class="fa fa-anchor"> </i> Edit piragebadge.dart. |
| 566 | 560 |
| 567 <div class="trydart-step-details" markdown="1"> | 561 <div class="trydart-step-details" markdown="1"> |
| 568 Below the import, declare a top-level variable to hold the `ButtonElement`. | 562 Below the import, declare a top-level variable to hold the `ButtonElement`. |
| (...skipping 214 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 783 | 777 |
| 784 </div></div> | 778 </div></div> |
| 785 | 779 |
| 786 | 780 |
| 787 ### <i class="fa fa-anchor"> </i> Run the app. | 781 ### <i class="fa fa-anchor"> </i> Run the app. |
| 788 | 782 |
| 789 <div class="trydart-step-details" markdown="1"> | 783 <div class="trydart-step-details" markdown="1"> |
| 790 | 784 |
| 791 Save your files with **File > Save All**. | 785 Save your files with **File > Save All**. |
| 792 | 786 |
| 793 Use the Run button | 787 Run the app by right clicking `piratebadge.html` and select **Run in Dartium**. |
| 794 <img src="images/run.png" width="16" height="16" | |
| 795 alt="Run button"> | |
| 796 in Dart Editor to run the app. | |
| 797 | 788 |
| 798 Compare your app to the one running below. | 789 Compare your app to the one running below. |
| 799 | 790 |
| 800 Type in the input field. | 791 Type in the input field. |
| 801 Remove the text from the input field. | 792 Remove the text from the input field. |
| 802 Click the button. | 793 Click the button. |
| 803 | 794 |
| 804 <iframe class="running-app-frame" | 795 <iframe class="running-app-frame" |
| 805 style="height:220px;width:550px;" | 796 style="height:220px;width:550px;" |
| 806 src="examples/3-buttonbadge/piratebadge.html"> | 797 src="examples/3-buttonbadge/piratebadge.html"> |
| (...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 842 import 'dart:html'; | 833 import 'dart:html'; |
| 843 | 834 |
| 844 [[highlight]]import 'dart:math' show Random;[[/highlight]] | 835 [[highlight]]import 'dart:math' show Random;[[/highlight]] |
| 845 {% endprettify %} | 836 {% endprettify %} |
| 846 </div> | 837 </div> |
| 847 | 838 |
| 848 <div class="trydart-filename">piratebadge.dart</div> | 839 <div class="trydart-filename">piratebadge.dart</div> |
| 849 | 840 |
| 850 </div> <div class="col-md-5" markdown="1"> | 841 </div> <div class="col-md-5" markdown="1"> |
| 851 | 842 |
| 852 <i class="fa fa-key"> </i> <strong> Key Information </strong> | 843 <i class="fa fa-key key-header"> </i> <strong> Key Information </strong> |
| 853 | 844 |
| 854 * Using the `show` keyword, | 845 * Using the `show` keyword, |
| 855 you can import only the classes, functions, or properties you need. | 846 you can import only the classes, functions, or properties you need. |
| 856 | 847 |
| 857 * `Random` provides a random number generator. | 848 * `Random` provides a random number generator. |
| 858 | 849 |
| 859 </div></div> | 850 </div></div> |
| 860 | 851 |
| 861 <div class="trydart-step-details" markdown="1"> | 852 <div class="trydart-step-details" markdown="1"> |
| 862 | 853 |
| (...skipping 280 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 1143 * In this case, the call to the constructor passes no parameters. | 1134 * In this case, the call to the constructor passes no parameters. |
| 1144 | 1135 |
| 1145 </div></div> | 1136 </div></div> |
| 1146 | 1137 |
| 1147 ### <i class="fa fa-anchor"> </i> Run the app. | 1138 ### <i class="fa fa-anchor"> </i> Run the app. |
| 1148 | 1139 |
| 1149 <div class="trydart-step-details" markdown="1"> | 1140 <div class="trydart-step-details" markdown="1"> |
| 1150 | 1141 |
| 1151 Save your files with **File > Save All**. | 1142 Save your files with **File > Save All**. |
| 1152 | 1143 |
| 1153 Use the Run button | 1144 Run the app by right clicking `piratebadge.html` and select **Run in Dartium**. |
| 1154 <img src="images/run.png" width="16" height="16" | |
| 1155 alt="Run button"> | |
| 1156 in Dart Editor to run the app. | |
| 1157 | 1145 |
| 1158 Compare your app to the one running below. | 1146 Compare your app to the one running below. |
| 1159 | 1147 |
| 1160 Type in the input field. | 1148 Type in the input field. |
| 1161 Remove the text from the input field. | 1149 Remove the text from the input field. |
| 1162 Click the button. | 1150 Click the button. |
| 1163 | 1151 |
| 1164 <iframe class="running-app-frame" | 1152 <iframe class="running-app-frame" |
| 1165 style="height:220px;width:550px;" | 1153 style="height:220px;width:550px;" |
| 1166 src="examples/4-classbadge/piratebadge.html"> | 1154 src="examples/4-classbadge/piratebadge.html"> |
| (...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 1202 import 'dart:math' show Random; | 1190 import 'dart:math' show Random; |
| 1203 [[highlight]] | 1191 [[highlight]] |
| 1204 import 'dart:convert' show JSON;[[/highlight]] | 1192 import 'dart:convert' show JSON;[[/highlight]] |
| 1205 {% endprettify %} | 1193 {% endprettify %} |
| 1206 </div> | 1194 </div> |
| 1207 | 1195 |
| 1208 <div class="trydart-filename">piratebadge.dart</div> | 1196 <div class="trydart-filename">piratebadge.dart</div> |
| 1209 | 1197 |
| 1210 </div> <div class="col-md-5" markdown="1"> | 1198 </div> <div class="col-md-5" markdown="1"> |
| 1211 | 1199 |
| 1212 <i class="fa fa-key"> </i> <strong> Key Information </strong> | 1200 <i class="fa fa-key key-header"> </i> <strong> Key Information </strong> |
| 1213 | 1201 |
| 1214 * `JSON` provides convenient access to the most common JSON use cases. | 1202 * `JSON` provides convenient access to the most common JSON use cases. |
| 1215 | 1203 |
| 1216 </div> </div> | 1204 </div> </div> |
| 1217 | 1205 |
| 1218 <div class="trydart-step-details" markdown="1"> | 1206 <div class="trydart-step-details" markdown="1"> |
| 1219 | 1207 |
| 1220 <hr> | 1208 <hr> |
| 1221 | 1209 |
| 1222 Add a named constructor to the PirateName class. | 1210 Add a named constructor to the PirateName class. |
| (...skipping 177 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 1400 {% comment %} non-breaking space required for bootstrap/markdown bogosity
{% endcomment %} | 1388 {% comment %} non-breaking space required for bootstrap/markdown bogosity
{% endcomment %} |
| 1401 | 1389 |
| 1402 </div> </div> | 1390 </div> </div> |
| 1403 | 1391 |
| 1404 ### <i class="fa fa-anchor"> </i> Run the app. | 1392 ### <i class="fa fa-anchor"> </i> Run the app. |
| 1405 | 1393 |
| 1406 <div class="trydart-step-details" markdown="1"> | 1394 <div class="trydart-step-details" markdown="1"> |
| 1407 | 1395 |
| 1408 Save your files with **File > Save All**. | 1396 Save your files with **File > Save All**. |
| 1409 | 1397 |
| 1410 Use the Run button | 1398 Run the app by right clicking `piratebadge.html` and select **Run in Dartium**. |
| 1411 <img src="images/run.png" width="16" height="16" | |
| 1412 alt="Run button"> | |
| 1413 in Dart Editor to run the app. | |
| 1414 | 1399 |
| 1415 Compare your app to the one running below. | 1400 Compare your app to the one running below. |
| 1416 | 1401 |
| 1417 Click the button to put a name on the badge. | 1402 Click the button to put a name on the badge. |
| 1418 Start the app again by duplicating this window. | 1403 Start the app again by duplicating this window. |
| 1419 | 1404 |
| 1420 <iframe class="running-app-frame" | 1405 <iframe class="running-app-frame" |
| 1421 style="height:220px;width:550px;" | 1406 style="height:220px;width:550px;" |
| 1422 src="examples/5-localbadge/piratebadge.html"> | 1407 src="examples/5-localbadge/piratebadge.html"> |
| 1423 </iframe> | 1408 </iframe> |
| (...skipping 61 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 1485 "Queasy", "Rat", "Sandy", "Tired", | 1470 "Queasy", "Rat", "Sandy", "Tired", |
| 1486 "Ugly", "Vile", "Weak", "Xeric", | 1471 "Ugly", "Vile", "Weak", "Xeric", |
| 1487 "Yellow", "Zesty"]} | 1472 "Yellow", "Zesty"]} |
| 1488 {% endprettify %} | 1473 {% endprettify %} |
| 1489 </div> | 1474 </div> |
| 1490 | 1475 |
| 1491 <div class="trydart-filename">piratenames.json</div> | 1476 <div class="trydart-filename">piratenames.json</div> |
| 1492 | 1477 |
| 1493 </div> <div class="col-md-5" markdown="1"> | 1478 </div> <div class="col-md-5" markdown="1"> |
| 1494 | 1479 |
| 1495 <i class="fa fa-key"> </i> <strong> Key Information </strong> | 1480 <i class="fa fa-key key-header"> </i> <strong> Key Information </strong> |
| 1496 | 1481 |
| 1497 * The file contains a JSON-encoded map, | 1482 * The file contains a JSON-encoded map, |
| 1498 which contains two lists of strings. | 1483 which contains two lists of strings. |
| 1499 | 1484 |
| 1500 </div> </div> | 1485 </div> </div> |
| 1501 | 1486 |
| 1502 ### <i class="fa fa-anchor"> </i> Edit piratebadge.html. | 1487 ### <i class="fa fa-anchor"> </i> Edit piratebadge.html. |
| 1503 | 1488 |
| 1504 <div class="trydart-step-details" markdown="1"> | 1489 <div class="trydart-step-details" markdown="1"> |
| 1505 Disable the input field and the button. | 1490 Disable the input field and the button. |
| (...skipping 247 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 1753 * The callback functions for `then()` and `catchError` are defined inline. | 1738 * The callback functions for `then()` and `catchError` are defined inline. |
| 1754 | 1739 |
| 1755 </div> </div> | 1740 </div> </div> |
| 1756 | 1741 |
| 1757 ### <i class="fa fa-anchor"> </i> Run the app. | 1742 ### <i class="fa fa-anchor"> </i> Run the app. |
| 1758 | 1743 |
| 1759 <div class="trydart-step-details" markdown="1"> | 1744 <div class="trydart-step-details" markdown="1"> |
| 1760 | 1745 |
| 1761 Save your files with **File > Save All**. | 1746 Save your files with **File > Save All**. |
| 1762 | 1747 |
| 1763 Use the Run button | 1748 Run the app by right clicking `piratebadge.html` and select **Run in Dartium**. |
| 1764 <img src="images/run.png" width="16" height="16" | |
| 1765 alt="Run button"> | |
| 1766 in Dart Editor to run the app. | |
| 1767 | 1749 |
| 1768 If you want to see what happens when the app can't find the `.json` file, | 1750 If you want to see what happens when the app can't find the `.json` file, |
| 1769 change the file name in the code and run the program again. | 1751 change the file name in the code and run the program again. |
| 1770 | 1752 |
| 1771 Compare your app to the final version running below. | 1753 Compare your app to the final version running below. |
| 1772 | 1754 |
| 1773 | 1755 |
| 1774 <iframe class="running-app-frame" | 1756 <iframe class="running-app-frame" |
| 1775 style="height:220px;width:550px;" | 1757 style="height:220px;width:550px;" |
| 1776 src="examples/6-piratebadge_json/piratebadge.html"> | 1758 src="examples/6-piratebadge/piratebadge.html"> |
| 1777 </iframe> | 1759 </iframe> |
| 1778 | 1760 |
| 1779 | 1761 |
| 1780 #### Problems? | 1762 #### Problems? |
| 1781 | 1763 |
| 1782 Check your code against the files in `6-piratebadge_json`. | 1764 Check your code against the files in `6-piratebadge`. |
| 1783 | 1765 |
| 1784 * [piratebadge.html](https://github.com/dart-lang/one-hour-codelab/blob/master/w
eb/6-piratebadge_json/piratebadge.html) | 1766 * [piratebadge.html](https://github.com/dart-lang/one-hour-codelab/blob/master/w
eb/6-piratebadge/piratebadge.html) |
| 1785 | 1767 |
| 1786 * [piratebadge.dart](https://github.com/dart-lang/one-hour-codelab/blob/master/w
eb/6-piratebadge_json/piratebadge.dart) | 1768 * [piratebadge.dart](https://github.com/dart-lang/one-hour-codelab/blob/master/w
eb/6-piratebadge/piratebadge.dart) |
| 1787 | 1769 |
| 1788 </div> | 1770 </div> |
| 1789 | 1771 |
| 1790 ### <i class="fa fa-anchor"> </i> Share your pirate name. | 1772 ### <i class="fa fa-anchor"> </i> Share your pirate name. |
| 1791 | 1773 |
| 1792 <div class="trydart-step-details" markdown="1"> | 1774 <div class="trydart-step-details" markdown="1"> |
| 1793 | 1775 |
| 1794 Congratulations! You finished the pirate badge code lab. | |
| 1795 | |
| 1796 | 1776 |
| 1797 Share your pirate name with the world. | 1777 Share your pirate name with the world. |
| 1798 | 1778 |
| 1799 <p class="share-button twitter"> | 1779 * <a href="https://twitter.com/share" class="twitter-share-button" data-text="Ar
rr! I've generated me pirate name and learnt Dart, to boot. http://dartlang.org/
darrrt" data-count="none" data-hashtags="dartlang">Tweet</a> |
| 1800 <a href="https://twitter.com/share" | 1780 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.tes
t(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.
id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(
js,fjs);}}(document, 'script', 'twitter-wjs');</script> |
| 1801 class="twitter-share-button external-link" | 1781 |
| 1802 data-count="none" | 1782 |
| 1803 data-text="Arrr! I've generated me pirate name and learnt Dart, to boot. http
://dartlang.org/darrrt" | 1783 * <script src="https://apis.google.com/js/plusone.js"></script> |
| 1804 data-hashtags="dartlang">Tweet</a> | |
| 1805 </p> | |
| 1806 | |
| 1807 <script src="https://apis.google.com/js/plusone.js"></script> | |
| 1808 <g:plus action="share"></g:plus> | 1784 <g:plus action="share"></g:plus> |
| 1809 | 1785 |
| 1810 </div> | 1786 </div> |
| 1811 | 1787 |
| 1812 | |
| 1813 <hr> | 1788 <hr> |
| 1814 | 1789 |
| 1815 ##Step 7: Go forth and learn more about Dart {#step-seven} | 1790 ##Step 7: Build the app and run as JavaScript {#step-seven} |
| 1791 |
| 1792 In this step, you use `pub build` to |
| 1793 generate the assets for the app |
| 1794 and put them into a new directory named `build`. |
| 1795 In addition to other tasks, |
| 1796 the build process generates minified JavaScript that |
| 1797 can be run by any modern browser. |
| 1798 |
| 1799 Note that the `one-hour-codelab` directory |
| 1800 contains several directories, one for each step, |
| 1801 all of which are considered |
| 1802 part of the one-hour-codelab application. |
| 1803 The build process builds the assets for each directory. |
| 1804 Each directory can be individually deployed. |
| 1805 |
| 1806 ### <i class="fa fa-anchor"> </i> Check out pubspec.yaml |
| 1807 |
| 1808 <div class="row"> <div class="col-md-7"> |
| 1809 |
| 1810 <div class="trydart-step-details" markdown="1"> |
| 1811 |
| 1812 Double-click the `pubspec.yaml` file to open it. |
| 1813 Click the **Source** tab at the bottom of the editing pane. |
| 1814 |
| 1815 {% prettify dart %} |
| 1816 name: avast_ye_pirates |
| 1817 description: Write a Dart web app code lab |
| 1818 dependencies: |
| 1819 [[highlight]]browser: any[[/highlight]] |
| 1820 {% endprettify %} |
| 1821 |
| 1822 </div> |
| 1823 |
| 1824 <div class="trydart-filename">pubspec.yaml</div> |
| 1825 |
| 1826 </div> <div class="col-md-5" markdown="1"> |
| 1827 |
| 1828 <i class="fa fa-key key-header"> </i> <strong> Key Information </strong> |
| 1829 |
| 1830 * A `pubspec.yaml` file in a directory identifies the directory |
| 1831 and its contents as an application. |
| 1832 |
| 1833 * `pubspec.yaml` provides meta-data for the application, |
| 1834 such as its name. |
| 1835 |
| 1836 * The `pubspec.yaml` file also lists the libraries on which the app depends. |
| 1837 The `browser` library needed by this app is hosted on |
| 1838 [pub.dartlang.org](https://pub.dartlang.org/) along with many others. |
| 1839 |
| 1840 * `any` selects the latest package that matches your SDK. |
| 1841 |
| 1842 </div></div> |
| 1843 |
| 1844 ### <i class="fa fa-anchor"> </i> Look at the packages directory |
| 1845 |
| 1846 <div class="row"> <div class="col-md-7"> |
| 1847 |
| 1848 <div class="trydart-step-details" markdown="1"> |
| 1849 |
| 1850 In Dart Editor, expand the `packages` directory. |
| 1851 |
| 1852  |
| 1853 |
| 1854 </div> |
| 1855 |
| 1856 </div> <div class="col-md-5" markdown="1"> |
| 1857 |
| 1858 <i class="fa fa-key key-header"> </i> <strong> Key Information </strong> |
| 1859 |
| 1860 * The `packages` directory contains the code for all of the dependencies |
| 1861 listed in the `pubspec.yaml` file. |
| 1862 These are installed automatically by Dart Editor. |
| 1863 |
| 1864 * The `browser` package contains the `dart.js` script |
| 1865 that checks for native Dart support. |
| 1866 |
| 1867 * The packages must be included in the built application |
| 1868 in order for the app to be successfully deployed. |
| 1869 |
| 1870 </div></div> |
| 1871 |
| 1872 ### <i class="fa fa-anchor"> </i> Run pub build |
| 1873 |
| 1874 <div class="row"> <div class="col-md-7"> |
| 1875 |
| 1876 <div class="trydart-step-details" markdown="1"> |
| 1877 |
| 1878 Select `pubspec.yaml` |
| 1879 then select **Tools > Pub Build**, |
| 1880 which builds everything under the `one-hour-codelab` directory. |
| 1881 The output looks something like this: |
| 1882 |
| 1883 {% prettify bash %} |
| 1884 --- Jan 21, 2014 12:41:48 PM Running pub build ... --- |
| 1885 Building avast_ye_pirates..... |
| 1886 [Info from Dart2JS]: |
| 1887 Took 0:00:01.704695 to compile avast_ye_pirates|web/1-blankbadge/piratebadge.dar
t. |
| 1888 [Info from Dart2JS]: |
| 1889 Took 0:00:05.535304 to compile avast_ye_pirates|web/2-inputnamebadge/piratebadge
.dart. |
| 1890 [Info from Dart2JS]: |
| 1891 Took 0:00:02.974628 to compile avast_ye_pirates|web/3-buttonbadge/piratebadge.da
rt. |
| 1892 [Info from Dart2JS]: |
| 1893 Took 0:00:02.195714 to compile avast_ye_pirates|web/4-classbadge/piratebadge.dar
t. |
| 1894 [Info from Dart2JS]: |
| 1895 Took 0:00:01.938502 to compile avast_ye_pirates|web/5-localbadge/piratebadge.dar
t. |
| 1896 [Info from Dart2JS]: |
| 1897 Took 0:00:02.028974 to compile avast_ye_pirates|web/6-piratebadge/piratebadge.da
rt. |
| 1898 Built 45 files! |
| 1899 {% endprettify %} |
| 1900 |
| 1901 </div> |
| 1902 |
| 1903 <div class="trydart-filename">terminal</div> |
| 1904 |
| 1905 </div> <div class="col-md-5" markdown="1"> |
| 1906 |
| 1907 <i class="fa fa-key key-header"> </i> <strong> Key Information </strong> |
| 1908 |
| 1909 * The `pub build` command creates a `build` directory that contains |
| 1910 subdirectories for every step in the code lab. |
| 1911 |
| 1912 * The `build` directory contains everything needed to deploy the |
| 1913 entire project (all six steps). |
| 1914 |
| 1915 </div></div> |
| 1916 |
| 1917 ### <i class="fa fa-anchor"> </i> Look at the `build` directory |
| 1918 |
| 1919 <div class="row"> <div class="col-md-7"> |
| 1920 |
| 1921 <div class="trydart-step-details" markdown="1"> |
| 1922 |
| 1923 Expand the `build` directory. |
| 1924 Note that it contains a subdirectory for each step of the code lab. |
| 1925 Expand the `6-piratebadge` directory. |
| 1926 |
| 1927  |
| 1928 </div> |
| 1929 |
| 1930 </div> <div class="col-md-5" markdown="1"> |
| 1931 |
| 1932 <i class="fa fa-key key-header"> </i> <strong> Key Information </strong> |
| 1933 |
| 1934 * The `piratebadge.dart.js` file is a JavaScript file that has been minified. |
| 1935 When deployed, this file runs in the browser. |
| 1936 |
| 1937 * The `packages` directory contains the package dependencies. |
| 1938 |
| 1939 * Note that the directory contains no `piratebadge.dart` file. |
| 1940 It is not needed to deploy the app to JavaScript. |
| 1941 |
| 1942 * Each subdirectory of `build` contains all of the files |
| 1943 needed for the app to be deployed separately. |
| 1944 |
| 1945 </div></div> |
| 1946 |
| 1947 |
| 1948 ### <i class="fa fa-anchor"> </i> Run the app as JavaScript |
| 1949 |
| 1950 <div class="row"> <div class="col-md-7"> |
| 1951 |
| 1952 <div class="trydart-step-details" markdown="1"> |
| 1953 |
| 1954 Open the app. |
| 1955 Select **File > Open File...** |
| 1956 in a browser such a Firefix or Safari |
| 1957 and select the |
| 1958 `one-hour-codelab/build/6-piratebadge/piratebadge.html` file. |
| 1959 |
| 1960 </div> |
| 1961 |
| 1962 </div> <div class="col-md-5" markdown="1"> |
| 1963 |
| 1964 <i class="fa fa-key key-header"> </i> <strong> Key Information </strong> |
| 1965 |
| 1966 * The app runs on the local machine using the `file` protocol. |
| 1967 To share your app with others, |
| 1968 you need to deploy the app to a hosting service. |
| 1969 |
| 1970 </div></div> |
| 1971 |
| 1972 <hr> |
| 1973 |
| 1974 ##Step 8: Go forth and learn more about Dart {#step-eight} |
| 1975 |
| 1976 ### <i class="fa fa-anchor"> </i> Deploy a server and your app |
| 1977 |
| 1978 <div class="trydart-step-details" markdown="1"> |
| 1979 |
| 1980 If you are interested in server-side programming, |
| 1981 you can learn to write a static file server and use it to deploy |
| 1982 the pirate badge app to Heroku. |
| 1983 Check out the [Weigh Anchor: Deploy a Server and App](/codelabs/deploy/) code la
b. |
| 1984 |
| 1985 </div> |
| 1986 |
| 1987 ### <i class="fa fa-anchor"> </i> Check out the samples. |
| 1988 |
| 1989 <div class="trydart-step-details" markdown="1"> |
| 1990 |
| 1991 Run some Dart programs online and check out the source code |
| 1992 on our [Samples page](/samples/). |
| 1993 </div> |
| 1994 |
| 1995 ### <i class="fa fa-anchor"> </i> Read the tutorials. |
| 1996 |
| 1997 <div class="trydart-step-details" markdown="1"> |
| 1998 Learn more about Dart from |
| 1999 the [Dart tutorials](/docs/tutorials/). |
| 2000 </div> |
| 1816 | 2001 |
| 1817 ### <i class="fa fa-anchor"> </i> Think about what you've done! | 2002 ### <i class="fa fa-anchor"> </i> Think about what you've done! |
| 1818 | 2003 |
| 1819 <div class="trydart-step-details" markdown="1"> | 2004 <div class="trydart-step-details" markdown="1"> |
| 1820 | 2005 |
| 1821 This code lab provided a tour of most Dart language features | 2006 This code lab provided a tour of most Dart language features |
| 1822 and many library features. | 2007 and many library features. |
| 1823 Here's where to go to learn more. | 2008 Here's where to go to learn more. |
| 1824 | 2009 |
| 1825 #### The Dart language | 2010 #### The Dart language |
| (...skipping 47 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 1873 <a href="https://api.dartlang.org/dart_convert.html" target="_blank">dart:conver
t</a> | 2058 <a href="https://api.dartlang.org/dart_convert.html" target="_blank">dart:conver
t</a> |
| 1874 | 2059 |
| 1875 #### API documentation for JSON and local storage | 2060 #### API documentation for JSON and local storage |
| 1876 | 2061 |
| 1877 <a href="https://api.dartlang.org/dart_html/Window.html#localStorage" target="_b
lank">LocalStorage</a>, and | 2062 <a href="https://api.dartlang.org/dart_html/Window.html#localStorage" target="_b
lank">LocalStorage</a>, and |
| 1878 <a href="https://api.dartlang.org/dart_convert.html#JSON" target="_blank">JSON</
a> | 2063 <a href="https://api.dartlang.org/dart_convert.html#JSON" target="_blank">JSON</
a> |
| 1879 | 2064 |
| 1880 | 2065 |
| 1881 </div> | 2066 </div> |
| 1882 | 2067 |
| 1883 ### <i class="fa fa-anchor"> </i> Check out the samples. | |
| 1884 | |
| 1885 <div class="trydart-step-details" markdown="1"> | |
| 1886 | |
| 1887 Run some Dart programs online and check out the source code | |
| 1888 on our [Samples page](/samples/). | |
| 1889 </div> | |
| 1890 | |
| 1891 ### <i class="fa fa-anchor"> </i> Read the tutorials. | |
| 1892 | |
| 1893 <div class="trydart-step-details" markdown="1"> | |
| 1894 Learn more about Dart from | |
| 1895 the [Dart tutorials](/docs/tutorials/). | |
| 1896 </div> | |
| 1897 | |
| 1898 ### <i class="fa fa-anchor"> </i> Deploy this app to Heroku. | |
| 1899 | |
| 1900 <div class="trydart-step-details" markdown="1"> | |
| 1901 | |
| 1902 Learn how to deploy this app to the internet using Heroku in | |
| 1903 [Code Lab: Deploy the Pirates](/codelabs/deploy/). | |
| 1904 | |
| 1905 </div> | |
| OLD | NEW |