Create a web application for GNOME 3
Hi% username%!
You may have heard that in the GNOME 3.2 GUI, you can run web applications.
In this topic, we will consider a simple application “HabraHabr Spy 1.0”, which will give the user information about habravchana. We will use the standard API for this.
')
To begin, consider the process of adding a web page as an application.
In general, a web application is a regular web page that appears as a program in the menu and opens in a separate window.
To save the page as an application, we need the Epiphany web browser version 3.2 or higher, which is standard for the GNOME web browser, but in the repositories of my beloved Ubuntu there was only 3.0.
Therefore, we copy the following code to the terminal:
If you use another distribution, be sure to check what version it is worth.
Now that Epipnany is installed, open the web page we need and click File -> Save As Web Application .
After that, a dialog appears in which we are asked to enter the name of the application. The default is the title of the page.
As for the icon, it is taken from the page's apple-touch-icon tag. If it is not there, then Epiphany takes a screenshot of the page and uses it.
So let's start by writing the application itself. We write it in the same way as a regular web page.
Below is the HTML code of the main and only page that will be given to the user:
Save the page on the server and start writing JavaScript.
In order to get information about the user, you need to make a request to habrahabr.ru/api/profile/login and get information about the user.
However, the first problem immediately arises - the browser will not allow us to make AJAX a request for another domain.
The solution "in the forehead" - we put on our domain a special script that will request the desired page.
PHP version:
Now at the request of api.php? User = login, we get the same, as at the request of habrahabr.ru/api/profile/login .
This will increase the load on your server. In addition, each request will take quite a lot of time (up to a few seconds), so be sure to notify the user that the program works, and does not hang.
For example:
And now, actually, JavaScript.
Everything! Now we finish a little.
Draw an icon. I used the png format to achieve transparency:
Save everything as a web application. As described earlier, open the Epiphany page and press Ctrl + Shift + A.
A dialog will appear:
Click "Create" . Everything! In confirmation of your actions, a notification will appear:
You can find the same application in the “Other” section of the main menu:
Do not forget about error handling:
UPD: I know about a typo in the screenshot below. In the code corrected.
Everything!
You may have heard that in the GNOME 3.2 GUI, you can run web applications.
In this topic, we will consider a simple application “HabraHabr Spy 1.0”, which will give the user information about habravchana. We will use the standard API for this.
')
To begin, consider the process of adding a web page as an application.
In general, a web application is a regular web page that appears as a program in the menu and opens in a separate window.
To save the page as an application, we need the Epiphany web browser version 3.2 or higher, which is standard for the GNOME web browser, but in the repositories of my beloved Ubuntu there was only 3.0.
Therefore, we copy the following code to the terminal:
sudo add-apt-repository ppa:webupd8team/gnome3 sudo apt-get update sudo apt-get install epiphany-browser If you use another distribution, be sure to check what version it is worth.
Now that Epipnany is installed, open the web page we need and click File -> Save As Web Application .
After that, a dialog appears in which we are asked to enter the name of the application. The default is the title of the page.
As for the icon, it is taken from the page's apple-touch-icon tag. If it is not there, then Epiphany takes a screenshot of the page and uses it.
Write the code
So let's start by writing the application itself. We write it in the same way as a regular web page.
Below is the HTML code of the main and only page that will be given to the user:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- : --> <title> 1.0</title> <link rel="stylesheet" href="style.css" type="text/css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="script.js"></script> <!-- : --> <link rel="apple-touch-icon" href="icon.png"/> </head> <body> <!-- HTML - --> <div id="logo"></div> <div id="welcome"> () :</div> <div id="form"> <input type="text" id="login" /> <input type="button" id="go" value="!" /> </div> <table id="result"> <tr> <td class="gray"> :</td> <td id="name"></td> </tr> <tr> <td class="gray">:</td> <td id="karma"></td> </tr> <tr> <td class="gray">:</td> <td id="rating"></td> </tr> <tr> <td class="gray">:</td> <td id="ratingPosition"></td> </tr> </table> <div id="footer"> kafeman</div> </body> </html> Save the page on the server and start writing JavaScript.
In order to get information about the user, you need to make a request to habrahabr.ru/api/profile/login and get information about the user.
However, the first problem immediately arises - the browser will not allow us to make AJAX a request for another domain.
The solution "in the forehead" - we put on our domain a special script that will request the desired page.
PHP version:
<?php header('Content-type: application/xml'); /* $_GET['user'] , */ $url = 'http://habrahabr.ru/api/profile/'.$_GET['user'].'/'; $handle = fopen($url, "r"); if ($handle) { while (!feof($handle)) { $buffer = fgets($handle, 4096); echo $buffer; } fclose($handle); } ?> Now at the request of api.php? User = login, we get the same, as at the request of habrahabr.ru/api/profile/login .
This will increase the load on your server. In addition, each request will take quite a lot of time (up to a few seconds), so be sure to notify the user that the program works, and does not hang.
For example:
And now, actually, JavaScript.
$(document).ready(function() { $('#go').click(function() { /* , ... */ $('title').text(' ...'); $.ajax({ url: 'api.php?user=' + $('#login').val(), dataType: 'xml', success: function(habr) { /* , */ if ($(habr).find('error').text() == '404') alert(' !\n, , .'); $('#name').html( $(habr).find('login').text() ); $('#karma').html( $(habr).find('karma').text() ); $('#rating').html( $(habr).find('rating').text() ); $('#ratingPosition').html( $(habr).find('ratingPosition').text() ); /* */ $('title').text(' 1.0'); } }); }); }); Everything! Now we finish a little.
Draw an icon. I used the png format to achieve transparency:
Save everything as a web application. As described earlier, open the Epiphany page and press Ctrl + Shift + A.
A dialog will appear:
Click "Create" . Everything! In confirmation of your actions, a notification will appear:
You can find the same application in the “Other” section of the main menu:
Do not forget about error handling:
UPD: I know about a typo in the screenshot below. In the code corrected.
Everything!
Source: https://habr.com/ru/post/134118/
All Articles