Monday, 2 November 2015

Hybrid Apps Development using Cordova Technology(installation of phonegap system Cordova & setting Envoirnment)

05:50

First of all make  ENVIRONMENT  SETUP  for android studio & create AVD:

install  jdk1.8.0 from 

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


SEt variable nameS STEP BY STEP:

(a)GO TO FOLLOWING PATH :

FIRST OPEN CONTROL PANEL

(b) then go to Control Panel\All Control Panel Items\System  &

click on Advance system setup

after  that click  on Environment Variables

then click on New  and  add variable name & variable value:

(c)variable name:JAVA_HOME
variable value:
C:\Program Files (x86)\Java\jdk1.8.0_40

(1)Android studio Configuration (click here to procedure)
(2)Sdk  Manager(click here to see procedure)

(3)AVD Manger(click here to see procedure)

(4)to Test AVD  run a  very basic 
hello world Programs in Android Studio
(click here to see procedure)

Now you are ready to Proceed for cordova---Phonegap Technology...

----------------------------------------------------------------------------------------------------------------------------------
Step by Step Installation  Of Cordova :
----------------------------------------------------------------------------------------------------------------------------------
Installation of phonegap system Cordova:

-----------------------------step 1-------------------------------------------------------------------------

(1)install node  from http://nodejs.org

to test : node --version



and

Install Git

http://git-scm.com.

---------------------------end of step 1----------------------------------------------------------
--------------------------step 2-----------------------------------------------------------------
(2)install cordova  step by step :

(a)open command prompt:

then type following:

 npm install -g cordova


(b)after installation test :

cordova --version




-------------------------end of step2 -------------------------------------------------------------------------------
--------------------------setp 3--------------------------------------------------------------------------------------------

(3)install ant:


(a)Go to http://ant.apache.org/bindownload.cgi

(b) & download  zip file for Ant & extract  zip file  into

 C:\Program Files\ANT\apache-ant-1.8.4

(c) to test :

ant -version

(please note if you will get error  that ant is not external & internal command  then do this things rename your folder    apache-ant-1.8.4  to ant folder then your  path for ant will be=C:\Program Files\ant\bin


note : use these details to set path of ant
variable name=ANT_HOME

variable value=C:\Program Files\ant\bin

)
and  also   do not forget to set  Environment Variable :

variable name:PATH
variable value:D:\om\Android development detials\android-sdk-windows;C:\USERS\OM\AppData\Roaming\npm;C:\Program Files\ant\bin 


-----------------------------------end of step3-----------------------------------------------------------------------------

----------------------------------SEt varaible names  step 4------------------------------------------------------------------------------

SEt variable nameS STEP BY STEP:

(a)GO TO FOLLOWING PATH :

FIRST OPEN CONTROL PANEL

(b) then go to Control Panel\All Control Panel Items\System  & click on Advance system setup


afte that click  on Environment Variables:


then click on New  and  add variable name & variable value:


And follow  the following gudiance  to set variable name:


(a)variable name:ANT_HOME

variable value:C:\Program Files\ant\bin\ant.bat


(please note if you will get error  that ant is not external & internal command  then do this things rename your extracted  folder of ant    "apache-ant-1.8.4"  to ant folder then your  path for ant will be=C:\Program Files\ant\bin


note : use these details to set path of ant
variable name=ANT_HOME

variable value=C:\Program Files\ant\bin

)




(b)variable name:

ANDROID_HOME
variable value:D:\om\Android development detials\android-sdk-windows


(c)variable name:JAVA_HOME
variable value:
C:\Program Files (x86)\Java\jdk1.8.0_40



(d)variable name:PATH
variable value:D:\om\Android development detials\android-sdk-windows;C:\USERS\OM\AppData\Roaming\npm;C:\Program Files\ant\bin




-------------------------------------------variable setting  done--------------------------------------------------------------------------------------------------------
-------------step 5---------installation of Android  & Android Sdk for windows----------------------

 ENVIRONMENT  SETUP  for android studio which we have done above :
(1)Android studio Configuration (click here to procedure)
(2)Sdk  Manager(click here to see procedure)



--------------------------------------------------end of  android studio & Android sdk installation--------------------------------------------------------------------

--------------------------step6----Creating my first apps------------------using html-css-javascript---------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------
Creating my first Android apps--using html-css-Javascript   using  Cordova
----------------------------------------------------------------------------------------------------------------------------------
open  command prompt:

(1) type following command  which will create  a folder under  c:/ drive   vissicomp:

 cordova create   vissicomp    com.example.vissicomp    vissicomp


Creating a new cordova project with name "vissicomp"    and app
 id   is  "com.example.vissicomp"   at location "C:





here  there are  plaftforms folder which contains  platform details like android ,windows ,IOS  
in which platform we want to develop apps  we have to add that Platform.. 
and www is  a folder where we keep our html,css,javascript code  to develop our apps.

(2) To add platform to cordova  type following command to add android platform :

cordova platform add android








