এইচটিএমএল এবং জেএস-এ আমি কীভাবে উবুন্টু অ্যাপ্লিকেশন বিকাশ করব?


34

আমি একটি অ্যাপ্লিকেশন বিকাশ করছি এবং আমি মনে করি যে এইচটিএমএল এবং জাভাস্ক্রিপ্ট ভবিষ্যতের জন্য আরও ভাল, তবে আমি কোনও টিউটোরিয়াল খুঁজে পাই না (সিস্টেম থিমটি ব্যবহার করার জন্য আমার অ্যাপটি প্রয়োজন) need

Unক্য, বার্তা মেনু এবং বিজ্ঞপ্তি, কাউচডিবি ইত্যাদির জন্য কী বাইন্ডিং রয়েছে?


আপনি অনুরূপ প্রশ্নটি আকর্ষণীয়ও দেখতে পাবেন: Askubuntu.com
ডেভিড প্ল্যানেলা

উত্তর:


24

উবুন্টুতে বাইন্ডিং এবং এপিআই-র জন্য একটি ভাল সূচনা পয়েন্ট বিকাশকারী.বুন্টু.কম এ পাওয়া যাবে । এটির সাথে আমার কোনও অভিজ্ঞতা নেই তবে আপনি সম্ভবত জিন্স, জিনোমের জাভাস্ক্রিপ্ট বাইন্ডিংগুলিও দেখতে চাইবেন

আপনি যা করার চেষ্টা করছেন তার উপর নির্ভর করে আপনি অ্যাপ্লিকেশনটি যে কোনও এইচটিএমএল + জেএস অ্যাপ্লিকেশন হিসাবে তৈরি করতে পারবেন এবং তারপরে এটি একটি ওয়েবকিট দৃশ্যে ফেলে দিতে পারেন। অজগরটি করা অত্যন্ত সহজ:

#!/usr/bin/env python

from gi.repository import Gtk, WebKit
import os, sys

class Browser:
    def __init__(self):
        self.window = Gtk.Window()
        self.window.set_default_size(800, 600)
        view = WebKit.WebView()
        view.load_html_string("<strong>Hello World!</strong>", "file:///")  
        self.window.add(view)

        self.window.show_all()
        self.window.connect('destroy', lambda w: Gtk.main_quit())

def main():
    app = Browser()
    Gtk.main()

if __name__ == "__main__":
    main()

7
জেএসও বাস্তব প্রোগ্রামিং।
ওয়েস লোন

17

আপনি জিটিকি উইন্ডোতে এম্বেড থাকা ওয়েবকিট ফ্রেম ব্যবহার করে ইন্টারফেসের জন্য এইচটিএমএল + জাভাস্ক্রিপ্ট ব্যবহার করে বিকাশ করতে পারেন (পাইথনে এটি করা সবচেয়ে সহজ)। সবচেয়ে শক্তিশালী অংশটি আপনার এইচটিএমএল / জাভাস্ক্রিপ্ট অ্যাপ্লিকেশন থেকে সিস্টেমের সাথে যোগাযোগ করছে।

জাভাস্ক্রিপ্ট এবং পাইথনের মধ্যে বার্তা পাঠিয়ে আপনি এটি করতে পারেন। পাইথন ফাংশন হিসাবে আপনাকে সিস্টেম যুক্তিকে লিখতে হবে তবে এটি করা খুব সহজ।

পাইথন এবং জাভাস্ক্রিপ্টের মধ্যে যোগাযোগের একটি সাধারণ উদাহরণ এখানে is উদাহরণস্বরূপ, এইচটিএমএল / জাভাস্ক্রিপ্ট একটি বোতাম প্রদর্শন করে, যখন ক্লিক করা হলে ["hello", "world"]পাইথনে একটি অ্যারে প্রেরণ করা হয় যা অ্যারের সাথে একটি স্ট্রিং "হ্যালো ওয়ার্ল্ড" এ যোগ হয় এবং এটি জাভাস্ক্রিপ্টে ফেরত প্রেরণ করে। পাইথন কোডটি কনসলে অ্যারের উপস্থাপনা মুদ্রণ করে এবং জাভাস্ক্রিপ্ট কোড একটি সতর্কতা বাক্স পপ করে যা স্ট্রিংটি প্রদর্শন করে।

example.py

import gtk
import webkit
import json
import os

JAVASCRIPT = """
var _callbacks = {};
function trigger (message, data) {
    if (typeof(_callbacks[message]) !== "undefined") {
        var i = 0;
        while (i < _callbacks[message].length) {
            _callbacks[message][i](data);
            i += 1;
        }
    }
}
function send (message, data) {
    document.title = ":";
    document.title = message + ":" + JSON.stringify(data);
}
function listen (message, callback) {
    if (typeof(_callbacks[message]) === "undefined") {
        _callbacks[message] = [callback];
    } else {
        _callbacks[message].push(callback);
    }
}
"""

