26 May 2017

Add name, icon and permissions to your phonegap app

You must have made html files including index.html file in it as shown in a previous post. Then you zip it, upload it and build it on build.phonegap.com, but the name and icon of yout app does not change. You must add config file to your app to change it. Let me show you how.

Step 1 :
The sample config.xml file can be found here. You can make changes according to your application. The config file for my app is shown below. I have included almost all the permissions for my app, but you can modify yours accordingly.
Also add the icon image (preferable png - for ios support) in the main directory (path mentioned in the config file as main directory)

config.xml
<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns   = "http://www.w3.org/ns/widgets"
    xmlns:gap   = "http://phonegap.com/ns/1.0"
    id          = "com.phonegap.example"
    versionCode = "10"
    version     = "1.0.0" >

<!-- versionCode is optional and Android only -->

  <name>Stitch</name>

  <description>
     App to know hardware processes
  </description>

<preference name="Fullscreen" value="true"/>

<preference name="DisallowOverscroll" value="true"/>

<preference name="HideKeyboardFormAccessoryBar" value="false"/>

<access origin="*"/>
    <!-- Added the following intents to support the removal of whitelist code from base cordova to a plugin -->
    <!-- Whitelist configuration. Refer to https://cordova.apache.org/docs/en/edge/guide_appdev_whitelist_index.md.html -->
    <plugin name="cordova-plugin-whitelist" version="1" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />

    <platform name="android">
        <allow-intent href="market:*" />
    </platform>

    <plugin name="cordova-plugin-battery-status" />
    <plugin name="cordova-plugin-camera" />
    <plugin name="cordova-plugin-media-capture" />
    <plugin name="cordova-plugin-console" />
    <plugin name="cordova-plugin-contacts" />
    <plugin name="cordova-plugin-device" />
    <plugin name="cordova-plugin-device-motion" />
    <plugin name="cordova-plugin-device-orientation" />
    <plugin name="cordova-plugin-dialogs" />
    <plugin name="cordova-plugin-file" />
    <plugin name="cordova-plugin-file-transfer" />
    <plugin name="cordova-plugin-geolocation" />
    <plugin name="cordova-plugin-globalization" />
    <plugin name="cordova-plugin-inappbrowser" />
    <plugin name="cordova-plugin-media" />
    <plugin name="cordova-plugin-network-information" />
    <plugin name="cordova-plugin-splashscreen" />
    <plugin name="cordova-plugin-vibration" />

 
  <author href="https://build.phonegap.com" email="support@phonegap.com">
      Yatin Kode
  </author>
 
  <icon src="android.png" /> <!-- icon is saved in png format in the main directory-->

</widget>

Step 2 : Add the config.xml file in the main directory of our application folder.


Step 3 : Zip the folder, upload it on build.phonegap.com and build it as shown in a previous post. The icon will appear there after it builds successfully.
Phonegap app with custom icon
Stay Tuned with Made In Android

Published By:
Yatin Kode
on 26.5.17

15 September 2015

First Phonegap app using Applaud plugin in eclipse

So you have downloaded the applaud plugin by following the previous post.

What we will do?
-> We will learn how to run the default phonegap (cordova) app which covers all the functionality of phonegap.

What we will need ?
Step 1 : Click on the applaud plugin installed from the previous post.
applaud plugin

Step 2 : You can use built-in phonegap which is upto v1.41 but if you want a higher version download it from phonegap website and merge it with the plugin. Choose Phonegap API Example. Then click Next.
Inbuit 1.41 API Example

Step 3 : Give a name to your project as MyProject and click Next.
name MyProject

Step 4 : Choose the Target Android version to compile on and click Next. Choose API 15 or above.
api 15 above

Step 5 : Give a name to your application as My App and package name as com.mia.myapp. Check Create Activity (else you will get NullPointerException) . Choose Minimum SDK as API 15. Click Finish.
my app create activity finish

Step 6 : MyProject will be formed in the Project Explorer. Check for index.html in assets->www folder. You can modify it by Right-click on index.html->Open with->Text Editor.
index.html open with text editor

Step 7 : Run app with emulator support above API 15. You can check features of phonegap like Camera, Compass etc.
run app emulator 15 above
Stay Tuned with Made In Android

Published By:
Yatin Kode
on 15.9.15

26 August 2015

Add phonegap (cordova) Applaud plugin for android to eclipse adt

You do not have to write commands to make your phonegap (cordova) application, you can use this plugin to directly create your phonegap application with a single click.

What we will do?
-> We will install Applaud plugin in eclipse so that you can create your phonegap application with just a click.

What we need?
  • Eclipse with ADT
  • Internet connection
  • Emulator of API 12 or above
Step 1 : Start your Eclipse. Go to Help->Install New Software from the menu-bar.
help installnewsoftware

Step 2 : Click on Add. Give Name as MDS Applaud and Location as shown below.
http://svn.codespot.com/a/eclipselabs.org/mobile-web-development-with-phonegap/tags/r1.2.9/download

Then click OK.
Applaud name and location

Step 3 : Tick on MDS Applaud and press Next.
mds next

Step 4 : Click Next
next

