PhoneGap folder structure for offline app
PhoneGap - App Contents
Offline websites are copied to local hard drive and accessed whenever the user needs to without any internet connection. Likewise, this offline web app will let you create a web application that is downloaded to its entirety to the mobile devices of a user who can access that offline.
An application for this type of app may include app having collection of stories, short tutorials or any other offline content of users' interest, which he/she can read offline even when internet is not available.
Offline App
The following image represents the folder structure for offline app. At root directory it requires only two files, config.xml and index.xml.
The config.xml contains app configuration settings which we learnt in previous section. The index.html file contains homepage of web contents.
One important thing to learn here is that all links inside all html files should contain relative path only. That is, no absolute path or base href tag should be there.
Online App
The following image shows folder structure for our app to be in online mode. In online mode, entire web content is loaded from internet website.
You may notice that data folder is missing in online mode app, because all the files reside on the actual server and are accessible via internet. The index.html file contains actual links as it contains at the web server and all its links are either absolute or used with base href tag.
After you have decided the mode of your app and organized its files in the file structure mentioned above, you need to zip your file with any standard zip tool and save it. We shall use this file in the next section.
Sign Your App
It is essential for any app to be signed by its developers or developing organization to keep things in order. For this reason, you need to sign your app. You may need keytool which is a part of standard java distribution.
Execute the following command in %JAVA_HOME% in your Windows command prompt or Linux Shell −
keytool -genkey -v -keystore my_keystore.keystore -alias TutorialsPoint -keyalg RSA -keysize 2048 -validity 10000
Now we are ready to compile our first web API-based quick mode app. In this final segment, we shall learn about the process of transforming our web contents to an app format, which can be uploaded on online app stores.
PhoneGap accepts user login created on GitHub or using AdobeID. GitHub is a repository service where users can upload their contents and use them by providing their URL references. For example, the content we just created can be uploaded to GitHub and then call it directly to PhoneGap.
The following steps detail how to create an Adobe ID.
Create Adobe ID
Go to www.build.phonegap.com and click on Register
A new window will open as displayed below −
Fill in your details and click on sign up. You can now login with the same user id to PhoneGap. By default, this page should lead to PhoneGap console as displayed below −
Click ‘Upload a .zip file’ and upload the .zip file we created, which has the entire web content and configurations. You should see the following window after successful upload −
You may instantly see that iOS app has failed its processing as we have not provided any signed key. We are only concentrating on Android and you can see that it has been created by PhoneGap. This app cannot be uploaded to google store as it is not signed by key.
Click on the Android icon and the following screen should appear −
Click on drop-down option menu next to Android icon that reads No key selected, click on add a key and the following screen should appear −
Provide title and alias of your choice and click on Keystore file. Provide the keystore file created in the last section. Then click on 'Rebuild' button next to it.
The app built by this process can be directly uploaded to Google Play. Click on .apk file and you can download your first web-based free app.
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment