de Ethan

Cum să construiți aplicații mobile pe mai multe platforme folosind nimic mai mult decât un markup JSON

Cum sa construiti aplicatii mobile pe mai multe platforme folosind

În ultimele luni, am lucrat la un nou mod de a construi cross-platform, nativ iOS și Android aplicații numite Jasonette.

Vă permite să descrieți o aplicație întreagă, cu un singur markup JSON.

Dacă aplicația dvs. este alcătuită în întregime din JSON, aceasta poate fi tratată ca orice alte date. Și poate fi servit de la distanță din cloud la cerere.

Logica aplicației nu mai trebuie să fie codificată pe dispozitiv și o puteți actualiza cât doriți doar actualizând JSON de pe server. Aplicația dvs. va fi încărcată de pe server de fiecare dată când o deschideți.

Vedeți videoclipul de mai jos pentru o introducere rapidă:

Jasonette are multe părți diferite. Puteți exprima funcții, șabloane, stiluri și multe altele folosind un marker JSON. Și, ca rezultat, puteți scrie o aplicație mobilă nativă super-sofisticată într-un mod complet Model – Vizualizare – Controler manieră.

În acest post vă voi arăta în mod specific partea „Vizualizare”:

  1. Modul în care Jasonette exprimă diferite modele de interfață interfață în JSON.
  2. Cum implementează aceste mapări JSON-to-Native la nivel intern.

Structură de bază

Sub capotă, Jasonette funcționează similar cu un browser web. Dar, în loc să interpreteze un markup HTML și să deseneze o vizualizare web, Jasonette preia un markup JSON și construiește o vizualizare nativă, din mers.

Marcajul este doar un fișier JSON care urmează câteva convenții predefinite. În primul rând, începe cu un$jason cheie, care are doi copii: head și bodyși arată astfel:

{  "$jason": {    "head": {      .. metadata about the document ...    },    "body": {      .. actual content to be displayed on the view ..    }  }}

Filosofia proiectării

Când am început să proiectez sintaxa JSON pentru descrierea vizualizărilor native, am avut în vedere câteva constrângeri:

  1. Nativ – Există un motiv pentru care iOS și Android au venit cu propriile lor sisteme de layout native. Sistemele de layout concepute pentru epoca desktop-ului nu se traduc întotdeauna bine în lumea dispozitivelor mici. Sintaxa ar trebui să exprime aspectul de bază într-un mod nativ cât mai mobil posibil.
  2. Cross platform – Cu toate acestea, trebuie să fie multiplataforma. De exemplu, iOS are ceva numit autolayout și limbaj format vizual dar acestea nu sunt implementate nativ pe Android, deci nu soluția potrivită.
  3. Simplu, dar expresiv – Ar trebui să fie ușor exprimat într-un format JSON simplu și ușor de compus într-o structură sofisticată.

Când aruncați o privire asupra modului în care sunt construite majoritatea aplicațiilor mobile, toate se rezumă la un număr mic de tipare comune de interfață:

  1. Listă cu derulare verticală
  2. Listă defilare orizontal
  3. Poziționare absolută
  4. Grilă

Să aruncăm o privire la primele trei, deoarece acestea sunt cele mai utilizate.

1. Secțiuni – Descrierea listelor de derulare

Cel mai frecvent utilizat model de interfață este liste de defilare. Pe Jasonette îi numim sections.

Există două tipuri de secțiuni: Vertical și Orizontală. Secțiunile verticale derulează vertical, iar secțiunile orizontale orizontal.

Cum sa construiti aplicatii mobile pe mai multe platforme folosind
1611276309 848 Cum sa construiti aplicatii mobile pe mai multe platforme folosind
O singură secțiune verticală cu mai multe elemente (Stânga) – Mai multe secțiuni orizontale (Dreapta)

Implementare – Secțiuni verticale

Aceasta este probabil interfața de utilizare cea mai frecvent utilizată pentru afișarea datelor pe dispozitive mobile. Pe iOS, Jasonette implementează acest lucru cu UITableView. Pe Android este implementat cu RecyclerView.