Step 5 : Click on "I Agree.." and click Finish.
agree finish

Step 6 : Check the progress in the Progress Bar. Then Restart Eclipse.
install progress
After restarting eclipse you will see the plugin on the toolbar.
applaud plugin

Stay Tuned with Made In Android

Published By:
Yatin Kode
on 26.8.15

6 April 2015

Make Signin/Signup form in Android using Phonegap

 What will we do ?
-> We will make a Web Based App using HTML, CSS etc. and build it on above 4 mobile platforms. Our App will be a login page (index.html) and signup page (signup.html)

What we will need ?
  • An App based on HTML, CSS etc.
  • Adobe ID
  • 7 Zip for zip compression.
  • All 4 platform mobiles to test the App.
Step 1 : Download 7Zip for zip compression.

Step 2 : Make a HTML based website. It must be responsive type to fit properly in your mobile device. You can use Mobile JQuery tools for building the App. I'll use the short example below. You can add any number of files of type css,js ,html etc.

NOTE : There must be a file named index.html. Without index.html you will not be able to build your application.

Step 3 : Make 2 html pages index.html and signup.html. Add the below code to both the pages . Our App will look like these in the browser.
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Welcome To My Homepage</h1>
    <div data-role="navbar">
      <ul>
        <li><a href="#">Login</a></li>
        <li><a href="signup.html">SignUp</a></li>
      </ul>
    </div>
  </div>

  <div data-role="main" class="ui-content">
    <p><h1>Login</h1>
  </div>
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
</p>
  </div>

  <div data-role="footer">
    <h1>My Footer</h1>
  </div>
</div> 

</body>
</html>

signup.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Welcome To My Homepage</h1>
    <div data-role="navbar">
      <ul>
        <li><a href="index.html">Login</a></li>
        <li><a href="#">SignUp</a></li>
      </ul>
    </div>
  </div>


<div data-role="main" class="ui-content">
    <p><h1>SignUp</h1>
 <br>

 <form role="form">  
<div class="form-group">
  <label for="usr">Name:</label>
  <input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="form-group">
    <label for="pwd">Repeat Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
Gender
<div class="radio">
  <label><input type="radio" name="optradio">Male</label>
</div>
<div class="radio">
  <label><input type="radio" name="optradio">Female</label>
</div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

  <div data-role="footer">
    <h1>Copyright</h1>
  </div>
</div> 
</p></div>
</body>
</html>

Step 4 : Go to https://build.phonegap.com/ and click Get Started. Choose free plan.

 Sign in with your Adobe Account OR SignUp first if you do not have one.

Step 5 :  Add index.html and signup.html in a folder (websiteapp) and make it as .zip file. Only .zip format is allowed.

Step 6 : Upload it to you Account

Step 7 : Download .apk file, .xpa, .ipa Install it and Run It.

Stay Tuned with Made In Android

Published By:
Unknown
on 6.4.15

23 January 2015

Installing Phonegap for Android without command-line

PhoneGap is used to make Android,iOS,Windows etc. Apps using html or css. We will learn to install PhoneGap in adt-bundle to develop android app using html, javascript and css.

What will we do?
We will make PhoneGap application in adt-bundle.

What we will need?
Step 1: Download Java jdk from here .If you already have it no need to re-install.

Step 2 : Download adt-bundle(android-sdk). If present already do not re-install it. Check in here for download

Step 3 : Download Apache ant from


Step 4 : Make a folder as ant in C:/ drive . Decompress the apache-ant . Copy the content of apache-ant to C:/ant.

Step 5 : Download Phonegap 2.2.0 from
We will use Phonegap 2.2.0 since it is stable compared to other versions.


 Step 6 : Decomress the rar/zip file to Desktop.

Step 7 : Go to Start->Right-click on Computer->Properties

Step 6: Go to Advanced System Settings-> Environment Variables->double-click PATH in User variables for User If PATH not there create New (Variable Name- PATH).Value for PATH is given below.
Note down the Path for 
1. platform-tools in adt-bundle (C:\adt-bundle-windows-x86\sdk\platform-tools\)
 2. tools in adt-bundle (C:\adt-bundle-windows-x86\sdk\tools\)
3.bin in Java (C:\Program Files\Java\jdk1.8.0_11\bin\)
4. bin in ant (C:\ant\bin)

NOTE : Add semi-colon(;) between each path and at the end

Paste the above whole path from the Notepad to the value in PATH variable.

Path for my Computer would be:
Variable name: PATH
Variable path :  C:\adt-bundle-windows-x86\sdk\platform-tools\;C:\adt-bundle-windows-x86\sdk\tools\;C:\Program Files\Java\jdk1.8.0_11\bin\;C:\ant\bin;

Click OK

Step 7 : Click on New under System Variables and and create a variable with
Variable name : ANT_HOME
Variable value : C:\ant

Do the same for another variable
Variable name : JAVA_HOME
Variable value : C:\Program Files\Java\jdk1.8.0_11\
You'll get the below result.
Continued to the next post.
Stay Tuned with Made In Android

Published By:
Yatin Kode
on 23.1.15

Next Page Home
Top