Share
Mulberry från Toura är en mobil applikationsram byggd ovanpå PhoneGap. Inom några minuter kan Mulberry få dig igång med ett inbyggt program byggt med webbteknik som HTML, CSS och JavaScript.
Låt oss ta en titt på vad vi behöver för att komma igång med Mulberry.
För närvarande stöder Mulberry officiellt OS X Snow Leopard och Lion. Enligt dokumentationen kan det vara möjligt att köra på Linux, men det gör det inte fullt stöd. Förutom ett kompatibelt operativsystem behöver du också den senaste versionen av PhoneGap och Ruby ska också installeras.
För att slutföra denna handledning bör du också ha lite erfarenhet med git.
Du kan få den senaste versionen av Mulberry från Touras githubförteckning. Du kan klona förvaret till katalogen du väljer med kommandot git klon [email protected]: Toura / mulberry.git
Därefter måste vi lägga till hela sökvägen till mulberry / bin till vår miljövägsvariabel, så vi behöver redigera vår .profil fil. Vi kan göra detta genom att utföra följande kommando i terminalen.
exportera PATH = $ PATH: / path / to / mulberry / mulberry / bin
Om du inte har Ruby-pärlspaketet installerat måste du gå vidare och installera det nu, så här:
sudo pärla installeringsbuntaren
Och sedan från roten i förvaret kör kommandot:
buntinstallation
Nu är du redo att bygga din första app med Mulberry.
För att få vår applikationsstruktur behöver vi springa följande kommando i terminalen varhelst vi vill att appen ska byggas. Låt oss säga att vi vill göra en app för kattälskare och vi kommer att ringa appen Katter.
mullbärsställkatter
Du får en massa upphovsrättsmaterial och vissa grundläggande villkor spottar på dig, men vad som också händer är din appstruktur har nu gjorts för dig. Öppna din projektmapp och ta en titt.
Det första vi behöver göra är att gå och öppna upp config.yml fil och gör några ändringar om det behövs. Konfigureringsfilen är riktigt bra kommenterad, så det är ganska lätt att se vad du behöver lägga till eller ändra. Du kommer att se ditt appnamn och temataljerna. För närvarande finns det ingen dokumentation på teman, men du kan ställa in några basfärger här. Du kan då ange vilka plattformar du bygger för. För den här demo kommer jag bara att bygga för iOS, så jag tar bort Android-alternativet. Jag ska också bara rikta mig mot telefonplattformen, så ta bort tablettalternativet.
Du kan se att vi kan välja om vi kommer att inkludera jQuery i projektet och då finns det några API-alternativ för Facebook, Twitter, Urban Airship och Flurry. Jag är säker på att vi alla är medvetna om de två första, men Urban Airship är en tjänst för push-meddelanden över luften. Flurry är ett verktyg för trafikanalys speciellt gjord för mobila applikationer. För denna demo kommer jag inte att gå in i detaljer om integrationen av dessa API med Mulberry, så jag lämnar bara de fälten tomma.
Spara din config-fil och öppna sitemap.yml fil. Här kommer vi att ställa in sidstrukturen för vår app. Du kan se att vi redan har två poster Hem och Handla om. Vi lägger till några länkar till vår hemsida nästa:
- hem - svartvitt - katter-med-macs - katter-med-hattar - kattungar - om
Nu måste vi generera de nya sidorna som vi har definierat i vår sajtkarta. Gå tillbaka till din terminal och ange följande:
mullbär create_page svartvitt
Du kommer att få en bekräftelse på sidan som skapas. Sidorna skapas i Markdown-formatet. Om du aldrig använt Markdown tidigare, oroa dig inte, det finns inget alltför komplicerat om det. Det är faktiskt en av de riktigt fina sakerna jag tycker om Mulberry, eftersom jag använder markdown-formatet dagligen. När du väl är van vid den enkla syntaxen är det verkligen snabbare än att skriva sidor i HTML.
Vi kan gå vidare och använda samma kommando för att skapa våra andra sidor, och när de är färdiga hittar du dem i sidor mapp.
Om du fortsätter och öppnar markdown-filerna ser du att filen har en rubrik som representeras av --- tecken:
--- titel: # krävs! mall: telefon: standard tablett: standard # dessa bör eventuellt peka på en bild i bilderna dir header_image: background_image: # var och en av dessa egenskaper kan innehålla en rad filnamn bilder: videor: ljud: flöden: platser: data: ---
Låt oss redigera den här rubriken för vad vi behöver. För tillfället behöver vi inte huvudbilden eller bakgrunden och eftersom vi bara riktar in telefoner kan vi ställa in den här mallen images-och-text-telefon vilket är en fördefinierad mall inbyggd i mulberry. Vi ska också bara använda bilder för nu, så huvudet på din fil ska se ut så här just nu:
--- titel: Svartvit bildmall: telefon: bilder och text-telefonbilder: - cat-bw-1.jpg - cat-bw-2.jpg - cat-bw-3.jpg ---
Bilderna finns i en bilder mapp inom tillgångar mapp.
Notera: Mängden av blankutrymme när du anger något är viktigt. Var säker på att dina flikar är inställda på 2 mellanslag, annars kommer inte koden att kompileras korrekt.
Gå tillbaka till din terminal och skriv mulberry serve. Allt innehåll kommer då att vara klart för visning i en webbläsare eller iOS-simulatorn på ditt lokala värd (vanligtvis port 3000).
Låt oss fortsätta och ändra rubriken på några av de andra sidorna.
--- titel: Katter med hattar mall: telefon: bilder och text-telefon bilder: - hattar-1.jpg - hattar-2.jpg - hattar-3.jpg ---
--- titel: Katter med Mac-mall: telefon: bilder och text-telefonbilder: - macs-1.jpg - macs-2.jpg - macs-3.jpg ---
Låt oss också titta på hur videomallen ser ut.
--- titel: Kattungsmall: telefon: video-och-text-telefonvideo: - kitten.mp4 ---
Fortsätt och spring mulberry serve igen och kontrollera utmatningen i en webbläsare. Det borde se ut så här -
Och videosidan ska se ut som följer -
Låt oss snabbt titta på de bildtexter som du kan skapa för dessa karuseller av bilder eller videoklipp.
Skapa tre filer i images / bildtexter mapp och namnge dem imagename.md, så för den demo jag har skapat cat-bw-1.md, cat-bw-2.md, cat-bw-3.md. Var och en av filerna ser något ut så här:
--- namn: katt 1 --- detta är en svartvitt katt
Nu om du serverar din app igen ser du innehållet nedanför bilderna ändras när du bläddrar genom bilderna:
Öppna din terminal och kör mulberry test. Din kod kommer nu att kompileras i en bygger mapp. Xcode startar och du kommer att se din apps struktur, inklusive en www mapp där alla dina filer är. Du kan nu slå bygga och springa i Xcode och din app kommer att startas i simulatorn som en inbyggd applikation.
Mulberry kommer nu med inbyggt stöd för Weinre som är en webbinspektör riktad mot mobila enheter (det är fantastiskt!). Den lilla verktygsfältet längst ned till höger på ditt hörn låter dig använda Weinre på Touras egen värdversion av Weinre. Om du går vidare och klickar på Weinre-knappen får du en kod som du kan skriva in på webbplatsen för att få en fjärrfelsökare igång. Med detta kan du testa Javascript eller CSS för att se hur din DOM har konstruerats av Mulberry.
För att stänga av felsökningsfältet längst ner till höger på skärmen finns det några alternativ som finns i TouraConfig.js filen finns i bygga / www / javascript / Toura / app som du behöver konfigurera. Du kan se en fullständig översikt över funktionerna här men de du vill ställa till falska är debugToolbar och debugPage. debugPage är en debugging-sida i appen. Du kommer att vilja stänga av dessa innan du bygger din app redo för produktion.
När du är redo att distribuera, spring bara mulberry deploy i din terminal och alla olika binärer för dina enheter som anges i config.yml filen kommer att skapas.
Det finns så mycket mer att utforska i Mulberry bortsett från vad jag har kunnat visa på denna mycket höga översikt. Syftet med denna handledning är egentligen bara att visa dig hur snabbt och enkelt Mulberry är att använda. Om du känner dig modig, kolla in några av demonerna som kommer med Mulberry-förvaret, där du hittar en bra diskbänk som ger dig mycket av de saker du kanske vill använda.
Om du vill veta mer om Mulberry är den officiella dokumentationen ganska bra, även om det fortfarande är ett pågående arbete. Om du vill se en mer grundlig och djupgående titt på Mulberry utveckling, inklusive att skapa komponenter för saker som Twitter och Facebook, låt oss veta i kommentarfältet!
Accentsconagua