Instructions to configure and setup the project presented in the GDG session on Feb 4th.

The instructions below are for Linux OS. For all other operting systems, only the Step 1 would change.

  1. Setting up important packages
    1. Setting up Node JS and NPM
      2. sudo apt-get update
      sudo apt-get install nodejs
      sudo apt-get install npm
    2. Setting up Bower
      3. sudo apt-get update
      sudo npm install bower -g
  2. Downloading and setting up the project
    1. Visit this link. You would get a file 'ionic.zip' downloaded.
    2. Extract it into a desired location. You would get a folder 'ionic' which contains 4 folders - 'angular-code', 'ionic-code', 'json-server' and 'presentation'.
    3. Navigate (cd) into each of the folders in each separate terminal windows.
  3. Setting up the JSON server
    1. In the terminal window with the json-server directory open, do the following:

      2. Install the json-server package to run the server using:

      sudo npm install json-server -g

      Run the json-server using:

      json-server --watch db.json

      You will now have the json-server running at localhost:3000/.

      Leave the process running in the terminal window. Press Ctrl-C to stop it any time.

  4. Setting up the angular project
    1. In the terminal window with the angular-code directory open, do the following:
    2. Setup a server for running the angular-code using:
      3. python -m SimpleHTTPServer 8000
    3. You will now have the complete angular project running at localhost:8000/.
    4. Leave the process running in the terminal window. Press Ctrl-C to stop it any time.
  5. Setting up a server for viewing the presentation:

    6. (The presentation needs to run on a server because there are ionic demos that require a server to run)

    1. In the terminal window with the presentation directory open, do the following:
    2. Installing packages required for running the presentation:
      3. sudo npm install
    3. Setup a server for running the presentation using:
      4. python -m SimpleHTTPServer 5555
    4. You will now have the complete angular project running at localhost:5555/.
    5. Leave the process running in the terminal window. Press Ctrl-C to stop it any time.
  6. Running the ionic project
    1. In the terminal window with the ionic-code directory open, do the following:
    2. Installing npm packages required for running the ionic project:
      3. sudo npm install -g cordova
      sudo npm install -g ionic
      sudo npm install gulp-cli -g
      sudo npm install
    3. Installing bower packages required for running the ionic project:
      4. sudo bower install
    4. Run the ionic project as a website using: (Stop with Ctrl-C)
      5. ionic serve
    5. Run the ionic project in the ionic lab using: (Stop with Ctrl-C)
      6. ionic serve --lab
    6. To run and test your ionic project on an Android mobile device, you need to have the Android SDK and Java JDK setup. (If you have a working Android Studio setup, it is adequate). Then run the following commands:

      7. ionic platform add android
      ionic build android
      ionic run android
    7. To run and test your ionic project on an Android mobile device using the ionic cloud,

      8. Create an account in the ionic cloud here

      Install the ionic view app by searching for 'ionic view' in Google Play Store. Here is the link to the app. Signin to the ionic cloud using the app.

      Then upload the app to the ionic cloud using:

      ionic upload

      You will be asked to enter your credentials and then, the app will be uploaded to the ionic cloud.

      You can now view the app in your ionic view app in the mobile phone.

  7. So we're done with the setup. I highly encourage you to tweak into and play with the code to understand how the code works and contact me for queries via the contact links in the presentation.
  8. Here is a list of tutorials that will help you learn and get-started about ionic.