Then under  vissicomp/plaftforms  folder you will see a folder android 

(a)then open your folder  vissicomp :



(i)go to path  C:\vissicomp\www\index.html




(ii)then open  index.html file :

& replace all code by following code of html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div#test{ border:#000 1px solid; padding:10px 40px 40px 40px; }
</style>

<script language='JavaScript' type='text/JavaScript'>

 var tenth = '';

 function ninth() {
   if (document.all) {
     (tenth);
     alert("Right Click Disable");
     return false;
   }
 }

 function twelfth(e) {
   if (document.layers || (document.getElementById && !document.all)) {
     if (e.which == 2 || e.which == 3) {
       (tenth);
       return false;
     }
   }
 }
 if (document.layers) {
   document.captureEvents(Event.MOUSEDOWN);
   document.onmousedown = twelfth;
 } else {
   document.onmouseup = twelfth;
   document.oncontextmenu = ninth;
 }
 document.oncontextmenu = new Function('alert("Right Click Disable"); return false')
</script>


<script>
var pos = 0, test, test_status, question, choice, choices, chA, chB, chC, correct = 0;
var questions = [
    [ "What is 10 + 4?", "12", "14", "16", "B" ],
[ "What is 20 - 9?", "7", "13", "11", "C" ],
[ "What is 7 x 3?", "21", "24", "25", "A" ],
[ "What is 8 / 2?", "10", "2", "4", "C" ],
[ "What is 4 / 2?", "10", "2", "4", "B" ],
[ "What is full form of html?", "htypertext markup language", "2", "4", "A" ]
];
function _(x){
return document.getElementById(x);
}
function renderQuestion(){
test = _("test");
if(pos >= questions.length){
test.innerHTML = "<h2>You got "+correct+" of "+questions.length+" questions correct</h2>";
_("test_status").innerHTML = "Test Completed";
pos = 0;
correct = 0;
return false;
}
_("test_status").innerHTML = "Question "+(pos+1)+" of "+questions.length;
question = questions[pos][0];
chA = questions[pos][1];
chB = questions[pos][2];
chC = questions[pos][3];
test.innerHTML = "<h3>"+question+"</h3>";
test.innerHTML += "<input type='radio' name='choices' value='A'> "+chA+"<br>";
test.innerHTML += "<input type='radio' name='choices' value='B'> "+chB+"<br>";
test.innerHTML += "<input type='radio' name='choices' value='C'> "+chC+"<br><br>";
test.innerHTML += "<button onclick='checkAnswer()'>Submit Answer</button>";
}
function checkAnswer(){
choices = document.getElementsByName("choices");
for(var i=0; i<choices.length; i++){
if(choices[i].checked){
choice = choices[i].value;
}
}
if(choice == questions[pos][4]){
correct++;
}
pos++;
renderQuestion();
}
window.addEventListener("load", renderQuestion, false);

</script>

</head>

<body>
<h2 id="test_status"></h2>
<div id="test"></div>
</body>
</html>

& save it



Now go for next step:

(3)then build  your first app type following command:

cordova build


(note : and sometimes it may throw  exit code 1 problem during  cordova build  if you are using latest version of cordova  so use following command to downgrade your cordova version:

npm uninstall -g cordova && npm install -g cordova@4.3.0 


)

