Geekly Articles each Day
📜 ⬆️ ⬇️

We write the client for your favorite site on phoneGap

It happens that there is a site, but using it from a mobile phone is not very convenient and it would be great to have a separate application for it. Fans of web development can easily do this using phoneGap. Under the cat, we will discuss the mail tracking service, which I often use and a demo client written for it with basic functionality: authorization, getting a list of tracks and descriptions to them and the ability to add a new track. I have not contacted the developer about this, and I really hope that he will not be offended by me for impudence, for digging into JavaScript code and for the fact that the application will not show ads. I also ask you to forgive you for the code’s crutchiness and cyclicality, take it as an example.

The article implies that you yourself can figure out how the site works, the information from which will be displayed in the application.
Those who have read the previous article on authorization through some sites already know that phoneGap has a great thing inAppBrowser, which not only opens the site inside the application, but also allows you to inject your JavaScript code into it and change styles that is useful for authorization forms.
On its basis, in the image and similarity of authorization, the following code was written on Habré:
var plugin_www_post_tracker_ru = { wwwref: false, authOk: false, auth: function (force) { if (!window.localStorage.getItem("plugin_www_post_tracker_ru_PHPSESSID") || force) { //        var authURL="http://post-tracker.ru/login.php"; this.wwwref = window.open(encodeURI(authURL), '_blank', 'location=no'); //     this.wwwref.addEventListener('loadstop', this.auth_jsinjection); //        } else { plugin_www_post_tracker_ru.authOk=true; } }, auth_event_url: function (url) { var tmp=url_parser.get_args_cookie(url); //     if (tmp['PHPSESSID'] && tmp['userid'] && tmp['securehash']) { //     ,    plugin_www_post_tracker_ru.wwwref.close(); //       window.localStorage.setItem("plugin_www_post_tracker_ru_PHPSESSID", tmp['PHPSESSID']); window.localStorage.setItem("plugin_www_post_tracker_ru_userid", tmp['userid']); window.localStorage.setItem("plugin_www_post_tracker_ru_securehash", tmp['securehash']); plugin_www_post_tracker_ru.authOk=true;      } }, auth_cssinjection: function(){ plugin_www_post_tracker_ru.wwwref.insertCSS({code:".topline {display:none} .top {display:none} .logo {display:none} .menu {display:none} .counters {display:none} .bottom {display:none} .links {display:none} @-viewport {width: device-width; zoom: 1;"},function(){}); }, auth_jsinjection: function () { plugin_www_post_tracker_ru.auth_cssinjection(); //  CSS    ,     plugin_www_post_tracker_ru.wwwref.executeScript({ // JS     code: "document.cookie;" }, function(arg) { plugin_www_post_tracker_ru.auth_event_url(arg); }); } }


To get the content, we will use a small AJAX library capable of making POST and GET requests, which can insert a cookie and give the result to the callback function (the base is taken from miniajax ):
AJAX
 var ajax = { init: function(){ return new XMLHttpRequest(); }, send: function(url,method,args,cookies,async,_callback){ var q=ajax.init(); q.open(method,url,async); q.onreadystatechange=function(){ if(this.readyState==4 && this.status==200) { _callback(this.responseText); } }; if (cookies) { q.setRequestHeader('Cookie',cookies); } if(method=='POST') { q.setRequestHeader('Content-type','application/x-www-form-urlencoded'); q.send(args); } else { q.send(null); } } }

To get the content, make a GET request for a post-tracker.ru/my/ page, if in the response in one of the blocks we meet the line , we are clearly logged out and you will have to go through the procedure again:
  get_content: function (async) { //        var cookies="PHPSESSID="+window.localStorage.getItem("plugin_www_post_tracker_ru_PHPSESSID")+"; userid="+window.localStorage.getItem("plugin_www_post_tracker_ru_userid")+"; securehash="+window.localStorage.getItem("plugin_www_post_tracker_ru_securehash"); //  cookie plugin_www_post_tracker_ru.dataReady=false; ajax.send("http://post-tracker.ru/my/",'GET',null,cookies,async,this._parse_content); //  ajax        }, _parse_content: function (data) { var wrapper=document.createElement('div'); //  html   ,      wrapper.innerHTML=data; plugin_www_post_tracker_ru._get_inside_data(wrapper,'trackcode,date,status,comment'); //        ,   ,     }, _get_inside_data: function (wrapper,types) { var tmp=wrapper.getElementsByClassName('login')[0].innerHTML; //      div  login if (tmp=='<a href="/login.php"></a>  <a href="/register.php"></a>') { //   ,    plugin_www_post_tracker_ru.auth(true); } else { //    plugin_www_post_tracker_ru.default_folder=wrapper.getElementsByTagName('input')[0].value; //  ID    ,           var types=types.split(","); for (var typeid in types) { //  html-      var tmp=wrapper.getElementsByClassName(types[typeid]); var id=0; for (var i in tmp) { if (tmp[i].innerHTML) { if (!plugin_www_post_tracker_ru.postdata[id]) plugin_www_post_tracker_ru.postdata[id]=new Array(); plugin_www_post_tracker_ru.postdata[id][(types[typeid])]=tmp[i].innerHTML.replace(/(\r\n|\n|\r)/gm,"").replace(/<\/?[^>]+>/gmi,"").replace(/^\s+|\s+$/gm,""); //       , html       id++; } } } plugin_www_post_tracker_ru.dataReady=true; show_list(); //       } }, get_list: function () { //     show_list()  ""  var tmp=new Array(); for (var i in plugin_www_post_tracker_ru.postdata) { tmp[i]="<b>"+plugin_www_post_tracker_ru.postdata[i]['trackcode']+"</b> "+plugin_www_post_tracker_ru.postdata[i]['comment']+"<br/>"+plugin_www_post_tracker_ru.postdata[i]['date']+" "+plugin_www_post_tracker_ru.postdata[i]['status']; } return tmp; }


show_list() in this code will add blocks with a prepared html-inside of the div with the scroller (by the way, I recommend Overthrow and highly recommend iscroll-4 because of the terrible speed).
')
It is time to add the ability to send new codes for tracking, but first add the action to the MENU button of your Android smartphone. This is done using the menubutton event . To which we will link the appearance of the block with the button "Add track code", which, when pressed, will begin the process.
  put_trackCode: function(){ //         "  " var trackCode = prompt("  "); //      if (trackCode) { this._put_trackCode_getPath(trackCode); //        (    ),        if (plugin_www_post_tracker_ru.default_path) { //   ,   var comment = prompt(""); if (comment) { this._put_trackCode(trackCode,comment); //       } } else { alert("   "); } } else { menuButtonHide(); //     ,        } }, _put_trackCode_getPath: function (trackCode) { //   var cookies="PHPSESSID="+window.localStorage.getItem("plugin_www_post_tracker_ru_PHPSESSID")+"; userid="+window.localStorage.getItem("plugin_www_post_tracker_ru_userid")+"; securehash="+window.localStorage.getItem("plugin_www_post_tracker_ru_securehash"); var data="act=getPathForm&trackcode="+encodeURIComponent(trackCode); ajax.send("http://post-tracker.ru/ajax/userTrackcodes.php",'POST',data,cookies,false,this._put_trackCode_getPath_result); }, _put_trackCode_getPath_result: function (data){ var wrapper=document.createElement('div'); //  ,   html wrapper.innerHTML=data; var tmp=wrapper.getElementsByTagName('input'); //      input if (tmp.length>0) { plugin_www_post_tracker_ru.default_path=tmp[0].value; //  ,        }else{ plugin_www_post_tracker_ru.default_path=false; } }, _put_trackCode: function (trackCode,comment){ //       ,    var cookies="PHPSESSID="+window.localStorage.getItem("plugin_www_post_tracker_ru_PHPSESSID")+"; userid="+window.localStorage.getItem("plugin_www_post_tracker_ru_userid")+"; securehash="+window.localStorage.getItem("plugin_www_post_tracker_ru_securehash"); var data="act=addTrackcodeAction&folderid="+plugin_www_post_tracker_ru.default_folder+"&trackcode="+encodeURIComponent(trackCode)+"&path="+plugin_www_post_tracker_ru.default_path+"&comment="+encodeURIComponent(comment); ajax.send("http://post-tracker.ru/ajax/userTrackcodes.php",'POST',data,cookies,false,this._put_trackCode_result); }, _put_trackCode_result: function(data){ //   menuButtonHide(); //   plugin_www_post_tracker_ru.get_content(true); //         } folderid =" + plugin_www_post_tracker_ru.default_folder + "& trackcode =" + encodeURIComponent (trackCode) + "& path =" + plugin_www_post_tracker_ru.default_path + "& comment =" + encodeURIComponent (comment);  put_trackCode: function(){ //         "  " var trackCode = prompt("  "); //      if (trackCode) { this._put_trackCode_getPath(trackCode); //        (    ),        if (plugin_www_post_tracker_ru.default_path) { //   ,   var comment = prompt(""); if (comment) { this._put_trackCode(trackCode,comment); //       } } else { alert("   "); } } else { menuButtonHide(); //     ,        } }, _put_trackCode_getPath: function (trackCode) { //   var cookies="PHPSESSID="+window.localStorage.getItem("plugin_www_post_tracker_ru_PHPSESSID")+"; userid="+window.localStorage.getItem("plugin_www_post_tracker_ru_userid")+"; securehash="+window.localStorage.getItem("plugin_www_post_tracker_ru_securehash"); var data="act=getPathForm&trackcode="+encodeURIComponent(trackCode); ajax.send("http://post-tracker.ru/ajax/userTrackcodes.php",'POST',data,cookies,false,this._put_trackCode_getPath_result); }, _put_trackCode_getPath_result: function (data){ var wrapper=document.createElement('div'); //  ,   html wrapper.innerHTML=data; var tmp=wrapper.getElementsByTagName('input'); //      input if (tmp.length>0) { plugin_www_post_tracker_ru.default_path=tmp[0].value; //  ,        }else{ plugin_www_post_tracker_ru.default_path=false; } }, _put_trackCode: function (trackCode,comment){ //       ,    var cookies="PHPSESSID="+window.localStorage.getItem("plugin_www_post_tracker_ru_PHPSESSID")+"; userid="+window.localStorage.getItem("plugin_www_post_tracker_ru_userid")+"; securehash="+window.localStorage.getItem("plugin_www_post_tracker_ru_securehash"); var data="act=addTrackcodeAction&folderid="+plugin_www_post_tracker_ru.default_folder+"&trackcode="+encodeURIComponent(trackCode)+"&path="+plugin_www_post_tracker_ru.default_path+"&comment="+encodeURIComponent(comment); ajax.send("http://post-tracker.ru/ajax/userTrackcodes.php",'POST',data,cookies,false,this._put_trackCode_result); }, _put_trackCode_result: function(data){ //   menuButtonHide(); //   plugin_www_post_tracker_ru.get_content(true); //         }


What else could be added to the application to practice with phoneGap? First of all, localization does not hurt, so that the text is not stored in the code and only the Russian language is not displayed for different countries. It also does not hurt to work out some states , for example, the loss of an Internet connection or clicking on the “back” button .
In terms of the tracking service itself, it would be worthwhile to add an advertisement containing a resource, as well as to increase the functionality by adding folder creation, automatic checking with alerts and a whistle sound effects .

The source code of the project and the assembled application for tests and experiments of interested parties. As well as a githab for less dull forks github.com/SovGVD/PhoneGap-post-tracker.ru

Source: https://habr.com/ru/post/181610/

More articles:


All Articles