Database Lab

https://drive.google.com/open?id=0B5dA40aZ2gjpNFdTQVkxeVpmWTQ

ionic workshop 24112016 Thursday

ionic workshop 24112016 Thursday

$ cd /
$ cd g
$ cd projects
$ ls
$ ionic start rjworkshop blank

openapp.js
update
varapp=angular.module('tge',['ionic'])
app.run(function($ionicPlatform){

openindex.html

<bodyng-app="rjworkshop">

<ion-header-barclass="bar-stable">
<h1 class="title">Mobile Apps Workshop</h1>
</ion-header-bar>

$ cd rjworkshop
$ionicserve
will launch http://localhost:8100/

To create route for multiple pages in app.js
open app.js
Each url has it own state. Different pages are state.

var app = angular.module('rjworkshop',['ionic'])
app.run(function($ionicPlatform)

app.config(function($stateProvider, $urlRouterProvider){

$stateProvider.state('home',{
url:'/',
templateUrl:'home.html'
});

$stateProvider.state('about',{
url:'/about',
templateUrl:'about.html'
});

$stateProvider.state('syllabus',{
url:'/syllabus',
templateUrl:'syllabus.html'
});

$stateProvider.state('benefits',{
url:'/benefits',
templateUrl:'benefits.html'
});

$stateProvider.state('schedule',{
url:'/schedule',
templateUrl:'schedule.html'
});

$stateProvider.state('contact',{
url:'/contact',
templateUrl:'contact.html'
});

$urlRouterProvider.otherwise('/');
});


create templates inside index file
open index.html

<ion-pane>
…delete all here…
</ion-content>

<ion-nav-bar class="bar-positive" align-title="center">
        <ion-nav-back-button></ion-nav-back-button>
     </ion-nav-bar>

<!--HOME-->
      <script type="text/ng-template"id="home.html">
        <ion-view view-title="Home"> <ion-content class="note-content">
          <div class="row">
            <div class="col">
              <h3 class="text-center">Mobile App Workshop!</h3>

              <p class="text-center">This course will teaches you not only the basics of the technology but will also give you the background behind the technology. The course will go over the advantages of mobile apps and will cover basics as well as advanced concepts and technologies. </p>

              <p class="text-center">Student who want to learn the ionic framework for creating mobile apps will find this course immensely helpful.</p>

            </div>
          </div>
          </ion-content>
        </ion-view>
      </script>
<!--END HOME-->

edit style
open css/style.css

body,h1,h2,h3,h4,h5,h6,p{
color:#fff;
}

.note-content{
background:#1766d6;
}

.note-listing{
background:#387ef5;
}

.banner,.map{
 
width:100%;

}


insert home image
<img class="banner" src="img/ionic.png">

Create navigation link
<a class="button button-block button-calm"ui-sref="syllabus">Syllabus</a>

add template syllabus in index

<!--SYLLABUS-->
      <script type="text/ng-template"id="syllabus.html">
        <ion-view view-title="Syllabus"> <ion-content class="note-content">
          <div class="row">
            <div class="col">
              <h3 class="text-center">Course Content!</h3>
              Building an App

              States & Routing
              Home Screen & Template
              Angularfire & Firebase Setup
               Add & List Notes
              Single Note & Delete Function
              Edit & Update Notes
              Testing & Finalizing an .apk
              <p>

              <img class="banner" src="img/mobilepp2.jpg">  
              </p>

            </div>
          </div>
          </ion-content>
        </ion-view>
      </script> <!--END SYLLABUS-->

add platform
$ ionic platform add android

$ ionic build android
$ ionic emulate android

update config.xml

to run on device. plug handphone to usb
$ ionic run android

create folder apk_file inside rjworkshop project

$ cordova build --release android

http://ionicframework.com/docs/guide/publishing.html

$ cordova build --release android

go to apk file
platform/android/build/output/apk

android-release-unsigned.apk

copy program files/java/ jdk path/bin
C:\Program Files\Java\jdk1.8.0_111\bin

open windows c: as administrator
cd paste the path
it will bring you to bin path folder

copy keytool command and edit

$ keytool -genkey -v -keystore rjworkshop.keystore -alias rjworkshop -keyalg RSA -keysize 2048 -validity 10000

copy and paste on the window command line
create password (naza)
enter password

go to bin folder see the file rjnote.keystore
copy the keystore and paste into apf_file folder

open android studio
menu build
generate signed apk
choose existing
key store path
password
rjnote
password
choose destination on desktop
release
and finish
app-release.apk on desktop


open android sdk (tak jumpa cari... seok sambung)
copy path
C:\Users\DELL\sdk\build-tools\23.0.2

copy and paste file to this folder

open cmd as administrator
you will be bring to the path directory

$ zipalign -v 4 app-release.apk rjworkshop.apk
copy and paste on command line
and run
go back to folder
cut file and paste to desktop
rjworkshop.apk
upload this file to google app store

Training Modules

Mobile Apps Basic (2 days)
Angularjs application (1 day)
Mobile Apps database (2 days)
Multi user apps (2 days)
e-commerce mobile app (2 days)

Android studio update

install these sdk tools components

1. android auto APi simulators
2. android auto desktop head unit emulator
3. intel x86 emulator Accelerator (HAXM installer)

Android Environment Setting

Update your pc setting as follows

Java environment

JAVA_HOME setting

ANDROID_HOME setting

Basic Knowledge

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_default

http://www.w3schools.com/css/tryit.asp?filename=trycss_default

http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_inner_html

http://www.w3schools.com/angular/tryit.asp?filename=try_ng_intro

http://www.w3schools.com/angular/tryit.asp?filename=try_ng_module

http://www.w3schools.com/angular/tryit.asp?filename=try_ng_directives

http://www.w3schools.com/angular/tryit.asp?filename=try_ng_model

http://www.w3schools.com/angular/tryit.asp?filename=try_ng_databinding_braces

http://www.w3schools.com/angular/tryit.asp?filename=try_ng_controller

http://www.w3schools.com/angular/tryit.asp?filename=try_ng_scope_sync

http://www.w3schools.com/angular/tryit.asp?filename=try_ng_services_http