How To Build Your Own App PDF

How to build your own app | Cool Tips and Tricks
HOME
TERMS AND CONDITIONS
W H AT S A P P T R I C K S
http://www.gotipsandtrick.info/2014/07/how-to-bui...
FA C E B O O K T R I C K S
Cool Tips and Tricks

DATA
ABOUT
TRICKS
LATEST NEWS
LATEST TRICKS
RECHARGE YOUR MOBILE @
Search here....
CONTACT
Home Unlabelled How to build your own app
How to build your own app

- ON 07:16 - NO COMMENTS
POPULAR POSTS
How to Trace Any IP Address
How to Trace Any IP Address After you obtain
this...
How to Remove a Virus Using
Command Prompt (CMD) and
Notepad
How to Remove a Virus Using
Command Prompt Virus is...
AWESOME NOTEPAD TRICKS

Welcome , let's learn some cool
and awesome notepad...
How to Create a Password

Protected Folder without any
Extra Software
How to Create a Password
Protected Folder without any...
How to Access Passwords Using a USB Drive?
How to Access Passwords Using a USB Drive?
1) Download...
9-year-old boy is now the world's youngest
Microsoft tech specialist
9-year-old boy is now the world's youngest
Microsoft...
Setting Video As Desktop
Wallpaper
Setting Video As Desktop
Wallpaper Ever wanted...
Having an App available for any service adds a tremendous value for the
same and it isnt the domain of programmers anymore. However, without
any programming knowledge whatsoever, you arent going to be able to
build apps as easy. In the early days we had to work on individual SDKs if an
app was to be developed, but as the years went by more and more tools
were released that could be used to develop apps on multiple platforms at
the same time. In the following pages we are going to highlight three
dierent approaches towards building apps and the amount of know-how
needed to follow that particular approach will be highlighted as well. There
are umpteen number of tools available with each have some advantage over
the others, weve picked some of the most popular ones for you.
1 of 9
How To Download Youtube

Videos without any software?
How To Download Youtube
Videos without any software? ...
07/15/2014 04:13 PM
HOME
Before we start pulling out the hair on our heads (If you get into
programming its bound to happen) we need to know the dierent
approaches we can undertake towards building apps and the advantages/
drawbacks of each approach. There are three approaches to going about
building apps, the rst is to go native which gives you the most exibility
since all the API features of a particular platform are made available to you.
The major drawback is that you can only program the app on one platform.
There are multiple reasons for the same but the most obvious one is that the
language used on each platform is dierent Android uses Java, iOS uses
Objective C and Windows Phone uses the .NET framework. Further on,
certain functionalities like access to the phones camera, push notications
and other hardware are only available if you develop on the native platform
or at least use a wrapper. Security is one aspect which can be best
implemented on natively built apps compared to the other approaches.
The second approach is to build a webapp which is basically a HTML5
website that is accessed via webview. This approach is more favourable if
you already can develop HTML5 websites and all you need to do is create a
CSS for your website that is broad enough to cater to as many resolutions
as possible. One major advantage to HTML5 apps is that the interface will
seem the same from whichever device you open the app. Also, if there are
any errors in the content then you can x it without having all your users
download the app all over again from the app store.
While initially these webapps didnt have access to most of the native
features of your phone, there are workarounds for some of these native
2 of 9
07/15/2014 04:13 PM
HOME
JQuery Mobile is another framework which enables more features on

HTML5 pages which look and feel like a native app. The third approach is a
hybrid between the above two approaches. There now exist frameworks
which have a native codebase which interacts with the phone while the
front end is made out of HTML5. These apps give you access to native
features of each platform while exercising the exibility of HTML5. The
HTML5 webpages can be saved onto your phone (local storage) or hosted
on a remote server (remote storage) with a few local pages just in case the
internet connectivity is lost while the app is in use. The table below
compares these three approaches:
Before you start!
You should prep for programming by getting hold of all the software needed
for each approach. Well be listing these at the beginning of each section.
But before you can compile these projects you will need your developer
certicate or signing key from each store. Certain tools will allow you to
compile without a certicate but not for all platforms, Apples system is a
little too stringent and most tools wont create the package for iOS till you
upload or provide the developer certicate. Android apps can be packaged
and sideloaded onto your device to test without the certicate on most tools.
Now there is no need for getting a Mac if you wish to obtain an Apple
developer certicate as is stated in the documentation. Check this link out
for a way to do the same without a Mac. For iOS, Android and Windows
phone you need to register for a developer account and pay a certain
registration fee to obtain your developer certicates. Also, each individual
app store has a certain review process and do restrict certain parameters.
All of these things need to be adhered to if you wish to have your app
approved. These guidelines can be obtained at Apple's developer site and
Google's Android developer site.
Test, test and test!

