Natiivien työpöytäsovellusten rakentaminen JavaScriptillä (Proton Native)

Kun kirjoitin tätä artikkelia, mieleeni tuli Atwoodin laki:

Kaikki sovellukset, jotka voidaan kirjoittaa JavaScriptiin, kirjoitetaan lopulta JavaScriptiä. - Jeff Atwood

Lähetetty alun perin blogiini!

Tänään katsomme Proton Nativeia ja teemme sen kanssa yksinkertaisen sovelluksen.

Toisin kuin Electron- sovellukset, Proton Native -sovelluksella rakennetut sovellukset ovat itse asiassa natiiveja (tästä johtuen nimi) eivätkä ole kromipohjaisia.

Proton Native on kuin React Native, mutta työpöydälle. Se kääntyy alkuperäiseen alustakoodiin, joten se näyttää ja toimii kuin alkuperäinen sovellus.

Joten aloitetaan.

Windows

Asenna rakennustyökalut suorittamalla:

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

Linux

Tarvitset nämä kirjastot:

  • libgtk-3-dev
  • rakentaa välttämätöntä

Mac

Et tarvitse mitään.

Suorita nyt seuraava:

npm install -g create-proton-app

ja

create-proton-app my-app

tehdä uusi projekti.

Avaa projektihakemisto suosikkikoodieditorilla. Hakemiston tulisi näyttää tältä:

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

index.js pitäisi näyttää tältä:

Aivan kuten mikä tahansa React- tai React Native -projekti, tuomme reaktiokirjaston ja teemme luokan komponentin.

AppElementti on vain astia, joka pitää Window ja Menuja Windowon kolme rekvisiitta: title(ikkunan otsikko), size(kestää objekti, joka sisältää leveys ja korkeus ikkunan) ja menuBar(asetettu epätosi, koska emme halua valikkopalkki).

Ennen kuin aloitamme koodaus, nyt asentaa cryptokäyttäen npm:

npm i crypto

Käytämme cryptotekstin hajauttamista MD5-algoritmilla.

index.js

Tuodin ensin Textja TextInputvoisin käyttää niitä myöhemmin. Sitten classasettamisen jälkeen textja md5tyhjentää narut state objekti, olen luonut toiminnon hash, joka vie textargumentti.

Vuonna hashtoiminnon asetamme valtion textja julistaa md5tallentaa salattu teksti (kuten alla)

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

ja aseta tilaobjekti päivitetyksi md5.

this.setState({ md5 });

renderMenetelmä palaa noin jsxelementti. BoxElementti on aivan kuten divvuonna reagoida tai olla Viewvuonna Reagoida Native, joka omistaa TextInputja Text. Tämä johtuu siitä, että vanhemman ikkuna-elementti ei salli useampaa kuin yhtä lasta.

TextInputon onChangeehdotus, joka kutsutaan joka kerta, kun teksti muuttuu. Siksi asetamme sen rasva-nuoli-funktioon, joka ottaa textargumentin ja palauttaa hashaiemmin ilmoitetun funktion.

Joten nyt joka kerta, kun teksti muuttuu, se texton hajautettu ja asetettu md5.

Nyt jos suoritamme sen

npm run start

tämän ikkunan pitäisi avautua:

Ja jos syötämme tekstiä, se hajautetaan md5: lle seuraavasti:

Voisit sanoa "Se näyttää ruma - lisätään siihen hieman tyyliä." No, tämän artikkelin kirjoittamisen aikana Proton Native on vielä lapsenkengissään. Se on erittäin buginen ja se ei vielä tue muotoilua (vielä), mutta se on hauska projekti.

Jos haluat osallistua projektiin, tutustu repoon.

Jos sinulla on kysyttävää tai ehdotuksia, voit kommentoida tai ottaa yhteyttä minuun Twitterissä @ 4msal4 ja älä unohda lyödä tätä taputuspainiketta :)

? Osta minulle kahvia?

? Katso edellinen tarinani?

Kuinka rakentaa uutissovellus React Native -sovelluksella.