Widget for Android on JavaScript in 15 minutes on the example of Habra-Karma
Immediately I say karmavidzhet is not at all the main purpose of the article. In this article, I want to introduce to the general public a way to quickly create information widgets for Android using JavaScript, just using the example of karma and habr rating. The widget will look something like this:
The widget will be a plug-in for the AnyBalance program (Android), the main idea of ​​which is to collect a common base of methods for extracting balances and other parameters from personal accounts of various providers, for example, balances on cell phones, Internet providers, etc. These plug-ins (we will call them “providers”) are written in JavaScript and are open source . Now AnyBalance base contains about 80 providers , but is constantly expanding. And Habrahabr there will not be superfluous :)
So, in order to extract the necessary settings from the Habracenter page, for example, mine , you need to look at how they lie there. We see:
')
Since we are armed with regular expressions, it will not be possible to extract the necessary data. Thus, it remains to understand how AnyBalance can help us with this.
AnyBalance provides an API in which the plug-in interacts with the program. AnyBalance tells the plugin to get data by calling its main () function, and passing it user settings, and it requests pages from the Internet (GET and POST methods are supported), extracts data from them and returns them to the program. To retrieve Habrakarma we need a GET request for HabraCenter. the specified user ( AnyBalance.requestGet ) and the transfer of the extracted values ​​to the program ( AnyBalance.setResult ).
AnyBalance itself does the rest, that is, it displays this information on widgets, requests updates of the data on a schedule, builds graphs and keeps statistics. With its help, it is possible to drive the monitoring of all accounts used in a family into a mobile phone.
So, the code for extracting karma and other parameters will look like this:
Everything is pretty straightforward. In order not to overload the reader with unnecessary technical details, I will not give the source of the getParam function, but you can always look at it in the repository .
So, the code itself is simple and short. It remains to make a couple of decorative things. Namely
The manifest is an xml file. For the described provider, it will look like this:
The settings are also an xml file, the link to it (and other provider files) is present in the manifest. Settings closely overlap with Preferences in Android, but have simplifications. For karmavidzheta need only one setting:
And finally, the icon :) Well, as an icon, you can take the logo of the habr (if, of course, the owners of the resource are not against it).
Everything. Now, each owner of an Android device can constantly monitor his karma, as well as many other parameters for which providers have already been written, on the screen of the phone. The full source code of the provider is of course available in the repository .
Writing the provider, debugging and cutting the icon took me exactly 15 minutes (timed). Of course, I copied an existing provider and just fixed some places, but everyone can do it :) So I think time is fair.
In this article, due to its brevity, the technical side of writing the provider is not described in detail, but anyone who is interested can see the wiki on googlecode. In addition, to write a provider, it is not necessary to use a phone on Android, there is a local provider debugger , which is an extension of Google Chrome and allows even step-by-step debugging.
At the end of the article I urge readers to become writers :) And to expand the base of providers, if your Internet provider, mobile operator, weather website, bank-client is not yet on the general list.
The widget will be a plug-in for the AnyBalance program (Android), the main idea of ​​which is to collect a common base of methods for extracting balances and other parameters from personal accounts of various providers, for example, balances on cell phones, Internet providers, etc. These plug-ins (we will call them “providers”) are written in JavaScript and are open source . Now AnyBalance base contains about 80 providers , but is constantly expanding. And Habrahabr there will not be superfluous :)
So, in order to extract the necessary settings from the Habracenter page, for example, mine , you need to look at how they lie there. We see:
<div class="karma"> <div class="label"></div> <div class="score"> <div class="num">3,0</div> </div> <div class="votes" >3 </div> </div> <div class="rating"> <div class="label"></div> <div class="num">1,5</div> </div> ')
Since we are armed with regular expressions, it will not be possible to extract the necessary data. Thus, it remains to understand how AnyBalance can help us with this.
AnyBalance provides an API in which the plug-in interacts with the program. AnyBalance tells the plugin to get data by calling its main () function, and passing it user settings, and it requests pages from the Internet (GET and POST methods are supported), extracts data from them and returns them to the program. To retrieve Habrakarma we need a GET request for HabraCenter. the specified user ( AnyBalance.requestGet ) and the transfer of the extracted values ​​to the program ( AnyBalance.setResult ).
AnyBalance itself does the rest, that is, it displays this information on widgets, requests updates of the data on a schedule, builds graphs and keeps statistics. With its help, it is possible to drive the monitoring of all accounts used in a family into a mobile phone.
So, the code for extracting karma and other parameters will look like this:
var replaceFloat = [/\s+/g, '', /,/g, '.']; function main(){ // var prefs = AnyBalance.getPreferences(); // var html = AnyBalance.requestGet("http://habrahabr.ru/users/" + prefs.login); //, var error = getParam(html, null, null, /( \(404\))/i); if(error) throw AnyBalance.Error(" " + prefs.login + " . !"); var result = {success: true}; // //getParam , , // , , . getParam(html, result, 'karma', /<div class="score"[^>]*>[\s\S]*?<div class="num"[^>]*>(-?\d[\d\s\.,]*)/i, replaceFloat, parseFloat); getParam(html, result, 'rating', /<div class="rating"[^>]*>[\s\S]*?<div class="num"[^>]*>(-?\d[\d\s\.,]*)/i, replaceFloat, parseFloat); getParam(html, result, 'votes', /<div class="votes"[^>]*>(-?\d[\d\s\.,]*)/i, replaceFloat, parseFloat); result.__tariff = prefs.login; // AnyBalance.setResult(result); } Everything is pretty straightforward. In order not to overload the reader with unnecessary technical details, I will not give the source of the getParam function, but you can always look at it in the repository .
So, the code itself is simple and short. It remains to make a couple of decorative things. Namely
- a manifest in which the names and types of data to be extracted by the provider, the name of the provider, the version and other meta-information will be written.
- settings that must be made for the correct operation of the provider. We need to set the username.
- icon - for beauty.
The manifest is an xml file. For the described provider, it will look like this:
<?xml version="1.0" encoding="utf-8"?> <provider> <id version="1">ab-social-habrahabr</id> <name>Habrahabr</name> <description> , http://habrahabr </description> <author>Dmitry Kochin <dco@mail.ru></author> <files> <!-- , --> <icon>icon.png</icon> <preferences>preferences.xml</preferences> <js>main.js</js> </files> <counters> <!-- (), --> <counter id="karma" name=""/> <counter id="rating" name=""/> <counter id="votes" name=""/> </counters> <keywords> , , habr </keywords> <type> social </type> </provider> The settings are also an xml file, the link to it (and other provider files) is present in the manifest. Settings closely overlap with Preferences in Android, but have simplifications. For karmavidzheta need only one setting:
<?xml version="1.0" encoding="utf-8"?> <PreferenceScreen> <EditTextPreference title="" positiveButtonText="" summary="| |{@s}" dialogTitle="" negativeButtonText="" dialogMessage=" , ." key="login"> </EditTextPreference> </PreferenceScreen> And finally, the icon :) Well, as an icon, you can take the logo of the habr (if, of course, the owners of the resource are not against it).
Everything. Now, each owner of an Android device can constantly monitor his karma, as well as many other parameters for which providers have already been written, on the screen of the phone. The full source code of the provider is of course available in the repository .
Writing the provider, debugging and cutting the icon took me exactly 15 minutes (timed). Of course, I copied an existing provider and just fixed some places, but everyone can do it :) So I think time is fair.
In this article, due to its brevity, the technical side of writing the provider is not described in detail, but anyone who is interested can see the wiki on googlecode. In addition, to write a provider, it is not necessary to use a phone on Android, there is a local provider debugger , which is an extension of Google Chrome and allows even step-by-step debugging.
At the end of the article I urge readers to become writers :) And to expand the base of providers, if your Internet provider, mobile operator, weather website, bank-client is not yet on the general list.
Source: https://habr.com/ru/post/143001/
All Articles