While a simulator can run your apps eortlessly it is always advisable to
have a device to test out your apps. If you include more native features then
a proper feedback is only obtained if using a physical device. But if you
simply wish to test your HTML5 website then you can use the emulator in
Chrome to view your pages as you work on them. Since Chrome uses Blink
as the engine you will get a more similar look as obtained in Android
3 of 9
07/15/2014 04:13 PM
HOME
webpage will be rendered the same as on iOS.
Hybrid Approach
For this method youll have to pick a framework to go with. There are a few
frameworks but the popular ones are listed below.
Corona
PhoneGap
Appcelerator
Well build a simple HTML5 app using PhoneGap as a wrapper to
provide access to native features of each platform.
Step 1 - Pick the resolution
A primary thing you need to keep in mind while building using HTML5 is
that the very same layout will need to be rendered in the exact same way
across all screen resolutions that exist. Refer the image below to gure out
the most popular resolutions. Keep in mind that the CSS for your website
has to incorporate all these resolutions otherwise your app will look
dierent on dierent devices. There are way too many resolutions listed
here so pick the ones that are most popular. This link shows the dierent
resolutions of active android devices along with statistics highlighting how
popular they are.
Step 2 - Code your website

You can use any tool to create your website, be it dreamweaver or kompozer
or any of the numerous alternatives. However, if there are many includes in
the web page then the app load time will increase. We tried our hand at
creating a design using Adobe Muse and then compiled it using PhoneGap.
The application load time was around 8 seconds on a Nexus 4. If you wish to
make use of any of the native features then use the appropriate function
call. The example for geolocation is given below.
<script type=text/javascript charset=utf-8 src=cordova-2.2.0.js>
</script>
<script type=text/javascript charset=utf-8>
document.addEventListener(deviceready, onDeviceReady, false);
function onDeviceReady()
4 of 9
07/15/2014 04:13 PM
HOME
functiononSuccess(position) {var element =

document.getElementById(geolocation); element.innerHTML = Latitude:
position.coords.latitude <br /> Longitude: position.coords.longitude <br
/> Altitude: position.coords.altitude <br /> Accuracy:
position.coords.accuracy <br /> Altitude Accuracy:
position.oords.altitudeAccuracy <br /> Heading: position.coords.heading
<br /> Speed: position.coords.speed <br /> Timestamp:
position.timestamp <br />;
function onError(error) { alert(code: error.code \n message:
error.message \n); }
</script> </head>
<body>
<p id=geolocation>Finding geolocation...</p>
</body>
This code returns the following as the output. There are numerous examples
like these for making use of each native functionality using PhoneGaps API.
Most of them can be found here.
There are a few things you need to keep in mind while coding your website,
starting o with the amount of external libraries. Use as few external
libraries as possible to make the application smooth. Using libraries are
convenient but there are a lot more functions present in each library than
you need, so unless you intend to use one or two libraries eiciently your
application will be cumbersome to use. You might have to sacrice on looks
since they will be rendered dierently on dierent platforms. This is
absolutely ne. Use CSS as much as possible to load media since they get
rendered only when the media needs to be displayed. This way you save on
memory usage. Instead try to make use of the memory you will save to
pre-load pages that are more likely to be clicked on.
The example code for jQuery Mobile is given below.
<a href=foo/bar/baz dataprefetch> link text</a>
The entire page gets loaded and you dont have to experience the 250-300
millisecond delay that is inherently present in Webkit. PhoneGap apps
appear slow because of this delay and lazy-loading is one of the ways of
getting around this issue. Avoid long lists as much as possible and avoid
gradients in CSS since these are calculated my the GPU of the device and
will take up quite the processing power but that doesnt mean that you cant
use gradients anywhere, optimise its usage.
Step 3 - Generate assets
While coding you will come up with various elements and in order to get the
work done as quickly as possible most programmers insert a simple blank
image of the proper dimensions. Once youve nished coding you need to
start creating all those images. Do keep in mind the image densities while
doing so, otherwise you are likely to create an app that is compatible with
very few devices. Or if you create just a few assets then your app will look
wonderful on a few devices while it renders absolutely worse on everything
else. This is why you need to generate multiple images/icons/ splash screens
for screens of dierent densities. This way you app seems the same no
matter which device you are viewing it on. You can nd all the dierent icon
sizes that PhoneGap need from this link and for the splash screens from
this link. Or you could simply generate all of them by uploading a few
images using the following tool.
5 of 9
07/15/2014 04:13 PM
HOME
Step 4 - Arrange the le structure

Once you have all the les ready, you need to arrange them in a certain
order depending upon what all you are going to use. Take your existing
project folder with the HTML les and all the included libraries and put
them all together in a folder labelled www. If youve made use of any
plugins that we mentioned earlier or any at all then those plugins need to be
kept in a folder labelled plugins which sits at the same level as www.
There are two more folders but you only need to use them if you have coded
your application in such a manner that breaks down your code as platform
specic and platform independant. In this case all platform specic les are
stored in the platforms folder with each platform having their own folder
at the same level (ios, android, bada, etc.).
Step 5 - Create the manifest
In the root directory of your app youll need to provide a cong.xml le with
all the parameters about your app. This includes the name of the app, the
dierent permissions that youll need on each platform, core plugins,
third-party plugins, icons and splash screens for each platform. If youve
included third-party plugins which require an authentication key of any sort
then youll get a example code which youll have to include in the xml code.
Dont worry though, if you dont make the xml le on your own then the
build service will do it for you but all the plugins wont work and all the
icons will be replaced with the standard PhoneGap icons.
Step 6 - Zip it up!
Finally, you just have have to compress your folder using zip compression
and no encryption. The cong.xml le ensures that all the necessary
permissions are included with your application when it is compiled. This is
the package youll need to upload to the PhoneGap build web site or you can
commit the les via github.
Step 7 Upload
Visit Adobe Phonegap Build and sign up for an account. If you use Github
for your signin then you can upload your project folder to Github and have
new builds generated as soon as you modify any le. This process is not
6 of 9
07/15/2014 04:13 PM
HOME
wondering about the signing keys for each platform them you need to add
them to your Phonegap account. Otherwise your application package will
not be generated for that particular platform. Even if it is generated you
still wont be able to upload these les to the appropriate app store. In the
image below you can see that only two packages are generated, the rest
arent either because a signing key was not provided or the PhoneGap
version selected for the build is incompatible with the said platform.
Step 8 - Test your app

If you have a developer account then you can test your app out on your iOS
device, for android devices you need not worry about having an developer
account. Simply enable application installation from Unknown Sources in
your Android devices security settings and you can install your app by
transferring the apk le to your device and then tapping on the le using
any le browser.
Step 9 - Upload to the store
Once you have tested all the apps and are satised with it you may proceed
towards uploading it to each store. If you are submitting an app for the rst
time then the review process will take about 24-48 hours after which you
can nd your app on the respective app Store.
Source: Digit.in

Tweet
7 of 9
Like
Share
132
07/15/2014 04:13 PM
HOME

Web hosting server
Adobe download free
Virus Protection
Youtube Videos
POST A COMMENT
Comment as:
Publish
Select profile...
Preview
Home
Older Post
Follow Me
Seguir 150 personas siguen a Tejash Tiwari. S el primero de tus amigos.
Seguir 1467 personas siguen a Harsh Chaklasiya. S el primero de tus amigos.
Cool Tips and Tricks .Regd. Powered by Blogger.
ENTER THE GIVEAWAY
13 Premium Blogger
Templates Giveaway
GOOGLE+ FOLLOWERS
Tejashwa Tiwari
Your Entries
Add to circles
Total Entries
Days Left
133
2
266 have me in circles
View all
13 Premium Blogger Templates

If you want to make your blog look somewhat
extraordinary , then here is your chance .
Enter now
COPYRIGHT 2014 COOL TIPS AND TRICKS - ALL RIGHTS RESERVED - DEVLOPED BY TICKETCORNER DESIGN N MAINTAINED BY HACKGIRI
8 of 9
07/15/2014 04:13 PM
HOME
9 of 9
07/15/2014 04:13 PM

How To Build Your Own App PDF

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

How To Build Your Own App PDF

Uploaded by

Copyright:

Available Formats

How to build your own app | Cool Tips and Tricks

TERMS AND CONDITIONS

Cool Tips and Tricks

RECHARGE YOUR MOBILE @

Home Unlabelled How to build your own app