Mobile Apps Training: 2016

Tuesday, December 6, 2016

Database Lab

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

Thursday, November 24, 2016

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>


<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>


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


<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> 

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

Wednesday, November 23, 2016

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

Monday, November 21, 2016

Basic Knowledge

template home menu

template about

template note menu

template updateNote

template editNote

template deleteNote

template singleNote

template listNotes

template addNote

template home

appjs otherwise

$urlRouterProvider.otherwise('/');

appjs deleteNote

$stateProvider.state('deleteNote', {
url: '/delete',
templateUrl: 'deleteNote.html',
controller: 'DeleteNoteCtrl'
});

appjsupdateNote

$stateProvider.state('updateNote', {
url: '/edit/:id',
templateUrl: 'updateNote.html',
controller: 'UpdateNoteCtrl'
});

appjs editNote

$stateProvider.state('editNote', {
url: '/edit',
templateUrl: 'editNote.html',
controller: 'EditNoteCtrl'
});

appjs addNote

$stateProvider.state('addNote', {
url: '/add',
templateUrl: 'addNote.html',
controller: 'AddNoteCtrl'
});

appjs singleNote

$stateProvider.state('singleNote', {
url: '/:id',
templateUrl: 'singleNote.html',
controller: 'SingleNoteCtrl'
});

appjs listNotes

$stateProvider.state('listNotes', {
url: '/notes',
templateUrl: 'listNotes.html',
controller: 'ListNotesCtrl'
});

appjs home

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

app config

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

});

appjs main

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
var app = angular.module('noteit', ['ionic', 'firebase'])

app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
});

Controller Update Note

// Update Note
app.controller('UpdateNoteCtrl', function($scope, noteService, $stateParams, $state){
$scope.notes = noteService.all;
$scope.singleNote = noteService.get($stateParams.id);
$scope.title = $scope.singleNote.title;
$scope.body = $scope.singleNote.body;
$scope.myid = $scope.singleNote.$id;

$scope.updateNote = function(id){
var ed = $scope.notes.$getRecord(id);
ed.title = $scope.title;
ed.body = $scope.body;
$scope.notes.$save(ed);
$state.go('editNote');
}
});

Controller Edit Note

// Edit Note
app.controller('EditNoteCtrl', function($scope,noteService){
$scope.notes = noteService.all;
});

Controller Delete Note

// Delete Note
app.controller('DeleteNoteCtrl', function($scope,noteService, $state, $ionicActionSheet){
$scope.notes = noteService.all;

$scope.showDetails = function(id){
$ionicActionSheet.show({
destructiveText: 'Delete',
titleText: 'Are You Sure?',
cancelText: 'Cancel',
destructiveButtonClicked: function(){
var rem = $scope.notes.$getRecord(id);
$scope.notes.$remove(rem);
return true;
}
});
}

});

Controller Single Note

// Single Note
app.controller('SingleNoteCtrl', function($scope,noteService, $stateParams, $state){
$scope.singleNote = noteService.get($stateParams.id);
$scope.title = $scope.singleNote.title;
$scope.body = $scope.singleNote.body;
});

Controller List Note

// List Notes
app.controller('ListNotesCtrl', function($scope,noteService){
$scope.notes = noteService.all;
});

Controller Add Note

// Add Note
app.controller('AddNoteCtrl', function($scope, $firebaseArray, $state, noteService){
$scope.saveNote = function(){
$scope.newNote = noteService.all;
$scope.newNote.$add({
title: $scope.title,
body: $scope.body
});
$state.go('home');
}
});

Sunday, November 20, 2016

Publishing you app

Refer guide at below url

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

to install angularfire

to install angular fire

$ npm install angularfire --save

after installation, node_modules directory created in your project folder.

AngularFire is the officially supported AngularJS binding for Firebase. This binding lets you associate Firebase references with Angular models so that they will be transparently and immediately kept in sync with the database and with all other clients currently using your application.

The focus of this library is to abstract much of the boilerplate involved in creating Angular bindings from Firebase to Angular, and to make it easy to create services that sync to your database. However, this library does not attempt to replace the capabilities of the entire Firebase client library’s API and that may still be suitable for some advanced usages. Feel free to use the methods provided by the core Firebase client library alongside the AngularFire binding.