{  "body": {    "sections": [{      "items": [        {"type": "label", "text": "Item 1"},        {"type": "label", "text": "Item 2"},        {"type": "label", "text": "Item 3"}      ]    }]  }}

Pe iOS, deasupra marcajului JSON creează un UITableView cu trei UITableViewCells, fiecare dintre care conține un UILabel, cu corespondent text atribute.

Pe Android, creează un RecyclerView cu trei elemente, fiecare dintre acestea fiind un TextView care afișează corespondentul text atribute.

Toate acestea sunt construite programatic fără nicio utilizare a Storyboards (iOS) sau Fișiere de aspect XML (Android) pentru a vă asigura că fiecare detaliu este programabil dinamic.

Implementare – Secțiuni orizontale

Secțiunile orizontale din punct de vedere sintaxic nu sunt foarte diferite, tot ce trebuie să faceți este să setați tip la fel de “orizontală”, iar articolele curg orizontal.

{  "body": {    "sections": [{      "type": "horizontal",      "items": [        {"type": "label", "text": "Item 1"},        {"type": "label", "text": "Item 2"},        {"type": "label", "text": "Item 3"}      ]    }]  }}
  • Notă: Sintaxa pentru secțiunea orizontală este simplă, dar internă este de fapt destul de complexă. Secțiunile orizontale pe iOS au fost implementate cu UICollectionView. Este o tehnică bine-cunoscută, dar practic un UICollectionView cu defilare orizontală este încorporat în UITableView părinte (care derulează vertical). Și pe Android, este implementat într-un mod similar, dar folosind în schimb RecyclerViews imbricate.

2. Elemente – Descrierea aspectului în cadrul fiecărei unități de derulare

Acum că înțelegem cum este structurată viziunea de nivel superior, să ne uităm la items. Fiecare secțiune este alcătuită din mai multe unități de derulare items. Rețineți că fiecare articol are o dimensiune fixă ​​și nimic nu se derulează în interiorul articolului.

Un articol poate fi:

  • Doar o singură componentă ca un label, image, button, textarea, etc.
  • O combinație a tuturor acestor componente

Implementarea acestei părți nu a fost la fel de simplă ca și sections implementare, pentru că a trebuit să aleg un multiplataforma, nativ, simplu și expresiv modalitate de a forma un aspect super-sofisticat.

Din fericire, iOS și Android au sisteme de layout native similare numite UIStackView și LinearLayout, respectiv. Și aceste scheme de layout sunt la rândul lor similare CSS Flexbox, așa că aș spune că este cât mai multiplataformă.

În cele din urmă, aceste sisteme de layout sunt infinit compozabile. După cum se vede mai jos, puteți crea un aspect vertical, un aspect orizontal sau puteți cuibra un aspect vertical într-un aspect orizontal și așa mai departe, recursiv.

1611276310 45 Cum sa construiti aplicatii mobile pe mai multe platforme folosind
1611276310 917 Cum sa construiti aplicatii mobile pe mai multe platforme folosind
1611276310 924 Cum sa construiti aplicatii mobile pe mai multe platforme folosind

Pentru a crea un aspect vertical, ați seta tipul ca vertical, și apoi setați-l componente:

{  "items": [{    "type": "vertical",    "components": [      {        "type": "label",        "text": "First"      },       {        "type": "label",        "text": "Second"      },       {        "type": "label",        "text": "Third"      }    ]  }]}

Același lucru cu aspectul orizontal. Doar setați tipul ca orizontală in schimb:

{  "items": [{    "type": "horizontal",    "components": [      {        "type": "image",        "url": "http://i.giphy.com/LXONhtCmN32YU.gif"      },       {        "type": "label",        "text": "Rick"      }    ]  }]}

Aspectele de cuibărire sunt la fel de simple ca și specificarea unui aspect ca o componentă a altui aspect.