class HTMLFrame(gtk.ScrolledWindow):
    def __init__(self):
        super(HTMLFrame, self).__init__()
        self._callbacks = {}
        self.show()
        self.webview = webkit.WebView()
        self.webview.show()
        self.add(self.webview)
        self.webview.connect('title-changed', self.on_title_changed)

    def open_url(self, url):
        self.webview.open(url);
        self.webview.execute_script(JAVASCRIPT)

    def open_path(self, path):
        self.open_url("file://" + os.path.abspath(path))

    def send(self, message, data):
        self.webview.execute_script(
            "trigger(%s, %s);" % (
                json.dumps(message),
                json.dumps(data)
            )
        )

    def listen(self, message, callback):
        if self._callbacks.has_key(message):
            self._callbacks[message].append(callback)
        else:
            self._callbacks[message] = [callback]

    def trigger(self, message, data, *a):
        if self._callbacks.has_key(message):
            for callback in self._callbacks[message]:
                callback(data)

    def on_title_changed(self, w, f, title):
        t = title.split(":")
        message = t[0]
        if not message == "":
            data = json.loads(":".join(t[1:]))
            self.trigger(message, data)

def output(data):
    print(repr(data))    

if __name__ == "__main__":
    window = gtk.Window()
    window.resize(800, 600)
    window.set_title("Python Gtk + WebKit App")
    frame = HTMLFrame()
    frame.open_path("page.html")
    def reply(data):
        frame.send("alert", " ".join(data))
    frame.listen("button-clicked", output)
    frame.listen("button-clicked", reply)
    window.add(frame)
    window.show_all()
    window.connect("destroy", gtk.main_quit)
    gtk.main()

page.html

<html>
<body>
<input type="button" value="button" id="button" />
<script>
document.getElementById("button").onclick = function () {
    send("button-clicked", ["hello", "world"]);
};
listen("alert", function (data) {alert(data);});
</script>
</body>
</html>     

আপনাকে এখানে কেবলমাত্র পাইথন কোডটি মনোযোগ দিতে হবে তা হল def output(data):ফাইলের শেষ প্রান্তের কোডটি যা বুঝতে খুব সহজ হওয়া উচিত।

এটি চালানোর জন্য নিশ্চিত হয়ে নিন python-webkitএবং python-gtk2ইনস্টল হয়ে গেছে তবে একই ফোল্ডারে ফাইলগুলি সংরক্ষণ করুন এবং চালনা করুন:

python example.py

কর্ম কর্মসূচী



5

আমি বিএটি তৈরি করেছি , যা এইচটিএমএল, জেএস এবং সিএসএসের সাহায্যে ডেস্কটপ অ্যাপ্লিকেশন তৈরির একটি ক্ষুদ্র সরঞ্জাম।


আমি আমার ব্লগে এটি সম্পর্কে একটি নিবন্ধ লিখেছি ।