(note  :  sometimes you may get error   "Error occurred during initialization of VM
Could not reserve enough space for 2097152KB object heap"
then solution for it is:
Right click on computer ->properties->Advance system setting->then clikc on Environment varibles ->then click on new and enter following details:
variable name=_JAVA_OPTIONS

varibale value=-Xmx1024M

and can red more about from build environment:

https://docs.gradle.org/2.14.1/userguide/build_environment.html


(4)then  run your apps by typing following apps:

cordova emulate android

-----------------------------------end of step 6-------------------------------------------------------------------------------------------------------------- sep 7---------------------------
finally HOW TO RELEASE YOUR APK FILE :use following command :

cordova build android --release


find your apk file from  android-build folder:




install this apk file on you Android phone & see output of  this sample apps:



----------------------------------------------------------------------------------------------------------------------------------
 How to make  Signed Apk  before uploading Apk  file to google play store?
----------------------------------------------------------------------------------------------------------------------------------


Let assume your project folder name is myApp & now follow  given steps:

1. Update the AndroidManifest. Open /myApp/platforms/android/AndroidManifest.xml and update. VersionCode is what will display in the store; versionName is for your internal use and won’t be shown: android:versionCode=”10000″ android:versionName=”1.0.0″ (Note on format: “10000” = 1.00.00.)

Make sure the following is accurate (change com.developerName.myApp to your own information here and throughout this page):

package="com.developerName.myApp"
Make sure the following is 11 or higher (I choose 19.):

android:minSdkVersion="11"
Open /myApp/config.xml and make sure the widget id and version are the same as in AndroidManifest.xml.

2. The following steps create your private key and the keystore file in which to store it. In Terminal, make sure your starting position is within your app’s root folder of /myApp and run the following. (To start commands from your app root folder in Terminal, open the Terminal app, type cd and a space, drag the /myApp folder to Terminal, tap in Terminal to activate its window, then hit Enter.)

keytool -genkey -v -keystore myapp.keystore -alias myapp -keyalg RSA -keysize 2048 -validity 10000
or 
keytool -genkey -v -keystore NAME-mobileapps.keystore -alias NAME-mobileapps -keyalg RSA -keysize 2048 -validity 10000
You’ll be prompted to answer several questions. Use only legal characters like letters and numbers, not punctuation. For 2-letter country code, look up this list: http://www.worldatlas.com/aatlas/ctycodes.htm

3. You will then review the data presented. At that point, if any of the information is wrong, type the two letters to re-enter that information. For instance, type cn to change your first and last name. Otherwise, confirm the information by typing “yes.” Then just hit Enter if the password for the following Terminal information will be the same as the previous.

Your keystore file will be located at /myApp/myapp.keystore. This needs to be copied to a safe place ASAP. Your customers will not be able to update to the next version without this file.

4. Copy myapp.keystore to /platforms/android.

Now it’s time to sign the app with the key and create the release version.

5. Open /platforms/android/local.properties (or project.properties) in a text editor.

6. Add these two lines at the end and save, even though it says, “Do not modify this file — YOUR CHANGES WILL BE ERASED!”

key.store=myapp.keystore
key.alias=myapp


7. Still in your /myApp folder in Terminal, run:

cordova build android --release
You’ll be asked for your password twice and it won’t be obfuscated.

8. Your myApp.apk file is put in /myApp/platforms/android/ant-build/CordovaApp-release.apk. (If not there, it may be in /myApp/platforms/android/build/outputs/apk.) This is the file you rename and upload to Google Play.

Signing an Update Version Apk Without Eclipse

This section assumes you’ve already created your keytool and keystore file from your first version, and have the keystore file in a safe place. You won’t follow those steps again.

1.Open /myApp/config.xml and update. Increment the version number.

2. In Terminal, make sure your starting position is within your app’s root folder of /myApp and run the following. (To start commands from your app root folder in Terminal, open the Terminal app, type cd and a space, drag the /myApp folder to Terminal, tap in Terminal to activate its window, then hit Enter.)

3. From your app’s root folder in Terminal:

cordova build android --release


SEE BELOW EXAMPLE :

C:\vissicomp>keytool -genkey -v -keystore myapp.keystore -alias myapp -keyalg RS
A -keysize 2048 -validity 10000
Enter keystore password:  123456
What is your first and last name?
  [Unknown]:  om maurya
What is the name of your organizational unit?
  [Unknown]:  vissicomp
What is the name of your organization?
  [Unknown]:  vissicomp pvt ltd
What is the name of your City or Locality?
  [Unknown]:  andheri
What is the name of your State or Province?
  [Unknown]:  maharashtra
What is the two-letter country code for this unit?
  [Unknown]:  91
Is <CN=om maurya, OU=vissicomp, O=vissicomp pvt ltd, L=andheri, ST=maharashtra,
C=91> correct?
  [no]:  yes

Generating 2048 bit RSA key pair and self-signed certificate (MD5WithRSA)
        for: CN=om maurya, OU=vissicomp, O=vissicomp pvt ltd, L=andheri, ST=maha
rashtra, C=91
Enter key password for <myapp>
        (RETURN if same as keystore password):  123456
[Saving myapp.keystore]

C:\vissicomp>cordova build android --release

----------------------------------------------------------------------------------------------------------------------------------

How to publish  your Android apps on google play store? 
----------------------------------------------------------------------------------------------------------------------------------

step 1 : first go to url link & make login using your gamil id & password:

Url=https://play.google.com/apps/publish/


Step 2:
 make payment  using debit card or credit card $25..  & IT    TAKE   ONE    DAY.




step 3: then make & fill your  payment  details.

step 4: Then go to setting  & click on Account details & enter your account details:


Step 5:  Then click on   "All applications"  & click  on   Apk  :


Step 6: Then upload your  Signed Apk file  click on  "UPload New Apk to Production" file (note: google do not accept debugged apk file so plz check first whether it is signed or not).

Step 7:after uploading you have fill  details for following things:
Store Listing
Content Rating
Pricing & Distribution

Step 8: enter your  Store Listing Details after clicking on Store Listing...





Step  9: now enter details for Content Rating  click on Content Rating :

Step 10: Enter  click on Pricing & Distribution  click on Pricing & Distribution :



Step 11:
then click on  PUBLISH ..  THEN   IT   WILL TAKE   2HRS   TO   5HRS   TO  PUBLISH .

SEE YOUR ALERT ON LEFT HAND SIDE WHICH WILL SHOW YOU THE NOTIFICATIONS..




Written by

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.

0 comments:

Post a Comment

 

© 2013 ANDROID TRAINING IN MUMBAI BY OM SIR. All rights resevered. Designed by Templateism

Back To Top