🤳🏻 👨‍🏫 🐚 गनोम 3 के लिए एक वेब अनुप्रयोग का निर्माण 👨🏽‍✈️ 👶🏿 🏖️

हाय% उपयोगकर्ता नाम%!

आपने सुना होगा कि GNOME 3.2 ग्राफिकल शेल में वेब एप्लिकेशन चलाने की क्षमता है।
इस विषय में, हम एक सरल अनुप्रयोग "हैब्राहैब जासूस 1.0" पर विचार करेंगे, जो उपयोगकर्ता को हैबरवचन के बारे में जानकारी देगा। हम इसके लिए मानक API का उपयोग करेंगे।

आरंभ करने के लिए, एक वेब पेज को एक एप्लिकेशन के रूप में जोड़ने की प्रक्रिया पर विचार करें।

सामान्य तौर पर, एक वेब एप्लिकेशन एक नियमित वेब पेज होता है जो मेनू में प्रोग्राम के रूप में दिखाई देता है और एक अलग विंडो में खुलता है।

पेज को एक एप्लिकेशन के रूप में सहेजने के लिए, हमें मानक GNOME वेब ब्राउज़र एपिफेनी संस्करण की आवश्यकता है जो 3.2 से कम नहीं है, हालाँकि, केवल 3.0 मेरे पसंदीदा उबंटू के रिपॉजिटरी में था।

इसलिए, टर्मिनल पर निम्नलिखित कोड की प्रतिलिपि बनाएँ:

sudo add-apt-repository ppa:webupd8team/gnome3 sudo apt-get update sudo apt-get install epiphany-browser

यदि आप एक अलग वितरण का उपयोग कर रहे हैं, तो यह देखना सुनिश्चित करें कि यह किस संस्करण में है।

अब जब एपीपनी स्थापित हो गया है, तो हमें जिस वेब पेज की आवश्यकता है उसे खोलें और फ़ाइल -> वेब एप्लिकेशन के रूप में सहेजें पर क्लिक करें ।

उसके बाद, एक संवाद प्रकट होता है जिसमें हमें एप्लिकेशन का नाम दर्ज करने के लिए कहा जाता है। डिफ़ॉल्ट रूप से, यह पृष्ठ शीर्षक है।

आइकन के लिए, यह पृष्ठ के ऐप्पल-टच-आइकन टैग से लिया गया है। यदि यह नहीं है, तो एपिफेनी पृष्ठ का स्क्रीनशॉट लेता है और इसका उपयोग करता है।

एक कोड लिखना

तो, चलो एप्लिकेशन को स्वयं लिखकर शुरू करें। हम इसे एक नियमित वेब पेज के रूप में लिखते हैं।

नीचे मुख्य और एकमात्र पृष्ठ का HTML कोड है जो उपयोगकर्ता को दिया जाएगा:

 <!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>

हम सर्वर पर पेज को सहेजते हैं और जावास्क्रिप्ट लिखना शुरू करते हैं।

उपयोगकर्ता के बारे में जानकारी प्राप्त करने के लिए, आपको habrahabr.ru/api/profile/login से अनुरोध करने और उपयोगकर्ता के बारे में डेटा प्राप्त करने की आवश्यकता है।

हालांकि, पहली समस्या तुरंत उठती है - ब्राउज़र हमें किसी अन्य डोमेन के लिए एक AJAX अनुरोध करने की अनुमति नहीं देगा।

समाधान "माथे में" - हम अपने डोमेन पर एक विशेष स्क्रिप्ट डालते हैं जो वांछित पृष्ठ का अनुरोध करेगा।

PHP विकल्प:

 <?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); } ?>

अब api.php के लिए? उपयोगकर्ता = लॉगिन, हम habrahabr.ru/api/profile/login के समान प्राप्त करते हैं।

यह आपके सर्वर पर लोड बढ़ाएगा। इसके अलावा, प्रत्येक अनुरोध में बहुत समय (कई सेकंड तक) लगेगा, इसलिए उपयोगकर्ता को सूचित करना सुनिश्चित करें कि कार्यक्रम काम कर रहा है, और लटका नहीं।

उदाहरण के लिए, इस तरह:

और अब, वास्तव में, जावास्क्रिप्ट।

 $(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'); } }); }); });

वह सब है! अब हम थोड़ा फाइनल कर रहे हैं।

हम एक आइकन बनाते हैं। मैंने पारदर्शिता प्राप्त करने के लिए png प्रारूप का उपयोग किया:

हम वेब एप्लिकेशन के रूप में सब कुछ सहेजते हैं। जैसा कि पहले बताया गया है, एपिफनी में पेज खोलें और Ctrl + Shift + A दबाएं।

एक संवाद दिखाई देगा:

"बनाएँ" पर क्लिक करें । वह सब है! आपके कार्यों की पुष्टि में, एक अधिसूचना दिखाई देगी:

आप मुख्य मेनू के "अन्य" अनुभाग में आवेदन पा सकते हैं:

त्रुटि से निपटने के बारे में मत भूलना:

UPD: मुझे नीचे स्क्रीनशॉट में टाइपो के बारे में पता है। मैंने इसे कोड में तय किया।

वह सब है!

गनोम 3 के लिए एक वेब अनुप्रयोग का निर्माण

एक कोड लिखना

More articles: