tag:blogger.com,1999:blog-44913787217460544982024-03-13T14:14:40.828-07:00the rockncoderHardcore code explained.rockncoderhttp://www.blogger.com/profile/03638306588402195779noreply@blogger.comBlogger182125tag:blogger.com,1999:blog-4491378721746054498.post-59147203830609083202017-12-04T05:54:00.000-08:002018-03-13T12:45:41.149-07:00React Workshop Installation Notes (March 17, 18, & 24 2018)<h2 style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 1.75em; letter-spacing: 0.3px; line-height: 1.1; margin-bottom: 0.85em; margin-top: 0px;">
<span style="background-color: white;">
Installation</span></h2>
<h4 style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 1.25em; letter-spacing: 0.3px; line-height: 1.1; margin-bottom: 0.85em; margin-top: 1.275em;">
<span style="background-color: white;">
Install<span class="Apple-converted-space"> </span>Chrome</span></h4>
<div style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 14px; letter-spacing: 0.3px; margin-bottom: 0.85em;">
<span style="background-color: white;">React<span class="Apple-converted-space"> </span>is<span class="Apple-converted-space"> </span>compatible<span class="Apple-converted-space"> </span>with<span class="Apple-converted-space"> </span>every<span class="Apple-converted-space"> </span>modern<span class="Apple-converted-space"> </span>browser,<span class="Apple-converted-space"> </span>but<span class="Apple-converted-space"> </span>Chrome<span class="Apple-converted-space"> </span>is<span class="Apple-converted-space"> </span>the<span class="Apple-converted-space"> </span>best<span class="Apple-converted-space"> </span>choice<span class="Apple-converted-space"> </span>for<span class="Apple-converted-space"> </span>development.<span class="Apple-converted-space"> </span>In<span class="Apple-converted-space"> </span>addition<span class="Apple-converted-space"> </span>to<span class="Apple-converted-space"> </span>its<span class="Apple-converted-space"> </span>excellent<span class="Apple-converted-space"> </span>developer<span class="Apple-converted-space"> </span>tools,Chrome<span class="Apple-converted-space"> </span>has<span class="Apple-converted-space"> </span>two<span class="Apple-converted-space"> </span>essential<span class="Apple-converted-space"> </span>extensions:<span class="Apple-converted-space"> </span>React<span class="Apple-converted-space"> </span>Developer<span class="Apple-converted-space"> </span>Tools<span class="Apple-converted-space"> </span>and<span class="Apple-converted-space"> </span>Redux<span class="Apple-converted-space"> </span>DevTools.<span class="Apple-converted-space"> </span>Install<span class="Apple-converted-space"> </span>Chrome<span class="Apple-converted-space"> </span>at:</span></div>
<div style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 14px; letter-spacing: 0.3px; margin-bottom: 0.85em;">
<a href="https://www.google.com/chrome/browser/desktop/index.html" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; box-sizing: border-box; font-size: inherit;"><span style="background-color: white; color: black;">https://www.google.com/chrome/browser/desktop/index.html</span></a></div>
<div style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 14px; letter-spacing: 0.3px; margin-bottom: 0.85em;">
<span style="background-color: white;">Then install<span class="Apple-converted-space"> </span><span style="box-sizing: border-box; font-size: inherit; font-weight: 700;">React<span class="Apple-converted-space"> </span>Developer<span class="Apple-converted-space"> </span>Tools</span><span class="Apple-converted-space"> </span>and<span class="Apple-converted-space"> </span><span style="box-sizing: border-box; font-size: inherit; font-weight: 700;">Redux<span class="Apple-converted-space"> </span>DevTools</span><span class="Apple-converted-space"> </span>via the Chrome Web Store.</span></div>
<h4 style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 1.25em; letter-spacing: 0.3px; line-height: 1.1; margin-bottom: 0.85em; margin-top: 1.275em;">
<span style="background-color: white;">
Install<span class="Apple-converted-space"> </span>Git</span></h4>
<div style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 14px; letter-spacing: 0.3px; margin-bottom: 0.85em;">
<span style="background-color: white;">The<span class="Apple-converted-space"> </span>latest<span class="Apple-converted-space"> </span>version<span class="Apple-converted-space"> </span>of<span class="Apple-converted-space"> </span>Git<span class="Apple-converted-space"> </span>is<span class="Apple-converted-space"> </span>2.16.2.<span class="Apple-converted-space"> </span>If<span class="Apple-converted-space"> </span>you<span class="Apple-converted-space"> </span>have<span class="Apple-converted-space"> </span>it<span class="Apple-converted-space"> </span>already,<span class="Apple-converted-space"> </span>but<span class="Apple-converted-space"> </span>your<span class="Apple-converted-space"> </span>version<span class="Apple-converted-space"> </span>is<span class="Apple-converted-space"> </span>older<span class="Apple-converted-space"> </span>than<span class="Apple-converted-space"> </span>2.6,<span class="Apple-converted-space"> </span>please<span class="Apple-converted-space"> </span>update<span class="Apple-converted-space"> </span>it.<span class="Apple-converted-space"> </span>Git<span class="Apple-converted-space"> </span>is<span class="Apple-converted-space"> </span>free.</span></div>
<div style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 14px; letter-spacing: 0.3px; margin-bottom: 0.85em;">
<a href="http://git-scm.com/downloads" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; box-sizing: border-box; font-size: inherit;"><span style="background-color: white; color: black;">http://git-scm.com/downloads</span></a></div>
<h4 style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 1.25em; letter-spacing: 0.3px; line-height: 1.1; margin-bottom: 0.85em; margin-top: 1.275em;">
<span style="background-color: white;">
Installing<span class="Apple-converted-space"> </span>Node.js</span></h4>
<div style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 14px; letter-spacing: 0.3px; margin-bottom: 0.85em;">
<span style="background-color: white;">Node.js is a JavaScript runtime, that is a fancy phrase which merely means it lets us execute JavaScript code from the command line. I am installing the current LTS or long-term support version, which is version 8.10.0. I highly recommend that you do the same. Don't download the latest version; it sometimes has bugs and incompatibilities. Go to:<span class="Apple-converted-space"> </span><a href="https://nodejs.org/en/download/" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; box-sizing: border-box; font-size: inherit;">https://nodejs.org/en/download/</a>. Click the button to download the LTS version, when complete double-click the file to begin the installation.</span></div>
<div style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 14px; letter-spacing: 0.3px; margin-bottom: 0.85em;">
<span style="background-color: white;">Usually,<span class="Apple-converted-space"> </span>the<span class="Apple-converted-space"> </span>site<span class="Apple-converted-space"> </span>detects<span class="Apple-converted-space"> </span>your<span class="Apple-converted-space"> </span>operating<span class="Apple-converted-space"> </span>system<span class="Apple-converted-space"> </span>and<span class="Apple-converted-space"> </span>the<span class="Apple-converted-space"> </span>webpage<span class="Apple-converted-space"> </span>changes<span class="Apple-converted-space"> </span>to<span class="Apple-converted-space"> </span>reflect<span class="Apple-converted-space"> </span>it.<span class="Apple-converted-space"> </span>If<span class="Apple-converted-space"> </span>you<span class="Apple-converted-space"> </span>don't<span class="Apple-converted-space"> </span>see<span class="Apple-converted-space"> </span>your<span class="Apple-converted-space"> </span>operating<span class="Apple-converted-space"> </span>system,<span class="Apple-converted-space"> </span>click<span class="Apple-converted-space"> </span>the<span class="Apple-converted-space"> </span>"OtherDownloads,"<span class="Apple-converted-space"> </span>which<span class="Apple-converted-space"> </span>is<span class="Apple-converted-space"> </span>in<span class="Apple-converted-space"> </span>small<span class="Apple-converted-space"> </span>text<span class="Apple-converted-space"> </span>below<span class="Apple-converted-space"> </span>the<span class="Apple-converted-space"> </span>download<span class="Apple-converted-space"> </span>button.</span></div>
<div style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 14px; letter-spacing: 0.3px; margin-bottom: 0.85em;">
<span style="background-color: white;">Installing<span class="Apple-converted-space"> </span>Node<span class="Apple-converted-space"> </span>should<span class="Apple-converted-space"> </span>only<span class="Apple-converted-space"> </span>take<span class="Apple-converted-space"> </span>a<span class="Apple-converted-space"> </span>few<span class="Apple-converted-space"> </span>minutes.<span class="Apple-converted-space"> </span>To<span class="Apple-converted-space"> </span>verify,<span class="Apple-converted-space"> </span>open<span class="Apple-converted-space"> </span>a<span class="Apple-converted-space"> </span>new<span class="Apple-converted-space"> </span>command<span class="Apple-converted-space"> </span>prompt,<span class="Apple-converted-space"> </span>or<span class="Apple-converted-space"> </span>terminal<span class="Apple-converted-space"> </span>instance.<span class="Apple-converted-space"> </span>From<span class="Apple-converted-space"> </span>the<span class="Apple-converted-space"> </span>command<span class="Apple-converted-space"> </span>line<span class="Apple-converted-space"> </span>type:</span></div>
<div style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 14px; letter-spacing: 0.3px; margin-bottom: 0.85em;">
<code style="background-color: white; border-radius: 3px; border: none; box-sizing: border-box; direction: ltr; font-family: consolas, "liberation mono", menlo, courier, monospace; font-size: 0.85em; margin: 0px; padding: 0.2em;">node --version</code></div>
<div style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 14px; letter-spacing: 0.3px; margin-bottom: 0.85em;">
<span style="background-color: white;">Node.js<span class="Apple-converted-space"> </span>should<span class="Apple-converted-space"> </span>respond<span class="Apple-converted-space"> </span>with<span class="Apple-converted-space"> </span>its<span class="Apple-converted-space"> </span>version<span class="Apple-converted-space"> </span>number.<span class="Apple-converted-space"> </span></span></div>
<h4 style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 1.25em; letter-spacing: 0.3px; line-height: 1.1; margin-bottom: 0.85em; margin-top: 1.275em;">
<span style="background-color: white;">
Install<span class="Apple-converted-space"> </span>Atom/Nuclide</span></h4>
<div style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 14px; letter-spacing: 0.3px; margin-bottom: 0.85em;">
<span style="background-color: white;">Atom<span class="Apple-converted-space"> </span>is<span class="Apple-converted-space"> </span>the<span class="Apple-converted-space"> </span>free<span class="Apple-converted-space"> </span>and<span class="Apple-converted-space"> </span>hackable<span class="Apple-converted-space"> </span>editor<span class="Apple-converted-space"> </span>from<span class="Apple-converted-space"> </span>the<span class="Apple-converted-space"> </span>folks<span class="Apple-converted-space"> </span>at<span class="Apple-converted-space"> </span>GitHub.<span class="Apple-converted-space"> </span>It<span class="Apple-converted-space"> </span>is<span class="Apple-converted-space"> </span>cross-platform<span class="Apple-converted-space"> </span>and<span class="Apple-converted-space"> </span>runs<span class="Apple-converted-space"> </span>on<span class="Apple-converted-space"> </span>Windows,<span class="Apple-converted-space"> </span>Mac,<span class="Apple-converted-space"> </span>and<span class="Apple-converted-space"> </span>Linux.<span class="Apple-converted-space"> </span>You<span class="Apple-converted-space"> </span>are<span class="Apple-converted-space"> </span>welcome<span class="Apple-converted-space"> </span>touse<span class="Apple-converted-space"> </span>whatever<span class="Apple-converted-space"> </span>editor<span class="Apple-converted-space"> </span>you<span class="Apple-converted-space"> </span>like,<span class="Apple-converted-space"> </span>but<span class="Apple-converted-space"> </span>please<span class="Apple-converted-space"> </span>know<span class="Apple-converted-space"> </span>how<span class="Apple-converted-space"> </span>to<span class="Apple-converted-space"> </span>use<span class="Apple-converted-space"> </span>it.<span class="Apple-converted-space"> </span>I<span class="Apple-converted-space"> </span>can<span class="Apple-converted-space"> </span>give<span class="Apple-converted-space"> </span>you<span class="Apple-converted-space"> </span>help<span class="Apple-converted-space"> </span>using<span class="Apple-converted-space"> </span>Atom,<span class="Apple-converted-space"> </span>but<span class="Apple-converted-space"> </span>not<span class="Apple-converted-space"> </span>much<span class="Apple-converted-space"> </span>else.<span class="Apple-converted-space"> </span>Download<span class="Apple-converted-space"> </span>Atom</span></div>
<div style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 14px; letter-spacing: 0.3px; margin-bottom: 0.85em;">
<a href="https://atom.io/" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; box-sizing: border-box; font-size: inherit;"><span style="background-color: white; color: black;">https://atom.io/</span></a></div>
<div style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 14px; letter-spacing: 0.3px; margin-bottom: 0.85em;">
<span style="background-color: white;">Once<span class="Apple-converted-space"> </span>we<span class="Apple-converted-space"> </span>have<span class="Apple-converted-space"> </span>Atom<span class="Apple-converted-space"> </span>installed<span class="Apple-converted-space"> </span>and<span class="Apple-converted-space"> </span>working,<span class="Apple-converted-space"> </span>we<span class="Apple-converted-space"> </span>can<span class="Apple-converted-space"> </span>optionally<span class="Apple-converted-space"> </span>install<span class="Apple-converted-space"> </span>Nuclide.<span class="Apple-converted-space"> </span>It<span class="Apple-converted-space"> </span>is<span class="Apple-converted-space"> </span>a<span class="Apple-converted-space"> </span>package,<span class="Apple-converted-space"> </span>which<span class="Apple-converted-space"> </span>is<span class="Apple-converted-space"> </span>an<span class="Apple-converted-space"> </span>Atom<span class="Apple-converted-space"> </span>add-on,<span class="Apple-converted-space"> </span>from<span class="Apple-converted-space"> </span>Facebook.<span class="Apple-converted-space"> </span>It<span class="Apple-converted-space"> </span>workswell<span class="Apple-converted-space"> </span>other<span class="Apple-converted-space"> </span>Facebook<span class="Apple-converted-space"> </span>open-source<span class="Apple-converted-space"> </span>projects,<span class="Apple-converted-space"> </span>like<span class="Apple-converted-space"> </span>React,<span class="Apple-converted-space"> </span>React-Native,<span class="Apple-converted-space"> </span>and<span class="Apple-converted-space"> </span>Flow.<span class="Apple-converted-space"> </span>Again,<span class="Apple-converted-space"> </span>it<span class="Apple-converted-space"> </span>is<span class="Apple-converted-space"> </span>optional,<span class="Apple-converted-space"> </span>but<span class="Apple-converted-space"> </span>I<span class="Apple-converted-space"> </span>will<span class="Apple-converted-space"> </span>use<span class="Apple-converted-space"> </span>it.<span class="Apple-converted-space"> </span>Unfortunately,<span class="Apple-converted-space"> </span>the<span class="Apple-converted-space"> </span>Windowsversion<span class="Apple-converted-space"> </span>is<span class="Apple-converted-space"> </span>not<span class="Apple-converted-space"> </span>complete.<span class="Apple-converted-space"> </span>So<span class="Apple-converted-space"> </span>while<span class="Apple-converted-space"> </span>Nuclide<span class="Apple-converted-space"> </span>has<span class="Apple-converted-space"> </span>been<span class="Apple-converted-space"> </span>thoroughly<span class="Apple-converted-space"> </span>checked<span class="Apple-converted-space"> </span>out<span class="Apple-converted-space"> </span>on<span class="Apple-converted-space"> </span>Mac<span class="Apple-converted-space"> </span>and<span class="Apple-converted-space"> </span>Linux,<span class="Apple-converted-space"> </span>on<span class="Apple-converted-space"> </span>Windows,<span class="Apple-converted-space"> </span>it<span class="Apple-converted-space"> </span>has<span class="Apple-converted-space"> </span>not.</span></div>
<h5 style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 1em; letter-spacing: 0.3px; line-height: 1.1; margin-bottom: 0.85em; margin-top: 1.275em;">
<span style="background-color: white;">
To<span class="Apple-converted-space"> </span>install<span class="Apple-converted-space"> </span>Nuclide:</span></h5>
<div style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 14px; letter-spacing: 0.3px; margin-bottom: 0.85em;">
<span style="background-color: white;">Help >> Welcome Guide >> Install a Package >> Open Installer</span><br />
<span style="background-color: white;">Type "Nuclide" in the search bar.</span><br />
<span style="background-color: white;">"searching packages for nuclide"</span><br />
<span style="background-color: white;">After finding the package, verify that it is from Facebook, then click "Install."</span><br />
<span style="background-color: white;">It will take a bit of time for the package to download and install. Be patient.</span></div>
<h3 style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 1.5em; letter-spacing: 0.3px; line-height: 1.1; margin-bottom: 0.85em; margin-top: 1.275em;">
<span style="background-color: white;">
Installing<span class="Apple-converted-space"> </span>Yarn</span></h3>
<div style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 14px; letter-spacing: 0.3px; margin-bottom: 0.85em;">
<span style="background-color: white;">Yarn<span class="Apple-converted-space"> </span>is<span class="Apple-converted-space"> </span>a<span class="Apple-converted-space"> </span>package<span class="Apple-converted-space"> </span>manager<span class="Apple-converted-space"> </span>from<span class="Apple-converted-space"> </span>Facebook.<span class="Apple-converted-space"> </span>It<span class="Apple-converted-space"> </span>is<span class="Apple-converted-space"> </span>similar<span class="Apple-converted-space"> </span>to<span class="Apple-converted-space"> </span>npm<span class="Apple-converted-space"> </span>but<span class="Apple-converted-space"> </span>is<span class="Apple-converted-space"> </span>faster<span class="Apple-converted-space"> </span>and<span class="Apple-converted-space"> </span>more<span class="Apple-converted-space"> </span>secure.<span class="Apple-converted-space"> </span>I<span class="Apple-converted-space"> </span>highly<span class="Apple-converted-space"> </span>recommend<span class="Apple-converted-space"> </span>using<span class="Apple-converted-space"> </span>Yarn<span class="Apple-converted-space"> </span>over<span class="Apple-converted-space"> </span>npmprimarily<span class="Apple-converted-space"> </span>when<span class="Apple-converted-space"> </span>working<span class="Apple-converted-space"> </span>with<span class="Apple-converted-space"> </span>React<span class="Apple-converted-space"> </span>or<span class="Apple-converted-space"> </span>React-Native.<span class="Apple-converted-space"> </span>The<span class="Apple-converted-space"> </span>easiest<span class="Apple-converted-space"> </span>way<span class="Apple-converted-space"> </span>to<span class="Apple-converted-space"> </span>install<span class="Apple-converted-space"> </span>Yarn<span class="Apple-converted-space"> </span>is<span class="Apple-converted-space"> </span>not<span class="Apple-converted-space"> </span>safe,<span class="Apple-converted-space"> </span>but<span class="Apple-converted-space"> </span>it<span class="Apple-converted-space"> </span>is<span class="Apple-converted-space"> </span>via<span class="Apple-converted-space"> </span>npm.<span class="Apple-converted-space"> </span>It<span class="Apple-converted-space"> </span>seems<span class="Apple-converted-space"> </span>npm<span class="Apple-converted-space"> </span>packages<span class="Apple-converted-space"> </span>are<span class="Apple-converted-space"> </span>notsigned<span class="Apple-converted-space"> </span>which<span class="Apple-converted-space"> </span>is<span class="Apple-converted-space"> </span>a<span class="Apple-converted-space"> </span>security<span class="Apple-converted-space"> </span>risk<span class="Apple-converted-space"> </span>when<span class="Apple-converted-space"> </span>installing<span class="Apple-converted-space"> </span>apps<span class="Apple-converted-space"> </span>globally.</span></div>
<h5 style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 1em; letter-spacing: 0.3px; line-height: 1.1; margin-bottom: 0.85em; margin-top: 1.275em;">
<span style="background-color: white;">
via<span class="Apple-converted-space"> </span>npm</span></h5>
<div style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 14px; letter-spacing: 0.3px; margin-bottom: 0.85em;">
<code style="background-color: white; border-radius: 3px; border: none; box-sizing: border-box; direction: ltr; font-family: consolas, "liberation mono", menlo, courier, monospace; font-size: 0.85em; margin: 0px; padding: 0.2em;">npm install -g yarn</code></div>
<h5 style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 1em; letter-spacing: 0.3px; line-height: 1.1; margin-bottom: 0.85em; margin-top: 1.275em;">
<span style="background-color: white;">
via<span class="Apple-converted-space"> </span>Homebrew<span class="Apple-converted-space"> </span>on<span class="Apple-converted-space"> </span>macOS</span></h5>
<div style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 14px; letter-spacing: 0.3px; margin-bottom: 0.85em;">
<code style="background-color: white; border-radius: 3px; border: none; box-sizing: border-box; direction: ltr; font-family: consolas, "liberation mono", menlo, courier, monospace; font-size: 0.85em; margin: 0px; padding: 0.2em;">brew install yarn</code></div>
<div style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 14px; letter-spacing: 0.3px; margin-bottom: 0.85em;">
<span style="background-color: white;">Node.js<span class="Apple-converted-space"> </span>is<span class="Apple-converted-space"> </span>a<span class="Apple-converted-space"> </span>prerequisite<span class="Apple-converted-space"> </span>for<span class="Apple-converted-space"> </span>Yarn,<span class="Apple-converted-space"> </span>and<span class="Apple-converted-space"> </span>brew<span class="Apple-converted-space"> </span>installs<span class="Apple-converted-space"> </span>it<span class="Apple-converted-space"> </span>with<span class="Apple-converted-space"> </span>Yarn.<span class="Apple-converted-space"> </span>If<span class="Apple-converted-space"> </span>you<span class="Apple-converted-space"> </span>are<span class="Apple-converted-space"> </span>using<span class="Apple-converted-space"> </span>a<span class="Apple-converted-space"> </span>tool<span class="Apple-converted-space"> </span>like<span class="Apple-converted-space"> </span>nvm,<span class="Apple-converted-space"> </span>this<span class="Apple-converted-space"> </span>can<span class="Apple-converted-space"> </span>break<span class="Apple-converted-space"> </span>it.<span class="Apple-converted-space"> </span>You<span class="Apple-converted-space"> </span>can<span class="Apple-converted-space"> </span>install<span class="Apple-converted-space"> </span>Yarn<span class="Apple-converted-space"> </span>withoutNode.js<span class="Apple-converted-space"> </span>with<span class="Apple-converted-space"> </span>the<span class="Apple-converted-space"> </span>following<span class="Apple-converted-space"> </span>command:</span></div>
<div style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 14px; letter-spacing: 0.3px; margin-bottom: 0.85em;">
<code style="background-color: white; border-radius: 3px; border: none; box-sizing: border-box; direction: ltr; font-family: consolas, "liberation mono", menlo, courier, monospace; font-size: 0.85em; margin: 0px; padding: 0.2em;">brew install yarn --without-node</code></div>
<h5 style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 1em; letter-spacing: 0.3px; line-height: 1.1; margin-bottom: 0.85em; margin-top: 1.275em;">
<span style="background-color: white;">
via<span class="Apple-converted-space"> </span>Chocolatey<span class="Apple-converted-space"> </span>on<span class="Apple-converted-space"> </span>Windows</span></h5>
<div style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 14px; letter-spacing: 0.3px; margin-bottom: 0.85em;">
<span style="background-color: white;">Chocolatey is a Windows, package manager. You can get Chocolatey from<span class="Apple-converted-space"> </span><a href="https://chocolatey.org/" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; box-sizing: border-box; font-size: inherit;">https://chocolatey.org/</a>.</span></div>
<div style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 14px; letter-spacing: 0.3px; margin-bottom: 0.85em;">
<span style="background-color: white;">You<span class="Apple-converted-space"> </span>install<span class="Apple-converted-space"> </span>Yarn<span class="Apple-converted-space"> </span>with<span class="Apple-converted-space"> </span>the<span class="Apple-converted-space"> </span>following<span class="Apple-converted-space"> </span>Chocolatey<span class="Apple-converted-space"> </span>command:</span></div>
<div style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 14px; letter-spacing: 0.3px; margin-bottom: 0.85em;">
<code style="background-color: white; border-radius: 3px; border: none; box-sizing: border-box; direction: ltr; font-family: consolas, "liberation mono", menlo, courier, monospace; font-size: 0.85em; margin: 0px; padding: 0.2em;">choco install yarn</code></div>
<div style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 14px; letter-spacing: 0.3px; margin-bottom: 0.85em;">
<span style="background-color: white;">You<span class="Apple-converted-space"> </span>can<span class="Apple-converted-space"> </span>validate<span class="Apple-converted-space"> </span>that<span class="Apple-converted-space"> </span>Yarn<span class="Apple-converted-space"> </span>was<span class="Apple-converted-space"> </span>installed<span class="Apple-converted-space"> </span>correctly<span class="Apple-converted-space"> </span>by<span class="Apple-converted-space"> </span>typing:</span></div>
<div style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 14px; letter-spacing: 0.3px; margin-bottom: 0.85em;">
<code style="background-color: white; border-radius: 3px; border: none; box-sizing: border-box; direction: ltr; font-family: consolas, "liberation mono", menlo, courier, monospace; font-size: 0.85em; margin: 0px; padding: 0.2em;">yarn --version</code></div>
<div style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 14px; letter-spacing: 0.3px; margin-bottom: 0.85em;">
<span style="background-color: white;">Yarn<span class="Apple-converted-space"> </span>responds<span class="Apple-converted-space"> </span>with<span class="Apple-converted-space"> </span>its<span class="Apple-converted-space"> </span>version<span class="Apple-converted-space"> </span>information<span class="Apple-converted-space"> </span>if<span class="Apple-converted-space"> </span>installed<span class="Apple-converted-space"> </span>correctly.</span></div>
<h3 style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 1.5em; letter-spacing: 0.3px; line-height: 1.1; margin-bottom: 0.85em; margin-top: 1.275em;">
<span style="background-color: white;">
create-react-app</span></h3>
<div style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 14px; letter-spacing: 0.3px; margin-bottom: 0.85em;">
<span style="background-color: white;">The<span class="Apple-converted-space"> </span>create<span class="Apple-converted-space"> </span>command<span class="Apple-converted-space"> </span>is<span class="Apple-converted-space"> </span>now<span class="Apple-converted-space"> </span>part<span class="Apple-converted-space"> </span>of<span class="Apple-converted-space"> </span>Yarn.<span class="Apple-converted-space"> </span>To<span class="Apple-converted-space"> </span>create<span class="Apple-converted-space"> </span>a<span class="Apple-converted-space"> </span>new<span class="Apple-converted-space"> </span>app,<span class="Apple-converted-space"> </span>use:</span></div>
<div style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 14px; letter-spacing: 0.3px; margin-bottom: 0.85em;">
<code style="background-color: white; border-radius: 3px; border: none; box-sizing: border-box; direction: ltr; font-family: consolas, "liberation mono", menlo, courier, monospace; font-size: 0.85em; margin: 0px; padding: 0.2em;">yarn create react-app <app name></code></div>
<h3 style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 1.5em; letter-spacing: 0.3px; line-height: 1.1; margin-bottom: 0.85em; margin-top: 1.275em;">
<span style="background-color: white;">
Firebase</span></h3>
<div style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 14px; letter-spacing: 0.3px; margin-bottom: 0.85em;">
<span style="background-color: white;">Firebase is a cloud service which is now part of Google. Its initial function was their Firebase Real-Time Database, but now they offer many more services including hosting which we'll need to deploy our React app. So, if you don't already have an account, go to<a href="https://firebase.google.com/" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; box-sizing: border-box; font-size: inherit;">https://firebase.google.com/</a><span class="Apple-converted-space"> </span>and sign up. Don't worry you won't need a credit card if you sign up for the Spark Plan.</span></div>
<h3 style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 1.5em; letter-spacing: 0.3px; line-height: 1.1; margin-bottom: 0.85em; margin-top: 1.275em;">
<span style="background-color: white;">
Firebase<span class="Apple-converted-space"> </span>CLI</span></h3>
<div style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 14px; letter-spacing: 0.3px; margin-bottom: 0.85em;">
<span style="background-color: white;">To<span class="Apple-converted-space"> </span>make<span class="Apple-converted-space"> </span>maximum<span class="Apple-converted-space"> </span>use<span class="Apple-converted-space"> </span>of<span class="Apple-converted-space"> </span>Firebase,<span class="Apple-converted-space"> </span>we<span class="Apple-converted-space"> </span>will<span class="Apple-converted-space"> </span>need<span class="Apple-converted-space"> </span>to<span class="Apple-converted-space"> </span>download<span class="Apple-converted-space"> </span>its<span class="Apple-converted-space"> </span>command<span class="Apple-converted-space"> </span>line<span class="Apple-converted-space"> </span>tools<span class="Apple-converted-space"> </span>or<span class="Apple-converted-space"> </span>CLI.<span class="Apple-converted-space"> </span>To<span class="Apple-converted-space"> </span>install<span class="Apple-converted-space"> </span>type:</span></div>
<div style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 14px; letter-spacing: 0.3px; margin-bottom: 0.85em;">
<code style="background-color: white; border-radius: 3px; border: none; box-sizing: border-box; direction: ltr; font-family: consolas, "liberation mono", menlo, courier, monospace; font-size: 0.85em; margin: 0px; padding: 0.2em;">yarn global add firebase-tools</code></div>
<div style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 14px; letter-spacing: 0.3px; margin-bottom: 0.85em;">
<span style="background-color: white;">To<span class="Apple-converted-space"> </span>verify<span class="Apple-converted-space"> </span>that<span class="Apple-converted-space"> </span>the<span class="Apple-converted-space"> </span>tools<span class="Apple-converted-space"> </span>have<span class="Apple-converted-space"> </span>been<span class="Apple-converted-space"> </span>installed<span class="Apple-converted-space"> </span>correctly<span class="Apple-converted-space"> </span>install<span class="Apple-converted-space"> </span>type:</span></div>
<div style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 14px; letter-spacing: 0.3px; margin-bottom: 0.85em;">
<code style="background-color: white; border-radius: 3px; border: none; box-sizing: border-box; direction: ltr; font-family: consolas, "liberation mono", menlo, courier, monospace; font-size: 0.85em; margin: 0px; padding: 0.2em;">firebase --version</code></div>
<div style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 14px; letter-spacing: 0.3px; margin-bottom: 0.85em;">
<span style="background-color: white;">It<span class="Apple-converted-space"> </span>should<span class="Apple-converted-space"> </span>respond<span class="Apple-converted-space"> </span>with<span class="Apple-converted-space"> </span>the<span class="Apple-converted-space"> </span>version<span class="Apple-converted-space"> </span>number.</span></div>
<h3 style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 1.5em; letter-spacing: 0.3px; line-height: 1.1; margin-bottom: 0.85em; margin-top: 1.275em;">
<span style="background-color: white;">
Summary</span></h3>
<div style="box-sizing: border-box; font-family: roboto, "helvetica neue", helvetica, arial, sans-serif; font-size: 14px; letter-spacing: 0.3px;">
<span style="background-color: white;">Now<span class="Apple-converted-space"> </span>we<span class="Apple-converted-space"> </span>have<span class="Apple-converted-space"> </span>all<span class="Apple-converted-space"> </span>of<span class="Apple-converted-space"> </span>our<span class="Apple-converted-space"> </span>development<span class="Apple-converted-space"> </span>tools<span class="Apple-converted-space"> </span>installed<span class="Apple-converted-space"> </span>and<span class="Apple-converted-space"> </span>are<span class="Apple-converted-space"> </span>ready<span class="Apple-converted-space"> </span>to<span class="Apple-converted-space"> </span>begin<span class="Apple-converted-space"> </span>developing<span class="Apple-converted-space"> </span>React<span class="Apple-converted-space"> </span>applications.</span></div>
rockncoderhttp://www.blogger.com/profile/03638306588402195779noreply@blogger.comtag:blogger.com,1999:blog-4491378721746054498.post-16972280402252564642017-10-19T08:32:00.000-07:002017-10-19T08:32:58.994-07:00<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-left: 22pt; margin-right: 22pt; margin-top: 0pt; text-align: center;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7pWy-_BuS57tfzm3QPtVbhsIU5r5gvf9IL7RHnjJI7KTpSglhJpIAFC8aV6UuU2fOXo4ILtR4-dnId5pxt85qKjFii0JbAQ3blEgQefrxR9iZFVnTz3NSaC_bry0NPcE9yefH0wvNJAYa/s1600/nodejs_logo_green.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><b id="docs-internal-guid-b532a2d5-3539-c9df-27b0-bae85fc751b7" style="font-weight: normal;"><br /></b></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://lh4.googleusercontent.com/38RAPWCRwCh31EsXXUH3OBxjcNUEPsFAt2jLADcOvk38azIDHKsX9hL7D1GZo3jvzyIw7Y7rP2wpAIb6NQ9ntpbkmVwJhS1ykVK_UlJgB91VCLiKF2O0hQHbdqyrEvKCydDNaVNO" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="183" src="https://lh4.googleusercontent.com/38RAPWCRwCh31EsXXUH3OBxjcNUEPsFAt2jLADcOvk38azIDHKsX9hL7D1GZo3jvzyIw7Y7rP2wpAIb6NQ9ntpbkmVwJhS1ykVK_UlJgB91VCLiKF2O0hQHbdqyrEvKCydDNaVNO" style="border: none; transform: rotate(0rad);" width="427" /></a></div>
<div dir="ltr" style="line-height: 1.656; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div dir="ltr" style="line-height: 1.656; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">To maximize our time together for learning Node.js, please take care of the following before the workshop. The total time to install the software should be about 60 minutes. If you have questions, please contact me via email: </span><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">rockncoder@gmail.com</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">.</span></div>
<div dir="ltr" style="line-height: 1.656; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7pWy-_BuS57tfzm3QPtVbhsIU5r5gvf9IL7RHnjJI7KTpSglhJpIAFC8aV6UuU2fOXo4ILtR4-dnId5pxt85qKjFii0JbAQ3blEgQefrxR9iZFVnTz3NSaC_bry0NPcE9yefH0wvNJAYa/s1600/nodejs_logo_green.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><b style="font-weight: normal;"><br /></b></a></div>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.656; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Install a web development IDE</span></div>
</li>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: lower-alpha; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.656; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">For the workshop, I will be using JetBrains' WebStorm. If you are accustomed to a different IDE please feel free to use it. Keep in mind, that I won't know how to use your IDE. WebStorm is a paid application but has a free 30-day trial.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: lower-alpha; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.656; margin-bottom: 0pt; margin-top: 0pt;">
<a href="https://www.jetbrains.com/webstorm/download/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">https://www.jetbrains.com/webstorm/download/</span></a></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: lower-alpha; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<a href="https://atom.io/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">https://atom.io/</span></a></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: lower-alpha; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<a href="http://brackets.io/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">http://brackets.io/</span></a></div>
</li>
</ol>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.656; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Install Git</span></div>
</li>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: lower-alpha; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.656; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">We will be using git for the workshop. The latest version is 2.14.2. If have it already, but your version is older than 2.6, please update it.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: lower-alpha; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.656; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Git is free.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: lower-alpha; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.656; margin-bottom: 0pt; margin-top: 0pt;">
<a href="http://git-scm.com/downloads" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">http://git-scm.com/downloads</span></a></div>
</li>
</ol>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.656; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Install Node.js</span></div>
</li>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: lower-alpha; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.656; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">We need node.js installed on our development machines. If you have a version earlier than 8.0.0, please upgrade. I will be using node version v8.6.0. The easiest way to upgrade Node.js is to install the version that you'd like to use. For advanced students using nvm, brew, or chocolatey, I am aware of these tools, but they each introduce more complexity.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: lower-alpha; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.656; margin-bottom: 0pt; margin-top: 0pt;">
<a href="https://nodejs.org/en/download/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">https://nodejs.org/en/download/</span></a></div>
</li>
</ol>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.656; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Upgrade npm</span></div>
</li>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: lower-alpha; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.656; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">NPM comes with node.js but the version installed is usually out of date with the current release. Please update it by entering the following command in the terminal:</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; list-style-type: lower-alpha; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.656; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><b>npm install npm -g</b></span></div>
</li>
</ol>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.656; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">mLab</span></div>
</li>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: lower-alpha; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.656; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">mLab is a fully managed MongoDB-as-a-service provider and a partner of Heroku. Will host our MongoDB service on it instead of installing Mongo on our machines. mLab gives us a free developers account tied to our Heroku account. You may need to supply a credit card but you will not be charged so long as you choose the free sandbox account. This is a small 500 MB database on a shared instance but it is more than enough for the class and gives you real world experience.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: lower-alpha; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.656; margin-bottom: 0pt; margin-top: 0pt;">
<a href="https://mlab.com/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">https://mlab.com/</span></a></div>
</li>
</ol>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.656; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Heroku</span></div>
</li>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: lower-alpha; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.656; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">We will deploy our finished app to Heroku, a cloud-based hosting platform. Developer accounts are free. Please sign up now. If you already have an account, please be sure to have at least one free application slot for the workshop.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: lower-alpha; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.656; margin-bottom: 0pt; margin-top: 0pt;">
<a href="https://www.heroku.com/home" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">https://www.heroku.com/home</span></a></div>
</li>
</ol>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Heroku CLI</span></div>
</li>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: lower-alpha; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">We will also need to install Heroku's command line interface, or CLI. This will allow us make and manager Heroku apps from the command line. </span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: lower-alpha; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Follow the instructions at: </span><a href="https://devcenter.heroku.com/articles/heroku-cli" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">https://devcenter.heroku.com/articles/heroku-cli</span></a></div>
</li>
</ol>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">MongoDB</span></div>
</li>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: lower-alpha; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">We will use MongoDB to hold our data, but we will not install the data locally. Instead we will access it remotely at mLab. We will still need to install the MongoDB CLI.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: lower-alpha; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Follow the instructions at: </span><a href="https://www.mongodb.com/download-center#community" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">https://www.mongodb.com/download-center#community</span></a></div>
</li>
</ol>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.656; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Robomongo</span></div>
</li>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: lower-alpha; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.656; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">MongoDB includes the Mongo Shell, its REPL. Some people don't like using the REPL, so there is an alternative: Robomongo. I won't use it in class but if you hate the REPL you do have another choice.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: lower-alpha; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.656; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 11pt; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;"><a href="https://robomongo.org/" style="text-decoration: none;">https://robomongo.org/</a></span></div>
</li>
</ol>
</ol>
<div dir="ltr" style="line-height: 1.656; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Arial; font-size: 11pt; white-space: pre-wrap;"><br /></span></div>
<div dir="ltr" style="line-height: 1.656; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Arial; font-size: 11pt; white-space: pre-wrap;">Please take care of everything on the list before the workshop. We won't have time to do it during the workshop.</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7pWy-_BuS57tfzm3QPtVbhsIU5r5gvf9IL7RHnjJI7KTpSglhJpIAFC8aV6UuU2fOXo4ILtR4-dnId5pxt85qKjFii0JbAQ3blEgQefrxR9iZFVnTz3NSaC_bry0NPcE9yefH0wvNJAYa/s1600/nodejs_logo_green.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><br /></a></div>
rockncoderhttp://www.blogger.com/profile/03638306588402195779noreply@blogger.comtag:blogger.com,1999:blog-4491378721746054498.post-8348385743613130802017-08-24T06:32:00.003-07:002017-08-24T06:42:07.668-07:00React Native Installation Notes<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibh4SunRPAWYCK5rNIZWUpuLHQgsh24gUwv91t5Nm6f6J60v9peaFzHHgeiUtJOi1ANyetguC-7e1aXRkWhh9ZCnmbJdhYu9KXb_fe-BOZS4cppqEGgKeQMh2uTDdQnfiH13Wr4G4cwk2I/s1600/React_black_logo.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="1600" data-original-width="1600" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibh4SunRPAWYCK5rNIZWUpuLHQgsh24gUwv91t5Nm6f6J60v9peaFzHHgeiUtJOi1ANyetguC-7e1aXRkWhh9ZCnmbJdhYu9KXb_fe-BOZS4cppqEGgKeQMh2uTDdQnfiH13Wr4G4cwk2I/s320/React_black_logo.png" width="320" /></a></div>
<span style="font-family: "verdana" , sans-serif;">Our goal is to complete a small React Native app by the end of the day. We will use Facebook's react-native-cli speed up our development. In this workshop, we will only build Android apps, but all of our code is iOS compatible.</span><br />
<span style="font-family: "verdana" , sans-serif;"><br /></span>
<b><span style="font-family: "verdana" , sans-serif;">Install Chrome</span></b><br />
<span style="font-family: "verdana" , sans-serif;">Debugging React Native can be challenging. The built-in developer tools allow us to debug remotely via Chrome; this is a huge time saver. Install Chrome at:</span><br />
<a href="https://www.google.com/chrome/browser/desktop/index.html"><span style="font-family: "verdana" , sans-serif;">https://www.google.com/chrome/browser/desktop/index.html</span></a><br />
<span style="font-family: "verdana" , sans-serif;"><br /></span>
<b><span style="font-family: "verdana" , sans-serif;">Install Git</span></b><br />
<span style="font-family: "verdana" , sans-serif;">The latest version of Git is 2.14.1. If have it already, but your version is older than 2.6, please update it. Git is free.</span><br />
<a href="http://git-scm.com/downloads"><span style="font-family: "verdana" , sans-serif;">http://git-scm.com/downloads</span></a><br />
<span style="font-family: "verdana" , sans-serif;"><br /></span>
<span style="font-family: "verdana" , sans-serif;"><b>Install React Native</b></span><br />
<span style="font-family: "verdana" , sans-serif;">Facebook has written complete installation notes. Be sure to select "Building Project with Native Code," Android and your development OS.</span><br />
<span style="font-family: "verdana" , sans-serif;"><br /></span>
<a href="https://facebook.github.io/react-native/docs/getting-started.html"><span style="font-family: "verdana" , sans-serif;">https://facebook.github.io/react-native/docs/getting-started.html</span></a><br />
<span style="font-family: "verdana" , sans-serif;"><br /></span>
<span style="font-family: "verdana" , sans-serif;">Be sure to follow all of the installation notes including building a virtual device aka simulator. We will need a simulator to run our apps in the workshop. </span>rockncoderhttp://www.blogger.com/profile/03638306588402195779noreply@blogger.comtag:blogger.com,1999:blog-4491378721746054498.post-58696955301291201502017-04-11T02:51:00.001-07:002017-04-12T10:33:37.529-07:00Angular Application Testing Installation Notes<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii6WdXKxNOS9V99g0h2eLuUnE6R-qtAL4IsGfxGPVQj43dflPHlRQx8upIQzZVzVj6fkRSInfGF7-jMFd6pxaNUg38bvLuJy2t2U1yjPYTXE_mpKtq6KMDiRupPQO451beUn4zFgnD6_1-/s1600/angular2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: "verdana" , sans-serif;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii6WdXKxNOS9V99g0h2eLuUnE6R-qtAL4IsGfxGPVQj43dflPHlRQx8upIQzZVzVj6fkRSInfGF7-jMFd6pxaNUg38bvLuJy2t2U1yjPYTXE_mpKtq6KMDiRupPQO451beUn4zFgnD6_1-/s320/angular2.png" width="298" /></span></a></div>
<span id="docs-internal-guid-11408e70-d025-560c-bf9e-6c4461375a05" style="font-family: "verdana" , sans-serif;"><span style="vertical-align: baseline; white-space: pre-wrap;">To maximize our time together learning to test Angular applications, please take care of the following before the workshop. The total time to install the software should be less than 30 minutes. If you have questions, please contact me via email: </span><a href="mailto:rockncoder@gmail.com" style="text-decoration: none;"><span style="color: #1155cc; vertical-align: baseline; white-space: pre-wrap;">rockncoder@gmail.com</span></a><span style="vertical-align: baseline; white-space: pre-wrap;">.</span></span></div>
<span id="docs-internal-guid-11408e70-d025-560c-bf9e-6c4461375a05" style="font-family: "verdana" , sans-serif;"><br /></span>
<br />
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="-webkit-text-stroke-width: 0px; background-color: transparent; color: black; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal; letter-spacing: normal; list-style-type: decimal; orphans: 2; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: 2; word-spacing: 0px;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<div style="margin: 0px;">
<span style="background-color: transparent; font-family: "verdana" , sans-serif; vertical-align: baseline; white-space: pre-wrap;">Install a web development IDE</span></div>
</div>
</li>
<ol style="-webkit-text-stroke-width: 0px; background-color: white; color: black; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal; letter-spacing: normal; margin-bottom: 0pt; margin-top: 0pt; orphans: 2; text-align: start; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
<li dir="ltr" style="background-color: transparent; list-style-type: lower-alpha; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<div style="margin: 0px;">
<span style="background-color: transparent; font-family: "verdana" , sans-serif; vertical-align: baseline; white-space: pre-wrap;">For the workshop, I will be doing everything in WebStorm. If you are accustomed to a different IDE for web development, you may use it, but please know how to use it. I, unfortunately, won't be able to give you much advice on using any of IDEs there are available. WebStorm is a paid application but has a 30-day free trial version available.</span></div>
</div>
</li>
<li dir="ltr" style="background-color: transparent; list-style-type: lower-alpha; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<div style="margin: 0px;">
<a href="https://www.jetbrains.com/webstorm/download/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: "verdana" , sans-serif; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">https://www.jetbrains.com/webstorm/download/</span></a></div>
</div>
</li>
</ol>
<li dir="ltr" style="-webkit-text-stroke-width: 0px; background-color: transparent; color: black; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal; letter-spacing: normal; list-style-type: decimal; orphans: 2; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: 2; word-spacing: 0px;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<div style="margin: 0px;">
<span style="background-color: transparent; font-family: "verdana" , sans-serif; vertical-align: baseline; white-space: pre-wrap;">Install Git</span></div>
</div>
</li>
<ol style="-webkit-text-stroke-width: 0px; background-color: white; color: black; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal; letter-spacing: normal; margin-bottom: 0pt; margin-top: 0pt; orphans: 2; text-align: start; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
<li dir="ltr" style="background-color: transparent; list-style-type: lower-alpha; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<div style="margin: 0px;">
<span style="background-color: transparent; font-family: "verdana" , sans-serif; vertical-align: baseline; white-space: pre-wrap;">We will be using Git Bundles for the workshop. They will allow us to advance through the course together and recover from hard to find coding bugs. The latest version is 2.11.0. If have it already, but your version is older than 2.6, please update it.</span></div>
</div>
</li>
<li dir="ltr" style="background-color: transparent; list-style-type: lower-alpha; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<div style="margin: 0px;">
<span style="background-color: transparent; font-family: "verdana" , sans-serif; vertical-align: baseline; white-space: pre-wrap;">Git is free.</span></div>
</div>
</li>
<li dir="ltr" style="background-color: transparent; list-style-type: lower-alpha; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<div style="margin: 0px;">
<a href="http://git-scm.com/downloads" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: "verdana" , sans-serif; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">http://git-scm.com/downloads</span></a></div>
</div>
</li>
</ol>
<li dir="ltr" style="-webkit-text-stroke-width: 0px; background-color: transparent; color: black; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal; letter-spacing: normal; list-style-type: decimal; orphans: 2; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: 2; word-spacing: 0px;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<div style="margin: 0px;">
<span style="background-color: transparent; font-family: "verdana" , sans-serif; vertical-align: baseline; white-space: pre-wrap;">Install Node.js</span></div>
</div>
</li>
<ol style="-webkit-text-stroke-width: 0px; background-color: white; color: black; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal; letter-spacing: normal; margin-bottom: 0pt; margin-top: 0pt; orphans: 2; text-align: start; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
<li dir="ltr" style="background-color: transparent; list-style-type: lower-alpha; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<div style="margin: 0px;">
<span style="background-color: transparent; font-family: "verdana" , sans-serif; vertical-align: baseline; white-space: pre-wrap;">We need node.js installed on our development machines. If you have a version older than 7.0.0, please upgrade. I will be using node version 7.7.0.</span></div>
</div>
</li>
<li dir="ltr" style="background-color: transparent; list-style-type: lower-alpha; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<div style="margin: 0px;">
<a href="https://nodejs.org/en/download/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: "verdana" , sans-serif; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">https://nodejs.org/en/download/</span></a></div>
</div>
</li>
</ol>
<li dir="ltr" style="-webkit-text-stroke-width: 0px; background-color: transparent; color: black; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal; letter-spacing: normal; list-style-type: decimal; orphans: 2; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: 2; word-spacing: 0px;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<div style="margin: 0px;">
<span style="background-color: transparent; font-family: "verdana" , sans-serif; vertical-align: baseline; white-space: pre-wrap;">Upgrade npm</span></div>
</div>
</li>
<ol style="-webkit-text-stroke-width: 0px; background-color: white; color: black; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal; letter-spacing: normal; margin-bottom: 0pt; margin-top: 0pt; orphans: 2; text-align: start; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
<li dir="ltr" style="background-color: transparent; list-style-type: lower-alpha; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<div style="margin: 0px;">
<span style="background-color: transparent; font-family: "verdana" , sans-serif; vertical-align: baseline; white-space: pre-wrap;">NPM comes with node.js but the version installed is usually out of date with the current release. I will be using version 4.1.2. Please update it by entering the following command in the terminal:</span></div>
</div>
</li>
<li dir="ltr" style="background-color: transparent; font-weight: 700; list-style-type: lower-alpha; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<div style="margin: 0px;">
<span style="background-color: transparent; font-family: "verdana" , sans-serif; vertical-align: baseline; white-space: pre-wrap;">npm install npm -g</span></div>
</div>
</li>
</ol>
<li dir="ltr" style="-webkit-text-stroke-width: 0px; background-color: transparent; color: black; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal; letter-spacing: normal; list-style-type: decimal; orphans: 2; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: 2; word-spacing: 0px;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<div style="margin: 0px;">
<span style="background-color: transparent; font-family: "verdana" , sans-serif; vertical-align: baseline; white-space: pre-wrap;">The Angular CLI</span></div>
</div>
</li>
<ol style="-webkit-text-stroke-width: 0px; background-color: white; color: black; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal; letter-spacing: normal; margin-bottom: 0pt; margin-top: 0pt; orphans: 2; text-align: start; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
<li dir="ltr" style="background-color: transparent; list-style-type: lower-alpha; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<div style="margin: 0px;">
<span style="background-color: transparent; font-family: "verdana" , sans-serif; vertical-align: baseline; white-space: pre-wrap;">The angular core team created the Angular CLI to make it easier to build, test, and maintain angular projects. It is installed with npm. You must use at version 1.0.0. Please don't use any beta version they will not have the features I will be using.</span></div>
</div>
</li>
<li dir="ltr" style="background-color: transparent; font-weight: 700; list-style-type: lower-alpha; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<div style="margin: 0px;">
<span style="background-color: transparent; font-family: "verdana" , sans-serif; vertical-align: baseline; white-space: pre-wrap;">npm install -g @angular/cli</span></div>
</div>
</li>
</ol>
</ol>
<span style="font-family: "verdana" , sans-serif;"><br /><span style="white-space: pre-wrap;">The code and slides won't be finished until the morning of the class but I've listed their URLs below.</span><span style="white-space: pre-wrap;">The slides are at: <a href="https://www.slideshare.net/rockncoder/angular-application-testing">https://www.slideshare.net/rockncoder/angular-application-testing</a></span></span><br />
<span style="font-family: "verdana" , sans-serif;">The code at: <a href="https://github.com/Rockncoder/gh-stars-testing">https://github.com/Rockncoder/gh-stars-testing</a></span><br />
<span style="font-family: "verdana" , sans-serif;">The repo is at: <a href="https://github.com/Rockncoder/gh-stars-testing.git">https://github.com/Rockncoder/gh-stars-testing.git</a></span>rockncoderhttp://www.blogger.com/profile/03638306588402195779noreply@blogger.comtag:blogger.com,1999:blog-4491378721746054498.post-62115132717664868772017-03-02T14:45:00.001-08:002017-03-02T14:49:11.013-08:00Angular 2 + Material Angular + Firebase Contacts App<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjylnD44WvBr9ltZRJU9wGHMLDH3P31wTae5MLOryAtZ2fCIbyRpoko36b8KO4GCtqIBoAxX_udEfGiObSLOmaeMTo4osvpz3gEnQoGH8GEzcCTfpORwaP7XToWVyZmu4n8-kePBkGLDEoj/s1600/shield-large.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjylnD44WvBr9ltZRJU9wGHMLDH3P31wTae5MLOryAtZ2fCIbyRpoko36b8KO4GCtqIBoAxX_udEfGiObSLOmaeMTo4osvpz3gEnQoGH8GEzcCTfpORwaP7XToWVyZmu4n8-kePBkGLDEoj/s1600/shield-large.png" /></a><span style="font-family: "trebuchet ms" , sans-serif;">Angular 2 is great by itself, but when you combine it with Firebase it because absolutely amazing. Then add Material Angular and now you have a site which scales from desktop to mobile and has no backend. </span><br />
<span style="font-family: "trebuchet ms" , sans-serif;"><br /></span>
<span style="font-family: "trebuchet ms" , sans-serif;">I will flush out the meat of this post later, but I want to share this out since there is a lot of interest in the community. </span><br />
<span style="font-family: "trebuchet ms" , sans-serif;"><br /></span>
<span style="font-family: "trebuchet ms" , sans-serif;">The code is available on GitHub, <a href="https://github.com/Rockncoder/contacts-troy">https://github.com/Rockncoder/contacts-troy</a></span><br />
<span style="font-family: "trebuchet ms" , sans-serif;"><br /></span>
<span style="font-family: "trebuchet ms" , sans-serif;">A demo of the site is running at: <a href="https://contacts-troy.firebaseapp.com/">https://contacts-troy.firebaseapp.com</a></span><br />
<span style="font-family: "trebuchet ms" , sans-serif;"><br /></span>
<br />
<div style="background-color: white; font-size: 11.3pt;">
<span style="font-family: "trebuchet ms" , sans-serif;">There is one missing file, src/app/FirebaseConfig.ts.<br /> It contains all of your firebase configuration information.</span></div>
<pre style="background-color: white; font-family: "Fira Code"; font-size: 11.3pt;"><span style="color: grey; font-style: italic;">
</span><span style="color: grey; font-style: italic;">export const firebaseConfig = {</span></pre>
<pre style="background-color: white; font-family: "Fira Code"; font-size: 11.3pt;"><span style="color: grey; font-style: italic;"> apiKey: "xxxxxxxxxxxxxcxxxxxxxxxxxxxxxxxxxxxxxxxxx",</span></pre>
<pre style="background-color: white; font-family: "Fira Code"; font-size: 11.3pt;"><span style="color: grey; font-style: italic;"> authDomain: "xxxxxxxxx.firebaseapp.com",</span></pre>
<pre style="background-color: white; font-family: "Fira Code"; font-size: 11.3pt;"><span style="color: grey; font-style: italic;"> databaseURL: "https://xxxxxxxxxxx.firebaseio.com",</span></pre>
<pre style="background-color: white; font-family: "Fira Code"; font-size: 11.3pt;"><span style="color: grey; font-style: italic;"> storageBucket: "xxxxxxxxxxxxxx.appspot.com",</span></pre>
<pre style="background-color: white; font-family: "Fira Code"; font-size: 11.3pt;"><span style="color: grey; font-style: italic;"> messagingSenderId: "xxxxxxxxxxx"</span></pre>
<pre style="background-color: white; font-family: "Fira Code"; font-size: 11.3pt;"><span style="color: grey; font-style: italic;">};</span><span style="color: grey; font-style: italic;">
</span></pre>
rockncoderhttp://www.blogger.com/profile/03638306588402195779noreply@blogger.comtag:blogger.com,1999:blog-4491378721746054498.post-549910609141858902017-02-21T12:09:00.000-08:002017-02-21T12:09:28.598-08:00React Mini Session Installation Notes<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhce8NRHLEU8BZo50-_aE6_6e_QaoMlOQthRfpxsUG7uENit50_cxRatnUGo84sbxZz22BaO8wRz_JZeWx4jR39OI6dJiK7GFhw0nfmYpqNkpeAEqkX19rbnzFP80cEMxrPdqQ1VYhkKgrg/s1600/react.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="287" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhce8NRHLEU8BZo50-_aE6_6e_QaoMlOQthRfpxsUG7uENit50_cxRatnUGo84sbxZz22BaO8wRz_JZeWx4jR39OI6dJiK7GFhw0nfmYpqNkpeAEqkX19rbnzFP80cEMxrPdqQ1VYhkKgrg/s320/react.png" width="320" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Arial; font-size: 11pt; white-space: pre-wrap;">Our goal is to deploy our completed React mini app to Firebase by the end of the evening. So, this mini-session will move really fast and unlike our weekend workshops, I won't have time to stop and help, but if you install everything before Tuesday night you should be able to keep up. </span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">It should only take about 30 minutes to install everything below. If you have questions, please contact me via email: </span><a href="mailto:rockncoder@gmail.com" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">rockncoder@gmail.com</span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">.</span></div>
<b id="docs-internal-guid-81f38d33-6248-6013-45b8-eb72d297b8e8" style="font-weight: normal;"><br /></b>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Install a web development IDE</span></div>
</li>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: lower-alpha; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">For the workshop, I will be doing everything in WebStorm. If you are accustomed to a different IDE for web development, you may use it, but please know how to use it. I, unfortunately, won't be able to give you much advice on using any of IDEs there are available. WebStorm is a paid application but it has a 30-day free trial version available.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: lower-alpha; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<a href="https://www.jetbrains.com/webstorm/download/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">https://www.jetbrains.com/webstorm/download/</span></a></div>
</li>
</ol>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Install Git</span></div>
</li>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: lower-alpha; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">We will be using Git Bundles for the workshop. They will allow us to advance through the course together and recover from hard to find coding bugs. The latest version is 2.11.0. If have it already, but your version is older than 2.6, please update it.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: lower-alpha; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Git is free.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: lower-alpha; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<a href="http://git-scm.com/downloads" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">http://git-scm.com/downloads</span></a></div>
</li>
</ol>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Install Node.js</span></div>
</li>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: lower-alpha; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">We need node.js installed on our development machines. If you have a version older than 6.9.4, please upgrade. I will be using node version 7.4.0.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: lower-alpha; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<a href="https://nodejs.org/en/download/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">https://nodejs.org/en/download/</span></a></div>
</li>
</ol>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Upgrade npm</span></div>
</li>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: lower-alpha; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">NPM comes with node.js but the version installed is usually out of date with the current release. Please update it by entering the following command in the terminal:</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 700; list-style-type: lower-alpha; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">npm install npm -g</span></div>
</li>
</ol>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Firebase</span></div>
</li>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: lower-alpha; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Firebase is both a real-time database and a cloud hosting platform. They make it relatively easy to build "backend-less" websites. They have a FREE developer price tier called "Spark". It is a perfect place to stash your experiments. They are will be accessible publicly over HTTPS.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: lower-alpha; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Go to </span><a href="https://firebase.google.com/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">https://firebase.google.com</span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> then click "Pricing" from the top menu. Scroll down to the bottom of the page. On the first column, "SPARK" click the button, "START NOW". Complete the sign up for the free account.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: lower-alpha; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Install the firebase command line tools </span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 700; list-style-type: lower-alpha; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">npm install -g firebase-tools</span></div>
</li>
</ol>
</ol>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Please take care of everything on the list before the mini-session. We won't have time during it. If you have questions, please feel free to contact me by email: rockncoder@gmail.com.</span></div>
<br />rockncoderhttp://www.blogger.com/profile/03638306588402195779noreply@blogger.comtag:blogger.com,1999:blog-4491378721746054498.post-21050261488375441322017-01-24T03:08:00.001-08:002017-01-24T03:09:07.770-08:00Preparing for the MEAN Stack Workshop: Winter 2017<div dir="ltr" style="background-color: white; line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span id="docs-internal-guid-11408e70-d025-560c-bf9e-6c4461375a05"></span><br />
<div class="separator" style="clear: both; text-align: center;">
<span id="docs-internal-guid-11408e70-d025-560c-bf9e-6c4461375a05"><a href="https://lh3.googleusercontent.com/brK40_nv7R8tS8ZNVvF1HUnC2T6l9HuxowTo1kKXbWKzEceOaHd_JQ04Vvg6GWjm2X0TyM1dMhGTeX1jAQK-Q6J6uJR-c8IWm6KyGmKRvgJEEzgrYtxIi-I0B3C5sTBlTA2byzvJ" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="171" src="https://lh3.googleusercontent.com/brK40_nv7R8tS8ZNVvF1HUnC2T6l9HuxowTo1kKXbWKzEceOaHd_JQ04Vvg6GWjm2X0TyM1dMhGTeX1jAQK-Q6J6uJR-c8IWm6KyGmKRvgJEEzgrYtxIi-I0B3C5sTBlTA2byzvJ" style="border: none; transform: rotate(0rad);" width="427" /></a></span></div>
<span id="docs-internal-guid-11408e70-d025-560c-bf9e-6c4461375a05">
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">To maximize our time together for learning the MEAN stack, please take care of the following before the workshop. The total time to install the software should be less than an hour. If you have questions, please contact me via email: </span><a href="mailto:rockncoder@gmail.com" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: "arial"; font-size: 14.6667px; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">rockncoder@gmail.com</span></a><span style="background-color: transparent; font-family: "arial"; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">.</span></div>
<br /><ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; font-family: Arial; font-size: 14.6667px; list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">Install a web development IDE</span></div>
</li>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; font-family: Arial; font-size: 14.6667px; list-style-type: lower-alpha; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">For the workshop, I will be doing everything in WebStorm. If you are accustomed to a different IDE for web development, you may use it, but please know how to use it. I, unfortunately, won't be able to give you much advice on using any of IDEs there are available. WebStorm is a paid application but has a 30-day free trial version available.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; font-family: Arial; font-size: 14.6667px; list-style-type: lower-alpha; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<a href="https://www.jetbrains.com/webstorm/download/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-size: 14.6667px; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">https://www.jetbrains.com/webstorm/download/</span></a></div>
</li>
</ol>
<li dir="ltr" style="background-color: transparent; font-family: Arial; font-size: 14.6667px; list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">Install Git</span></div>
</li>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; font-family: Arial; font-size: 14.6667px; list-style-type: lower-alpha; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">We will be using Git Bundles for the workshop. They will allow us to advance through the course together and recover from hard to find coding bugs. The latest version is 2.11.0. If have it already, but your version is older than 2.6, please update it.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; font-family: Arial; font-size: 14.6667px; list-style-type: lower-alpha; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">Git is free.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; font-family: Arial; font-size: 14.6667px; list-style-type: lower-alpha; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<a href="http://git-scm.com/downloads" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-size: 14.6667px; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">http://git-scm.com/downloads</span></a></div>
</li>
</ol>
<li dir="ltr" style="background-color: transparent; font-family: Arial; font-size: 14.6667px; list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">Install Node.js</span></div>
</li>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; font-family: Arial; font-size: 14.6667px; list-style-type: lower-alpha; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">We need node.js installed on our development machines. If you have a version older than 6.9.4, please upgrade. I will be using node version 6.9.4.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; font-family: Arial; font-size: 14.6667px; list-style-type: lower-alpha; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<a href="https://nodejs.org/en/download/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-size: 14.6667px; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">https://nodejs.org/en/download/</span></a></div>
</li>
</ol>
<li dir="ltr" style="background-color: transparent; font-family: Arial; font-size: 14.6667px; list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">Upgrade npm</span></div>
</li>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; font-family: Arial; font-size: 14.6667px; list-style-type: lower-alpha; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">NPM comes with node.js but the version installed is usually out of date with the current release. Please update it by entering the following command in the terminal:</span></div>
</li>
<li dir="ltr" style="background-color: transparent; font-family: Arial; font-size: 14.6667px; font-weight: 700; list-style-type: lower-alpha; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">npm install npm -g</span></div>
</li>
</ol>
<li dir="ltr" style="background-color: transparent; font-family: Arial; font-size: 14.6667px; list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">The Angular CLI</span></div>
</li>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; font-family: Arial; font-size: 14.6667px; list-style-type: lower-alpha; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">The angular core team created the Angular CLI to make it easier to build, test, and maintain angular projects. It is installed with npm.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; font-family: Arial; font-size: 14.6667px; font-weight: 700; list-style-type: lower-alpha; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">npm install -g angular-cli</span></div>
</li>
</ol>
<li dir="ltr" style="background-color: transparent; font-family: Arial; font-size: 14.6667px; list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">Heroku</span></div>
</li>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; font-family: Arial; font-size: 14.6667px; list-style-type: lower-alpha; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">We will deploy our finished app to Heroku, a cloud-based hosting platform. Developer accounts are free. Please sign up now. If you already have an account, please be sure to have at least one free application slot for the workshop.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; font-family: Arial; font-size: 14.6667px; list-style-type: lower-alpha; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<a href="https://www.heroku.com/home" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-size: 14.6667px; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">https://www.heroku.com/home</span></a></div>
</li>
</ol>
<li dir="ltr" style="background-color: transparent; font-family: Arial; font-size: 14.6667px; list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">mLab</span></div>
</li>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; font-family: Arial; font-size: 14.6667px; list-style-type: lower-alpha; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">mLab is a fully managed MongoDB-as-a-service provider and a partner of Heroku. Will host our MongoDB service on it instead of installing Mongo on our machines. mLab gives us a free developers account tied to our Heroku account. You may need to supply a credit card but you will not be charged so long as you choose the free sandbox account. This is a small 500 MB database on a shared instance but it is more than enough for the class and gives you real world experience.</span></div>
</li>
</ol>
<li dir="ltr" style="background-color: transparent; font-family: Arial; font-size: 14.6667px; list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">Robomongo</span></div>
</li>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; font-family: Arial; font-size: 14.6667px; list-style-type: lower-alpha; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">MongoDB includes the Mongo Shell, its REPL. Some people don't like using the REPL, so there is an alternative: Robomongo. I won't use it in class but if you hate the REPL you do have another choice.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; font-family: Arial; font-size: 14.6667px; list-style-type: lower-alpha; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<a href="https://robomongo.org/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-size: 14.6667px; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">https://robomongo.org/</span></a></div>
</li>
</ol>
</ol>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">Please take care of everything on the list before the workshop. We won't have time to do it during the workshop. If you have questions, please feel free to contact me by email: rockncoder@gmail.com.</span></div>
</span></div>
rockncoderhttp://www.blogger.com/profile/03638306588402195779noreply@blogger.comtag:blogger.com,1999:blog-4491378721746054498.post-23344497259314137952016-05-04T13:28:00.000-07:002016-05-04T13:28:08.778-07:00Angular 2 - Installation Notes<div dir="ltr" style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px; line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgB_yDi4iWgoMxQy1vPgoTHq9lt_0h5GDKLVTSHOv45VjzjJ_iVDZzz7PPEpLB_HQrI2aAO76-8ZMtU9lH9AYZUH9A86fN2lZKRjq7_ZAy-dSrtZQ4waQhJDtI7FpGDIxz9lRBpvNb5VR0/s1600/angular2.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgB_yDi4iWgoMxQy1vPgoTHq9lt_0h5GDKLVTSHOv45VjzjJ_iVDZzz7PPEpLB_HQrI2aAO76-8ZMtU9lH9AYZUH9A86fN2lZKRjq7_ZAy-dSrtZQ4waQhJDtI7FpGDIxz9lRBpvNb5VR0/s1600/angular2.png" /></a></div>
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><br />To maximize our time together for learning Angular 2, please take care of the following before the workshop. The total time to install the software should be less than an hour. If you have questions, please contact me via email: </span><a href="mailto:rockncoder@gmail.com" style="color: #1155cc;" target="_blank"><span style="background-color: transparent; font-family: "arial"; font-size: 14.6667px; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">rockncoder@gmail.com</span></a><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">.</span></div>
<br style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;" />
<ol style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px; margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: arial; font-size: 14.6667px; list-style-type: decimal; margin-left: 15px; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">Install a web development IDE</span></div>
</li>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: arial; font-size: 14.6667px; list-style-type: lower-alpha; margin-left: 15px; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">For the workshop, I will be doing everything in WebStorm. If you are accustomed to a different IDE for web development, you may use it, but please know how to use it. I, unfortunately, won't be able to give you much advice on using any of IDEs there are available. WebStorm is a paid application but has a 30-day free trial version available.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: arial; font-size: 14.6667px; list-style-type: lower-alpha; margin-left: 15px; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<a href="https://www.jetbrains.com/webstorm/download/" style="color: #1155cc; text-decoration: none;" target="_blank"><span style="background-color: transparent; font-size: 14.6667px; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">https://www.jetbrains.com/<wbr></wbr>webstorm/download/</span></a></div>
</li>
</ol>
<li dir="ltr" style="background-color: transparent; color: black; font-family: arial; font-size: 14.6667px; list-style-type: decimal; margin-left: 15px; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">Install Git</span></div>
</li>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: arial; font-size: 14.6667px; list-style-type: lower-alpha; margin-left: 15px; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">We will be using Git Bundles for the workshop. They will allow us to advance through the course together and recover from hard to find coding bugs. The latest version is 2.8.1. If have it already, but your version is older than 2.6, please update it.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: arial; font-size: 14.6667px; list-style-type: lower-alpha; margin-left: 15px; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">Git is free.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: arial; font-size: 14.6667px; list-style-type: lower-alpha; margin-left: 15px; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<a href="http://git-scm.com/downloads" style="color: #1155cc; text-decoration: none;" target="_blank"><span style="background-color: transparent; font-size: 14.6667px; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">http://git-scm.com/downloads</span></a></div>
</li>
</ol>
<li dir="ltr" style="background-color: transparent; color: black; font-family: arial; font-size: 14.6667px; list-style-type: decimal; margin-left: 15px; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">Install Node.js</span></div>
</li>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: arial; font-size: 14.6667px; list-style-type: lower-alpha; margin-left: 15px; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">We need node.js installed on our development machines. If you have a version older than 5.0, please upgrade. I will be using node version 6.0.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: arial; font-size: 14.6667px; list-style-type: lower-alpha; margin-left: 15px; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<a href="https://nodejs.org/en/download/" style="color: #1155cc; text-decoration: none;" target="_blank"><span style="background-color: transparent; font-size: 14.6667px; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">https://nodejs.org/en/<wbr></wbr>download/</span></a></div>
</li>
</ol>
<li dir="ltr" style="background-color: transparent; color: black; font-family: arial; font-size: 14.6667px; list-style-type: decimal; margin-left: 15px; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">Upgrade npm</span></div>
</li>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: arial; font-size: 14.6667px; list-style-type: lower-alpha; margin-left: 15px; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">NPM comes with node.js but the version installed is usually out of date with the current release. Please update it by entering the following command in the terminal:</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: 'courier new'; font-size: 14.6667px; font-weight: 700; list-style-type: lower-alpha; margin-left: 15px; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">npm install npm -g</span></div>
</li>
</ol>
</ol>
<br style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;" />
<div dir="ltr" style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px; line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">Please take care of everything on the list before the workshop. We won't have time to do it during the workshop. If you have questions, please feel free to contact me by email: </span><a href="mailto:rockncoder@gmail.com" style="color: #1155cc;" target="_blank"><span style="background-color: transparent; font-family: "arial"; font-size: 14.6667px; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">rockncoder@gmail.com</span></a><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">.</span></div>
rockncoderhttp://www.blogger.com/profile/03638306588402195779noreply@blogger.comtag:blogger.com,1999:blog-4491378721746054498.post-3993894627781903612015-10-22T12:55:00.000-07:002016-04-28T05:07:46.397-07:00Preparing for the MEAN Stack Workshop<div dir="ltr" style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px; line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgczuJ6h5ShAYO0cWJUp9Vo1gOyAWELB39gXQvUqHIKhaBDvEsiBbjrI7EZKXcYlbED68eY1cwnGowAkviMu1ZWbbeK7QhvewVabkRyMX213oxVDjYTr4Vw55UzJLLs7R_1gYi0C1VUaLQC/s1600/Meanstack-624x250.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="128" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgczuJ6h5ShAYO0cWJUp9Vo1gOyAWELB39gXQvUqHIKhaBDvEsiBbjrI7EZKXcYlbED68eY1cwnGowAkviMu1ZWbbeK7QhvewVabkRyMX213oxVDjYTr4Vw55UzJLLs7R_1gYi0C1VUaLQC/s320/Meanstack-624x250.jpg" width="320" /></a><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">To maximize our time together for learning the MEAN stack, please take care of the following before the workshop. The total time to install the software should be less than an hour. If you have questions, please contact me via email: </span><a href="mailto:rockncoder@gmail.com" style="color: #1155cc; text-decoration: none;" target="_blank"><span style="background-color: transparent; font-family: "arial"; font-size: 14.6667px; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">rockncoder@gmail.com</span></a><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">.</span></div>
<br style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;" />
<ol style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px; margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 14.6667px; list-style-type: decimal; margin-left: 15px; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">Install a web development IDE</span></div>
</li>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 14.6667px; list-style-type: lower-alpha; margin-left: 15px; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">For the workshop, I will be doing everything in WebStorm. If you are accustomed to a different IDE for web development, you may use it, but please know how to use it. I, unfortunately, won't be able to give you much advice on using any of IDEs there are available. WebStorm is a paid application but has a 30-day free trial version available.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 14.6667px; list-style-type: lower-alpha; margin-left: 15px; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<a href="https://www.jetbrains.com/webstorm/download/" style="color: #1155cc; text-decoration: none;" target="_blank"><span style="background-color: transparent; font-size: 14.6667px; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">https://www.jetbrains.com/<wbr></wbr>webstorm/download/</span></a></div>
</li>
</ol>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 14.6667px; list-style-type: decimal; margin-left: 15px; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">Install Git</span></div>
</li>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 14.6667px; list-style-type: lower-alpha; margin-left: 15px; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">We will be using Git Bundles for the workshop. They will allow us to advance through the course together and recover from hard to find coding bugs. The latest version is 2.8.1. If have it already, but your version is older than 2.6, please update it.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 14.6667px; list-style-type: lower-alpha; margin-left: 15px; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">Git is free.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 14.6667px; list-style-type: lower-alpha; margin-left: 15px; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<a href="http://git-scm.com/downloads" style="color: #1155cc; text-decoration: none;" target="_blank"><span style="background-color: transparent; font-size: 14.6667px; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">http://git-scm.com/downloads</span></a></div>
</li>
</ol>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 14.6667px; list-style-type: decimal; margin-left: 15px; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">Install Node.js</span></div>
</li>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 14.6667px; list-style-type: lower-alpha; margin-left: 15px; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">We need node.js installed on our development machines. If you have a version older than 5.0, please upgrade. I will be using node version 6.0.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 14.6667px; list-style-type: lower-alpha; margin-left: 15px; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<a href="https://nodejs.org/en/download/" style="color: #1155cc; text-decoration: none;" target="_blank"><span style="background-color: transparent; font-size: 14.6667px; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">https://nodejs.org/en/<wbr></wbr>download/</span></a></div>
</li>
</ol>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 14.6667px; list-style-type: decimal; margin-left: 15px; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">Upgrade npm</span></div>
</li>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 14.6667px; list-style-type: lower-alpha; margin-left: 15px; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">NPM comes with node.js but the version installed is usually out of date with the current release. Please update it by entering the following command in the terminal:</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: 'Courier New'; font-size: 14.6667px; font-weight: 700; list-style-type: lower-alpha; margin-left: 15px; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">npm install npm -g</span></div>
</li>
</ol>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 14.6667px; list-style-type: decimal; margin-left: 15px; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">Heroku</span></div>
</li>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 14.6667px; list-style-type: lower-alpha; margin-left: 15px; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">We will deploy our finished app to Heroku, a cloud-based hosting platform. Developer accounts are free. Please sign up now. If you already have an account, please be sure to have at least one free application slot for the workshop. </span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 14.6667px; list-style-type: lower-alpha; margin-left: 15px; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<a href="https://www.heroku.com/home" style="color: #1155cc; text-decoration: none;" target="_blank"><span style="background-color: transparent; font-size: 14.6667px; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">https://www.heroku.com/home</span></a></div>
</li>
</ol>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 14.6667px; list-style-type: decimal; margin-left: 15px; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">mLab</span></div>
</li>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 14.6667px; list-style-type: lower-alpha; margin-left: 15px; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">mLab is a fully managed MongoDB-as-a-service provider and a partner of Heroku. Will host our MongoDB service on it instead of install Mongo on our machines. mLab gives us a free developers account tied to our Heroku account. You may need to supply a credit card but you will not be charged so long as you choose the free sandbox account. This is a small 500 MB database on a shared instance but it is more than enough for the class and gives you real world experience.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 14.6667px; list-style-type: lower-alpha; margin-left: 15px; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">Nothing more to do </span></div>
</li>
</ol>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 14.6667px; list-style-type: decimal; margin-left: 15px; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">MongoChef</span></div>
</li>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 14.6667px; list-style-type: lower-alpha; margin-left: 15px; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">MongoDB includes the Mongo Shell, its REPL, but using it quickly gets tiresome. SO, we will also use a GUI based program, MongoChef. It has a free non-commercial version that we will use for the workshop.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 14.6667px; list-style-type: lower-alpha; margin-left: 15px; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<a href="http://3t.io/mongochef/" style="color: #1155cc; text-decoration: none;" target="_blank"><span style="background-color: transparent; font-size: 14.6667px; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">http://3t.io/mongochef/</span></a></div>
</li>
</ol>
</ol>
<br style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;" />
<div dir="ltr" style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px; line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">Please take care of everything on the list before the workshop. We won't have time to do it during the workshop. If you have questions, please feel free to contact me by email: </span><a href="mailto:rockncoder@gmail.com" style="color: #1155cc; text-decoration: none;" target="_blank"><span style="background-color: transparent; font-family: "arial"; font-size: 14.6667px; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">rockncoder@gmail.com</span></a><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">.</span></div>
rockncoderhttp://www.blogger.com/profile/03638306588402195779noreply@blogger.comtag:blogger.com,1999:blog-4491378721746054498.post-24209681090050815252015-08-11T10:31:00.000-07:002015-08-11T10:46:58.622-07:00Intro to Angular 2.0 - An Online Lunch and Learn<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP1YnPj2lRdF_c_wb4qjzJDn-E0Mcg4-U2FUKcIohdC0D5KyVJPXK1w8Tsl8JYRIgiqwcONJJIyCuBJFYn745iCiLGwb4b6dInXBE2DTtR2FXq0DjEi1CmyGDtF-YX6qautxX3Dpi7dAQc/s1600/shield-large.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><span style="font-family: Verdana, sans-serif;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP1YnPj2lRdF_c_wb4qjzJDn-E0Mcg4-U2FUKcIohdC0D5KyVJPXK1w8Tsl8JYRIgiqwcONJJIyCuBJFYn745iCiLGwb4b6dInXBE2DTtR2FXq0DjEi1CmyGDtF-YX6qautxX3Dpi7dAQc/s1600/shield-large.png" /></span></a><span style="font-family: Verdana, sans-serif;">AngularJS is by far the most popular JavaScript MVC framework. Version 2 of this framework is already in developer preview and will soon be officially released. Angular 2 is not compatible with Angular 1. </span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Don't fall behind. Attend the Rockncoder's first online lunch and learn covering the next version of Angular.</span><br />
<span style="font-family: Verdana, sans-serif;">In this talk we will build an app using Angular 2. We will compare and contrast it to a similar app built using Angular 1. We will write our app using TypeScript and show how to get your dev environment set up.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">This lunch and learn is free. It will take place online on October 8, 2015 from 12 to 1 PM PDT. While this event is free, you must register to attend. Don't wait too long, there are only 50 seats available.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div style="text-align: left; width: 100%;">
<iframe allowtransparency="true" frameborder="0" height="214" hspace="0" marginheight="5" marginwidth="5" scrolling="auto" src="//eventbrite.com/tickets-external?eid=18052103327&ref=etckt" vspace="0" width="100%"></iframe><br />
<div style="font-family: Helvetica, Arial; font-size: 10px; margin: 2px; padding: 5px 0 5px; text-align: left; width: 100%;">
<a class="powered-by-eb" href="http://www.eventbrite.com/r/etckt" style="color: #dddddd; text-decoration: none;" target="_blank">Powered by Eventbrite</a></div>
</div>
rockncoderhttp://www.blogger.com/profile/03638306588402195779noreply@blogger.comtag:blogger.com,1999:blog-4491378721746054498.post-1437414481290959792015-08-06T18:01:00.000-07:002015-11-12T14:30:28.983-08:00Upcoming Talks<br />
<div>
<span style="font-family: "verdana" , sans-serif;">Here are all of my upcoming talks. I will try to keep this list updated as events pass and new ones are added. The best way to get updates on my talks is to follow me on Twitter, @therockncoder.</span></div>
<ol>
<li><span style="font-family: verdana, sans-serif;">14 November - SoCal Code Camp, USC (FREE)</span><span style="font-family: verdana, sans-serif;">Getting Ready for Angular 2: Fighting Fear with Code (FREE)</span><span style="font-family: verdana, sans-serif;">Functional Programming in JavaScript (FREE)</span><a href="http://www.socalcodecamp.com/sessions.aspx" style="font-family: verdana, sans-serif;">http://www.socalcodecamp.com/sessions.aspx</a></li>
<li><span style="font-family: "verdana" , sans-serif;">18 November, 9AM PST - LearnNowOnline Webinar<br />Getting Ready for Angular 2: Fighting Fear with Code<br /><a href="http://www.learnnowonline.com/webinars">http://www.learnnowonline.com/webinars</a></span></li>
<li><span style="font-family: "verdana" , sans-serif;">2 December - <a href="http://www.calanceus.com/">Calance</a>, SoCal .NET<br />Functional Programming in JavaScript<br /><a href="http://www.meetup.com/SoCalDevNet/events/225714066/">http://www.meetup.com/SoCalDevNet/events/225714066/</a></span></li>
<li><span style="font-family: "verdana" , sans-serif;">5/6 December - <a href="http://www.welabs.us/">WeLabs</a>, Long Beach, CA<br />JavaScript Foundations Workshop<br /><a href="http://www.meetup.com/code-district/events/225950308/">http://www.meetup.com/code-district/events/225950308/</a></span></li>
</ol>
<div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr-i6LwlvNqEzknERIiKXQ3HybVtSlpuKeleqvHlvr2GffT65lIhLafOslbXNsSV8U_2ohfd2QnciWlDVQaso8L_sIQ74sZ3hWEcsOEZFhAwwFzaHpwQ3d7v7zcmwhGr0zDuJoShnSemaB/s1600/beginIonic.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr-i6LwlvNqEzknERIiKXQ3HybVtSlpuKeleqvHlvr2GffT65lIhLafOslbXNsSV8U_2ohfd2QnciWlDVQaso8L_sIQ74sZ3hWEcsOEZFhAwwFzaHpwQ3d7v7zcmwhGr0zDuJoShnSemaB/s320/beginIonic.jpg" width="259" /></a><span style="font-family: "verdana" , sans-serif;">My video series on Ionic Framework is available now! Learn to:</span><br />
<br />
<ul>
<li><span style="font-family: "verdana" , sans-serif;">Develop a hybrid mobile application with Ionic and AngularJS</span></li>
<li><span style="font-family: "verdana" , sans-serif;">Explore key commands of the Ionic CLI for an efficient development experience</span></li>
<li><span style="font-family: "verdana" , sans-serif;">Manage application data easily with AngularJS services and Ajax</span></li>
<li><span style="font-family: "verdana" , sans-serif;">Incorporate interactive mobile features to create intuitive user experiences</span></li>
<li><span style="font-family: "verdana" , sans-serif;">Beautify the application further by calling upon Cordova plugins</span></li>
<li><span style="font-family: "verdana" , sans-serif;">Fetch real-time data by making interactive calls to third-party websites</span></li>
<li><span style="font-family: "verdana" , sans-serif;">Deploy your application to the emulator for testing<br /><br />Find it at: <a href="https://www.packtpub.com/web-development/beginning-ionic-hybrid-application-development-video">https://www.packtpub.com/web-development/beginning-ionic-hybrid-application-development-video</a></span></li>
</ul>
</div>
rockncoderhttp://www.blogger.com/profile/03638306588402195779noreply@blogger.comtag:blogger.com,1999:blog-4491378721746054498.post-33621501360072804342015-06-16T09:48:00.002-07:002015-06-16T09:48:40.045-07:00Internet Explorer, Flash Player, and z-index<span style="font-family: Verdana, sans-serif;">At work we are encouraged to pick up and fix medium bugs when we have time, especially the ones which are out of their SLA time period. I like to challenge myself and attempt to fix the older bugs because they usually have been looked by other devs who gave up on them. So this particular bug seemed juicy to me. It was two months old and on the surface seemed easy. The Brightcove flash player was appearing in front of the modal window instead of behind it, but only in Internet Explorer. </span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">When I went to the link supplied in the bug report in IE 11, I saw the issue. I went to same URL in Chrome and Firefox and there was no issue. I tried IE 10 as well and the issue was there too, so it is definitely an issue only with IE. </span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Eventually I tracked the issue down to a missing <param>. It seems Brightcove player markup on that particular page is missing a </span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Courier New, Courier, monospace;"><param name="wmode" value="transparent" /></span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">When that <param> is missing Brightcove uses what appears to be the default:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Courier New, Courier, monospace;"><param name="wmode" value="window" /></span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">This is the statement which gives the flash player the ultimate z-index in Internet Explorer. So fixing the bug once I understood what was causing it was pretty easy. In order to test if my idea was correct, I actually wrote some code in FiddleScript to inject the missing markup onto the page. This was faster than fixing directly in the source code since this page was in our CMS system not in our source code. </span>rockncoderhttp://www.blogger.com/profile/03638306588402195779noreply@blogger.comtag:blogger.com,1999:blog-4491378721746054498.post-33447017583688056692015-05-31T17:04:00.001-07:002015-05-31T17:04:54.737-07:00JavaScript Hands-on Training<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-oNTNX4VgkzuHb1pxTs1GxwA-vCjgh0ajrcE-x_lZijBr33aFpVlSM_C7uk6SyURgtcOwma45RRO47lKsRcmGuGtZsW5AQETggc-rk0RFn6p_L5UhOf_AQl1FC0v_0wQ7VEppypsWw7zq/s1600/js.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-oNTNX4VgkzuHb1pxTs1GxwA-vCjgh0ajrcE-x_lZijBr33aFpVlSM_C7uk6SyURgtcOwma45RRO47lKsRcmGuGtZsW5AQETggc-rk0RFn6p_L5UhOf_AQl1FC0v_0wQ7VEppypsWw7zq/s320/js.png" width="320" /></a><span style="background-color: transparent; color: black; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: Verdana, sans-serif;">JavaScript is one of the most popular languages in the world. It is the dominate language of the browser and is growing increasingly popular outside of it. It is used to create servers with Node.js, and to create mobile apps with frameworks such as Titanium and Ionic. It is even used to create levels in many popular computer games.</span></span></div>
<div style="text-align: justify;">
<b id="docs-internal-guid-70b7c061-ac6d-028d-436a-dfd49537a36b" style="font-weight: normal;"><span style="font-family: Verdana, sans-serif;"><br /></span></b></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: Verdana, sans-serif;">But inspite of its popularity most programmer never bother to study it. Partially it is because it looks familiar. If you program in C, C#, C++ or Java, JavaScript seems like a language you already know. But looks can be deceiving. </span></span></div>
<div style="text-align: justify;">
<b style="font-weight: normal;"><span style="font-family: Verdana, sans-serif;"><br /></span></b></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: Verdana, sans-serif;">Unlike other object oriented languages, JavaScript lacks classes, so people waste valuable time trying to create them. Instead of class inheritance, JavaScript has prototypical inheritance. It is a strange but beautiful way of doing inheritance. Too bad most developers never learn to use it. </span></span></div>
<div style="text-align: justify;">
<b style="font-weight: normal;"><span style="font-family: Verdana, sans-serif;"><br /></span></b></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: Verdana, sans-serif;">There is a trend in many imperative languages of late, adding functional programming features. A few years ago C# added lambdas and LINQ and recently Java 8 also adds lambdas. What is a lambda? It is a fancy way of saying anonymous function. JavaScript has had that ability since 1995. It also has first class functions, which means functions can be used almost anywhere a value can. They can be passed as parameters, returned from functions, stored in variables, arrays, and objects. This also means that JavaScript has high order functions. What are high order functions? It is when a language can both pass functions as parameters to functions and also return functions from functions. </span></span></div>
<div style="text-align: justify;">
<b style="font-weight: normal;"><span style="font-family: Verdana, sans-serif;"><br /></span></b></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: Verdana, sans-serif;">I am going to be teaching hands-on JavaScript in the Los Angeles area later this summer 2015. Why should you study JavaScript? Because understanding JavaScript will give you the ability to unleash it. You will understand concepts that you may have only glossed over before. </span></span></div>
<div style="text-align: justify;">
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<ul style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: Verdana, sans-serif;">What the "use strict" expression actually does</span></span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: Verdana, sans-serif;">Why there are four different ways to call functions</span></span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: Verdana, sans-serif;">How to remove nasty loops from your code by using recursion </span></span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: Verdana, sans-serif;">How to write pure and compose-able functions</span></span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: Verdana, sans-serif;">How write mutation free code</span></span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: Verdana, sans-serif;">How to write code which is easier to unit test</span></span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-align: justify; text-decoration: none; vertical-align: baseline;"><span style="background-color: transparent; color: black; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: Verdana, sans-serif;">and much, much more</span></span></li>
</ul>
<div style="text-align: justify;">
<span style="font-family: Verdana, sans-serif;"><span style="font-size: 15px; white-space: pre-wrap;"><br /></span></span></div>
<div style="text-align: justify;">
<span style="font-family: Verdana, sans-serif;"><span style="font-size: 15px; white-space: pre-wrap;">I will have more information once the dates have been confirmed.</span></span></div>
rockncoderhttp://www.blogger.com/profile/03638306588402195779noreply@blogger.comtag:blogger.com,1999:blog-4491378721746054498.post-68989791038444975172015-05-31T16:17:00.003-07:002015-05-31T16:17:49.374-07:00The Rockncoder Reference Page<span style="font-family: Verdana, sans-serif;">When I tell people that I've been developing software for over 35 years, first there is disbelief and occasionally the very flattering, "You don't seem old enough". But I have been at this a long time now. I sold my first application a learning game while still in high school in the l979. </span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Recently I've decided to create a list of my talks, apps, games, conference appearances, videos, etc. together in one place. The list isn't complete yet but here it is:</span><br />
<br />
<ul>
<li><span style="font-family: Verdana, sans-serif;">My MobyGames page</span></li>
<ul>
<li><a href="http://www.mobygames.com/developer/troy-a-miles/credits/developerId,39000/"><span style="font-family: Verdana, sans-serif;">http://www.mobygames.com/developer/troy-a-miles/credits/developerId,39000/</span></a></li>
</ul>
<li><span style="font-family: Verdana, sans-serif;">First Article</span></li>
<ul>
<li><a href="http://www.drdobbs.com/embedded-systems/writing-pcmcia-software/184409254"><span style="font-family: Verdana, sans-serif;">http://www.drdobbs.com/embedded-systems/writing-pcmcia-software/184409254</span></a></li>
</ul>
<li><span style="font-family: Verdana, sans-serif;">Safari Books Online Blog Posts</span></li>
<ul>
<li><a href="https://blog.safaribooksonline.com/2012/07/28/jquery-mobile-and-maps/"><span style="font-family: Verdana, sans-serif;">https://blog.safaribooksonline.com/2012/07/28/jquery-mobile-and-maps/</span></a></li>
<li><a href="https://blog.safaribooksonline.com/2012/07/19/jquery-mobile-scrolling/"><span style="font-family: Verdana, sans-serif;">https://blog.safaribooksonline.com/2012/07/19/jquery-mobile-scrolling/</span></a></li>
<li><a href="https://blog.safaribooksonline.com/2012/07/20/jquery-mobile-performance-improvement/"><span style="font-family: Verdana, sans-serif;">https://blog.safaribooksonline.com/2012/07/20/jquery-mobile-performance-improvement/</span></a></li>
<li><a href="https://blog.safaribooksonline.com/2012/07/23/jquery-mobile-debugging-tips/"><span style="font-family: Verdana, sans-serif;">https://blog.safaribooksonline.com/2012/07/23/jquery-mobile-debugging-tips/</span></a></li>
<li><a href="https://blog.safaribooksonline.com/2012/12/20/counting-down-the-top-10-blog-posts-of-2012/"><span style="font-family: Verdana, sans-serif;">https://blog.safaribooksonline.com/2012/12/20/counting-down-the-top-10-blog-posts-of-2012/</span></a></li>
</ul>
<li><span style="font-family: Verdana, sans-serif;">Packt Publishing Blog Posts</span></li>
<ul>
<li><a href="https://www.packtpub.com/books/content/unit-testing-apps-android-studio"><span style="font-family: Verdana, sans-serif;">https://www.packtpub.com/books/content/unit-testing-apps-android-studio</span></a></li>
<li><a href="https://www.packtpub.com/books/content/json-pojo-using-gson-android-studio"><span style="font-family: Verdana, sans-serif;">https://www.packtpub.com/books/content/json-pojo-using-gson-android-studio</span></a></li>
</ul>
<li><span style="font-family: Verdana, sans-serif;">Conference Appearances</span></li>
<ul>
<li><a href="http://velocityconf.com/velocity2014/public/schedule/speakers"><span style="font-family: Verdana, sans-serif;">http://velocityconf.com/velocity2014/public/schedule/speakers</span></a></li>
<li><a href="http://mobiledevtest.techwell.com/sme-profiles/troy-miles"><span style="font-family: Verdana, sans-serif;">http://mobiledevtest.techwell.com/sme-profiles/troy-miles</span></a></li>
<li><a href="http://mobilewebdevconference.com/san-francisco-2015/agenda/"><span style="font-family: Verdana, sans-serif;">http://mobilewebdevconference.com/san-francisco-2015/agenda/</span></a></li>
<li><a href="http://www.ng-vegas.org/speakers#therockncoder"><span style="font-family: Verdana, sans-serif;">http://www.ng-vegas.org/speakers#therockncoder</span></a></li>
<li><a href="http://angularsummit.com/conference/boston/2015/09/home"><span style="font-family: Verdana, sans-serif;">http://angularsummit.com/conference/boston/2015/09/home</span></a></li>
</ul>
</ul>
rockncoderhttp://www.blogger.com/profile/03638306588402195779noreply@blogger.comtag:blogger.com,1999:blog-4491378721746054498.post-9227798086985988702015-05-31T16:01:00.000-07:002015-05-31T17:45:01.141-07:00SoCal Code Camp San Diego 2015<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1sXPVrsm2l2rVXtz7nu5UuHmRQ9nKbEMANYehwBJWyVWxDwHboWyBg3mrFmoAb8bgxRodZ8jU_2dgbrXDXHYt2egMy3rktp9ohM1FrvPnbs-vRrMDP3ldd746IOnw2Uyy3c5JWpwM1JRo/s1600/js.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><span style="font-family: Verdana, sans-serif;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1sXPVrsm2l2rVXtz7nu5UuHmRQ9nKbEMANYehwBJWyVWxDwHboWyBg3mrFmoAb8bgxRodZ8jU_2dgbrXDXHYt2egMy3rktp9ohM1FrvPnbs-vRrMDP3ldd746IOnw2Uyy3c5JWpwM1JRo/s320/js.png" width="320" /></span></a></div>
<span style="font-family: Verdana, sans-serif;">The always free SoCal Code Camp is coming to UCSD in San Diego the weekend of June 27th and 28th. I am actually going to take it a bit easy this time around and only do one talk titled, Functional JavaScript. This is something that has grown closer to my heart the last few months as I've ponder why my code isn't quite as nice as I'd like it to be. In my search for new ideas, I've run it an old one: functional programming.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Functional programming has been apart of computer science pretty much since the beginning with Lisp, invented in 1958, being the first major language using its techniques. Functional programming eschews mutating variables and espouses pure functions. Things which are very hard to do right in OOP, like compose-ability are trivial in FP.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Please come and check out my talk and be sure to check your interest so that we can get the proper size room. For those who have never been, UCSD is in the amazingly beautiful La Jolla area of San Diego. It is very close to the ocean, shops and restaurants. Code Camp is a perfect excuse for a weekend vacation. Who knows maybe you can get your company to pay for a hotel room since there is no cost for the training.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">To rate this talk: <a href="http://spkr8.com/t/59461">http://spkr8.com/t/59461</a></span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<b><span style="font-family: Verdana, sans-serif;">Here is the full talk description:</span></b><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Verdana, sans-serif; font-size: 15px; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><i>For most of its nearly 20 years, developers have tried to make JavaScript more like other imperative languages like Java and C#, but was that wise? Unlike those languages JavaScript doesn't have class inheritance or information hiding, but it does possess high order functions. What are high order functions? Function which can both be sent to functions and return from functions. This allows JavaScript to be programmed more functionally. </i></span></div>
<span style="font-family: Verdana, sans-serif;"><b id="docs-internal-guid-ff0888a3-ac27-3db1-b6b1-9fcdcfea58e9" style="font-weight: normal;"><i><br /></i></b>
</span><br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Verdana, sans-serif; font-size: 15px; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><i>Functional languages like Lisp, Scheme, Clojure, and Haskell espouse the beauty of pure functions. What are pure functions? Functions which always produce the same output when given the same input without mutating any variables along the way. This also makes it trivially easy to compose new functions by combining older ones, while in imperative languages, creating compose-able objects can be rocket science hard. The difference between functional and imperative programming can be described as the difference between telling the computer what to do (functional) and how to do it (imperative).</i></span></div>
<span style="font-family: Verdana, sans-serif;"><b style="font-weight: normal;"><i><br /></i></b>
</span><br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Verdana, sans-serif; font-size: 15px; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><i>Functional programming can be a bit difficult to wrap your head but in this session I will give some examples of common programming problems that we face everyday in JavaScript and see how functional programming can help us.</i></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Verdana, sans-serif; font-size: 15px; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><i><br /></i></span></div>
<div dir="ltr" style="margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: Verdana, sans-serif; font-size: 15px; line-height: 20.7000007629395px; vertical-align: baseline; white-space: pre-wrap;"><i><a href="http://www.socalcodecamp.com/socalcodecamp/session.aspx?sid=fb6e7020-78ed-4877-92d0-960802b83d18">Functional JavaScript Talk at SoCal Code Camp</a></i></span></div>
<div dir="ltr" style="margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: Verdana, sans-serif; font-size: 15px; line-height: 20.7000007629395px; vertical-align: baseline; white-space: pre-wrap;"><i><br /></i></span></div>
<div dir="ltr" style="margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: Verdana, sans-serif; font-size: 15px; line-height: 20.7000007629395px; vertical-align: baseline; white-space: pre-wrap;"><i><a href="http://www.socalcodecamp.com/default.aspx">SoCal Code Camp Website</a></i></span></div>
<br />rockncoderhttp://www.blogger.com/profile/03638306588402195779noreply@blogger.comtag:blogger.com,1999:blog-4491378721746054498.post-27410813626126911092015-04-08T23:59:00.000-07:002015-04-09T00:33:10.092-07:00Getting Going with PhoneGap<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ_QgcFPFVSNQH_FxVbqa3NXtX6Nv4ZW7hmVWnSgVyX3VKTMtT4c0CTBF6MLI_7TI3-Z4qUxaDFA_oyyR9Aj5CLpsDuhQBJObf6_kCwkfDQ2_48c1NMRs_vulfMHCpKKsKaqfOB_ffDd4g/s1600/phonegap-logo.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ_QgcFPFVSNQH_FxVbqa3NXtX6Nv4ZW7hmVWnSgVyX3VKTMtT4c0CTBF6MLI_7TI3-Z4qUxaDFA_oyyR9Aj5CLpsDuhQBJObf6_kCwkfDQ2_48c1NMRs_vulfMHCpKKsKaqfOB_ffDd4g/s1600/phonegap-logo.png" height="320" width="320" /></a><span style="font-family: Verdana, sans-serif;">PhoneGap is Adobe's free cross-platform hybrid mobile app framework. It allows you to use the web technologies that you know and love to build mobile apps. </span><span style="font-family: Verdana, sans-serif;">Like many open source projects PhoneGap can be a bit of a pain to get started since it also relies on other open source frameworks. If you only want to play with Ionic in the browser and you are not interested in deploying to a device, only install the mandatory components. If you would like to deploy to either Android, iOS or both, then install the listed optional components. Here is what you will need to install:</span><br />
<ol>
<li><span style="font-family: Verdana, sans-serif;">Mandatory Components</span></li>
<ol>
<li><span style="font-family: Verdana, sans-serif;">Git</span></li>
<li><span style="font-family: Verdana, sans-serif;">Node (includes npm)</span></li>
<li><span style="font-family: Verdana, sans-serif;">PhoneGap (npm module)</span></li>
</ol>
<li><span style="font-family: Verdana, sans-serif;">Optional Android Components</span></li>
<ol>
<li><span style="font-family: Verdana, sans-serif;">Java SDK 7</span></li>
<li><span style="font-family: Verdana, sans-serif;">Android Studio + the latest SDK</span></li>
<li><span style="font-family: Verdana, sans-serif;">VirtualBox </span></li>
<li><span style="font-family: Verdana, sans-serif;">Genymotion Android Emulator</span></li>
</ol>
<li><span style="font-family: Verdana, sans-serif;">Optional iOS Components</span></li>
<ol>
<li><span style="font-family: Verdana, sans-serif;">XCode</span></li>
</ol>
</ol>
<div>
<span style="font-family: Verdana, sans-serif;">Most of PhoneGap will work perfectly fine from a web browser. If that browser is Google's Chrome, you can use its built-in mobile emulator and be able to play around with PhoneGap without having to install all of the device components.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span><span style="font-family: Verdana, sans-serif;">PhoneGap is delivered as an </span><span style="font-family: Verdana, sans-serif;">NPM</span><span style="font-family: Verdana, sans-serif;"> module. NPM is the Node Package Manager, which is installed with Node. NPM has become a very popular way to deliver cross-platform open-source tools. This is why we need to have Node installed. </span><span style="font-family: Verdana, sans-serif;">None of these is difficult to install, but you will need a few hours if you plan to install everything. </span></div>
<div style="text-align: center;">
<div>
<br /></div>
</div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt; text-align: center;">
<span style="color: black; font-family: Verdana, sans-serif; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">Prerequisites</span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">You should have around 10 GB of hard disk free. Quite a bit of space will be eaten up by the Android SDK components. You should also have Google Chrome installed. Chrome is by far the best browser for mobile development. It supports remote debugging which is essential when debugging Cordova apps.</span><br />
<div style="line-height: normal; text-align: center;">
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
</div>
<span style="font-family: Verdana, sans-serif;"></span><br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt; text-align: center;">
<span style="color: black; font-family: Verdana, sans-serif; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">Installation Instructions</span></div>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; font-weight: bold; line-height: 1.15; vertical-align: baseline; white-space: pre-wrap;">Git</span><br />
<span style="color: #1155cc; font-family: Verdana, sans-serif; line-height: 1.15; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;"><a href="http://git-scm.com/" style="line-height: 1.15; text-decoration: none;">http://git-scm.com/</a></span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. The Cordova CLI uses git internally to download assets.</span></div>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Install Git</span></div>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Download the installation package</span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Launch it</span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Verdana, sans-serif; line-height: 1.15; white-space: pre-wrap;">Follow on screen instructions</span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Verdana, sans-serif; line-height: 1.15; white-space: pre-wrap;">Complete the installation</span></div>
</li>
</ol>
<span style="font-family: Verdana, sans-serif;"><br /></span><span style="font-family: Verdana, sans-serif;"></span>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">NodeJS</span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<a href="http://nodejs.org/download/" style="text-decoration: none;"><span style="color: #1155cc; font-family: Verdana, sans-serif; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">http://nodejs.org/download/</span></a></div>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Install NodeJS</span></div>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Download the installation program</span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Launch the installation program</span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Follow on screen instructions</span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Restart machine so changes will be activated</span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Verdana, sans-serif;"><span style="color: black; vertical-align: baseline; white-space: pre-wrap;">Verify that Node JS is installed: </span><span style="color: black; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">node -v</span><span style="color: black; vertical-align: baseline; white-space: pre-wrap;"> </span></span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">(should respond with the version number)</span></div>
</li>
</ol>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Verdana, sans-serif;"><span style="color: black; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">PhoneGap</span></span><br />
<span style="font-family: Verdana, sans-serif;"><a href="http://phonegap.com/" style="text-decoration: none;"><span style="color: #1155cc; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">http://phonegap.com/</span></a></span></div>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Install Cordova </span></div>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Verdana, sans-serif;"><span style="color: black; vertical-align: baseline; white-space: pre-wrap;">Instal PhoneGap globally with the following command: </span><span style="color: black; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">npm install -g phonegap</span><span style="background-color: #f0f3f8; color: #333333; vertical-align: baseline; white-space: pre-wrap;"><br class="kix-line-break" /></span><span style="background-color: #f0f3f8; color: #333333; vertical-align: baseline; white-space: pre-wrap;"><br class="kix-line-break" /></span><span style="color: black; vertical-align: baseline; white-space: pre-wrap;">You may need to use the sudo command to give their root password at this point. This is expected since you are need to permit an application to be installed globally.</span><span style="color: black; vertical-align: baseline; white-space: pre-wrap;"><br class="kix-line-break" /></span></span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Verdana, sans-serif;"><span style="color: black; vertical-align: baseline; white-space: pre-wrap;">Verify installation of PhoneGap from the command line: </span><span style="color: black; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">phonegap -v</span></span></div>
</li>
</ol>
<div>
<span style="font-family: Verdana, sans-serif;"><span style="white-space: pre-wrap;"><br /></span></span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><span style="white-space: pre-wrap;">At this point you can play with PhoneGap in your browser. If you wish to deploy apps to devices please continue with the instructions below.</span></span></div>
<div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Verdana, sans-serif;"><span style="color: black; font-weight: bold; line-height: 1.15; vertical-align: baseline; white-space: pre-wrap;"><br class="Apple-interchange-newline" />Oracle JDK 7</span><span style="color: black; line-height: 1.15; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="color: #1155cc; line-height: 1.15; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;"><a href="http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html" style="line-height: 1.15; text-decoration: none;">http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html</a></span></span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Android uses Oracle's Java as its programming language and to run many of its tools. As of Android 5.0, the official version of Java used is Java 7. Be careful, lots of installation instructions will mention to only use Java 6, this is no longer true. And even though Java 8 is the current version, don't use it either, Google's instructions call for JDK 7. Also be careful not to download the Java Runtime Environment or JRE. We need the JDK, which includes the JRE. Don't bother to download the sample apps or demos, they aren't necessary.</span></div>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Install JDK 7</span></div>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Download the installation package</span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Launch it</span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Follow on screen instructions</span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Add JAVA_HOME</span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Add Java to path</span></div>
</li>
</ol>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Verdana, sans-serif;"><span style="color: black; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">Android Studio</span></span><br />
<span style="font-family: Verdana, sans-serif;"><span style="color: #1155cc; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;"><a href="http://developer.android.com/sdk/index.html" style="text-decoration: none;">http://developer.android.com/sdk/index.html</a></span></span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Android Studio is the official IDE for Android application development, based on IntelliJ IDEA. It has been in beta release since 2013's Google I/O. The 1.0 version was released early December 2014 and with that Google is no longer supporting the former IDE, Eclipse. </span></div>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Install Android Studio</span></div>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Download the installation package</span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Launch it</span></div>
</li>
</ol>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">In addition to an IDE, Android development requires a set of tools, known as the Android Developer Tools or ADT and a software development kit or SDK. A new SDK comes out every few months. As of April 2015, the current SDK is Android 22, which supports Android devices up to version 5.1, aka Lollipop. Android 22 is installed automatically by the installation program. Currently Cordova requires Android 19 so it must be install in addition to Android 22. If you are prompted, be sure to check the box to install it. Otherwise install Android 19 after Android Studio completes its installation. Don't skip this step. </span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;"><br /></span><span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Install Android 19</span></div>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Launch Android Studio</span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Verdana, sans-serif;"><span style="color: black; vertical-align: baseline; white-space: pre-wrap;">Click </span><span style="color: black; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">Configure</span></span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Verdana, sans-serif;"><span style="color: black; vertical-align: baseline; white-space: pre-wrap;">Click </span><span style="color: black; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">SDK Manager</span></span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Once the Android SDK Manager installs, scroll down until you see the "Android 4.4.2 (API 19)"</span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Check the following:</span></div>
</li>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="list-style-type: lower-alpha; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">SDK Platform</span></div>
</li>
<li dir="ltr" style="list-style-type: lower-alpha; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">ARM EABI v7a System Image</span></div>
</li>
</ol>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Verdana, sans-serif; line-height: 1.15; white-space: pre-wrap;">Click the install packages button</span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Accept the license agreement</span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Verdana, sans-serif;"><span style="color: black; vertical-align: baseline; white-space: pre-wrap;">Click </span><span style="color: black; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">Install</span></span></div>
</li>
</ol>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Be patient, it can take an hour or so to install the SDKs.</span></div>
</div>
<span style="font-family: Verdana, sans-serif;"><br /></span><span style="font-family: Verdana, sans-serif;"></span>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Verdana, sans-serif;"><span style="color: black; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">Genymotion Emulator</span></span><br />
<span style="font-family: Verdana, sans-serif;"><span style="color: #1155cc; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;"><a href="https://www.genymotion.com/" style="text-decoration: none;">https://www.genymotion.com</a></span></span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Genymotion is an Android emulator which comprises a complete set of sensors and features in order to interact with a virtual Android environment. It is significantly faster than the included Android emulator. It is built on top of Oracle's VirtualBox, so you can't run it from a virtual machine. If you decided to use it, you will need to install the VirtualBox first.</span><br />
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Arial; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">VirtualBox</span><br />
<a href="https://www.virtualbox.org/" style="text-decoration: none;"><span style="color: #1155cc; font-family: Arial; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">https://www.virtualbox.org/</span></a></div>
<div style="line-height: normal;">
<br /></div>
<div style="line-height: normal;">
</div>
<br />
<div dir="ltr" style="-webkit-text-stroke-width: 0px; color: black; font-family: Times; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">
<div style="margin: 0px;">
<span style="color: black; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;">VirtualBox is a powerful x86 and AMD64/Intel64 </span><span style="font-family: Arial; vertical-align: baseline; white-space: pre-wrap;">virtualization</span><span style="color: black; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;"> product for enterprise as well as home use. Genymotion is built on top of VirtualBox and its devices are emulated x86 Android machines.</span></div>
</div>
<div>
<br /></div>
</div>
</div>
<div>
<span style="font-family: Verdana, sans-serif;"><b>Xcode</b></span><br />
<span style="font-family: Verdana, sans-serif;"><a href="https://itunes.apple.com/us/app/xcode/id497799835?ls=1&mt=12">https://itunes.apple.com/us/app/xcode/id497799835?ls=1&mt=12</a></span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span><span style="font-family: Verdana, sans-serif;">Xcode is available for free from the Mac App Store. It is the Apple tool for building iOS, Safari, and Mac apps.</span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Install Xcode</span></div>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Download the installation package</span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Launch it</span></div>
</li>
</ol>
rockncoderhttp://www.blogger.com/profile/03638306588402195779noreply@blogger.comtag:blogger.com,1999:blog-4491378721746054498.post-47328830366951994562015-04-08T23:41:00.000-07:002015-04-09T00:27:38.783-07:00Ionic Framework Mac/Linux Install<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhProl3VnvxnF5SwryTQfpK5kQOoNbUzn6t8LANccVg1m_0P89Qtu49zKqthJ8pEyh9QQ7UiBcButTRs8VPl6AWuwbWCu6l7Ch1EHPKzEXbIFT2-zEx0niEJMK2wl0XkRJuhl7kz4yi-F5Z/s1600/ionic+square.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhProl3VnvxnF5SwryTQfpK5kQOoNbUzn6t8LANccVg1m_0P89Qtu49zKqthJ8pEyh9QQ7UiBcButTRs8VPl6AWuwbWCu6l7Ch1EHPKzEXbIFT2-zEx0niEJMK2wl0XkRJuhl7kz4yi-F5Z/s1600/ionic+square.png" height="264" width="320" /></a><span style="font-family: Verdana, sans-serif;">Just in case you've been off the planet for a while and don't know what the Ionic Framework is, you are in for a treat. Imagine combining Google's JavaScript MVC framework, AngularJS with Apache's cross-platform hybrid app framework Cordova and throwing in a lot of custom-tuned CSS3 and JavaScript in order to make fast and beautiful </span><span style="font-family: Verdana, sans-serif;">apps for </span><span style="font-family: Verdana, sans-serif;">smartphones and tablets. You would have the Ionic Framework, which you can seem cooler by simply calling it Ionic. </span><br />
<span style="font-family: Verdana, sans-serif;"><br />
Like many open source projects the Ionic Framework can be a bit of a pain to get started since it also relies on other open source frameworks. But don't worry my friend, we are here to help you out. If you only want to play with Ionic in the browser and you are not interested in deploying to a device, only install the mandatory components. If you would like to deploy to either Android, iOS or both, then install the listed optional components. Here is what you will need to install:</span><br />
<ol>
<li><span style="font-family: Verdana, sans-serif;">Mandatory Components</span></li>
<ol>
<li><span style="font-family: Verdana, sans-serif;">Git</span></li>
<li><span style="font-family: Verdana, sans-serif;">Node (includes npm)</span></li>
<li><span style="font-family: Verdana, sans-serif;">Cordova (npm module)</span></li>
<li><span style="font-family: Verdana, sans-serif;">Ionic (npm module)</span></li>
</ol>
<li><span style="font-family: Verdana, sans-serif;">Optional Android Components</span></li>
<ol>
<li><span style="font-family: Verdana, sans-serif;">Java SDK 7</span></li>
<li><span style="font-family: Verdana, sans-serif;">Android Studio + the latest SDK</span></li>
<li><span style="font-family: Verdana, sans-serif;">VirtualBox </span></li>
<li><span style="font-family: Verdana, sans-serif;">Genymotion Android Emulator</span></li>
</ol>
<li><span style="font-family: Verdana, sans-serif;">Optional iOS Components</span></li>
<ol>
<li><span style="font-family: Verdana, sans-serif;">XCode</span></li>
</ol>
</ol>
<div>
<span style="font-family: Verdana, sans-serif;">Most of Ionic will work perfectly fine from a web browser. If that browser is Google's Chrome, you can use its built-in mobile emulator then you will have a pretty good way to get a feel for Ionic development without the pain of installing everything.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Ionic and Cordova are delivered as </span><span style="font-family: Verdana, sans-serif;">NPM</span><span style="font-family: Verdana, sans-serif;"> modules. NPM is the Node Package Manager, which is installed with Node. NPM has become a very popular way to deliver cross-platform open-source tools. This is why we need to have Node installed.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">None of these is difficult to install, but you will need a few hours if you plan to install everything. These instructions are for Mac OS X, but should work for Linux as well. If you need Windows specific instructions, please go to:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div style="text-align: center;">
<span style="font-family: Verdana, sans-serif;"><a href="http://therockncoder.blogspot.com/2014/12/installing-ionic-framework-from-scratch.html"><b>Windows Ionic Framework Instructions</b></a></span></div>
</div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<span style="font-family: Verdana, sans-serif;">If all you want is to get your toes wet in the Ionic pool, probably the best way for you to go is with the Ionic Box. The box uses a tool called Vagrant to create a linux VM via VirtualBox and chock it full with all of the tools you will need to build Ionic apps. All you will need to do is install VirtualBox, then install Vagrant, then download the Ionic Box and tell Vagrant to install it.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;"></span><br />
<div style="text-align: center;">
<span style="font-family: Verdana, sans-serif;"><b><a href="http://therockncoder.blogspot.com/2014/10/getting-started-building-mobile-apps.html">Installing Ionic Via Vagrant</a></b></span><br />
<div>
<br /></div>
<div>
<br /></div>
</div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt; text-align: center;">
<span style="color: black; font-family: Verdana, sans-serif; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">Prerequisites</span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br />
</span><br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">You should have around 10 GB of hard disk free. Quite a bit of space will be eaten up by the Android SDK components. You should also have Google Chrome installed. Chrome is by far the best browser for mobile development. It supports remote debugging which is essential when debugging Cordova apps.</span><br />
<div style="line-height: normal; text-align: center;">
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
</div>
</div>
<span style="font-family: Verdana, sans-serif;">
</span>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt; text-align: center;">
<span style="color: black; font-family: Verdana, sans-serif; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">Installation Instructions</span></div>
<span style="font-family: Verdana, sans-serif;"><br />
</span><br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; font-weight: bold; line-height: 1.15; vertical-align: baseline; white-space: pre-wrap;">Git</span><br />
<span style="color: #1155cc; font-family: Verdana, sans-serif; line-height: 1.15; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;"><a href="http://git-scm.com/" style="line-height: 1.15; text-decoration: none;">http://git-scm.com/</a></span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. The Cordova CLI uses git internally to download assets.</span></div>
<span style="font-family: Verdana, sans-serif;"><br />
</span><br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Install Git</span></div>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Download the installation package</span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Launch it</span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Verdana, sans-serif; line-height: 1.15; white-space: pre-wrap;">Follow on screen instructions</span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Verdana, sans-serif; line-height: 1.15; white-space: pre-wrap;">Complete the installation</span></div>
</li>
</ol>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">
</span>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">NodeJS</span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<a href="http://nodejs.org/download/" style="text-decoration: none;"><span style="color: #1155cc; font-family: Verdana, sans-serif; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">http://nodejs.org/download/</span></a></div>
<span style="font-family: Verdana, sans-serif;"><br />
</span><br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Install NodeJS</span></div>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Download the installation program</span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Launch the installation program</span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Follow on screen instructions</span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Restart machine so changes will be activated</span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Verdana, sans-serif;"><span style="color: black; vertical-align: baseline; white-space: pre-wrap;">Verify that Node JS is installed: </span><span style="color: black; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">node -v</span><span style="color: black; vertical-align: baseline; white-space: pre-wrap;"> </span></span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">(should respond with the version number)</span></div>
</li>
</ol>
<span style="font-family: Verdana, sans-serif;"><br />
</span><br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Verdana, sans-serif;"><span style="color: black; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">Cordova</span></span><br />
<span style="font-family: Verdana, sans-serif;"><a href="http://cordova.apache.org/" style="text-decoration: none;"><span style="color: #1155cc; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">http://cordova.apache.org/</span></a></span></div>
<span style="font-family: Verdana, sans-serif;"><br />
</span><br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Install Cordova </span></div>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Verdana, sans-serif;"><span style="color: black; vertical-align: baseline; white-space: pre-wrap;">Instal Cordova globally with the following command: </span><span style="color: black; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">npm install -g cordova</span><span style="background-color: #f0f3f8; color: #333333; vertical-align: baseline; white-space: pre-wrap;"><br class="kix-line-break" /></span><span style="background-color: #f0f3f8; color: #333333; vertical-align: baseline; white-space: pre-wrap;"><br class="kix-line-break" /></span><span style="color: black; vertical-align: baseline; white-space: pre-wrap;">You may need to use the sudo command to give their root password at this point. This is expected since you are need to permit an application to be installed globally.</span><span style="color: black; vertical-align: baseline; white-space: pre-wrap;"><br class="kix-line-break" /></span></span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Verdana, sans-serif;"><span style="color: black; vertical-align: baseline; white-space: pre-wrap;">Verify installation of Cordova from the command line: </span><span style="color: black; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">cordova -v</span></span></div>
</li>
</ol>
<span style="font-family: Verdana, sans-serif;"><br />
</span><br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Verdana, sans-serif;"><span style="color: black; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">Ionic</span></span><br />
<span style="font-family: Verdana, sans-serif;"><a href="http://ionicframework.com/" style="text-decoration: none;"><span style="color: #1155cc; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">http://ionicframework.com/</span></a></span></div>
<span style="font-family: Verdana, sans-serif;"><br />
</span><br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Install Ionic</span></div>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Verdana, sans-serif;"><span style="color: black; vertical-align: baseline; white-space: pre-wrap;">Install ionic globally with the following command: </span><span style="color: black; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">npm install -g ionic</span><span style="color: black; vertical-align: baseline; white-space: pre-wrap;"><br class="kix-line-break" /></span><span style="color: black; vertical-align: baseline; white-space: pre-wrap;"><br class="kix-line-break" /></span><span style="color: black; vertical-align: baseline; white-space: pre-wrap;">Mac OS X and Linux user may need to give their root password at this point. This is expected since you are need to permit an application to be installed globally.</span><span style="color: black; vertical-align: baseline; white-space: pre-wrap;"><br class="kix-line-break" /></span></span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Verdana, sans-serif;"><span style="color: black; vertical-align: baseline; white-space: pre-wrap;">Verify installation of Ionic from the command line: </span><span style="color: black; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">ionic -v</span></span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">It should respond with the current version number</span></div>
</li>
</ol>
<div>
<span style="font-family: Verdana, sans-serif;"><span style="white-space: pre-wrap;"><br /></span></span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><span style="white-space: pre-wrap;">At this point you can play with Ionic in your browser. If you plan to deploy to a device as an app, you need to continue. If you plan to use <a href="http://view.ionic.io/">Ionic's View app</a>, you don't need to continue.</span></span></div>
<div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Verdana, sans-serif;"><span style="color: black; font-weight: bold; line-height: 1.15; vertical-align: baseline; white-space: pre-wrap;"><br class="Apple-interchange-newline" />Oracle JDK 7</span><span style="color: black; line-height: 1.15; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="color: #1155cc; line-height: 1.15; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;"><a href="http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html" style="line-height: 1.15; text-decoration: none;">http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html</a></span></span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Android uses Oracle's Java as its programming language and to run many of its tools. As of Android 5.0, the official version of Java used is Java 7. Be careful, lots of installation instructions will mention to only use Java 6, this is no longer true. And even though Java 8 is the current version, don't use it either, Google's instructions call for JDK 7. Also be careful not to download the Java Runtime Environment or JRE. We need the JDK, which includes the JRE. Don't bother to download the sample apps or demos, they aren't necessary.</span></div>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Install JDK 7</span></div>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Download the installation package</span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Launch it</span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Follow on screen instructions</span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Add JAVA_HOME</span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Add Java to path</span></div>
</li>
</ol>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Verdana, sans-serif;"><span style="color: black; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">Android Studio</span></span><br />
<span style="font-family: Verdana, sans-serif;"><span style="color: #1155cc; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;"><a href="http://developer.android.com/sdk/index.html" style="text-decoration: none;">http://developer.android.com/sdk/index.html</a></span></span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Android Studio is the official IDE for Android application development, based on IntelliJ IDEA. It has been in beta release since 2013's Google I/O. The 1.0 version was released early December 2014 and with that Google is no longer supporting the former IDE, Eclipse. </span></div>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Install Android Studio</span></div>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Download the installation package</span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Launch it</span></div>
</li>
</ol>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">In addition to an IDE, Android development requires a set of tools, known as the Android Developer Tools or ADT and a software development kit or SDK. A new SDK comes out every few months. As of April 2015, the current SDK is Android 22, which supports Android devices up to version 5.1, aka Lollipop. Android 22 is installed automatically by the installation program. Currently Cordova requires Android 19 so it must be install in addition to Android 22. If you are prompted, be sure to check the box to install it. Otherwise install Android 19 after Android Studio completes its installation. Don't skip this step. </span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;"><br /></span><span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Install Android 19</span></div>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Launch Android Studio</span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Verdana, sans-serif;"><span style="color: black; vertical-align: baseline; white-space: pre-wrap;">Click </span><span style="color: black; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">Configure</span></span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Verdana, sans-serif;"><span style="color: black; vertical-align: baseline; white-space: pre-wrap;">Click </span><span style="color: black; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">SDK Manager</span></span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Once the Android SDK Manager installs, scroll down until you see the "Android 4.4.2 (API 19)"</span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Check the following:</span></div>
</li>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="list-style-type: lower-alpha; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">SDK Platform</span></div>
</li>
<li dir="ltr" style="list-style-type: lower-alpha; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">ARM EABI v7a System Image</span></div>
</li>
</ol>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Verdana, sans-serif; line-height: 1.15; white-space: pre-wrap;">Click the install packages button</span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Accept the license agreement</span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Verdana, sans-serif;"><span style="color: black; vertical-align: baseline; white-space: pre-wrap;">Click </span><span style="color: black; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">Install</span></span></div>
</li>
</ol>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Be patient, it can take an hour or so to install the SDKs.</span></div>
</div>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">
</span>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Verdana, sans-serif;"><span style="color: black; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">Genymotion Emulator</span></span><br />
<span style="font-family: Verdana, sans-serif;"><span style="color: #1155cc; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;"><a href="https://www.genymotion.com/" style="text-decoration: none;">https://www.genymotion.com</a></span></span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Genymotion is an Android emulator which comprises a complete set of sensors and features in order to interact with a virtual Android environment. It is significantly faster than the included Android emulator. It is built on top of Oracle's VirtualBox, so you can't run it from a virtual machine. If you decided to use it, you will need to install the VirtualBox first.</span><br />
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Arial; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">VirtualBox</span><br />
<a href="https://www.virtualbox.org/" style="text-decoration: none;"><span style="color: #1155cc; font-family: Arial; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">https://www.virtualbox.org/</span></a></div>
<div style="line-height: normal;">
<br /></div>
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;"></span><br />
<div style="font-family: Times; line-height: normal; white-space: normal;">
</div>
<br />
<div dir="ltr" style="-webkit-text-stroke-width: 0px; color: black; font-family: Times; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">
<div style="margin: 0px;">
<span style="background-color: transparent; color: black; font-family: Arial; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">VirtualBox is a powerful x86 and AMD64/Intel64 </span><a href="https://www.virtualbox.org/wiki/Virtualization" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">virtualization</span></a><span style="background-color: transparent; color: black; font-family: Arial; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> product for enterprise as well as home use. Genymotion is built on top of VirtualBox and its devices are emulated x86 Android machines.</span></div>
</div>
<div>
<br /></div>
</div>
</div>
<div>
<span style="font-family: Verdana, sans-serif;"><b>Xcode</b></span><br />
<span style="font-family: Verdana, sans-serif;"><a href="https://itunes.apple.com/us/app/xcode/id497799835?ls=1&mt=12">https://itunes.apple.com/us/app/xcode/id497799835?ls=1&mt=12</a></span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Xcode is available for free from the Mac App Store. It is the Apple tool for building iOS, Safari, and Mac apps.</span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Install Xcode</span></div>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Download the installation package</span></div>
</li>
<li dir="ltr" style="list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Verdana, sans-serif; vertical-align: baseline; white-space: pre-wrap;">Launch it</span></div>
</li>
</ol>
<br />rockncoderhttp://www.blogger.com/profile/03638306588402195779noreply@blogger.comtag:blogger.com,1999:blog-4491378721746054498.post-14185723135186657262015-03-08T11:30:00.000-07:002015-03-08T11:30:00.618-07:00Cross Platform Game Programming with Cocos2d-JS<span style="font-family: Verdana, sans-serif;">In case you missed my talk at SoCal Code Camp on March 8th, on Cross Platform Game Programming with Cocos2d-JS here are the slides.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">
<iframe frameborder="0" height="400" marginheight="0" marginwidth="0" scrolling="no" src="//www.slideshare.net/slideshow/embed_code/45573801" width="476"></iframe></span>rockncoderhttp://www.blogger.com/profile/03638306588402195779noreply@blogger.comtag:blogger.com,1999:blog-4491378721746054498.post-68394658055136226312015-03-07T10:40:00.000-08:002015-04-07T12:26:29.670-07:00Upcoming Workshops<div style="text-align: justify;">
<span style="font-family: Verdana, sans-serif;">For the next few months I will be busy presenting at quite a few workshops. The one thing they all have in common is that they are JavaScript-based. I will teach using JavaScript in the browser, on mobile devices, and deep dive into JavaScript especially directed at those who wish to master the language.</span></div>
<div style="text-align: justify;">
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhProl3VnvxnF5SwryTQfpK5kQOoNbUzn6t8LANccVg1m_0P89Qtu49zKqthJ8pEyh9QQ7UiBcButTRs8VPl6AWuwbWCu6l7Ch1EHPKzEXbIFT2-zEx0niEJMK2wl0XkRJuhl7kz4yi-F5Z/s1600/ionic+square.png" imageanchor="1" style="clear: left; float: left; font-family: Verdana, sans-serif; margin-bottom: 1em; margin-right: 1em; text-align: justify;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhProl3VnvxnF5SwryTQfpK5kQOoNbUzn6t8LANccVg1m_0P89Qtu49zKqthJ8pEyh9QQ7UiBcButTRs8VPl6AWuwbWCu6l7Ch1EHPKzEXbIFT2-zEx0niEJMK2wl0XkRJuhl7kz4yi-F5Z/s1600/ionic+square.png" height="165" width="200" /></a><span style="font-family: Verdana, sans-serif;"></span><br />
<div style="text-align: justify;">
<span style="font-family: Verdana, sans-serif;"><a href="http://mobiledevtest.techwell.com/sme-profiles/troy-miles">The Ionic Framework: Build Apps with AngularJS and PhoneGap</a></span></div>
<br />
<div style="text-align: justify;">
<span style="font-family: Verdana, sans-serif;">April 14th, 8:30AM - 12:00 PM</span></div>
<div style="text-align: justify;">
<span style="font-family: Verdana, sans-serif;">Mobile Dev + Test</span></div>
<div style="text-align: justify;">
<span style="font-family: Verdana, sans-serif;">Manchester Grand Hyatt</span></div>
<div style="text-align: justify;">
<span style="font-family: Verdana, sans-serif;">1 Market Place</span></div>
<div style="text-align: justify;">
<span style="font-family: Verdana, sans-serif;">San Diego, CA 92101</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-family: Verdana, sans-serif;">Ionic is an open source, front-end framework for building hybrid mobile apps with HTML5. Using the Ionic framework, you can combine PhoneGap and AngularJS—the hottest web MVC framework around for building fast, testable web applications—to create cross-platform apps using standard web development tools like HTML, CSS, and JavaScript. Troy Miles introduces you to the Ionic framework and discusses how to use it with AngularJS. Participants will build a simple, full-featured application that offers a great overview of Ionic</span><span style="font-family: Verdana, sans-serif;">'s key features. You will run the app on the Genymotion Android emulator, so you won't need a smartphone for testing. Learn how to debug the app in two different ways. The first: Run it as a web app and use the tools of the Chrome browser. The second: Run the app on the emulated device and use Chrome's remote debugging capabilities. Leave with the knowledge and tools you need to develop enterprise-ready cross-platform mobile apps with Ionic.</span></div>
<br />
<span style="font-family: Verdana, sans-serif;"></span>
<span style="font-family: Verdana, sans-serif;"></span>
<br />
<div style="text-align: justify;">
<br /></div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH7UsWkU3hvcBu4SffcGfxDi8k3REomyrEDEqNz-YoLZ1OHHrg9m7ujIm2fI39_ko-R8gkrn814demRmZlJtib7TeU4hVqlwcoxuOS6IIQf9MEY70kRqbzVkf79HLWZ0jDr1XxszjqbK86/s1600/Package-Open.png" imageanchor="1" style="clear: left; float: left; font-family: Verdana, sans-serif; margin-bottom: 1em; margin-right: 1em; text-align: justify;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH7UsWkU3hvcBu4SffcGfxDi8k3REomyrEDEqNz-YoLZ1OHHrg9m7ujIm2fI39_ko-R8gkrn814demRmZlJtib7TeU4hVqlwcoxuOS6IIQf9MEY70kRqbzVkf79HLWZ0jDr1XxszjqbK86/s1600/Package-Open.png" height="200" width="200" /></a><span style="font-family: Verdana, sans-serif;"></span><br />
<div style="text-align: justify;">
<span style="font-family: Verdana, sans-serif;"><a href="http://mobiledevtest.techwell.com/sme-profiles/troy-miles">Building Cross-Platform Mobile Apps</a></span></div>
<br />
<div style="text-align: justify;">
<span style="font-family: Verdana, sans-serif;">April 14th, 1:00PM - 4:30 PM</span></div>
<div style="text-align: justify;">
<span style="font-family: Verdana, sans-serif;">Mobile Dev + Test</span></div>
<div style="text-align: justify;">
<span style="font-family: Verdana, sans-serif;">Manchester Grand Hyatt</span></div>
<div style="text-align: justify;">
<span style="font-family: Verdana, sans-serif;">1 Market Place</span></div>
<div style="text-align: justify;">
<span style="font-family: Verdana, sans-serif;">San Diego, CA 92101</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-family: Verdana, sans-serif;">PhoneGap (aka Cordova) is a cross-platform framework for developing mobile apps using standard web development tools like HTML, CSS, and JavaScript. Join Troy Miles to learn how to create mobile apps with PhoneGap by building a simple but full-featured app during this hands-on class. Troy explores PhoneGap’s important capabilities, including GPS, camera, and audio recordings. Because JavaScript has a reputation as a somewhat difficult language, Troy teaches techniques for keeping your code robust and clean. To give your app the appropriate look and feel for the device on which it is running, the class will use the open source Chocolate Chip UI framework for testing. Troy shares ways to debug the code by running it as a web app, using browser development tools, or as a phone app, using the Chrome browser’s remote debugging features. Leave with the basics you need to start building your own cross-platform mobile apps.</span></div>
<span style="font-family: Verdana, sans-serif;"></span><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhProl3VnvxnF5SwryTQfpK5kQOoNbUzn6t8LANccVg1m_0P89Qtu49zKqthJ8pEyh9QQ7UiBcButTRs8VPl6AWuwbWCu6l7Ch1EHPKzEXbIFT2-zEx0niEJMK2wl0XkRJuhl7kz4yi-F5Z/s1600/ionic+square.png" imageanchor="1" style="clear: left; float: left; font-family: Verdana, sans-serif; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhProl3VnvxnF5SwryTQfpK5kQOoNbUzn6t8LANccVg1m_0P89Qtu49zKqthJ8pEyh9QQ7UiBcButTRs8VPl6AWuwbWCu6l7Ch1EHPKzEXbIFT2-zEx0niEJMK2wl0XkRJuhl7kz4yi-F5Z/s1600/ionic+square.png" height="165" width="200" /></a><span style="font-family: Verdana, sans-serif;"></span><br />
<div style="text-align: justify;">
<span style="font-family: Verdana, sans-serif;"><a href="http://www.ng-vegas.org/">Mobile with the Ionic Framework</a></span></div>
<br />
<div style="text-align: justify;">
<span style="font-family: Verdana, sans-serif;">May 7th or 8th, (not know yet)</span></div>
<div style="text-align: justify;">
<span style="font-family: Verdana, sans-serif;">ng-vegas<br />The Westin Lake Las Vegas Resort & Spa</span><br />
<span style="font-family: Verdana, sans-serif;">101 Montelago Boulevard, </span><br />
<span style="font-family: Verdana, sans-serif;">Henderson, NV 89011</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-family: Verdana, sans-serif;">What is the Ionic Framework? The Ionic Framework combines Google's AngularJS with Apache's Cordova to create fast and beautiful cross-platform mobile apps for iOS and Android. In this talk we will explore Ionic, show how to install it, and finally build a quick and dirty app and deploy it to both iOS and Android. </span><br />
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
</div>
<div style="text-align: justify;">
<br /></div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-oNTNX4VgkzuHb1pxTs1GxwA-vCjgh0ajrcE-x_lZijBr33aFpVlSM_C7uk6SyURgtcOwma45RRO47lKsRcmGuGtZsW5AQETggc-rk0RFn6p_L5UhOf_AQl1FC0v_0wQ7VEppypsWw7zq/s1600/js.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: justify;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-oNTNX4VgkzuHb1pxTs1GxwA-vCjgh0ajrcE-x_lZijBr33aFpVlSM_C7uk6SyURgtcOwma45RRO47lKsRcmGuGtZsW5AQETggc-rk0RFn6p_L5UhOf_AQl1FC0v_0wQ7VEppypsWw7zq/s1600/js.png" height="200" width="200" /></a><span style="font-family: Verdana, sans-serif;"></span><br />
<div style="text-align: justify;">
<span style="font-family: Verdana, sans-serif;"><a href="http://www.meetup.com/South-Bay-Mobile-User-Group/events/220517729/">JavaScript for Modern Web Development</a></span></div>
<br />
<div style="text-align: justify;">
<span style="font-family: Verdana, sans-serif;">May 11th - 14th, 8:30 AM - 5:00 PM</span></div>
<div style="text-align: justify;">
<span style="font-family: Verdana, sans-serif;">Peoplespace</span></div>
<div style="text-align: justify;">
<span style="font-family: Verdana, sans-serif;">1691 Kettering , Irvine, CA</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-family: Verdana, sans-serif;">You will learn in-depth fundamentals of the JavaScript language, going far beyond knowing how to use JavaScript to build web pages. You will master the core concepts in programming with JavaScript including; types, objects and object-oriented programming, patterns for how to design and construct your JavaScript programs, and newer features in the language from the ECMAScript 5.1 and 6 specification. Throughout the course you will learn the nuts and bolts of the JavaScript language that you can use to grow as a professional.</span></div>
<span style="font-family: Verdana, sans-serif;"></span><br />
<div style="text-align: justify;">
<br /></div>
rockncoderhttp://www.blogger.com/profile/03638306588402195779noreply@blogger.comtag:blogger.com,1999:blog-4491378721746054498.post-36375595810508108352015-03-03T08:05:00.000-08:002015-03-03T08:07:14.722-08:00ES6 - Harmony Draft Specification<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-oNTNX4VgkzuHb1pxTs1GxwA-vCjgh0ajrcE-x_lZijBr33aFpVlSM_C7uk6SyURgtcOwma45RRO47lKsRcmGuGtZsW5AQETggc-rk0RFn6p_L5UhOf_AQl1FC0v_0wQ7VEppypsWw7zq/s1600/js.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-oNTNX4VgkzuHb1pxTs1GxwA-vCjgh0ajrcE-x_lZijBr33aFpVlSM_C7uk6SyURgtcOwma45RRO47lKsRcmGuGtZsW5AQETggc-rk0RFn6p_L5UhOf_AQl1FC0v_0wQ7VEppypsWw7zq/s1600/js.png" height="320" width="320" /></a></div>
<span style="font-family: Verdana, sans-serif;">Ok, I will be honest and admit that the actual JavaScript/ECMAScript ES6 draft specification is not the most interesting thing to read, but if you really want to know JavaScript you have to have it. And it is free, so why not? Download a PDF version from: <a href="http://wiki.ecmascript.org/lib/exe/fetch.php?id=harmony%3Aspecification_drafts&cache=cache&media=harmony:ecma-262_edition_6_02-20-15-releasecandidate1.pdf">ES6 Draft Specification PDF</a>. Read it online at: <a href="http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts#draft_specification_for_es.next_ecma-262_edition_6">ES6 Online Draft Specification</a>. Keep in mind that while the specification is expected to be ratified this year, there is no guarantee that there won't be changes between now and then. </span>rockncoderhttp://www.blogger.com/profile/03638306588402195779noreply@blogger.comtag:blogger.com,1999:blog-4491378721746054498.post-27028434930649234512015-03-03T07:05:00.001-08:002015-03-03T07:07:12.035-08:00Free Online ES6 Harmony Book<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-oNTNX4VgkzuHb1pxTs1GxwA-vCjgh0ajrcE-x_lZijBr33aFpVlSM_C7uk6SyURgtcOwma45RRO47lKsRcmGuGtZsW5AQETggc-rk0RFn6p_L5UhOf_AQl1FC0v_0wQ7VEppypsWw7zq/s1600/js.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-oNTNX4VgkzuHb1pxTs1GxwA-vCjgh0ajrcE-x_lZijBr33aFpVlSM_C7uk6SyURgtcOwma45RRO47lKsRcmGuGtZsW5AQETggc-rk0RFn6p_L5UhOf_AQl1FC0v_0wQ7VEppypsWw7zq/s1600/js.png" height="320" width="320" /></a></div>
Well known JavaScript guru, Nicholas C. Zakas, has made his upcoming ES6 book free to read online. If you like it, why not buy it, it is less than $20. <a href="https://leanpub.com/understandinges6/read">https://leanpub.com/understandinges6/read</a>rockncoderhttp://www.blogger.com/profile/03638306588402195779noreply@blogger.comtag:blogger.com,1999:blog-4491378721746054498.post-84066563642545259772015-03-03T06:42:00.000-08:002015-03-03T06:42:03.035-08:00Mastering AngularJS Directives Pre-Workshop Notes<div dir="ltr" style="margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Arial;"><span style="font-size: 15px; line-height: 17.25px; white-space: pre-wrap;">Getting ready for this workshop is pretty easy. In order to make the most of our short time together it is best to install everything before the class. Luckily we don't need too much to develop Angular apps. </span></span><br />
<span style="font-family: Arial;"><span style="font-size: 15px; line-height: 17.25px; white-space: pre-wrap;"><br /></span></span>
<span style="font-family: Arial;"><span style="font-size: 15px; line-height: 17.25px; white-space: pre-wrap;">First we will need a browser. I highly recommend using Google's Chrome since that is what I will be using and it comes complete with a rich set of developer features. </span></span><br />
<span style="font-family: Arial;"><span style="font-size: 15px; line-height: 17.25px; white-space: pre-wrap;"><br /></span></span>
<span style="font-family: Arial;"><span style="font-size: 15px; line-height: 17.25px; white-space: pre-wrap;">Next we will need an editor. My personal choice is JetBrains WebStorm it isn't free but it does come with a free 30 day trial. <a href="https://www.jetbrains.com/webstorm/">https://www.jetbrains.com/webstorm/</a>. If you would like a free editor there is Adobe's community editor, Brackets. I won't be using it in the workshop but it is an excellent editor for the price: <a href="http://brackets.io/">http://brackets.io/</a>. If you have another editor which you prefer and know how to use, please feel free to use it, just make sure it has the ability to function as a web server which is something both Brackets and WebStorm know how to do.</span></span><br />
<div style="line-height: 1.15;">
<span style="color: black; font-family: Arial; font-size: 15px; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<span style="font-family: Arial;"><span style="font-size: 15px; line-height: 17.25px; white-space: pre-wrap;">The final thing we need is Git. </span></span><span style="font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;">Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.</span><span style="color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"> It is available at: </span><span style="color: #1155cc; font-family: Arial; font-size: 15px; line-height: 1.15; vertical-align: baseline; white-space: pre-wrap;"><a href="http://git-scm.com/">http://git-scm.com/</a>. </span><span style="font-family: Arial; font-size: 15px; line-height: 17.25px; white-space: pre-wrap;">Below are the steps to install it on a Windows machine, the steps on Mac OS X are pretty easy as well.</span><br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
</div>
</div>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Install Git</span></div>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="font-family: Arial; font-size: 15px; list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;">Download the installation package</span></div>
</li>
<li dir="ltr" style="font-family: Arial; font-size: 15px; list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;">Launch it</span></div>
</li>
<li dir="ltr" style="font-family: Arial; font-size: 15px; list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;">Accept the User Account Control request</span></div>
</li>
<li dir="ltr" style="font-family: Arial; font-size: 15px; list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;">Follow on screen instructions</span></div>
</li>
<li dir="ltr" style="font-family: Arial; font-size: 15px; list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;">(You can allow Git to install to the Program Files directory)</span></div>
</li>
<li dir="ltr" style="font-family: Arial; font-size: 15px; list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;">Click </span><span style="color: black; font-family: Arial; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">Use Git from the Windows Command Prompt</span></div>
</li>
<li dir="ltr" style="font-family: Arial; font-size: 15px; list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;">Click </span><span style="color: black; font-family: Arial; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">Checkout Windows-style, commit Unix-style line endings</span></div>
</li>
<li dir="ltr" style="font-family: Arial; font-size: 15px; list-style-type: decimal; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;">Complete the installation</span></div>
</li>
</ol>
<div>
<span style="font-family: Arial;"><span style="font-size: 15px; white-space: pre-wrap;"><br /></span></span></div>
<div>
<span style="font-family: Arial;"><span style="font-size: 15px; white-space: pre-wrap;">This is pretty much all you need for the workshop. In case you are wondering about AngularJS itself or code samples, these will be in a Git bundle which I will make available a few days before the class. A Git bundle allows me to put all of the steps of the examples we will work through into a single neat package. You will be able to take this bundle home with you for later reference.</span></span></div>
rockncoderhttp://www.blogger.com/profile/03638306588402195779noreply@blogger.comtag:blogger.com,1999:blog-4491378721746054498.post-73614262414239769912015-01-19T11:10:00.000-08:002015-01-19T12:00:03.603-08:00Ionic Framework One Day Training Slides and Code<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9vn-GFy0k4YAPtqdLA5DhtQbRCpD35oC3ah_ecg-_BEJybdjo8-viXg-XtsBjcjA_Hp7z06jY96sx9_TXM96cXFnlnwuP6WPom3RhMupLNPr9kr2zzkmzLKo0fqDv5GokiqU_Mr5qkkHh/s1600/iOS+Simulator+Screen+Shot+Jan+19,+2015,+10.53.25+AM.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><span style="font-family: Verdana, sans-serif;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9vn-GFy0k4YAPtqdLA5DhtQbRCpD35oC3ah_ecg-_BEJybdjo8-viXg-XtsBjcjA_Hp7z06jY96sx9_TXM96cXFnlnwuP6WPom3RhMupLNPr9kr2zzkmzLKo0fqDv5GokiqU_Mr5qkkHh/s1600/iOS+Simulator+Screen+Shot+Jan+19,+2015,+10.53.25+AM.png" height="320" width="179" /></span></a></div>
<span style="font-family: Verdana, sans-serif;">We had an awesome time at the Ionic Framework One Day Training workshop on the 17th. If you couldn't make it, you missed out. Here are the slides for the class. </span><br />
<span style="font-family: Verdana, sans-serif;"><br />
Of course we only went through the slides for about an hour and a half, the rest of the day we built an Ionic app together. The app uses geolocation, ajax, Google Maps, data from YP.com, side menu, routing, continuous scrolling, and local storage for persisting settings. In other words it is a pretty good example of a lot of the things you will want to do with Angular/Ionic.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
What is really cool is it does all this, works fast and is cross platform, running on both iOS and Android. The source code for the app is on my GitHub repo at: <a href="https://github.com/Rockncoder/ionic-coffee">https://github.com/Rockncoder/ionic-coffee</a></span><br />
<span style="font-family: Verdana, sans-serif;"><br />
My next workshop will be on January 31st. This one is FREE. It is a three hour tour of a lot of the command line tools we use in developing apps. The class will be held at ITT Technical Institute in Torrance, California, a suburb of Los Angeles. If you haven't signed up do so quickly. I will post some preparation information later this week. Here is the sign up link: <a href="http://www.meetup.com/South-Bay-Mobile-User-Group/events/219331949/">AngularJS Workout #1</a></span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Next week I will a new tutorial series which will break the ionic coffee app into 6 bite size chunks explaining how it all works in detail. So be sure to check out the rockncoder blog every week.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span><br />
<div style="text-align: center;">
<iframe allowfullscreen="" frameborder="0" height="355" marginheight="0" marginwidth="0" scrolling="no" src="//www.slideshare.net/slideshow/embed_code/43614383" style="border-width: 1px; border: 1px solid #CCC; margin-bottom: 5px; max-width: 100%;" width="425"> </iframe><span style="font-family: Verdana, sans-serif;"> </span></div>
<div style="margin-bottom: 5px;">
<div style="text-align: center;">
<span style="font-family: Verdana, sans-serif;"><strong> <a href="https://www.slideshare.net/rockncoder/ionic-framework-one-day-training" target="_blank" title="Ionic framework one day training">Ionic framework one day training</a> </strong> from <strong><a href="https://www.slideshare.net/rockncoder" target="_blank">Troy Miles</a></strong></span> </div>
</div>
rockncoderhttp://www.blogger.com/profile/03638306588402195779noreply@blogger.comtag:blogger.com,1999:blog-4491378721746054498.post-85875915481897684642014-12-12T07:25:00.000-08:002015-04-08T17:36:50.973-07:00Installing the Ionic Framework from Scratch<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">What is the Ionic Framework?</span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Ionic is an open source project which combines Cordova, AngularJS, and their own CSS3 enhanced UI to build cross platform mobile apps. It currently supports iOS and Android device.</span></div>
<b id="docs-internal-guid-92105dd9-3f15-63e9-b0c8-581060ff5af1" style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Ionic is built on top of Cordova which is Apache's open source version of Adobe's PhoneGap. Most developers know that Cordova lacks two things which are important in modern application development. First there is no user interface. You have only standard web development UI, which doesn't cut it on the web today, let alone on a smartphone. Second, there is no application framework. Frameworks assist the developer by doing a lot of the plumbing code necessary for building professional applications. Ionic uses AngularJS, which is a JavaScript MVC framework from Google. They also add their own JavaScript based components which are written specifically for running on mobile devices.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">In order to build Ionic apps you will need to install a series of free tools. Failure to install any tool correctly will cause the entire installation to fail. And since many of the tools require other tools to install, not installing them in the correct order can also result in a failed installation. So please take your time with the installation. It will take two to five hours to complete, depending on your Internet & computer speed.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">These instructions are specifically written for the Window operating system, however the order of tool installation and basic steps are the same for Mac OS X and Linux systems.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">It is highly recommended that you backup your system before beginning this installation. </span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt; text-align: center;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Prerequisites</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">You should have around 10 GB of hard disk free. Quite a bit of space will be eaten up by the Android SDK components. You should also have Google Chrome installed. Chrome is by far the best browser for mobile development. It supports remote debugging which is essential when debugging Cordova apps.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt; text-align: center;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Installation Instructions</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">General Warnings</span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Most of the tools come from operating systems other than Windows. As such they don't like spaces in the names of files or directories. This can be a big headache since Windows allows for the creation of files and directories with spaces in the name. And worse yet, the normal directories for installing applications on Windows are "Program Files" and "Program Files (x86)", both of which have spaces in the names. Avoid headaches and don't install any tool to a directory with a space in the name.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">If you are running Windows on Parallels or any other virtual machine, you may get prompted to install a tool on to a network drive, don't do it. While many of the tools run just fine from network drives others don't. Keep things simple and install to a directory on your 'C' drive or other normal drive.</span></div>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">You will need to add environment variables for ANDROID_HOME, ANT_HOME, and JAVA_HOME during the installation process. These instruction explain how to do that when the time arises. </span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">The ANDROID_HOME variable points to the Android SDK directory. The ANT_HOME directory points to your Apache Ant directory. And finally, the JAVA_HOME variable points to the directory holding the JDK. You also need to add tools to Path environment variable which you won't have to create, since it should already exist. You will only need to edit the path. </span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Environment Variables</span></div>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">From Windows 8 </span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Hover the mouse over the lower left hand corner until the Windows logo appears</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Right click to bring up the option menu</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Click </span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">System</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Click </span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Advanced system settings</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Click </span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Environment Variables…</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">On the System variables module, Click </span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">New…</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Enter the name of the variable in the </span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Variable name</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> text box</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Enter the value of the variable in the </span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Variable value</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> text box</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Click </span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">OK</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Click </span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">OK</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> again</span></div>
</li>
</ol>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Git</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> - </span><a href="http://git-scm.com/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">http://git-scm.com/</span></a></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. The Cordova CLI uses git internally to download assets.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Install Git</span></div>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Download the installation package</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Launch it</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Accept the User Account Control request</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Follow on screen instructions</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">(You can allow Git to install to the Program Files directory)</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Click </span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Use Git from the Windows Command Prompt</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Click </span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Checkout Windows-style, commit Unix-style line endings</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Complete the installation</span></div>
</li>
</ol>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Apache Ant</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> - </span><a href="http://ant.apache.org/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">http://ant.apache.org/</span></a></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Apache Ant is a Java library and command-line tool whose mission is to drive processes described in build files as targets and extension points dependent upon each other. Cordova uses it to build Android project.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Install Ant</span></div>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Download the zip file</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Extract it </span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Move the file to some where accessible, I put mine in my C:\tools directory</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Set the 'ANT_HOME' using the system tools</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Add Ant to the path</span></div>
</li>
</ol>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Oracle JDK 7</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> - </span><a href="http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html</span></a></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Android uses Oracle's Java as its programming language and to run many of its tools. As of Android 5.0, the official version of Java used is Java 7. Be careful, lots of installation instructions will mention to only use Java 6, this is no longer true. And even though Java 8 is the current version, don't use it either. Also be careful not to download the Java Runtime Environment or JRE. We need the JDK, which includes the JRE. Don't bother to download the sample apps or demos, they aren't necessary. If your machine is 64 bit, get the 64 bit package.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Install JDK 7</span></div>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Download the installation package</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Launch it</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Follow on screen instructions</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Add JAVA_HOME</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Add Java to path</span></div>
</li>
</ol>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Android Studio </span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">- </span><a href="http://developer.android.com/sdk/index.html" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">http://developer.android.com/sdk/index.html</span></a></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Android Studio is the official IDE for Android application development, based on IntelliJ IDEA. It has been in beta release since 2013's Google I/O. The 1.0 version was released early December 2014 and with that Google is no longer supporting the former IDE, Eclipse. </span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Install Android Studio</span></div>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Download the installation package</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Launch it</span></div>
</li>
</ol>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">In addition to an IDE, Android development requires a set of tools, known as the Android Developer Tools or ADT and a software development kit or SDK. A new SDK comes out every few months. As of December 2014, the current SDK is Android 21, which supports Android devices up to version 5.0, aka Lollipop. Android 21 is installed automatically by the installation program. Currently Cordova requires Android 19 so it must be install in addition to Android 21. If you are prompted, be sure to check the box to install it. Otherwise install Android 19 after Android Studio completes its installation. Don't skip this step, once </span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Install Android 19</span></div>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Launch Android Studio</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Click </span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Configure</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Click </span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">SDK Manager</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Once the Android SDK Manager installs, scroll down until you see the "Android 4.4.2 (API 19)"</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Check the following:</span></div>
</li>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: lower-alpha; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">SDK Platform</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: lower-alpha; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">ARM EABI v7a System Image</span></div>
</li>
</ol>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Scroll down a bit further until you see Extras, open it and check, "Google USB Driver"</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Click the install packages button</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Accept the license agreement</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Click </span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Install</span></div>
</li>
</ol>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Be patient, it will take an hour or so to install the SDKs</span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Add the android tools to the path</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">NodeJS</span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<a href="http://nodejs.org/download/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">http://nodejs.org/download/</span></a></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Install NodeJS</span></div>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Download the installation program</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Launch the installation program</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Follow on screen instructions</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Restart machine so changes will be activated</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Verify that Node JS is installed: </span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">node -v</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">(should respond with the version number, current is 10.33)</span></div>
</li>
</ol>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Cordova</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> - </span><a href="http://cordova.apache.org/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">http://cordova.apache.org/</span></a></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Install Cordova </span></div>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Instal Cordova globally with the following command: </span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">npm install -g cordova</span><span style="background-color: #f0f3f8; color: #333333; font-family: Consolas; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br class="kix-line-break" /></span><span style="background-color: #f0f3f8; color: #333333; font-family: Consolas; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br class="kix-line-break" /></span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Mac OS X and Linux user may need to give their root password at this point. This is expected since you are need to permit an application to be installed globally.</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br class="kix-line-break" /></span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Verify installation of Cordova from the command line: </span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">cordova -v</span></div>
</li>
</ol>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Ionic</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> - </span><a href="http://ionicframework.com/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">http://ionicframework.com/</span></a></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Install Ionic</span></div>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Install ionic globally with the following command: </span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">npm install -g ionic</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br class="kix-line-break" /></span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br class="kix-line-break" /></span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Mac OS X and Linux user may need to give their root password at this point. This is expected since you are need to permit an application to be installed globally.</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br class="kix-line-break" /></span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Verify installation of Ionic from the command line: </span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">ionic -v</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">It should respond with the current version number</span></div>
</li>
</ol>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt; text-align: center;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Optional Stuff</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Genymotion Emulator - </span><a href="https://www.genymotion.com/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">https://www.genymotion.com</span></a></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Genymotion is an Android emulator which comprises a complete set of sensors and features in order to interact with a virtual Android environment. It is significantly faster than the included Android emulators. It is built on top of Oracle's Virtual Box, so you can't run it from an virtual PC. </span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">VirtualBox</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> - </span><a href="https://www.virtualbox.org/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">https://www.virtualbox.org/</span></a></div>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">VirtualBox is a powerful x86 and AMD64/Intel64 </span><a href="https://www.virtualbox.org/wiki/Virtualization" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">virtualization</span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> product for enterprise as well as home use. Genymotion is built on top of VirtualBox and its devices are emulated x86 Android machines.</span></div>
<div>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
rockncoderhttp://www.blogger.com/profile/03638306588402195779noreply@blogger.comtag:blogger.com,1999:blog-4491378721746054498.post-519356837142512012014-10-21T06:05:00.001-07:002014-10-21T06:09:53.006-07:00CodePen + AngularJS + Firebase = A Complete Demo App in the Cloud<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiVMxY4wH41ErwoLtPmV8RqjnTBG_0Q1aYTnL7fUtCh35khlnDXQ9MST3YlO-L0WT7UuV1j4x2y5bLUvS28hXEeKxr3W3l3vlLLAwdhS4FVh3-mPoVdwwVQ6xuKwTqaiulyAjDCBrBrF2v/s1600/angularjs.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiVMxY4wH41ErwoLtPmV8RqjnTBG_0Q1aYTnL7fUtCh35khlnDXQ9MST3YlO-L0WT7UuV1j4x2y5bLUvS28hXEeKxr3W3l3vlLLAwdhS4FVh3-mPoVdwwVQ6xuKwTqaiulyAjDCBrBrF2v/s1600/angularjs.png" height="200" width="200" /></a><span style="font-family: Verdana, sans-serif;">Can you build a complete web app in CodePen? You can with AngularJS + Firebase/AngularFire. I will leave this contacts app up and public for a few weeks so you can check it out.
</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">This was a demo for my AngularJS weekend class. It is amazing how much you can build in so few lines of code. </span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Rule the clouds!</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div class="codepen" data-default-tab="result" data-height="268" data-slug-hash="rDaHq" data-theme-id="0" data-user="Rockncoder">
<span style="font-family: Verdana, sans-serif;">See the Pen <a href="http://codepen.io/Rockncoder/pen/rDaHq/">finished-firebase-contacts</a> by Troy Miles (<a href="http://codepen.io/Rockncoder">@Rockncoder</a>) on <a href="http://codepen.io/">CodePen</a>.</span></div>
<script async="" src="//codepen.io/assets/embed/ei.js"></script>rockncoderhttp://www.blogger.com/profile/03638306588402195779noreply@blogger.com