$ 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
