Kuidas luua natiivseid töölauarakendusi JavaScripti (Proton Native) abil

Selle artikli kirjutamisel tuli meelde Atwoodi seadus:

Kõik rakendused, mida saab kirjutada JavaScripti abil, kirjutatakse lõpuks JavaScripti. - Jeff Atwood

Algselt postitatud minu ajaveebi!

Täna vaatame Proton Native'i ja teeme sellega lihtsa rakenduse.

Erinevalt Electroni rakendustest on Proton Native abil loodud rakendused tegelikult kohalikud (sellest ka nimi) ja pole veebipõhised kroomil.

Proton Native on nagu React Native, kuid töölaua jaoks. See kompileerub natiivse platvormikoodi järgi, nii et see näeb välja ja toimib nagu kohalik rakendus.

Nii et alustame.

Windows

Ehitustööriistade installimine käivitage:

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

Linux

Teil on vaja järgmisi teeke:

• libgtk-3-dev
• ehitada-hädavajalik

Mac

Sa ei vaja midagi.

Nüüd käivitage järgmine:

npm install -g create-proton-app

ja

create-proton-app my-app

uue projekti tegemiseks.

Avage projekti kataloog oma lemmikkoodiredaktoriga. Kataloog peaks välja nägema selline:

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

index.js peaks välja nägema selline:

Nii nagu mis tahes React või React Native Project, impordime reakti teegi ja teeme klassi komponendi.

AppElement on lihtsalt konteiner, mis hoiab Window ja Menuja Windowon kolm rekvisiidid: title(akna pealkiri), size(võtab objekti, mis sisaldab laiuse ja kõrguse akna) ja menuBar(seatud vale, sest me ei taha menüüriba).

Enne kui me alustada kodeerimine, olgem install cryptokasutades npm:

npm i crypto

Kasutame cryptoteksti räsimist MD5 algoritmiga.

index.js

Esmalt importisin Textja TextInputet saaksin neid hiljem kasutada. Siis classpärast, millega textja md5tühjad stringid state objekti lõin funktsioon hash, mis võtab textargument.

Kui hashfunktsiooni, seadsime riik textja tunnistada md5, et salvestada krüpteeritud teksti (nagu allpool)

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

ja määrake olekuobjekt uuendatud md5.

this.setState({ md5 });

renderMeetod tagastab mõned jsxelement. BoxElement on nagu divin Lasta või Viewin Lasta Native, mis hoiab TextInputja Text. Selle põhjuseks on see, et vanema aknaelement ei võimalda omada rohkem kui ühte last.

TextInputon onChangerekvisiit, mida kutsutakse iga kord, kui tekst muutub. Seetõttu määrasime selle rasvase noole funktsiooniks, mis võtab textargumendi ja tagastab hashvarem deklareeritud funktsiooni.

Nii et nüüd iga kord, kui tekst muutub, texton räsitud ja seatud md5.

Nüüd, kui me seda käivitame

npm run start

see aken peaks ilmuma:

Ja kui sisestame teksti, räsitakse see järgmiselt: md5:

Võite öelda: "See näeb kole välja - lisame sellele ka stiili." Noh, selle artikli kirjutamise ajal on Proton Native veel lapsekingades. See on väga lollakas ja ei toeta stiili (veel), kuid see on lõbus projekt, millega mängida.

Kui soovite projekti panustada, vaadake repot.

Kui teil on küsimusi või ettepanekuid, kommenteerige või võtke mind Twitteris @ 4msal4 ja ärge unustage seda plaksunuppu vajutada :)

? Osta mulle kohvi?

? Vaadake minu eelmist lugu?

Kuidas luua React Native'iga uudiste rakendus.