Natív asztali alkalmazások készítése JavaScript-sel (Proton Native)

Amikor ezt a cikket írtam, eszembe jutott Atwood törvénye:

Bármely alkalmazás, amely JavaScript-ben írható, végül JavaScript-ben íródik. - Jeff Atwood

Eredetileg a blogomon jelent meg!

Ma egy pillantást vetünk a Proton Native-ra, és elkészítünk vele egy egyszerű alkalmazást.

Az Electron alkalmazásokkal ellentétben a Proton Native alkalmazással épített alkalmazások valóban natívak (innen ered a neve), és nem webalapú króm.

A Proton Native olyan, mint a React Native, de asztali. Natív platformkódra áll össze, így úgy néz ki és működik, mint egy natív alkalmazás.

Tehát kezdjük.

ablakok

Telepítse a buildeszközöket a futtatással:

npm install --global --production windows-build-tools

Linux

Szüksége lesz ezekre a könyvtárakra:

  • libgtk-3-dev
  • építés nélkülözhetetlen

Mac

Nincs szükséged semmire.

Most futtassa a következőket:

npm install -g create-proton-app

és

create-proton-app my-app

hogy új projektet készítsen.

Nyissa meg a projektkönyvtárat a kedvenc kódszerkesztőjével. A könyvtárnak így kell kinéznie:

 └───node_modules ├───.babelrc ├───index.js ├───package.json └───package-lock.json

index.js így kell kinéznie:

Csakúgy, mint bármely React vagy React Native projekt, mi is importáljuk a reakció könyvtárat, és készítünk egy osztálykomponentust.

Az Appelem csak egy tároló, amely a Window és elemeket tartalmazza Menu, és Windowhárom kelléke van: title(az ablak címe), size(olyan objektumot vesz fel, amely tartalmazza az ablak szélességét és magasságát) és menuBar(hamisra van állítva, mert nem akarunk menüsor).

Mielőtt elkezdenénk a kódolást, telepítsük cryptoa következőket npm:

npm i crypto

A cryptoszöveget kivonatolni fogjuk az MD5 algoritmussal.

index.js

Először importáltam Text, TextInputhogy később felhasználhassam őket. Ezután az objektumban classa textés md5a karakterláncok kiürítése után state létrehoztam egy függvényt hash, amely textargumentumot vesz fel .

A hashfüggvényben beállítottuk az állapotot, textés kijelentjük, md5hogy tároljuk a titkosított szöveget (az alábbiak szerint)

this.setState({ text });let md5 = crypto.createHash("md5")  .update(text, "utf8").digest("hex");

és állítsa az állapotobjektumot a frissítettre md5.

this.setState({ md5 });

A rendermetódus visszaad valamilyen jsxelemet. Az Boxelem pont olyan, mint diva React-ben, vagy Viewa React Native-ban, amely a TextInputés -et tartja Text. Ez azért van, mert a szülőablak nem engedélyezi egynél több gyermeket.

TextInputvan egy onChangejavaslata, amelyet minden alkalommal felhívnak, amikor a szöveg megváltozik. Ezért egy kövér nyíl függvényre állítottuk be, amely vesz egy textargumentumot, és visszaadja a hashkorábban deklarált függvényt.

Tehát most minden alkalommal, amikor a szöveg változik, textkivonatolják és beállítják md5.

Most, ha futunk vele

npm run start

ennek az ablaknak fel kell ugrania:

És ha beírunk egy szöveget, akkor az md5-ös formátumot kapja így:

Mondhatod: "Csúnyán néz ki - adjunk hozzá egy kis stílust." Nos, a cikk írásakor a Proton Native még gyerekcipőben jár. Nagyon bugos, és egyelőre nem támogatja a stílust, de szórakoztató projekt.

Ha hozzá szeretne járulni a projekthez, nézze meg a repót.

Ha bármilyen kérdése vagy javaslata van, nyugodtan kommenteljen, vagy keressen fel a Twitteren @ 4msal4, és ne felejtse el elnyomni azt a taps gombot :)

? Vegyél nekem egy kávét?

? Nézze meg az előző történetemet?

Hogyan készítsünk híralkalmazást a React Native alkalmazással.