Como desenvolvo um aplicativo Ubuntu em HTML e JS?

34

Estou desenvolvendo um aplicativo e acho que HTML e JavaScript são melhores para o futuro, mas não consigo encontrar nenhum tutorial (preciso que o aplicativo use o tema do sistema).

Existem ligações para o Unity, menu de mensagens e notificação, couchdb e assim por diante?

application-development  webapps  html5  webapp-development 
— mhall119
fonte
Você também pode achar interessante essa pergunta semelhante: askubuntu.com/questions/97430/…
— David Planella

Respostas:

24

Um bom ponto de partida para ligações e APIs no Ubuntu pode ser encontrado em developer.ubuntu.com . Eu não tenho nenhuma experiência com isso, mas você provavelmente também desejará dar uma olhada no Gjs, as ligações Javascript do GNOME.

Dependendo do que você está tentando fazer, você pode simplesmente criar o aplicativo como qualquer aplicativo HTML + JS e depois lançá-lo em uma visualização do Webkit. É extremamente simples de fazer em python:

#!/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()
— andrewsomething
fonte
7
JS também é programação real.
— Owais Lone
17

Você pode desenvolver usando HTML + Javascript para a interface usando um quadro incorporado do WebKit em uma janela do Gtk (isso é mais fácil de fazer no Python). A parte mais difícil é se comunicar com o sistema a partir do seu aplicativo HTML / Javascript.

Você pode fazer isso passando mensagens entre Javascript e Python. Você precisará, no entanto, escrever a lógica do sistema como funções Python, mas isso é bastante fácil de fazer.

Aqui está um exemplo simples que mostra a comunicação entre Python e Javascript. No exemplo, o HTML / Javascript exibe um botão que, quando clicado, envia uma matriz ["hello", "world"]para Python, que une a matriz a uma string "hello world" e a envia de volta ao Javascript. O código Python imprime uma representação da matriz no console e o código Javascript exibe uma caixa de alerta que exibe a string.

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>

O único código python que você realmente precisa prestar atenção aqui é o código do def output(data):final do arquivo, que deve ser bastante fácil de entender.

Para executar isso certifique-se python-webkite python-gtk2são instalados, em seguida, salvar os arquivos na mesma pasta e executar:

python example.py

programa em ação

— dv3500ea
fonte
11
Isso é incrível #
— 3200 Francisco Presencia 28/04
5

Eu desenvolvi o BAT , que é uma pequena ferramenta para criar aplicativos de desktop com HTML, JS e CSS.

Eu escrevi um artigo sobre isso no meu blog .

Exemplo

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>

E, executamos da seguinte maneira:

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

O resultado é:

— Ionică Bizău
fonte
4

Quanto a acessar a plataforma diretamente, você deve conferir o Seed .

Você também pode dar uma olhada no UserWebKit , a biblioteca Python3 que fornece as principais funcionalidades usadas pela interface do usuário do Novacut e do Dmedia (construída sobre o UserCouch e Microfiber , BTW).

Depois de muito pensar, decidi que era mais interessante não acessar a plataforma diretamente do JavaScript, porque, opcionalmente, você pode executar a interface do usuário em um navegador padrão. A arquitetura do Novacut usa o CouchDB para manter a interface do usuário e os servidores de back-end transparentes à rede. No caso normal de computador único, os servidores são executados localmente nesse computador. Mas você também pode executar os servidores (e o CouchDB) em outros sistemas, sem que a interface do usuário note a diferença.

— jderose
fonte
3

Bem, você pode incluir uma linguagem que possa executar comandos do shell como php e, dessa forma, tirar proveito de coisas como instalar aplicativos de uma página da web e executar alguns comandos (como detectar qual tema usar e qual CSS usar dependendo do tema do sistema). Por exemplo, você tem essas duas perguntas que podem ajudar:

Um servidor pode manipular comandos de shell simultâneos? (Que fala sobre a execução de vários comandos)

Executar um comando de linha a partir de uma web (clicar em um link de página da web) (que fala sobre clicar em um link e instalar um aplicativo a partir do centro de software)

Para uma maneira de aprender qual tema é usado, você pode analisar o arquivo ubuntu onde ele possui o valor para o tema padrão e, dependendo dele, modificar o CSS do site para refletir o novo tema.

Perguntas sobre o tema e onde encontrá-lo podem ser encontradas aqui:

Qual arquivo eu preciso editar para alterar a cor do texto em um tema?

Tema para a área de trabalho esquece?

Editando o tema GTK (adicionando uma borda)

Tudo isso (e mais, se você usar a pesquisa) ajuda a saber onde procurar ao analisar e quais arquivos você pode verificar para ver qual tema o sistema está usando e o que usar na página da Web.

— Luis Alvarado
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.