উদাহরণ

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
            body {
                font-family: Monaco, monospace;
                color: white;
                background: #3C3B38;
            }
            h1 { text-align: center; }
            p { text-align: justify; }
            button {
                padding: 10px 20px;
                -moz-border-radius: 4px 4px 4px 4px;
                -webkit-border-radius: 4px 4px 4px 4px;
                border-radius: 4px 4px 4px 4px;
                display: block;
                font-size: 14px;
                text-decoration: none;
                border: 1px solid #c0b7b0;
                cursor: pointer;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <h1>Hello World</h1>
        <p> Ipsum deserunt architecto necessitatibus quasi rerum dolorum obcaecati aut, doloremque laudantium nisi vel sint officia nobis. Nobis ad nemo voluptatum molestiae ad. Nisi ipsum deserunt a illo labore similique ad?  </p>
        <p> Ipsum veniam laborum libero animi quo dignissimos. Possimus quidem consequatur temporibus consequatur odio, quidem deleniti! Similique totam placeat sint assumenda nulla dolor. Voluptatibus quasi veritatis distinctio consectetur nobis. Nemo reprehenderit?  </p>
        <p> Ipsum molestiae nesciunt commodi sint et assumenda recusandae! Earum necessitatibus sequi nulla fugit architecto omnis. Maiores omnis repellat cupiditate iure corporis dolorem sed amet nesciunt. Mollitia sapiente sit repellendus ratione.  </p>
        <p> Consectetur architecto ratione voluptate provident quis. At maiores aliquam corporis sit nisi. Consectetur ab rem unde a corporis reiciendis ut dolorum, tempora, aut, minus. Sit adipisci recusandae doloremque quia vel!  </p>
        <button onclick="BAT.closeWindow()">Close</button>
    </body>
</html>

এবং, আমরা এটি এভাবে চালাই:

bat -d index.html -t "BAT Hello World" -s 800x500

ফলাফল হলো:


4

প্লাটফর্মটি সরাসরি অ্যাক্সেস করার জন্য আপনার বীজটি পরীক্ষা করা উচিত ।

এছাড়াও আপনি কটাক্ষপাত করা হতে পারে UserWebKit , যে Novacut এবং Dmedia UI 'তে (এটা উপরে নির্মিত দ্বারা ব্যবহৃত কী কার্যকারিতা উপলব্ধ Python3 গ্রন্থাগার UserCouch এবং microfiber BTW,)।

অনেক চিন্তাভাবনার পরে, আমি স্থির করেছি যে সরাসরি জাভাস্ক্রিপ্ট থেকে প্ল্যাটফর্মটি অ্যাক্সেস না করা আরও আকর্ষণীয় কারণ আপনি যদি চান তবে আপনি স্ট্যান্ডার্ড ব্রাউজারে ইউআই চালাতে পারেন। Novacut স্থাপত্য UI এবং ব্যাকএন্ড সার্ভার নেটওয়ার্ক-স্বচ্ছ রাখার CouchDB ব্যবহার করে। সাধারণ, একক কম্পিউটারের ক্ষেত্রে সার্ভারগুলি সেই কম্পিউটারে স্থানীয়ভাবে চালিত হয়। তবে আপনি একইভাবে অন্য সিস্টেমগুলিতে সার্ভারগুলি (এবং কাউচডিবি) চালাতে পারেন, ইউআই পার্থক্যটি লক্ষ্য না করে।


3

ঠিক আছে আপনি এমন একটি ভাষা অন্তর্ভুক্ত করতে পারেন যা পিএইচপি এর মতো শেল কমান্ড চালাতে পারে এবং এইভাবে ওয়েবপৃষ্ঠা থেকে অ্যাপ্লিকেশন ইনস্টল করা এবং কিছু কমান্ড কার্যকর করা (কোন থিমটি ব্যবহার করতে হবে এবং সিস্টেম থিমের উপর নির্ভর করে কোন সিএসএস ব্যবহার করতে হবে তা সনাক্ত করার মতো) জিনিসগুলির সুবিধা গ্রহণ করতে পারে। উদাহরণস্বরূপ আপনার এই দুটি প্রশ্ন যা সাহায্য করতে পারে:

কোনও সার্ভার এক সাথে শেল কমান্ড পরিচালনা করতে পারে? (একাধিক কমান্ড কার্যকর করার বিষয়ে যা আলোচনা করে)

ওয়েব থেকে একটি লাইন কমান্ড চালান (ওয়েবপৃষ্ঠা লিঙ্কে ক্লিক করা ) (যা কোনও লিঙ্কে ক্লিক করা এবং সফটওয়্যার কেন্দ্র থেকে একটি অ্যাপ্লিকেশন ইনস্টল করার বিষয়ে কথা বলে)

কোন থিমটি ব্যবহৃত হয় তা শেখার জন্য আপনি উবুন্টু ফাইলটি পার্স করতে পারেন যেখানে এটির ডিফল্ট থিমটির মান রয়েছে এবং তার উপর নির্ভর করে নতুন থিমটি প্রতিফলিত করার জন্য সাইটের সিএসএসে পরিবর্তন করুন।

থিম এবং এটি কোথায় পাওয়া যায় সে সম্পর্কে প্রশ্নগুলি এখানে পাওয়া যাবে:

কোনও থিমের পাঠ্য রঙ পরিবর্তন করতে আমার কোন ফাইলটি সম্পাদনা করতে হবে?

ডেস্কটপ থিম ভুলে যায়?

জিটিকে থিম সম্পাদনা করা হচ্ছে (একটি সীমানা যুক্ত করা হচ্ছে)

এই সমস্ত (এবং আপনি যদি অনুসন্ধানটি ব্যবহার করেন তবে আরও বেশি) আপনাকে পার্সিং করার সময় কোথায় দেখতে হবে এবং সিস্টেমটি কোন থিমটি ব্যবহার করছে এবং ওয়েব পৃষ্ঠায় কী কী ব্যবহার করতে হবে তা পরীক্ষা করতে পারে তা জানতে আপনাকে সহায়তা করে।


2

হ্যাঁ, আপনি খাঁটি এইচটিএমএল / সিএসএস / জেএসে অ্যাপ্লিকেশন লিখতে পারেন এবং জিওজেক্ট ইনট্রোস্পেকশন ব্যবহার করে জেএসের জন্য হ্যাঁ বাইন্ডিং উপলব্ধ। জিনোমসিড https://live.gnome.org/Seed এ একবার দেখুন

বীজকিট: https://live.gnome.org/SeedKit

টিউটোরিয়াল: https://live.gnome.org/Sed/ টিউটোরিয়াল


0

এখন আমাদের কাছে অ্যাপজেএস রয়েছে - https://github.com/milani/appjs !

যেমনটি তারা বলেছিল, " এটি ক্রোমিয়ামটিকে মূল হিসাবে ব্যবহার করেছে (যাতে সর্বশেষ HTML5 API গুলি সমর্থিত হয়) এবং নোড.জেগুলি ব্যাক হোন হিসাবে ব্যবহার করে " "

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.