Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 100 additions & 0 deletions tools.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
Overview
================

We use the following tools to build our mobile-first app and get it running on the iPad.

* Dart
* AngularDart
* Cordova
* XCode

Dart is an open source programming language from Google. It is, among other
things, intended as a javascript replacement. It can be compiled to javascript,

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

...intended as an ECMAScript replacement. It has influenced the ECMA-6, which is in draft at this point, whereas dart is available today. It is compiled to javascript (ECMA-5*), which is how we will initially use it for portability - while watching compatibility with Cordova.

which is how we intend to use it.

AngularDart is a Dart port of the AngularJS web framework. You can find some of

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Starting sometime summer of 2013, the main development of Angular moved to Dart. AngularDart is then ported to AngularJS web framework.

the philosophy behind the AngularJS framework
[here](https://docs.angularjs.org/guide/introduction).

"[Apache Cordova](http://cordova.apache.org) is a platform for building native
mobile applications using HTML, CSS, and Javascript." This is what lets deploy

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

...what lets us deploy...

our web application, developed in Dart/AngularDart and compiled to javascript,
as a native app on iOS (and, in the future, Android).

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

as a native app on iOS and Android.


XCode is Apple's IDE for building Mac and iOS apps.

Installation
=================

Dart
----------

The IDE (a modified version of Eclipse) and command line tools can be found
[here](https://www.dartlang.org/tools/editor/). To "install", just unzip the
archive and move the `dart` directory to `/Applications/dart/`. To launch the

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We'll want to change this, perhaps do this from the Makefile - since the dev version of dart often fixes things, we'll want both installed - the workflow will be: if something doesn't work with this version of dart tools, try the dart-dev tools next.

I have installed dart and dart-dev into /usr/local, and linked to /Applications.
I also have linked the appropriate sdk/bin command line tools back to /usr/local/bin, so that we don't have problems with PATH. dart2js is from dart, and dart2js-dev is from dart-dev, and so forth.

DartEditor, just open `/Applications/dart/DartEditor` like any other
application. The command line tools are located in
`/Applications/dart/dart-sdk/bin/`.

AngularDart
-------------

I don't believe that AngularDart needs to be installed -- we should just need
to include it as a dependency in the Dart project that we're working on. But to
make sure that things are working properly, you can download the
[tutorials](https://github.com/angular/angular.dart.tutorial) and open the

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is already part of the repository: mobile-first/examples contains the latest angular.dart.tutorial, angular.dart.ui, and todomvc. so instead, this should say:

...working properly, you can open examples/angular.dart.tutorial in DartEditor.

directory in DartEditor. Make sure the files browser is showing (click the
Tools->Files menu item if necessary). Select
`angular.dart.tutorial-master/Chapter_03/web/main.dart` and click the Run->Run
menu item. This should launch the chapter 3 tutorial app (a simple 5 star
rating example) in Chromium.

Cordova
--------------

Follow the "Installing the Cordova CLI" located
[here](https://cordova.apache.org/docs/en/3.0.0/guide_cli_index.md.html). Note
that you'll first need to install node.js in order to use the `npm` package
manner.. I installed it using homebrew and that worked fine.

$ brew install node
$ sudo npm install -g cordova
$ sudo npm install -g ios-sim

Xcode
---------------

Install XCode via the Mac App store.

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

...will want to add "install android SDK here...

Build Process
=====================================================

In this section, we'll demonstrate how to build a Dart app and run it in the
iOS Simulator (which is included as part of XCode). We will use chapter 3 of
the Dart tutorials as our example. These tutorials are included as a submodule
of our mobile-first repository.

For the moment, you will need to have your github account configured to use
public key authentication in order to checkout the repository with all of its
submodules.

Assuming that is the case, use the following commands to clone the mobile-first
repository and all of its submodules.

$ git clone --recursive git@github.com:yarko/mobile-first.git

And now build the dart app (chapter 3 tutorial in this case):

$ cd mobile-first/examples/angular.dart.tutorial/Chapter_03/
$ /Applications/dart/dart-sdk/bin/pub build

The "pub" tool is a command line package manager included with the Dart SDK.
The "pub build" sub-command packages a Dart app for deployment. Currently, that
means compiling the dart app down to html and javascript. If you look under
`Chapter_03`, there should now be a `web/build` subdirectory. This directory
contains the html and javascript necessary to run the Chapter 3 dart tutorial
app. You can see this by opening `web/build/index.html` in a web browser.

Next, we will create a new Cordova app, move the html and javascript generated
by `pub build` into this app, and finally