Share
Mulberry de la Toura este un cadru de aplicații mobil construit pe partea de sus a PhoneGap. În câteva minute, Mulberry vă poate pune în funcțiune cu o aplicație nativă construită cu tehnologii web precum HTML, CSS și JavaScript.
Să aruncăm o privire la ceea ce avem nevoie pentru a începe cu Mulberry.
Momentan, Mulberry sprijină oficial OS X Snow Leopard și Lion. Conform documentației, ar putea fi posibilă rularea pe Linux, dar acest lucru nu este suportat pe deplin. În plus față de un sistem de operare compatibil, veți avea nevoie și de cea mai recentă versiune a PhoneGap, iar Ruby ar trebui, de asemenea, să fie instalat.
Pentru a finaliza acest tutorial, ar trebui să aveți și o experiență folosind git.
Puteți obține cea mai recentă versiune a Mulberry din depozitul Github al lui Toura. Puteți clona depozitul în directorul ales de dvs. utilizând comanda git clone [email protected]: Toura / mulberry.git
Apoi, trebuie să adăugăm calea completă dud / bin la variabila noastră de mediu, deci trebuie să ne editați .profil fişier. Putem face acest lucru executând următoarea comandă în terminal.
export PATH = $ PATH: / cale / spre / dud / dud / bin
Dacă nu aveți instalat "bundler-ul de bijuterii Ruby", va trebui să continuați și să instalați acest lucru acum, după cum urmează:
sudo gem instala bundler
Și apoi, din rădăcina depozitului, executați comanda:
instalare pachet
Acum sunteți gata să vă construiți prima aplicație cu Mulberry.
Pentru a obține structura noastră de aplicații, trebuie să executați următoarea comandă în terminal oriunde vrem să fie construită aplicația. Să presupunem că vrem să facem o aplicație pentru iubitorii de pisici și vom numi aplicația Pisici.
pisici de mătase de schele
Veți obține o grămadă de materiale cu drepturi de autor și niște termeni și condiții de bază scuipă la dvs., dar ceea ce se va întâmpla, de asemenea, este structura dvs. de aplicație a fost făcută acum pentru dvs. Deschideți dosarul proiectului și aruncați o privire.
Primul lucru pe care trebuie să-l facem este să mergeți și să deschideți config.yml fișier și efectuați unele modificări dacă este necesar. Fișierul de configurare este foarte bine comentat, deci este destul de ușor să vedeți ce trebuie să adăugați sau să modificați. Veți vedea numele aplicației și detaliile temei. Momentan, nu există nicio documentație referitoare la tematică, dar puteți seta aici câteva culori de bază. Puteți specifica apoi platformele pentru care construiți. Pentru acest demo, voi construi doar pentru iOS, așa că voi șterge opțiunea Android. De asemenea, voi viza și platforma telefonului, deci ștergeți opțiunea de tabletă.
Puteți vedea că putem alege dacă vom include jQuery în proiect și apoi există unele opțiuni API pentru Facebook, Twitter, Urban Airship și Flurry. Sunt sigur că suntem cu toții conștienți de primele două, dar Urban Airship este un serviciu de notificare prin împingere în aer. Flurry este un instrument de analiză a traficului realizat special pentru aplicații mobile. Pentru acest demo, nu voi intra în detalii despre integrarea acestor API-uri cu Mulberry, așa că voi lăsa goale aceste câmpuri.
Salvați fișierul de configurare și deschideți sitemap.yml fişier. Aici vom stabili structura paginii pentru aplicația noastră. Puteți vedea că avem deja două intrări Acasă și Despre. Vom adăuga câteva linkuri către pagina de pornire următoare:
- acasă - alb-negru - pisici-cu-macs - pisici-cu-pălării - pisoi - cam
Acum trebuie să generăm noile pagini pe care le-am definit în harta site-ului nostru. Reveniți la terminalul dvs. și introduceți următoarele:
dulce create_page alb-negru
Veți primi o confirmare a paginii create. Paginile sunt create în format Markdown. Dacă nu ați mai folosit Markdown înainte, nu vă faceți griji, nu este nimic prea complicat în legătură cu aceasta. De fapt, este unul dintre lucrurile foarte drăguțe pe care îmi place Mulberry, deoarece folosesc formatul de marcare pe o bază zilnică. Odată ce sunteți obișnuit cu sintaxa simplă, este cu adevărat mai rapid decât să scrieți pagini în HTML.
Putem să mergem mai departe și să folosim aceeași comandă pentru a crea celelalte pagini, iar odată ce au terminat, le veți găsi în pagini pliant.
Dacă mergeți mai departe și deschideți fișierele de marcare, veți vedea că fișierul are un antet reprezentat de --- de caractere:
--- titlu: # necesar! șablon: telefon: tabletă implicită: implicit # acestea ar trebui să indice opțional o imagine în imaginile dir header_image: background_image: # fiecare dintre aceste proprietăți poate include un șir de nume de fișiere imagini: videoclipuri: audio: feeduri: ---
Să editați acest antet pentru ceea ce avem nevoie. Deocamdată, nu avem nevoie de imaginea antetului sau de fundal și, pe măsură ce vizăm doar telefoane, putem seta acel șablon imagini și text-telefon care este un șablon predefinit încorporat în dud. De asemenea, vom folosi imagini doar pentru moment, deci capul fișierului dvs. ar trebui să arate exact așa:
--- titlu: Șablon negru și alb: telefon: imagini cu imagini și imagini de telefon: - cat-bw-1.jpg - cat-bw-2.jpg - cat-bw-3.jpg ---
Imaginile sunt situate într-un imagini folder în cadrul bunuri pliant.
Notă: Este importantă cantitatea de spații albe când indentați ceva. Asigurați-vă că filele dvs. sunt setate la 2 spații, altfel codul nu va fi compilat corect.
Întoarceți-vă la terminal și tastați dulce servi. Întregul conținut va fi apoi gata pentru vizualizare într-un browser sau simulatorul iOS de pe localhost (de obicei portul 3000).
Să mergem mai departe și să modificăm antetul celorlalte pagini.
--- titlu: Pisici cu Pălărie șablon: telefon: imagini și imagini de telefon text: - hats-1.jpg - hats-2.jpg - hats-3.jpg ---
--- titlu: Pisici cu Macs șablon: telefon: imagini și imagini de telefon text: - macs-1.jpg - macs-2.jpg - macs-3.jpg ---
Să aruncăm o privire la aspectul șablonului video.
--- titlu: Șablon de pisoi: telefon: videoclipuri video și text: - kitten.mp4 ---
Du-te și fugi dulce servi din nou și verificați ieșirea într-un browser. Ar trebui să arate așa ceva -
Și pagina video ar trebui să arate după cum urmează -
Să aruncăm o privire rapidă la subtitrările pe care le puteți crea pentru aceste caruseluri de imagini sau clipuri video.
Creați trei fișiere în images / subtitrări dosarul și numele acestora imagename.md, deci pentru demo-ul pe care l-am creat cat-bw-1.md, cat-bw-2.md, cat-bw-3.md. Fiecare dintre fișiere arată cam așa:
--- nume: Cat 1 --- Aceasta este o pisică alb-negru
Acum, dacă vă difuzați aplicația din nou, veți vedea că conținutul de sub imaginile se modifică în timp ce faceți clic pe imaginile:
Deschideți terminalul și rulați dud test. Codul dvs. va fi acum compilat într-un construiește pliant. Xcode va lansa și veți vedea structura aplicației dvs., inclusiv a www dosarul în care sunt toate fișierele. Puteți lovi acum să construiți și să rulați în Xcode, iar aplicația dvs. va fi lansată în simulator ca aplicație care rulează nativ.
Mulberry vine acum cu suport construit pentru Weinre, care este un inspector de web orientat către dispozitive mobile (este minunat!). Bara mică de instrumente din colțul din dreapta jos al colțului dvs. vă permite să utilizați Weinre pe propria versiune găzduită de Weoura. Dacă mergeți mai departe și faceți clic pe butonul Weinre, veți primi un cod pe care îl puteți introduce pe site pentru a obține o aplicație de depanare la distanță. Cu aceasta, puteți testa Javascript sau CSS pentru a vedea cum DOM-ul dvs. a fost construit de Mulberry.
Pentru a dezactiva bara de depanare din partea dreaptă jos a ecranului, există câteva opțiuni aflate în TouraConfig.js fișierul localizat în construi / www / javascript / Toura / app pe care trebuie să le configurați. Puteți vedea o prezentare completă a caracteristicilor aici, dar cele pe care doriți să le setați la false sunt debugToolbar și debugPage. debugPage este o pagină de depanare în aplicație. Veți dori să le dezactivați înainte de a vă crea aplicația gata de producție.
Când sunteți gata să desfășurați, pur și simplu alerga dulce desfășoară în terminalul dvs. și toate diversele binare pentru dispozitivele dvs. specificate în config.yml fișierul va fi creat.
Există atât de mult de explorat în Mulberry, în afară de ceea ce am putut să arăt în această prezentare generală la nivel înalt. Scopul acestui tutorial este într-adevăr doar pentru a vă arăta cât de ușor este de utilizat Mulberry. Dacă vă simțiți curajoși, verificați câteva dintre demo-urile care vin împreună cu depozitul Mulberry, unde veți găsi o aplicație excelentă pentru chiuveta de bucătărie, care vă oferă destul de multe lucruri pe care ați putea dori să le utilizați.
Dacă doriți să aflați mai multe despre Mulberry, documentația oficială este destul de bună, deși este încă o lucrare în desfășurare. Dacă doriți să vedeți o privire mai aprofundată și mai aprofundată asupra dezvoltării Mulberry, inclusiv crearea de componente pentru lucruri precum Twitter și Facebook, anunțați-ne în secțiunea de comentarii!
Accentsconagua