Dacă dezvoltați orice tip de produs IoT, inevitabil veți avea nevoie de un anumit tip de aplicație mobilă. In timp ce există căi ușoare, nu sunt pentru producție.

În acest tutorial, vom vorbi despre elementele de bază ale dezvoltării aplicațiilor Particle. Veți afla despre unele dintre numeroasele cadre de aplicații de care puteți profita. În plus, există biblioteci, trucuri și instrumente pe parcurs pentru a-ți face viața mult mai ușoară.

Cadrele aplicației

Uneori este aproape iritant să programezi mai multe aplicații în mod nativ. Vedeți, Swift (sau Objective C?) Și Java nu sunt groaznice la prima vedere (bine, poate cu excepția Obj-C?). Dar atunci când resursele sunt limitate, trebuie să vă dați seama de un nou plan de joc. Aici intervin App Frameworks.

Aceste cadre permit unui dezvoltator de aplicații să scrie, să construiască și să testeze aplicații pe mai multe platforme. În unele cazuri, cadrele convertesc aplicația dvs. în cod nativ. Asta înseamnă că rulează la fel de repede și la fel de bine ca unul scris în Swift sau Java.

Am făcut cercetarea și din ianuarie 2020, iată câteva dintre cele mai susținute cadre:

Lista continuă zile întregi.

Am folosit câteva dintre aceste cadre în trecut. Am construit o aplicație Meteor care (în mod surprinzător) a funcționat. În cele din urmă a trebuit să aleg una. Cu ce ​​m-am dus?

NativeScript.

În cea mai mare parte, documentația NativeScript și experiența de îmbarcare sunt fantastice. Nu numai că vă puteți previzualiza aplicația în interiorul unui emulator, dar o puteți încărca direct și pe telefon!

images / Apple_iPhone_6s_Gold _-__ status-b1ad9325-8e81-4ee0-b72a-687b62adec29.png

Unul dintre lucrurile interesante despre NativeScript este că acceptă TypeScript. TypeScript este un superset de JavaScript cu câteva caracteristici suplimentare wiz-bang.

Spre deosebire de alte limbi, JavaScript nu are tehnic tipuri. Dacă ați realizat o dezvoltare a particulelor, probabil că știți ce este un tip. Vorbim despre int, String, float și altele. adică sunt directive pentru a vă asigura că codul dvs. JavaScript rămâne consistent.

NativeScript este, de asemenea, compatibil cu majoritatea cadrelor web JavaScript principale. Aceasta include Vue.Js și Unghiular.

Am observat până acum un singur dezavantaj major: modul de previzualizare mobil (tns preview comanda) nu plătește bine cu bibliotecile native. Dacă aveți niște biblioteci specifice platformei native, va trebui să utilizați emulatorul sau un dispozitiv (dacă aveți unul).

Dacă ești gung-ho și tu vrei pentru a crea mai multe aplicații în limbile respective, cu atât mai multă putere pentru tine. Există un avantaj față de cadrele de mai sus: SDK-uri Particle încercate și adevărate.

Biblioteci și SDK-uri disponibile

Particle s-a străduit să facă dezvoltarea aplicațiilor puțin mai ușoară. Acest lucru se datorează muncii masive de dezvoltare care a intrat în propriile lor SDK-uri. Da, au dispărut zilele în care trebuie să scrieți manuale de solicitare HTTP.

Iată un link către SDK-urile iOS și Android:

Deși nu le vom acoperi aici, ele reflectă toate apelurile potențiale pe care le puteți efectua folosind API Cloud.

Apropo de Cloud API, Particle a dezvoltat și un Node.js bibliotecă, de asemenea. După cum vă puteți imagina, puteți utiliza acest lucru pentru codul serverului sau pentru cadrele de aplicații bazate pe JavaScript. Din păcate, nu funcționează cu NativeScript. Cadrele care utilizează un WebView ar trebui să fie mai compatibile.

În cazul acestui tutorial, ne vom concentra în principal pe API-ul Cloud. În acest fel, aveți o bună înțelegere a sistemului general. Poate părea intimidant, dar dacă o faci corect, vei primi foarte repede.

Efectuarea de apeluri API

