Little Fixes

Friday, August 07, 2015

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:

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 device2. deploy a little cordova Android app to your Android device3. 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 appc) make a change to itd) build, emulate, servee) 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

https://developer.android.com/sdk/index.htmlDownload.Install standard.-> Use Android StudioLaunch 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 deviceUnder 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 toolsGet 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 fromhttps://nodejs.organd install.Make sure that node, npm and git are installed:node -vnpm -vgit --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 Cordovasudo npm install -g cordovasudo npm install -g ios-sim (useful later)-> Use Cordovamake a directory for your cordova apps:cdmkdir cordovacd cordovacreate the sample cordova HelloWorld app:cordova create myhello com.example.hello HelloWorldcd myhellocd wwwedit index.html with your favorite editor.emacs index.htmlchange the string ‘device is ready’ to something else.Now add platforms to the project:cordova platform add iOScordova platform androidBuild your android app (note that run does this automatically):cordova build androidRun it in the emulator:cordova emulate androidRun it on your device:cordova run android3) deploy a little ionic Android app to your Android device-> Install Ionicsudo npm install -g ionic-> Use Ionicmake a directory for your ionic apps:cdmkdir ioniccd ioniccreate a sample ionic 'sidemenu' app (other options are 'tabs' and 'blank'):ionic start myApp sidemenucd myAppinstall the local builder.sudo npm install -g gulpionic platform add androidionic build androidLook at it in the browser:ionic serveorionic serve -f chromeSelect ‘2’.Browse to the given localhost url to try the app in the browser.Then go back to the terminal and:qYou can also see it in the emulator. Cd to the root directory of the project folder, then:ionic emulate androidionic run androidNow make a modification:cd wwwcd jsAnd edit app.jsChange 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 androidYou should see the app on your device.

-------Note:Apparently Cordova by default blocks http requests. Just run this command: