Share
Många webbutvecklare är blygda från att utveckla mobila appar och tänker att det skulle ta för lång tid för dem att lära sig repen av mobilapplikationsutveckling. Tja, det är inte helt fel, för att lära sig att utveckla inbyggda appar för en mobil plattform betyder oftast att bli bekant med inte bara ett nytt programmeringsspråk utan också begrepp och mönster som ofta är plattformsspecifika.
Om du är en av dessa utvecklare bör du överväga att skapa hybridprogram istället, eftersom du då kan arbeta med språk du redan är bekant med: HTML5, CSS och JavaScript. Dessutom kan du använda populära ramar som Twitter Bootstrap eller jQuery Mobile för att skapa dina appar.
Nu när jag har din uppmärksamhet, låt oss dyka in i Telerik AppBuilder, en kraftfull molnbaserad utvecklingsmiljö som gör det otroligt enkelt att skapa hybridapps. I den här handledningen ska vi titta på vad AppBuilder har att erbjuda, och samtidigt skapa en enkel, hybrid app.
En av de mest övertygande skälen till att använda AppBuilder är dess in-browser-klient, en fulländad IDE (Integrated Development Environment) som körs i webbläsaren. Det låter dig skapa, testa och till och med publicera hybridprogram från vilken dator som helst som helst utan att behöva installera något lokalt.
Att kunna utveckla iOS-appar med datorer som kör Windows eller Linux är en annan anledning till att du vill använda AppBuilder. IOS-enhetssimulatorerna kan också användas från vilket operativsystem som helst.
Slutligen, eftersom AppBuilder är en del av Telerik-plattformen, innebär det att din app har enkel åtkomst till funktioner som analys, push-meddelanden, användarautentisering och molndatalagring.
För att följa denna handledning är allt du behöver ett Telerik-konto. Om du inte har en redan kan du registrera dig gratis och börja omedelbart en 30-dagars prov.
I den här handledningen arbetar vi främst med AppBuilders in-browser-klient. Öppna en ny flik i din webbläsare och logga in på Telerik-plattformen. När du är inloggad visas en sida med alla dina appar.
Om du vill skapa en ny app klickar du på Skapa app knapp. Du kommer nu att bli ombedd att ange olika detaljer om appen.
Välj först vilken typ av app du vill bygga. För nu väljer du Cordova Hybrid för att vi ska skapa vår app med Apache Cordova, en populär hybrid apputvecklingsram.
Ge sedan ett meningsfullt namn och en beskrivning till appen genom att fylla i App-namn och Beskrivning fält. Jag ska använda Min första app som namnet.
Slutligen klickar du på Skapa app knappen för att generera en helt konfigurerad hybrid app som använder Kendo UI-ramen som standard.
När appen har skapats kommer du att tas till Visningar service. Med den här tjänsten kan du skapa alla synpunkter på din hybridapp utan att behöva skriva någon HTML-kod.
I denna handledning skapar vi en mycket enkel app som omvandlar kilo till pund. Det kommer att ha två visningar:
Låt oss först skapa Handla om se. För att göra det, välj Hemvy och klicka Ändra visningstyp. Du kommer nu att presenteras med flera visningsmallar. Klicka på Handla om mall.
På nästa skärm ställer du in Titel till Handla om och klicka på Mall rubriken för att konfigurera innehållet i vyn. En "om" skärm har vanligtvis appens namn, version och beskrivning. Fyll därför in dessa fält på lämpligt sätt. Mallen innehåller också sociala knappar. Vi kommer inte använda dem idag, så avmarkera Kontakta oss, Facebook-knappen, och Twitter-knappen fält.
När du klickar på Tillämpa knappen kommer du att kunna se den vy du just skapat.
Låt oss nu skapa Omvandlare visa genom att klicka på Lägg till vy knapp. Du kommer att bli uppmanad att välja en mall igen. Den här gången väljer du Form mall, eftersom den här vyn kommer att ha två inmatningsfält:
På nästa skärm ställer du in Titel fält till Omvandlare och den namn fält till omvandlare. För att lägga till de två inmatningsfälten, klicka först på Formfält rubrik och klicka sedan på Lägg till formulärfält knapp. Du kommer nu att bli ombedd att välja typ av formulärfältet.
Eftersom vikten i kilogram ska vara ett nummer väljer du Nummeringång från listan över alternativ. Namnge det kgs och ge den en lämplig etikett.
På samma sätt, skapa en Textruta och namnge det resultat. Se till att du också ger den en lämplig etikett.
Nu när formulärfälten är klara klickar du på Knappar rubrik. Som standard har formulärmallen en bekräftelseknapp och en avbrytningsknapp. Vi behöver inte knappen Avbryt så avmarkera Avbryt knapp fält.
Klick Tillämpa för att spara ändringarna. Vyn ska nu se ut så här:
För att användarna ska kunna navigera mellan de två vyerna som vi skapade har visningsservicen redan lagt till en navigationslayout i vår app. För att konfigurera det, växla till Navigationslayout sektion.
Du kommer att se att appen för närvarande använder en Flikmeny som navigeringslayout. Jag kommer att lämna den på så sätt, men du är fri att experimentera med de andra alternativen som finns tillgängliga.
Som standard använder vår app den Handla om Visa som den ursprungliga vyn. Att använda Omvandlare som den ursprungliga vyn, klicka på Applikationsstart rubrik och ange värdet av Ursprunglig vy till Omvandlare. Glöm inte att klicka Tillämpa för att spara dina ändringar.
Din apps navigationslayout ska nu se ut så här:
Nu när användargränssnittet i vår app är klart, låt oss skriva lite JavaScript-kod för att göra den faktiska omvandlingen från kilo till pund.
Till vänster, klicka Koda för att öppna kodredigeraren. Detta kommer att avslöja hybridprojektets struktur. Du kommer att se att det finns en katalog för varje vy vi skapat, innehållande filer som heter view.html och index.js. Medan view.html innehåller HTML-koden som definierar uppställningen av vyn, index.js innehåller JavaScript-koden som hanterar olika UI-händelser.
Öppna Omvandlare vy s index.js fil. Du kommer märka att AppBuilder redan har skapat en kendo.observable objekt som heter converterModel att hantera formuläret vi skapade. Den har en fält attribut som innehåller namnen på formulärelementen vi skapade. Det har också en lämna funktion som kallas när användaren trycker på Bekräfta knapp. Som du kanske har gissat, borde hela vår kod läggas till i lämna fungera.
Koden för att göra omvandlingen från kilo till pund är nästan trivial. Allt du behöver göra är att få värdet av fields.kgs, multiplicera den med 2.2046, och uppdatera värdet på fields.result. För att få och ange attributen för converterModel, du måste använda den skaffa sig och uppsättning metoder. Lägg till följande kod till index.js fil:
"javascript // START_CUSTOM_CODE_converterModel // Lägg till anpassad kod här. Mer information om anpassad kod finns på http://docs.telerik.com/platform/screenbuilder/troubleshooting/how-to-keep-custom-code-changes
var modell = app.converter.converterModel; model.set ("submit", funktion () var lbs = model.get ("fields.kgs") * 2.2046; // få fält.kgs och multiplicera med 2.2046 model.set ("fields.result", lbs + "Lbs"); // set fields.result);
// END_CUSTOM_CODE_converterModel "
Observera att du borde skriva din anpassade kod mellan den automatiskt genererade START_CUSTOM_CODE och END_CUSTOM_CODE kommentarer. Om du inte gör det kommer din kod att gå förlorad när du gör ytterligare ändringar i dina synpunkter med hjälp av tjänsten Views.
Vår app är redo. För att testa det kan vi använda en av de många enhetssimulatorer som AppBuilder innehåller. För nu, starta iPhone-simulatorn genom att trycka på Kontroll + F6. När appen har startat, kontrollera om konverteringslogiken fungerar genom att skriva ett nummer i det första textfältet och trycka på Bekräfta knapp.
Du kan ändra orienteringen för enhetssimulatorn för att se hur den ser ut i liggande läge. För att göra det, klicka på en av Rotera knappar på toppen.
AppBuilder låter dig också testa din app på olika iOS-versioner. Du kan ändra versionen av operativsystemet genom att klicka på Version drop-down på toppen.
Nu när du har sett hur appen ser ut och fungerar på en iPhone, låt oss köra den på en annan enhetssimulator. Klicka på rullgardinsmenyn som innehåller listan över enheter och välj Android telefon.
Du kommer märka att appen fungerar bara bra på Android-simulatorn också. Det ser dock inte ut som en Android-app. Det beror på att vår app använder för närvarande en hud kallad platt. För att ge den en materiell design och känsla, öppna app.js och ändra värdet på hud till material.
Appen ska nu se ut så här:
Enhetssimulatorerna är mycket användbara under utveckling. Det är dock alltid en bra idé att bestämma hur appen fungerar på en riktig telefon eller surfplatta. Genom att använda AppBuilders följeslagareapp är det enkelt att köra appen på din enhet som körs i simulatorn.
När du har installerat kompanionsappen på en fysisk enhet öppnar du kodredigeraren och trycker på Kontroll + B att starta byggprocessen. Du kommer att bli ombedd att välja vilken plattform du vill köra appen på. Se till att plattformen du väljer motsvarar den för den enhet du installerade kompanionsappen på. Välj sedan AppBuilder följeslagare app alternativ och tryck på Nästa knapp.
När byggnaden slutförs framgångsrikt bör du se följande skärm:
Nu kan du öppna AppBuilder följeslagaren på din enhet och skanna QR-koden för att köra din app.
Om du föredrar att arbeta lokalt från kommandoraden kan du använda AppBuilders CLI (Command Line Interface), vilket kan göra nästan allt som kan användas i webbläsarklienten. Eftersom CLI är ett Node.js-paket kan du enkelt installera det med hjälp av npm (Node Package Manager).
bash sudo npm installera-g appbuilder
De flesta av de funktioner som ingår i CLI är bara tillgängliga när du loggar in på ditt Telerik-konto. Använd därför följande kommando för att logga in innan du gör något annat:
bash appbuilder login
När du är inloggad kan du använda -h möjlighet att se vad appbuilder kommandot kan göra för dig.
bash appbuilder -h
För att hjälpa dig att komma igång kan du ladda ner all kod av appen som skapades i webbläsarklienten:
bash appbuilder cloud export "Min första app"
I denna handledning lärde du dig hur du använder Telerik AppBuilder för att skapa en enkel, hybrid app. Du lärde dig också att använda AppBuilders följeslagareapp och enhetssimulatorer för att testa appen. Även om vi fokuserade på webbläsarklienten idag, för utvecklare som föredrar att använda en konventionell IDE, erbjuder AppBuilder också en fristående Windows-klient och en Visual Studio-förlängning.
Börja en gratis prov idag. Om du vill veta mer om AppBuilder kan du se den omfattande dokumentationen.
Accentsconagua