मोबाइल वेब डेवलपमेंट: एचटीएमएल 5 एंड्रॉइड ऐप

चरण 1 - प्रोटोटाइप

चरण 2 - लेआउट

चरण 3 - एक रूपरेखा चुनें

चरण 4 - लेआउट

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> 

 input:focus { outline: 0 none; } textarea:focus { outline: 0 none; } .Button:focus { outline: 0 none; } 

 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> 

  .Header { background-color: white; background-image: none; border: none; text-shadow: none; border-bottom: white solid 3px; font-weight: bold; position: fixed; width: 100%; height: 62px; top: 0; left: 0; z-index: 100 } 

चरण 5 - एमुलेटर

चरण 6 - प्रोग्रामिंग

 var App = { Init: function() { this.model = new Model(this.url); this.view = new View(); this.controller = new Controller({ model: this.model, view: this.view }); return this; }, Run: function(task, params) { if (typeof task == 'undefined') { this.controller.Login(); } else if (typeof this.controller[task] == 'undefined') { this.controller.Login(); } else { this.controller[task](params); } return this; }, Done: function() { return this; } } $(document).ready(function() { App.Init(); App.Run(); App.Done(); }); 

 var Controller = function(params) { this.view = params.view; this.model = params.model; } Controller.prototype = { Login: function() { this.view.Login(); }, LoginSubmit: function() { var that = this, value = this.model.GetLoginFormValue(), errors = this.model.GetLoginFormErrors(); if (errors !== false) { this.view.Login(value, errors); } else { this.model.SendToServer('teamLogin', value, function(err, data) { if (!err) { that.model.SetTeam(data); that.model.ListenServer(data.lastMessageId); that.Welcome(); } else { that.view.ShowPopup('error', data) } }); } }, Welcome: function() { var that = this; this.model.GetWelcomeContent(function(err, data) { if (!err) { that.view.Welcome(data); } else { that.view.ShowPopup('error', data); } }); } 

 var Model = function(url) { this.url = url; } Model.prototype = { GetHelpChat: function(callback) { var url = 'helpChat?team='+this.team.teamId+'&hash='+this.team.hash; this.ReciveFromServer(url, function(err, data) { if (err) { callback(true, data); } else { callback(false, data); } }); }, 

 var View = function() { this.page = $('.Page'); } View.prototype = { TaskIndex: function(status, time, tasks) { var num = Util.GetRndNumber(); this.Show( Html.Header( Html.IconPanel(status), Html.TimePanel(time) ), Html.Content( Html.TaskPanel(tasks) ), Html.Footer( Html.ButtonPanelBottom('task') ) ); setInterval(Timer.Total, 1000); setInterval(Timer.Current, 1000); Util.SetScrollToTop(); }, 

 navigator.camera.getPicture(OnSuccess, OnFail, { quality: 75, allowEdit: true, targetWidth: 280, targetHeight: 280, destinationType: destinationType.DATA_URL }); 

 var xhr = new XMLHttpRequest(); xhr.open('POST', url, true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.onload = function(e) { if (this.readyState == 4) { if (this.status == 200) { var r = JSON.parse(this.responseText); if (r.success) { callback(false, r.data); } else { callback(true, r.message); } } else { that.view.ShowPopupWindow('Error', msg.ERROR_CONNECTION); } } } 

चरण 7 - डिबगिंग

 JSCallback Error: Request failed with status 0 at :1180915830 

 function startXhr() { // cordova/exec depends on this module, so we can't require cordova/exec on the module level. var exec = require('cordova/exec'), xmlhttp = new XMLHttpRequest(); // Callback function when XMLHttpRequest is ready xmlhttp.onreadystatechange=function(){ if (!xmlhttp) { return; } if (xmlhttp.readyState === 4){ // If callback has JavaScript statement to execute if (xmlhttp.status === 200) { // Need to url decode the response var msg = decodeURIComponent(xmlhttp.responseText); setTimeout(function() { try { var t = eval(msg); } catch (e) { // If we're getting an error here, seeing the message will help in debugging console.log("JSCallback: Message from Server: " + msg); console.log("JSCallback Error: "+e); } }, 1); setTimeout(startXhr, 1); } // If callback ping (used to keep XHR request from timing out) else if (xmlhttp.status === 404) { setTimeout(startXhr, 10); } // 0 == Page is unloading. // 400 == Bad request. // 403 == invalid token. // 503 == server stopped. else { console.log("JSCallback Error: Request failed with status " + xmlhttp.status); exec.setNativeToJsBridgeMode(exec.nativeToJsModes.POLLING); } } }; 

 var Util = { SetNewHash: function(hash) { /** *     Android 2.3!! */ //location.href = 'http://'+location.host+location.pathname+'#'+hash; }, 

चरण 8 - भागो