În NativeScript nu puteți utiliza biblioteci de genul [request](https://github.com/request/request). (Ceea ce se întâmplă să fie foarte particular al bibliotecii DMC folosit în CLI – DMC dacă citești asta, Bună!) Va trebui să folosești informațiile furnizate HTTP modul.

Dacă derulați până la partea de jos a acelei pagini, veți vedea un deplin POST exemplu. O voi reproduce aici, dar cu unele modificări specifice ale particulelor:

// Create form post data
var data = new FormData();
data.append("name", "update");
data.append("data", "It's hammer time!");
data.append("private", "true");
data.append("access_token", _token);

// Configure the httpModule
return httpModule
    .request({
        url: `https://api.particle.io/v1/devices/events`,
        method: "POST",
        content: data
    })
    .then(
        response => {
            const result = response.content.toJSON();
            console.log(result);
        },
        e => {
            if (e) console.log(e);
        }
    );

Cele de mai sus sunt un exemplu de ceea ce echivalează cu Particle.publish în DeviceOS. Să descompunem părțile.

În primul rând, unul dintre principalele obișnuințe ale API-ului Web al particulei este formatul de date. Prima dată m-am așteptat să folosească JSON, dar m-am înșelat grav. După de fapt citind documentația am realizat că majoritatea cererilor POST erau de fapt application/x-www-form-urlencoded. Asta înseamnă că atunci când trimiteți date, este echivalentul apăsării butonului de trimitere pe un formular HTML.

Din fericire, există o modalitate ușoară de a asambla datele formularului în Node / JavaScript. Putem folosi FormData() obiect. Aruncați o privire la cele de mai sus. Ar trebui să existe câteva nume de parametri familiari în data.append apeluri.

"name" se referă la numele evenimentului la care publicați.

"data" se referă la șirul de date formatate pe care le publicați.

"private" dictează dacă doriți sau nu să difuzați aceste date către întreaga lume a particulelor sau doar micul dvs. colț al acesteia.

"access_token" este un simbol pe care îl puteți genera pentru a efectua aceste apeluri API. Fără un jeton însă, ești mort în apă.

Obținerea unui jeton

De unde avem acest evaziv access_token?

La început nu aveam idee.

Am creat un utilizator OAuth și secret în consolă. Asta duce la un impas. Lăudat cu diferite apeluri și setări API. Nimic. Apoi m-a lovit ca o tona de cărămizi. Există un access_token atașat la solicitarea de curl pe fiecare pagină a dispozitivului!

Deschideți orice dispozitiv, faceți clic pe butonul micuței console din apropiere Evenimente. Va apărea un pop-up cu instrucțiuni și o adresă URL. Copiați textul după access_token=. Acesta este al tău access_token! Vezi mai jos:

images / Screen_Shot_2020-01-25_at_8.55.21_AM.png

Puteți utiliza acest token pentru a efectua apeluri către API-ul Particle. Aceasta poate fi abonarea, publicarea, scrierea la o funcție, citirea variabilelor și multe altele.

Prin linia de comandă

E drăguț și totul, dar cum naiba poți programatic genera unul? O modalitate este cu linia de comandă.

particle token create este numele comenzii despre care trebuie să știți. Când îl rulați, vi se va solicita să vă autentificați. (De asemenea, introduceți codul dvs. de autentificare dacă utilizați unul.) Apoi linia de comandă va scuipa un nou strălucitor access_token puteți utiliza cu API!

Prin intermediul API-ului în sine

Dacă nu ai putut ghici, particle token create este o frontend la un apel API brut. Puteți efectua și aceste apeluri API direct. Iată cum arată în NativeScript.

// Create form post data
var data = new FormData();
data.append("username", "jaredwolff");
data.append("password", "this is not my password");
data.append("grant_type", "password");
data.append("client_name", "user");
data.append("client_secret", "client_secret_here");

// Configure the httpModule
return httpModule
    .request({
        url: `https://api.particle.io/v1/oauth/token`,
        method: "POST",
        content: data
    })
    .then(
        response => {
            const result = response.content.toJSON();
            console.log(result);
        },
        e => {
            if (e) console.log(e);
        }
    );

Acest apel Mai devine mai complicat. Mai ales în cazul în care aveți configurare de autorizare cu doi factori. Merită cu adevărat când îți dai seama de toate. La urma urmei, nimeni nu dorește să creeze manual jetoane de autentificare dacă nu trebuie!

Acum sunteți gata să scrieți și să citiți de pe dispozitivele dvs. Totuși, există un lucru care vă poate împiedica. Abonarea la evenimente poate fi dificilă pentru un client HTTP obișnuit. Atât de mult încât, dacă încercați să o faceți cu clientul HTTP NativeScript, acesta se va bloca și nu va mai reveni. Din fericire, există o modalitate de a gestiona aceste apeluri HTTP speciale.

Server trimis Ce?

Server Sent Events (SSE pe scurt) este o funcționalitate de abonament HTTP / S. Vă permite să vă conectați la un punct final SSE și să ascultați continuu actualizările. Este o tehnologie web similară cu cea pe care o folosesc companiile pentru notificările push. Deși necesită o funcționalitate suplimentară sub capotă …

Biblioteca SSE

După multe zgârieturi de cap și căutări, am dat peste mine nativescript-sse. Arăta destul de simplu încât puteam începe să folosesc imediat. Mai multe probleme au apărut atunci când am încercat să-l folosesc.

În primul rând, se dovedește că nu puteți utiliza biblioteca în tns preview modul. Alternativa este de a utiliza tns run ios --emulator sau folosiți tns run ios cu iPhone-ul conectat la computer. Comanda non-emulator vă va livra automat aplicația prototip.

Notă marginală: Îmi configurasem deja telefonul în Xcode. S-ar putea să trebuiască să faceți asta înainte tns run ios este capabil să găsească și să implementeze pe telefonul dvs.

În al doilea rând, odată ce am pus biblioteca în funcțiune, am observat că voi primi niște erori foarte urâte. Erorile păreau să se întâmple ori de câte ori apărea un nou mesaj de la Particle.

Descoperă biblioteca Swift de bază pentru iOS a reparat acest lucru anul trecut. Așa că m-am gândit să aflu cum să actualizez pluginul NativeScript. Vă voi economisi timp pentru a spune că poate fi o durere și că există o curbă de învățare!

Din fericire, după ceva hacking, am reușit să funcționez ceva. Mai multe instrucțiuni despre cum să compilați pluginul sunt în CITEȘTE-MĂ. Alternativ, puteți descărca unul pre-construit de pe Eliberați pagina depozitului.

Descărcați fișierul .tgz trimiteți oriunde doriți. Apoi, îl puteți adăuga folosind tns plugin add. Comanda completă arată astfel:

tns plugin add path/to/plugin/file.tgz

Puteți verifica dacă biblioteca este instalată rulând tns plugin list

**jaredwolff$ tns plugin list
Dependencies:
┌─────────────────────┬──────────────────────────────────────────────────────────────────────────────────┐
│ Plugin              │ Version                                                                          │
│ @nativescript/theme │ ~2.2.1                                                                           │
│ nativescript-sse    │ file:../../Downloads/nativescript-sse/publish/package/nativescript-sse-4.0.3.tgz │
│ tns-core-modules    │ ~6.3.0                                                                           │
└─────────────────────┴──────────────────────────────────────────────────────────────────────────────────┘
Dev Dependencies:
┌──────────────────────────┬─────────┐
│ Plugin                   │ Version │
│ nativescript-dev-webpack │ ~1.4.0  │
│ typescript               │ ~3.5.3  │
└──────────────────────────┴─────────┘
NOTE:
If you want to check the dependencies of installed plugin use npm view <pluginName> grep dependencies
If you want to check the dev dependencies of installed plugin use npm view <pluginName> grep devDependencies**

Odată instalată, invocarea bibliotecii face câțiva pași. Iată un exemplu:

import { SSE } from "nativescript-sse";

sse = new SSE(
            "https://api.particle.io/v1/events/blob?access_token=<your access token>",
            {}

// Add event listener
sse.addEventListener("blob");

// Add callback
sse.events.on("onMessage", data=>{
	// TODO: do stuff with your event data here!
	console.log(data);
});

// Connect if not already
sse.connect();

Mai întâi trebuie să importați și să creați o instanță a bibliotecii. Când creați instanța, va trebui să introduceți adresa URL pe care doriți să o utilizați.

În acest caz vom face echivalentul lui Particle.subscribe(). Ar trebui să arate ceva similar cu cele de mai sus: https://api.particle.io/v1/events/<your event name>?access_token=<your access token>.

A inlocui <your event name> și <your access token> cu numele evenimentului tău și simbolul tău proaspăt creat!

Apoi configurați biblioteca pentru a asculta evenimentul la care vă interesează. În acest caz blob este evenimentul la care îmi pasă cel mai mult.

Apoi, asigurați-vă că configurați un apel invers! În acest fel puteți obține acces la date când blob vine de-a lungul. Am făcut o TODO rețineți unde puteți accesa datele menționate.

În cele din urmă, vă puteți conecta folosind .connect() metodă. Dacă nu vă conectați, SSE nu va deschide o sesiune și nu veți primi date de la Particle.

Plasarea codului depinde de dvs., dar din exemple arată ca în constructor() modelul dvs. este un loc bun. (https://github.com/jaredwolff/nativescript-sse/blob/master/demo/app/main-view-model.ts)

Alte exemple

Dacă sunteți curios cum să utilizați SSE în alte locuri, am un alt exemplu grozav: Particle’s CLI.

Particulă folosește [request](https://github.com/request/request) bibliotecă pentru a gestiona evenimentele SSE din aplicație. Oricând suni particle subscribe blob invocă o getStreamEvent mai departe în interiorul codului. Poti verificați-l aici. request biblioteca are mai multe informații despre streaming aici.

Mai multe resurse

Acesta este doar vârful aisbergului când vine vorba de conectarea cu API-ul Particle. Particle are o documentație excelentă (ca întotdeauna) pe care o puteți verifica. Iată câteva linkuri importante:

Concluzie

În această postare am vorbit despre cadrele de aplicații, NativeScript, pluginurile NativeScript și evenimentele trimise de server. În plus, toate lucrurile legate de Particle, astfel încât să vă puteți conecta aplicația NativeScript la API-ul Particle.

Sper că ați găsit util acest tutorial rapid. Dacă aveți întrebări, nu ezitați să lăsați un comentariu sau Trimite-mi un mesaj. De asemenea, asigurați-vă că ați verificat ghid nou lansat. Are conținut la fel ca acesta despre ecosistemul Particle.

Pana data viitoare!

Această postare a fost inițial de la https://www.jaredwolff.com/how-to-develop-particle-iot-apps-using-nativescript/