{  "items": [{    "type": "horizontal",    "components": [      {        "type": "image",        "url": "http://i.giphy.com/LXONhtCmN32YU.gif"      },       {        "type": "vertical",        "components": [{          "type": "label",          "text": "User"        }, {          "type": "label",          "text": "Rick"        }]      }    ]  }]}

Nu am vorbit despre caracteristica de stil aici, din motive de concizie, dar puteți stiliza fiecare componentă individuală, precum și aspectul în sine, pentru a vă asigura că aspectul arată exact așa cum ați dorit. Tot ce trebuie să faceți este să adăugați style obiecte care descriu font, size, width, height, color, background, corner_radius, opacity, etc.

3. Straturi – AKA „Poziționare absolută”

Uneori, poate doriți să poziționați elementele exact în anumite părți ale ecranului fără a derula. În termeni CSS am numi asta „Poziționare absolută”. Jasonette sprijină acest lucru prin ceea ce se numește layers.

În prezent, stratul acceptă două tipuri de componente copil: image și label. Puteți așeza aceste componente oriunde doriți pe ecran în acest fel. Iată un exemplu:

1611276311 831 Cum sa construiti aplicatii mobile pe mai multe platforme folosind
O aplicație Jasonette cu elemente de strat

În acest exemplu, avem două etichete (temperatura și mesajele meteo) și o imagine (pictograma camerei) pe ecran, ale cărei coordonate au fost setate în mod explicit pentru a ne asigura că rămân pe loc fără a derula. Marcajul ar arăta cam așa:

{  "$jason": {    "body": {      "style": {        "background": "camera"      },      "layers": [        {          "type": "label",          "text": "22°C",          "style": {            "font": "HelveticaNeue-Light",            "size": "20",            "top": "50",            "left": "50%-100",            "width": "200",            "align": "center"          }        },        {          "type": "label",          "text": "few clouds",          "style": {            "font": "HelveticaNeue",            "size": "15"          }        },        {          "type": "image",          "url": "https://s3.amazonaws.com/.../camera%402x.png",          "style": {            "bottom": "100",            "width": "30",            "color": "#ffffff",            "right": "30"          }        }      ]    }  }}

În mod uimitor, acesta este tot ce trebuie să știți pentru a construi orice fel de vizualizare sofisticată pe care o puteți imagina pe dispozitivele mobile.

La fel cum puteți construi orice cu blocuri de lego simple, puteți compune aceste componente de bază și machete în moduri diferite pentru a crea orice vizualizare sofisticată.

Iată câteva exemple, construite 100% prin compunerea elementelor UI menționate mai sus:

1611276311 983 Cum sa construiti aplicatii mobile pe mai multe platforme folosind
1611276312 525 Cum sa construiti aplicatii mobile pe mai multe platforme folosind

Dincolo de vizualizări

Dacă citiți până aici, s-ar putea să vă gândiți:

  1. “Uau, tare! Vreau să încerc asta! ”, Sau
  2. „Da, probabil că poți construi o aplicație de jucărie, dar în niciun caz nu poți construi o aplicație de producție folosind acest mod!”

Așa cum am menționat pe scurt mai sus, acesta este doar “Vedere” parte din Jasonette, care este cea mai simplă parte. Dar ceea ce este cu adevărat puternic la Jasonette este că puteți merge de fapt mult mai departe și scrieți un program declarativ complet în JSON.

Puteți atașa acțiuni elementelor UI, care se declanșează atunci când un utilizator le atinge. De asemenea, puteți declanșa aceste acțiuni una după alta prin apeluri de succes / erori. De asemenea, puteți asculta anumite evenimente și puteți declanșa automat aceste acțiuni.

La fel, atunci când poți descrie nu doar un “Vedere” dar și “Model” si “Controlor” logică (toate în JSON), poți face orice.

Ce este posibil?

Deoarece tot ce aveți nevoie este un server care trimite JSON, Jasonette este complet agnostic de platformă. Nu există o tehnologie de server proprietar pe care trebuie să depindeți. Tot ce aveți nevoie este JSON.

