Mobile Application Development

Mobile Application Development

Presented By : Chinmay Soni

WHAT IS MOBILE APP ?

Mobile Application

A mobile application is software  application  designed to run-on smartphones,tablet computers and other mobile devices. Mobile application began appearing in 2008 and are typically operated by the owner of the mobile operating system, such as the Apple App Store, Google Play, Windows Phone Store, and BlackBerry App World.

Types of Mobile Application

1.Browser Access :- The applications which we are accessing through native browser. Ex : www.yahoo.com, www.google.com, m.redbus.in, etc

2.Hybrid Apps - Web :- We are installing the application in our device and for the functioning of that particular application internet is required. Ex : Social Networking Apps(Facebook, Twitter), Instant Messengers(Skype), E-Commerce(Flipkart), Internet Speed Testing(Speedtest.net), etc.

3. Hybrid Apps – Mixed :- We are installing the                                                                                             application in our device and if required we are connecting it to internet also. Ex : Few games in which we can play alone and we go online too for playing with different players(multi player). 

4. Native Apps :- The applications which we are installing in our device. Ex : Reminders, Few Games, etc.

Native Apps- Which can be installed in  the devices and the app does not need any data transfer to the server. With out network these apps work in the device. The data about the app will be stored in the device itself. Example Gaming applications. 

Client Server apps- They can be called Semi native apps. Here the app can be installed in the device. But the with out a network it cannot be launched. Because It gets the data from the server. With out the data the app will not proceed further. Example Commercial apps like Banking app. 

Mobile Web applications.- They can be called as Mobile browser apps as these are not installed in the device. these can be accessed using the mobile browser by hitting the url of the web. Here the device memory size is not all important as neither of the from or the app data is stored in the device. It is completely dependent on the quality of  the browser. Every thing comes from the server and rendered in the browser when you hit the url.

Mobile App Usage & Download’s

Most Popular Type of Apps

Mobile App Development Phases

A mobile app development life cycle usually consists of the following phases:

1. The Discovery Phase2. The Design Phase3. The Development & Testing Phase4. Maintenance & Updates Phase

1. The Discover PhaseTasks Requirements analysis System definition Prototyping

Benefits Framework driven requirement specification Get it right the first time by prototyping your project Improve usability and user buy-in by letting them use the prototyped 

system Manage user/customer expectations Manage IT staff expectations More accurate size and cost estimate 

2. The Design PhaseTasks System design Database design Business Process Integration design

Benefits Choice of deployment platform Choice of Application Interface Choice of user interface (browser, Windows rich-client or portable 

devices) Centralized/reusable business rules Centralized/reusable business processes Normalized database design Framework driven design process Reuse/integration of existing data and functions and systems

3. The Development & Testing PhaseTasks Develop system Business Process Integration User acceptance testing System and performance testing Implementation/deploymentBenefit One integrated suite of development tools Lower skill requirements Multi skilling Downplay/hide technology focus Easy-to-learn and master Task and change control tracking

4. Maintenance & Updates Phase

Tasks Ongoing system maintenance Extend and enhance functionality

Benefits Centralized/reusable business rules Centralized/reusable business processes Repository based impact analysis

Software’s Used to Develop Mobile Application’s

• Appery.io• Phonegap• Mobile Roadie• TheAppBuilder• Good Barber• Appy Pie• AppMachine• GameSalad• BiznessApps

Let’s make an app!

http://www.github.com/claytical/magic8

Getting Started

• You need whatever IDE and SDK you would normally need.– iOS requires Xcode and the iOS SDK (

https://developer.apple.com/)– Android requires Eclipse and the Android SDK (

http://developer.android.com/sdk)

Look and Feel

• jQuery Mobile– http://jquerymobile.com

• Dojo– http://dojotoolkit.org

• Sencha Touch– http://www.sencha.com/products/touch

• iUI– http://www.iui-js.org/

 Getting Started

• Download the latest build– http://cordova.apache.org/#download

• Extract the zip file to wherever you want it• Extract the zip file inside the zip file 

corresponding to the device you’re targeting

Unzipped iOS

Create the Project in Terminal

• For iOS, run:– bin/create <ProjectDirectory> <Namespace> 

<ProjectName>

– bin/create “/Users/clay/Documents/CordovaExample” com.example.magic_8 Magic8

What the Command Creates

Our focus:

A Little HTML <h1>Magic 8 Ball</h1>            <div id="asking">           

 <textarea id="question" name="question" class="full" placeholder="To what question do you seek the answer to?"></textarea>            

<button id="ask" class="gradient-button purple full">Ask</button>            </div>                        <div id="answering" style="display:none">

                <div id="answer"></div>

                <button id="askagain" class="gradient-button purple full">Ask Again</button>                <button id="newquestion" class="gradient-button purple full">New Q</button>                <button id="share" class="gradient-button purple full">Share Results</button>                <button id="tweet" class="gradient-button purple full">Tweet Results</button>

            </div>

Some CSS3 for Buttons.gradient-button {

display: inline-block;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 15px/100% Arial, Helvetica, sans-serif;padding: .5em 2em .55em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em; border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);

}

.gradient-button:active {position: relative;top: 1px;

}

Make a Purple Button.purple {

color: #fef4e9;border: solid 1px #551A8B;background: #8A2BE2;background: -webkit-gradient(linear, left top, left bottom, 

from(#8A2BE2), to(#551A8B));}

.purple:active {color: #fef4e9;background: -webkit-gradient(linear, left top, left bottom, 

from(#551A8B), to(#694489));}

The JavaScript

• Clean up index.js– It has some extra stuff we don’t need

• Add zepto.js for easy manipulation– You can use whatever framework you like

• Add social.js for our Social Framework Plugin– This is iOS specific

Some More JavaScriptvar answers = ['It is certain', 'It is decidedly so', 'Without a doubt', 'Yes – definitely', 'You may rely on it', 'As I see it, yes', 'Most likely’];                        function getAnswer() {                $('#asking').hide();                $('#answering').show();                var selectedResponse = Math.floor((Math.random()*20));                $('#answer').text(answers[selectedResponse]);            }                        function newQuestion() {                $('#question').val("");                $('#asking').show();                $('#answering').hide();                            }

Use the Plugin with JavaScriptfunction fbResults() {                var qa = $('#question').val() + " " + $('#answer').text() + " #magic8";                SocialFrameworkPlugin.postToFacebook( shareSuccess, shareError, qa);                 }            function shareSuccess() {      console.log("Sharing Successful"); }

function shareError() {      console.log("Error sharing");}

Icons and Splash Screens

And Build.