Testing as a native app

Testing on Android device. To test on the device, simply plug it in, and run

$ ionic run android

If this doesn’t work, make sure you have USB debugging enabled on your device, as described on the Android developer site.

https://ionicframework.com/docs/guide/testing.html

Enable USB debugging in the device system settings, under Settings > Developer options.

Note: On Android 4.2 and newer, Developer options is hidden by default. To make it available, go to Settings > About phone and tap Build number seven times. Return to the previous screen to find Developer options.

Saturday, November 19, 2016

firebase

To register firebase, go to firebase.google.com

Firebase gives you the tools and infrastructure to build better apps and grow successful businesses.

Features -- Realtime Database, User Authentication, and Hosting -- make app development easier, but there’s more we can do, so today, we’re announcing a major expansion!

Thursday, November 17, 2016

Course Content

Introduction

Getting Started

Mobile App Types
What is Ionic
Angular Fundamentals

Tools & Setup

Installing Node.js & Git
Installing Ionic & Cordova in CLI
Android Studio and SDK Install
Ionic Lab Desktop App
Ionic Creator Web App

Ionic UI

Header, Footer & Buttons
Lists & Cards
Form & Input
Tabs & Navigation

Angular & JavaScript Components

Controllers & Scope
Forms & Events
ing a Service
Scope Functions

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

Summary

About this course

Mobile Apps are everywhere. They have augmented our phones to help us in myriad of ways starting from booking a movie ticket to a plan our daily expenses. The app development landscape offer tremendous opportunity to programmers but with different native operating systems and languages it is difficult to reach critical mass of users.

The process of creating an application is also not as simple as it seems though. It requires extensive coding, building the app, deploying it and then scaling it (when it attracts a lot of users). All of this doesn’t even factor in that creating an app for iOS is completely different from creating an app for Android. Both require a complete different language and process.

This is where the Ionic framework comes in.

The Ionic framework is an open source library of mobile-optimized components in JavaScript, HTML and CSS. It provides developers with tools for building robust and optimized apps that work on both, Android and iOS.

Create professional mobile apps using the Ionic Framework

Ionic aims to simplify the process of creating apps for numerous platforms, eliminating the need for duplicating the same code in multiple different languages for different platforms. Additionally, the app can be written in HTML, CSS and JavaScript (no need to learn a new language) and can be deployed on both, iOS and Android. The look and feel of the apps remain similar to the native apps.

Ionic comes with features such as typography, mobile components, an extensible base theme, and interactive paradigms. The framework is created on AngularJS, making it a powerful SDK for developing robust applications.

Our ionic course has been created as a one-stop shop for all your Ionic needs. Our Ionic Framework tutorial will help you understand what is Ionic, how can it help you in terms of coding, and how can you maximize it to its full potential.

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.

Learn Android Studio, SDK tools and Ionic tools, FindFeed App, Angular Controllers, Directives, Services, Google JSON API, Routing, Angular Templates, Firebase, AngularFire, CRUD Functionality, Firebase Service and so much more in this workshop.

If this is not enough, you will also use everything you learn in this course to build a functional mobile app from scratch to get practical knowledge. So, what are you waiting for? Let’s get started and become an app guru.

What are the requirements?

Basic Knowledge of JavaScript and HTML

What am I going to get from this course?

Learn to build Mobile Apps using Ionic Framework
Learn to use your JavaScript and HTML skills to create better apps
Master Ionic concepts and app development process
Build a complete app along with the course

What is the target audience?

Student who want to learn the ionic framework for creating mobile apps will find this course immensely helpful

Install Cordova

Install Cordova

$ npm install –g cordova
$ cordova -v

Wednesday, November 16, 2016

Install ionic

Install ionic
http://ionicframework.com/

The top open source framework for building amazing mobile apps.
Ionic is the beautiful, free and open source mobile SDK for developing native and progressive web apps with ease.

$ npm install –g ionic
$ ionic -v

Install sublime text

Install sublime text

https://www.sublimetext.com/