Iar JSON poate veni de oriunde, de la dispozitiv local, la servere la distanță, chiar și la un zmeura pi!

  1. Aveți o aplicație web? : Dacă aveți deja o aplicație web, puteți crea instantaneu o aplicație mobilă nativă pentru dvs. Aplicația Node.js, aplicația Rails, aplicația Django, aplicația PHP sau orice aplicație web, doar făcând cereri către punctul dvs. final API.
  2. Nici nu aveți nevoie de un server: Deoarece puteți încadra un întreg model-vizualizare-controler într-un singur fișier JSON autonom, îl puteți stoca și servi de oriunde. Puteți chiar crea o aplicație dintr-un fișier JSON static difuzat de pe Pastebin sau Github!
  3. Transformați orice site web HTML într-o aplicație: Jasonette are un puternic analizor HTML-to-JSON alimentat de biblioteca cheerio care vă permite să transformați orice HTML într-un obiect JSON. Și știți deja ce putem face când avem JSON – puteți construi o vizualizare nativă din JSON transformat! În acest fel, puteți crea o aplicație nativă de pe un site web care nu are nici măcar un API. Desigur, modul recomandat este să folosiți JSON ori de câte ori puteți, dar acest lucru este foarte interesant, indiferent.

Pot continua pentru totdeauna, dar iată câteva exemple:

A aplicație de partajare a fotografiilor care vă permite să faceți o fotografie folosind camera dispozitivului și să o încărcați pe S3, apoi să postați intrarea pe propriul server, creând un flux:

Jasonette / s3-upload-example
s3-upload-example – O aplicație Jasonette pentru încărcarea imaginii în S3 utilizând $ network.uploadgithub.com

1611276313 149 Cum sa construiti aplicatii mobile pe mai multe platforme folosind

Un Node.js alimentat Aplicația Eliza Chatbot pentru iOS și Android:

Jasonette / eliza-exemplu
eliza-exemplu – aplicația Eliza de pe iPhonegithub.com

1611276313 919 Cum sa construiti aplicatii mobile pe mai multe platforme folosind

O aplicație Microblog, complet cu gestionarea sesiunii:

Jasonette / token-authentication-example
token-authentication-example – O aplicație de microblog Jasonette, construită cu șine (partea serverului), folosind un instrument pentru a implementa …github.com

1611276314 286 Cum sa construiti aplicatii mobile pe mai multe platforme folosind
1611276314 705 Cum sa construiti aplicatii mobile pe mai multe platforme folosind

O aplicație de control de la distanță pentru roboții Slack:

Controlează de la distanță roboții tăi Slack cu JSON
Acum câteva zile, @shaunymca a împărtășit un proiect foarte interesant pe canalul nostru slack. Dacă vă gândiți la asta, acesta este un …blog.jasonette.com

1611276314 761 Cum sa construiti aplicatii mobile pe mai multe platforme folosind
1611276314 424 Cum sa construiti aplicatii mobile pe mai multe platforme folosind

Un exemplu de aplicație care transformă o pagină web HTML în JSON și apoi o transformă într-o aplicație nativă:

gliechtenstein / iosdevweekly.json
iosdevweekly.json – Aplicație nativă pentru iOS Dev Weekly, înscrisă în JSON pur.github.com

1611276315 981 Cum sa construiti aplicatii mobile pe mai multe platforme folosind

Concluzie

Jasonette este un proiect tânăr. Am deschis versiunea iOS la sfârșitul anului 2016 și versiunea Android o luna mai tarziu.

Dar da a devenit deja o comunitate vibrantă de colaboratori și creatori și se află în dezvoltare activă. Sper că această tehnologie va împuternici oricine (nu doar dezvoltatorii) să construiască aplicații fără efort.

Suna bine? Consultați site-ul web aici.

Nu în ultimul rând, puteți găsi depozitele Github aici: iOS și Android (Contribuții super-binevenite!)