Mobile Application Development
A mobile application is
software application de
signed to run-
on smartphones,
tablet computers and
other mobile devices.
...
1. Browser Access :- The applications which
we are accessing through native browser.
Ex : www.yahoo.com, www.google.com,
m...
3. Hybrid Apps – Mixed :-
We are installing the
application in our device
and if required we are
connecting it to internet...
Native Apps- Which can be installed
in the devices and the app does not
need any data transfer to the server.
With out net...
Mobile Web applications.- They
can be called as Mobile browser
apps as these are not installed in
the device. these can be...
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 Discove...
1. The Discover Phase
Tasks
 Requirements analysis
 System definition
 Prototyping
Benefits
 Framework driven requirem...
2. The Design Phase
Tasks
 System design
 Database design
 Business Process Integration design
Benefits
 Choice of dep...
3. The Development & Testing
Phase
Tasks
 Develop system
 Business Process Integration
 User acceptance testing
 Syste...
4. Maintenance & Updates Phase
Tasks
 Ongoing system maintenance
 Extend and enhance functionality
Benefits
 Centralize...
Software’s Used to Develop
Mobile Application’s
• Appery.io
• Phonegap
• Mobile Roadie
• TheAppBuilder
• Good Barber
• App...
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://dev...
Look and Feel
• jQuery Mobile
– http://jquerymobile.com
• Dojo
– http://dojotoolkit.org
• Sencha Touch
– http://www.sencha...
Getting Started
• Download the latest build
– http://cordova.apache.org/#download
• Extract the zip file to wherever you w...
Unzipped iOS
Create the Project in Terminal
• For iOS, run:
– bin/create <ProjectDirectory> <Namespace>
<ProjectName>
– bin/create
“/Us...
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...
Some CSS3 for Buttons
.gradient-button {
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-d...
Make a Purple Button
.purple {
color: #fef4e9;
border: solid 1px #551A8B;
background: #8A2BE2;
background: -webkit-gradien...
The JavaScript
• Clean up index.js
– It has some extra stuff we don’t need
• Add zepto.js for easy manipulation
– You can ...
Some More JavaScript
var answers = ['It is certain', 'It is decidedly so', 'Without a doubt', 'Yes – definitely',
'You may...
Use the Plugin with JavaScript
function fbResults() {
var qa = $('#question').val() + " " + $('#answer').text() + " #magic...
Icons and Splash Screens
And Build.
Mobile Application Development
Mobile Application Development
Upcoming SlideShare
Loading in...5
×

Mobile Application Development

413

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
413
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
26
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • IdE- An integrated development environment (IDE) or interactive development environment is a software application that provides comprehensive facilities to computer programmers for software development. An IDE normally consists of a source code editor, build automation tools and a debugger. Most modern IDEs offer Intelligent code completion features.SDk- A software development kit (SDK or &quot;devkit&quot;) is typically a set of software development tools that allows for the creation of applications for a certain software package, software framework, hardware platform, computer system, video game console, operating system, or similar development platform.
  • Mobile Application Development

    1. 1. Mobile Application Development
    2. 2. A mobile application is software application de signed 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.
    3. 3. 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.
    4. 4. 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.
    5. 5. 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.
    6. 6. 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.
    7. 7. Mobile App Usage & Download’s
    8. 8. Most Popular Type of Apps
    9. 9. Mobile App Development Phases A mobile app development life cycle usually consists of the following phases: 1. The Discovery Phase 2. The Design Phase 3. The Development & Testing Phase 4. Maintenance & Updates Phase
    10. 10. 1. The Discover Phase Tasks  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
    11. 11. 2. The Design Phase Tasks  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
    12. 12. 3. The Development & Testing Phase Tasks  Develop system  Business Process Integration  User acceptance testing  System and performance testing  Implementation/deployment Benefit  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
    13. 13. 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
    14. 14. Software’s Used to Develop Mobile Application’s • Appery.io • Phonegap • Mobile Roadie • TheAppBuilder • Good Barber • Appy Pie • AppMachine • GameSalad • BiznessApps
    15. 15. Let’s make an app! http://www.github.com/claytical/magic8
    16. 16. 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)
    17. 17. 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/
    18. 18. 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
    19. 19. Unzipped iOS
    20. 20. Create the Project in Terminal • For iOS, run: – bin/create <ProjectDirectory> <Namespace> <ProjectName> – bin/create “/Users/clay/Documents/CordovaExample” com.example.magic_8 Magic8
    21. 21. What the Command Creates Our focus:
    22. 22. 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>
    23. 23. 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; }
    24. 24. 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)); }
    25. 25. 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
    26. 26. Some More JavaScript var 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(); }
    27. 27. Use the Plugin with JavaScript function 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"); }
    28. 28. Icons and Splash Screens
    29. 29. And Build.
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×