Sublime Text
Sublime Text is a sophisticated text editor for code, markup and prose.
You'll love the slick user interface, extraordinary features and amazing performance.

Download for windows
Save file in D:/RJ_MobileAppsWorkshop/installer

Install into D:\Program Files\Sublime Text 3
Open sublime Text

Install Ripple emulator for crome

Search ripple crome

https://chrome.google.com/webstore/detail/ripple-emulator-beta/geelfhphabnejjhdalkjhgipohgpdnoc?hl=en

Add to crome

Install phonegap

http://phonegap.com

Create your app with PhoneGap

Reuse existing web development skills to quickly make hybrid applications built with HTML, CSS and JavaScript. Create experiences for multiple platforms with a single codebase so you can reach your audience no matter their device.

Package your app in the cloud

PhoneGap Build takes the pain out of compiling PhoneGap apps. Get app-store ready apps without the headache of maintaining native SDKs. Our PhoneGap Build service does the work for you by compiling in the cloud.

http://phonegap.com/getstarted/

$ npm install –g phonegap

After installed

$ phonegap –v

Open folder xampp/htdocs

Git bash here

$ phonegap create basicphonegap

Open folder htdocs

See folder basicphonegap created

Open the folder using sublime text

Install Android Studio

Install Android Studio

https://developer.android.com/studio/index.html

Android Studio
The Official IDE for Android
Android Studio provides the fastest tools for building apps on every type of Android device.
World-class code editing, debugging, performance tooling, a flexible build system, and an instant build/deploy system all allow you to focus on building unique and high quality apps.

Download android studio for windows (1.6 GB)
To install Android Studio on Windows, proceed as follows:
1. Launch the .exe file you downloaded.
2. Follow the setup wizard to install Android Studio and any necessary SDK tools.

D:\Program Files\Android\Android Studio
D:\Android\sdk

sdk tools to install

android auto API simulator
Intel x86 Emulator Accelerator (HAXM installer)

update AVD manager
update other components

Install Java JDK Latest

Install Java JDK Latest

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

Java SE Development Kit 8 Downloads
Thank you for downloading this release of the Java™ Platform, Standard Edition Development Kit (JDK™). The JDK is a development environment for building applications, applets, and components using the Java programming language.
The JDK includes tools useful for developing and testing programs written in the Java programming language and running on the Java platform.

Windows x64 194.64 MB jdk-8u111-windows-x64.exe

Install in D:\Program Files\Java\jdk1.8.0_111\
Update java home environment
My PC properties
Advanced system settings
Environment Variables
System variables
JAVA_HOME
D:\Program Files\Java\jdk1.8.0_111\bin
JRE_HOME
C:\Program Files\Java\jre1.8.0_111\bin

Install GIT

Install GIT
11.02

https://git-scm.com/

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.
Git is easy to learn and has a tiny footprint with lightning fast performance. It outclasses SCM tools like Subversion, CVS, Perforce, and ClearCase with features like cheap local branching, convenient staging areas, and multiple workflows.

Your download is starting...
You are downloading the latest (2.10.2) 64-bit version of Git for Windows. This is the most recent maintained build. It was released 14 days ago, on 2016-11-02.

Save file in D:/RJ_MobileAppsWorkshop/installer

Install git in D:
Use Git and optional Unix tools from the windows command prompt
Open git bash CLI
Try these commands
Node –v
Npm –v
exit

Install nodejs

Install nodejs
17112016 10.39
https://nodejs.org/en/
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.

Download for windows (x64)
V6.9.1 LTS Recommended for most users
Save file in D:/RJ_MobileAppsWorkshop/installer

Double click to install
Install in D:

Install xampp

17112016 1006

Lab Ibnu Hayyan

Installation steps

https://www.apachefriends.org/index.html

What is XAMPP?
XAMPP is the most popular PHP development environment
XAMPP is a completely free, easy to install Apache distribution containing MariaDB, PHP, and Perl. The XAMPP open source package has been set up to be incredibly easy to install and to use.

Download xampp for windows
Save file in D:/RJ_MobileAppsWorkshop/installer

Install xampp in D:
After installed, run xampp
Start apache
Start mysql
Open browser
http://localhost/
if success… say Alhamdulillah.