Share
Mulberry fra Toura er et mobilprogram rammeverk bygget på toppen av PhoneGap. Innen minutter kan Mulberry få deg i gang med en innfødt applikasjon bygget med webteknologier som HTML, CSS og JavaScript.
La oss ta en titt på hva vi trenger for å komme i gang med Mulberry.
For øyeblikket støtter Mulberry bare offisielt OS X Snow Leopard og Lion. Ifølge dokumentasjonen kan det være mulig å kjøre på Linux, men det gjøres ikke fullt ut. I tillegg til et kompatibelt operativsystem, trenger du også den nyeste versjonen av PhoneGap og Ruby skal også installeres.
For å fullføre denne opplæringen bør du også ha litt erfaring med å bruke git.
Du kan få den nyeste versjonen av Mulberry fra Touras githubregister. Du kan klone lageret til katalogen du velger ved hjelp av kommandoen git klone [email protected]: Toura / mulberry.git
Deretter må vi legge til hele banen til Mulberry / bin til vår variabel for miljøvei, så vi må redigere vår .profil fil. Vi kan gjøre dette ved å utføre følgende kommando i terminalen.
eksporter PATH = $ PATH: / path / to / mulberry / mulberry / bin
Hvis du ikke har den Ruby perlen 'bundleren' installert, må du gå videre og installere det nå, slik som:
sudo perle installasjonspakker
Og så løp kommandoen fra roten av depotet:
bunt installasjon
Nå er du klar til å bygge din første app med Mulberry.
For å få vår applikasjonsstruktur trenger vi å kjøre følgende kommando i terminalen hvor vi vil at appen skal bygges. La oss si at vi vil lage en app for kattelskere, og vi skal ringe appen Katter.
mulberry stillas katter
Du får en haug med opphavsrettsmateriale, og noen grunnleggende vilkår spytter ut på deg, men hva som også vil skje er at app-strukturen din nå er gjort for deg. Åpne prosjektmappen din og ta en titt.
Det første vi må gjøre er å gå videre og åpne opp config.yml fil og gjør noen endringer hvis nødvendig. Konfigureringsfilen er veldig godt kommentert, og så er det ganske enkelt å se hva du må legge til eller endre. Du vil se appens navn og temaopplysningene. For øyeblikket er det ingen dokumentasjon på temaer, men du kan sette noen grunnfarger her. Du kan da spesifisere plattformene du bygger for. For denne demoen skal jeg bare bygge for iOS, så jeg vil slette Android-alternativet. Jeg skal også bare målrette mot telefonplattformen, så slett tablettalternativet.
Du kan se at vi kan velge om vi vil inkludere jQuery i prosjektet, og så er det noen API-alternativer for Facebook, Twitter, Urban Airship og Flurry. Jeg er sikker på at vi alle er klar over de to første, men Urban Airship er en tjeneste for push meldinger over luften. Flurry er et verktøy for trafikkanalyse spesielt utviklet for mobile applikasjoner. For denne demonstrasjonen kommer jeg ikke til å gå inn i detaljer om integrasjonen av disse APIene med Mulberry, så jeg skal bare la disse feltene være tomme.
Lagre konfigurasjonsfilen din og åpne sitemap.yml fil. Det er her vi skal angi sidestrukturen for appen vår. Du kan se at vi allerede har to oppføringer Hjem og Handle om. Vi skal legge til noen linker til vår hjemmeside neste:
- hjem - svart-hvitt - katter-med-macs - katter-med-hatter - kattunger - om
Nå må vi generere de nye sidene vi har definert i vårt nettstedskart. Gå tilbake til terminalen din og skriv inn følgende:
Mulberry create_page svart-hvitt
Du vil få en bekreftelse på siden som ble opprettet. Sidene er opprettet i Markdown-formatet. Hvis du aldri har brukt Markdown før, ikke bekymre deg, det er ingenting altfor komplisert om det. Faktisk er det en av de veldig fine tingene jeg liker om Mulberry, da jeg bruker markdown-formatet på daglig basis. Når du er vant til den enkle syntaksen, er det virkelig raskere enn å skrive sider i HTML.
Vi kan gå videre og bruke samme kommando til å lage våre andre sider, og når de er ferdige, finner du dem i sider mappe.
Hvis du går videre og åpner markdown-filene, vil du se at filen har en overskrift representert av --- tegn:
--- tittel: # påkrevd! mal: telefon: standard tablett: standard # disse bør eventuelt peke på et bilde i bildene dir header_image: background_image: # hver av disse egenskapene kan inneholde en rekke filnavn bilder: videoer: lyd: feeds: steder: data: ---
La oss redigere denne overskriften for det vi trenger. For øyeblikket trenger vi ikke topptekst eller -bakgrunn, og da vi bare målretter mot telefoner, kan vi sette den aktuelle malen bilder-og-tekst-telefon som er en forhåndsdefinert mal innbygget i mulberry. Vi skal også bare bruke bilder for nå, så lederen av filen skal se akkurat slik ut for nå:
--- tittel: Svart og hvit mal: telefon: bilder og tekst-telefonbilder: - cat-bw-1.jpg - cat-bw-2.jpg - cat-bw-3.jpg ---
Bildene er plassert i en Bilder mappe i eiendeler mappe.
Merk: Mengden av hvite plass når du skriver inn noe er viktig. Pass på at kategoriene dine er satt til 2 mellomrom, ellers vil koden ikke kompilere riktig.
Gå tilbake til din terminal og skriv mulberry servere. Alt innholdet vil da være klart for visning i en nettleser eller iOS-simulatoren på ditt lokalehost (vanligvis port 3000).
La oss fortsette og endre toppteksten til noen av de andre sidene.
--- tittel: Katter med Hatter mal: telefon: bilder og tekst-telefon bilder: - hatter-1.jpg - hats-2.jpg - hats-3.jpg ---
--- tittel: Katter med Mac-mal: telefon: bilder og tekst-telefonbilder: - macs-1.jpg - macs-2.jpg - macs-3.jpg ---
La oss også ta en titt på hvordan videomalen vil se ut.
--- tittel: Kattunger mal: telefon: video-og-tekst-telefon videoer: - kitten.mp4 ---
Gå videre og løp mulberry servere igjen og sjekk utgangen i en nettleser. Det skal se slik ut -
Og videosiden skal se ut som følgende -
La oss få en rask titt på bildetekster som du kan lage for disse karuseller av bilder eller videoer.
Lag tre filer i bilder / bildetekster mappe og navn dem imagename.md, så for demoen jeg har skapt cat-bw-1.md, cat-bw-2.md, cat-bw-3.md. Hver av filene ser noe ut som dette:
--- navn: Cat 1 --- Dette er en sort / hvit katt
Nå, hvis du serverer appen din på nytt, ser du innholdet under bildet endres mens du bla gjennom bildene:
Åpne din terminal og løp mulberry test. Koden din vil nå kompilere i en bygger mappe. Xcode vil starte, og du vil se programmets struktur, inkludert a www mappe hvor alle filene dine er. Du kan nå treffe bygg og kjøre i Xcode, og appen din vil starte i simulatoren som et innfødt kjørerapplikasjon.
Mulberry kommer nå med innebygd støtte for Weinre som er en web inspektør målrettet mot mobile enheter (det er kjempebra!). Den lille verktøylinjen nederst til høyre på hjørnet gir deg mulighet til å bruke Weinre på Touras egen vertsversjon av Weinre. Hvis du går videre og klikker på Weinre-knappen, får du en kode som du kan skrive inn på nettstedet for å få en ekstern debugger oppe. Med dette kan du teste ut Javascript eller CSS for å se hvordan DOM er konstruert av Mulberry.
For å slå av feilsøylinjen nederst til høyre på skjermen, finnes det noen alternativer i TouraConfig.js filen ligger i bygge / www / javascript / Toura / app som du må konfigurere. Du kan se en full oversikt over funksjonene her, men de du vil sette til falske er debugToolbar og debugPage. debugPage er en feilsøkingsside i appen. Du kommer til å ønske å slå av disse før du bygger appen din klar for produksjon.
Når du er klar til å distribuere, bare kjør mulberry distribuere i terminalen din og alle de forskjellige binærfiler for enhetene dine spesifisert i config.yml filen vil bli opprettet.
Det er så mye mer å utforske i Mulberry bortsett fra det jeg har kunnet vise i denne svært høye oversikten. Formålet med denne opplæringen er egentlig bare å vise deg hvor raskt og enkelt Mulberry er å bruke. Hvis du føler deg modig, sjekk ut noen av demoer som følger med Mulberry-depotet, hvor du finner en flott kjøkkenvask-app som ganske mye gir deg mange av de tingene du kanskje vil bruke.
Hvis du vil vite mer om Mulberry, er den offisielle dokumentasjonen ganske bra, selv om det fortsatt er et arbeid pågår. Hvis du vil se en grundigere og grundigere titt på Mulberry-utviklingen, inkludert å lage komponenter for ting som Twitter og Facebook, gi oss beskjed i kommentarfeltet!
Accentsconagua