The Android, Cordova, Ionic primer
Do you want to develop Android apps?
Don't do it under Microsoft Windows: Android Studio is difficult-to-impossible to use on Windows, mostly because of debugging drivers. A Mac or Linux machine is your best option.
Do you want to also develop Apple iOS apps?
You'll need a Mac. No choice there. Apple insists.
Do you want to use Unix tools?
A Mac or Linux machine is your best option.
So, to shorten a long story:
You'll need an Android device, and a Mac. I'll assume you know how to use the terminal app on a Mac.
If you keep to the following lesson order, you shouldn't run into trouble, since cordova and ionic development depend on the presence of Android Studio. We will:
1. deploy a little native Android Studio app to your Android device
2. deploy a little cordova Android app to your Android device
3. deploy a little ionic Android app to your Android device
------
You can skip this blue text, which is an aside, on the subject of explanatory software:
Instead of this sequence/lesson-order, which meets many technological dependencies silently, we could employ a set of productions. Each production could be thought of as either [target: ordered list of dependencies] or [non-terminal: ordered list of terminals and non-terminals]. Using this, you could build your own sequence/lesson-order, by starting with any target:
... but the possible paths haven't been converted into clearly written sequence/lesson-orders, so it's easiest to follow my given (1,2,3) sequence.
------
In general, my little lessons are like this:
a) do the minimum necessary to install and configure
b) create the smallest prepackaged app
c) make a change to it
d) build, emulate, serve
e) put it on your device
... planned with the idea that iterating (c,d) and (c,d,e) will let you get started on developing the app you want. A fuller lesson plan would include debugging, finding the appropriate framework or functionality at the appropriate time, etc.
------
1) deploy a little native Android Studio app
to your Android device
-> Install the Oracle Java JDK
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
Download the most recent JDK for your machine.
Install.
-> Install Android Studio
https://developer.android.com/sdk/index.html
Download.
Install standard.
-> Use Android Studio
Launch Android Studio.
Start a new project.
Click the blank app.
Let it build.
Edit the value of the Hello World string's resource.
Build and run the blank app on the emulator.
-> Deploy to your Android device
Under Settings, at the bottom, find the Build Version.
Tap it seven times. After a few taps, it will countdown your taps.
A Developer Settings section then appears in settings.
Open that section, and enable usb debugging.
Plug the device into your mac.
You may need to agree to pair the two at various stages in this process.
Go to Android Studio.
Click the 'Run' (the green right-arrow at the top).
Choose your device.
The little completely native app should now deploy on your phone.
Play with deleting it and deploying again etc.
2) deploy a little cordova Android app
to your Android device
-> Get some developer tools
Get an apple id.
Sign in to:
https://developer.apple.com/downloads/
Download Xcode and the command line tools.
Install.
(If you don't have a developer account, you can download Xcode for free from the App Store, install it, and run any of a number of commands in your terminal -- like 'gcc' -- and your Mac will then help you install the command line tools.)
Get the nodejs download from
https://nodejs.org
and install.
Make sure that node, npm and git are installed:
node -v
npm -v
git --version
[And for below, note that, if you find that the use of sudo is impossible for some reason, for example, running from inside of an IDE like WebStorm, you just need to claim ownership of all the permissions in your home directory's .npm directory: sudo chown -R $(whoami) ~/.npm ]
-> Install Cordova
sudo npm install -g cordova
sudo npm install -g ios-sim (useful later)
-> Use Cordova
make a directory for your cordova apps:
cd
mkdir cordova
cd cordova
create the sample cordova HelloWorld app:
cordova create myhello com.example.hello HelloWorld
cd myhello
cd www
edit index.html with your favorite editor.
emacs index.html
change the string ‘device is ready’ to something else.
Now add platforms to the project:
cordova platform add iOS
cordova platform android
Build your android app (note that run does this automatically):
cordova build android
Run it in the emulator:
cordova emulate android
Run it on your device:
cordova run android
3) deploy a little ionic Android app
to your Android device
-> Install Ionic
sudo npm install -g ionic
-> Use Ionic
make a directory for your ionic apps:
cd
mkdir ionic
cd ionic
create a sample ionic 'sidemenu' app (other options are 'tabs' and 'blank'):
ionic start myApp sidemenu
cd myApp
install the local builder.
sudo npm install -g gulp
ionic platform add android
ionic build android
Look at it in the browser:
ionic serve
or
ionic serve -f chrome
Select ‘2’.
Browse to the given localhost url to try the app in the browser.
Then go back to the terminal and:
q
You can also see it in the emulator.
Cd to the root directory of the project folder, then:
ionic emulate android
ionic run android
Now make a modification:
cd www
cd js
And edit app.js
Change some of the strings in the JSON object that populates the app.
Run on your device (it will build automatically).
Cd to the root of the project folder, and:
ionic run android
You should see the app on your device.
-------
Note:
Apparently Cordova by default blocks http requests. Just run this command:
Don't do it under Microsoft Windows: Android Studio is difficult-to-impossible to use on Windows, mostly because of debugging drivers. A Mac or Linux machine is your best option.
Do you want to also develop Apple iOS apps?
You'll need a Mac. No choice there. Apple insists.
Do you want to use Unix tools?
A Mac or Linux machine is your best option.
So, to shorten a long story:
Modern mobile development
is easiest on a Mac.
_____
_____
A Primer for Three kinds of
Android Development (on a Mac)
You'll need an Android device, and a Mac. I'll assume you know how to use the terminal app on a Mac.
If you keep to the following lesson order, you shouldn't run into trouble, since cordova and ionic development depend on the presence of Android Studio. We will:
1. deploy a little native Android Studio app to your Android device
2. deploy a little cordova Android app to your Android device
3. deploy a little ionic Android app to your Android device
------
You can skip this blue text, which is an aside, on the subject of explanatory software:
Instead of this sequence/lesson-order, which meets many technological dependencies silently, we could employ a set of productions. Each production could be thought of as either [target: ordered list of dependencies] or [non-terminal: ordered list of terminals and non-terminals]. Using this, you could build your own sequence/lesson-order, by starting with any target:
ionic-run: ionic-install ionic-start ionic-build
cordova-run: cordova-install cordova-start cordova-build
android-java-app-run: android-install android-java-app-start android-java-app-build
ionic-install: cordova-install
cordova-install: xcode-and-clt-install android-install
android-install: java-install android-studio-install
cordova-run: cordova-install cordova-start cordova-build
android-java-app-run: android-install android-java-app-start android-java-app-build
ionic-install: cordova-install
cordova-install: xcode-and-clt-install android-install
android-install: java-install android-studio-install
... but the possible paths haven't been converted into clearly written sequence/lesson-orders, so it's easiest to follow my given (1,2,3) sequence.
------
In general, my little lessons are like this:
a) do the minimum necessary to install and configure
c) make a change to it
d) build, emulate, serve
e) put it on your device
... planned with the idea that iterating (c,d) and (c,d,e) will let you get started on developing the app you want. A fuller lesson plan would include debugging, finding the appropriate framework or functionality at the appropriate time, etc.
------
1) deploy a little native Android Studio app
to your Android device
-> Install the Oracle Java JDK
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
Download the most recent JDK for your machine.
Install.
-> Install Android Studio
https://developer.android.com/sdk/index.html
Download.
Install standard.
-> Use Android Studio
Launch Android Studio.
Start a new project.
Click the blank app.
Let it build.
Edit the value of the Hello World string's resource.
Build and run the blank app on the emulator.
-> Deploy to your Android device
Under Settings, at the bottom, find the Build Version.
Tap it seven times. After a few taps, it will countdown your taps.
A Developer Settings section then appears in settings.
Open that section, and enable usb debugging.
Plug the device into your mac.
You may need to agree to pair the two at various stages in this process.
Go to Android Studio.
Click the 'Run' (the green right-arrow at the top).
Choose your device.
The little completely native app should now deploy on your phone.
Play with deleting it and deploying again etc.
2) deploy a little cordova Android app
to your Android device
-> Get some developer tools
Get an apple id.
Sign in to:
https://developer.apple.com/downloads/
Download Xcode and the command line tools.
Install.
(If you don't have a developer account, you can download Xcode for free from the App Store, install it, and run any of a number of commands in your terminal -- like 'gcc' -- and your Mac will then help you install the command line tools.)
Get the nodejs download from
https://nodejs.org
and install.
Make sure that node, npm and git are installed:
node -v
npm -v
git --version
[And for below, note that, if you find that the use of sudo is impossible for some reason, for example, running from inside of an IDE like WebStorm, you just need to claim ownership of all the permissions in your home directory's .npm directory: sudo chown -R $(whoami) ~/.npm ]
-> Install Cordova
sudo npm install -g cordova
sudo npm install -g ios-sim (useful later)
-> Use Cordova
make a directory for your cordova apps:
cd
mkdir cordova
cd cordova
create the sample cordova HelloWorld app:
cordova create myhello com.example.hello HelloWorld
cd myhello
cd www
edit index.html with your favorite editor.
emacs index.html
change the string ‘device is ready’ to something else.
Now add platforms to the project:
cordova platform add iOS
cordova platform android
Build your android app (note that run does this automatically):
cordova build android
Run it in the emulator:
cordova emulate android
Run it on your device:
cordova run android
3) deploy a little ionic Android app
to your Android device
-> Install Ionic
sudo npm install -g ionic
-> Use Ionic
make a directory for your ionic apps:
cd
mkdir ionic
cd ionic
create a sample ionic 'sidemenu' app (other options are 'tabs' and 'blank'):
ionic start myApp sidemenu
cd myApp
install the local builder.
sudo npm install -g gulp
ionic platform add android
ionic build android
Look at it in the browser:
ionic serve
or
ionic serve -f chrome
Select ‘2’.
Browse to the given localhost url to try the app in the browser.
Then go back to the terminal and:
q
You can also see it in the emulator.
Cd to the root directory of the project folder, then:
ionic emulate android
ionic run android
Now make a modification:
cd www
cd js
And edit app.js
Change some of the strings in the JSON object that populates the app.
Run on your device (it will build automatically).
Cd to the root of the project folder, and:
ionic run android
You should see the app on your device.
-------
Note:
Apparently Cordova by default blocks http requests. Just run this command:
ionic plugin add cordova-plugin-whitelist
And you're good to go.
And you're good to go.
posted by Greg Bryant at 12:01 PM
0 comments
