Sunday, July 31, 2016

Create and Running Projects Using the Ionic CLI

cd ionicprojects // create and go to folder for your projects

ionic start demoapp // will download ??? from necessary files to begin your project

// they will prompt you to sign up for ionic account. Can do this now or later

cd demoapp // go to your app folder

ionic serve // they will ask you which address. choose localhost

localhost // will appear in browser. Shrink browser to phone size to simulate phone UI

Provides a sample UI which you can click. Can experiment with the various tabs and UI controls like the tableview, clicking on each row, the toggle buttons
Good example to try and simulate on a running device

Next, open up project in a text editor. I use sublime text editor but feel free to use your own editor.
Open up the demoapp folder in your editor, and take a look at the files and folders.
templates - index.html // if you change any of the code, it will be reflected in the app in real time.



Saturday, July 30, 2016

Required Tools, Setup and Installations

Web Development
Web Browser
Text Editor
Need to install Node.js

To build Android Apps
Install Android SDK but don't need IDE. Emulator

To build iOS apps
Mac only
Xcode
Command Line Tools
iOS Simulator

Don't have to install them now, can start developing with only web technologies i.e. browser.

Installing Node.JS on mac

Node .js lets you build server-side and network applications in JavaScript. However for our purposes you can think of it more simply as a way to run command line tools written in JavaScript, such as the Ionic CLI.

Node.js includes npm - the Node Package Manager - a tool that makes it easy to install and update packages.

I recommend installing the version marked as Long Term Support (LTS), currently v4.4

Prerequisite Developer Tools

On Mac makes sure you have the Command Line Developer Tools by opening a Terminal window and type

git --version 

If you have the developer tools already it will print the git version number, otherwise it should display a window that prompts you to install them, so just click the Install button to set them up.

Incidentally, on Mac I also suggest using iTerm2 instead of the default Terminal application. (That’s what I use in the videos.)

Install Node.js using Mac Installer

Go to https://nodejs.org/en/download/ and look for the mac installer. Follow default installation instructions.

To confirm Node.js and the Node Package Manager have been installed correctly type
node -v 
and
npm -v 
and should see their respective version numbers.

Installing Node.js 

There are a few different ways to install Node.js on Mac and Linux, but I recommend using nvm, the Node Version Manager. Follow the nvm instructions and use the install script to set it up.

If the nvm install script warns about "Profile not found" then create an empty Bash profile with touch ~/.bash_profile 
and run the nvm install script again.

Then close and reopen the terminal as prompted. Once you have nvm you can install the right Node.js version by typing
nvm install v4.4.0 
and finally make it the default version with
nvm alias default v4.4.0

To confirm Node.js and the Node Package Manager have been installed correctly type
node -v 
and
npm -v 
and should see their respective version numbers.

Installing CLI

sudo chown -R limjunqu /usr/local/lib/node_modules

Windows - Install Ionic CLI (Command Line Interface)

Should have Node.js installed.

Open Command Prompt

npm install -g cordova // might take a while

-g install this package globally.

cordova -v // should print out cordova version number

npm install -g ionic // might take a while (if installation seems to hang, you can run the command 'npm config set loglevel info' to see the logs as the installation takes places - for your ease of mind!)

ionic -v // print version number

npm install -g bower

bower -v

npm install -g gulp //

gulp -v

ionic -help

Ionic Introduction and Overview

Been developing mobile apps using the traditional method, gosh, huge pain. Ionic is a cross platform solution, let s you develop mobile apps using html5. like web apps, html, css..

Ionic built on top of Angular JS.

We want our app to be available on the Android and iOS platform.

Android - download Eclipse, Android Studio, Android specific content, Activity, Intents
iOS - download Xcode IDE on Mac, Objective C, Swift, storyboards, write same functionality in two different languages,
windows, C#, VS IDE,

developing apps this way rewrite same funciton in two or more languages, and especially when adding extra functionality.

Ti write web apps, just need browser...html, css JS, have a single code base for all platforms. USe a webview to display it.

Ionic and Cordova

Services: View, Creator, Push notifications

App Stack

Your code
Ionic
AngularJS
Cordova/Webview
Android/iOS SDK