How to Convert a html Website to Android Apps with PhoneGap


It's a dream to make our html project an Android app. So, there are few easy options to convert website to android apps apk. We can convert to apk very easily using phonegap build.

First of all we've to know about html/css/javaScript/jQuery also about responsive website. We can use the framework   Bootstarp or jQuery Mobile  for easy responsive and look attractive.

Here is my website's files with the name of my app




Here Look on config.xml file in my website's files. You can add the app name, description, set the android-minSdkVersion, target-device, orientation  etc in config.xml file  .  Here is the config.xml file below.

config.xml


<?xml version="1.0" encoding="UTF-8" ?>
<widget id="com.symonsagor.myapppp" 
 version="1.0.0" 
 xmlns="http://www.w3.org/ns/widgets" 
 xmlns:gap="http://phonegap.com/ns/1.0">
    <name>My app2</name>
    <description>
  This is the demo description
    </description>
    <author email="mssymon7@gmail.com" href="https://build.phonegap.com">
        Sharwar Aman Symon
    </author>
    <content src="index.html" />
    <preference name="permissions" value="none" />
    <preference name="phonegap-version" value="3.7.0" />
    <preference name="orientation" value="default" />
    <preference name="target-device" value="universal" />
    <preference name="fullscreen" value="false" />
    <preference name="android-minSdkVersion" value="7" />
 
 
<!-- Define app icon for each platform. -->
<!-- Icons -->

    <!-- Define app icon for each platform. -->
    <icon src="icon.png" />
    <icon src="icons/android/icon-36-ldpi.png"   gap:platform="android"    gap:qualifier="ldpi" />
    <icon src="icons/android/icon-48-mdpi.png"   gap:platform="android"    gap:qualifier="mdpi" />
    <icon src="icons/android/icon-72-hdpi.png"   gap:platform="android"    gap:qualifier="hdpi" />
    <icon src="icons/android/icon-96-xhdpi.png"  gap:platform="android"    gap:qualifier="xhdpi" />
    <icon src="icons/android/icon-144-xxhdpi.png"  gap:platform="android"    gap:qualifier="xxhdpi" />
    <icon src="icons/android/icon-192-xxxhdpi.png"  gap:platform="android"    gap:qualifier="xxxhdpi" />
 
 
    <icon src="icons/blackberry/icon-80.png"     gap:platform="blackberry" />
    <icon src="icons/blackberry/icon-80.png"     gap:platform="blackberry" gap:state="hover"/>
 
    <icon src="icons/ios/icon-57.png"            gap:platform="ios"        width="57" height="57" />
    <icon src="icons/ios/icon-72.png"            gap:platform="ios"        width="72" height="72" />
    <icon src="icons/ios/icon-57-2x.png"         gap:platform="ios"        width="114" height="114" />
    <icon src="icons/ios/icon-72-2x.png"         gap:platform="ios"        width="144" height="144" />
 
    <icon src="icons/webos/icon-64.png"          gap:platform="webos" />
    <icon src="icons/windows-phone/icon-48.png"  gap:platform="winphone" />
    <icon src="icons/windows-phone/icon-173.png" gap:platform="winphone"   gap:role="background" />

<!-- Splash Screens -->
    <!-- Define app splash screen for each platform. -->
    <gap:splash src="screens/android/screen-ldpi-portrait.png"       gap:platform="android" gap:qualifier="port-ldpi" />
    <gap:splash src="screens/android/screen-mdpi-portrait.png"       gap:platform="android" gap:qualifier="port-mdpi" />
    <gap:splash src="screen/android/screen-hdpi-portrait.png"       gap:platform="android" gap:qualifier="port-hdpi" />
    <gap:splash src="screens/android/screen-xhdpi-portrait.png"      gap:platform="android" gap:qualifier="port-xhdpi" />
    <gap:splash src="screens/blackberry/screen-225.png"              gap:platform="blackberry" />
    <gap:splash src="screens/ios/screen-iphone-portrait.png"         gap:platform="ios"     width="320" height="480" />
    <gap:splash src="screens/ios/screen-iphone-portrait-2x.png"      gap:platform="ios"     width="640" height="960" />
    <gap:splash src="screens/ios/screen-iphone-portrait-568h-2x.png" gap:platform="ios"     width="640" height="1136" />
    <gap:splash src="screens/ios/screen-ipad-portrait.png"           gap:platform="ios"     width="768" height="1024" />
    <gap:splash src="screens/ios/screen-ipad-landscape.png"          gap:platform="ios"     width="1024" height="768" />
    <gap:splash src="screens/windows-phone/screen-portrait.jpg"      gap:platform="winphone" />

</widget>


Make the websit zip.  Compress zip.






Now let's go to https://build.phonegap.com/   Then Sign up And sign in there.





After sign in you will redirect to App page.  Click on  Private . Notice the upload a .zip file. Here upload your zipped website folder.



After upload the file if it shows ready to build. Then Click on there.



Now notice the platform name such as ios, Android, Windows. You can select that you want. If you want for android OS, can click on android icon. It will be downloaded in your computer.






Now  send the .apk file to your android mobile and enjoy your phonegap build android apps.



Also you can test it in chrome browser extension.   Download the ARC Welder  searching on google.




After install the ARC Welder run this.



After run the software you have to select a folder . Then select your apk apps.
It will run there. You can test android apps easily.

Lool of ARC Welder
























































Comments











Post a Comment