Create a cross-platform mobile app using Cordova+visual Studio (3)

1 background

This section is about Telerik AppBuilder for Visual Studio.

Currently (2014.12) is part of Telerik company Telerik Platform , Telerik Platform function is cross-platform Mobile Development for IOS, Android and Windows Phone, shouting the slogan is "use JavaScript to quickly build mobile apps."

In order to promote this platform, Telerik the three punch:

• Fast installation , on PC, Mac and Linux, no need to download to quickly build a mobile development environment, integration of existing tools and services (note: You can use the browser plug-in direct development, without downloading, can be used free of charge for 30 days, perhaps in the future is a trend);
• write JavaScript, use the web development techniques you already know (HTML, CSS, and JavaScript) to create hybrid or local mobile apps, you can choose the Web-based IDE that Telerik developed, or you can choose the visual studio to develop;
• Can run with the device, whether using the iOS simulator provided by Telerik, or other physical devices such as iOS, Android, Windows phone, can be running the application at any time;

Telerik This platform the author seems to be simple, get started, fast, this is their perfect goal, then the fish and bear paw can not have both, if you want to take advantage of Telerik This tool not to learn iOS, Android, Windows phone development, Then it is a gains thing. As the author is not very interested in learning these mobile phone platform development language, and even do not want to tube how to deploy, Telerik just help solve these problems.

But for the author, there are two major advantages to this tool:

• Kendo UI, kendo UI for Mobile (Telerik) integrated into this tool, Telerik UI development ability, beautiful interface, it is worth choosing;
• cost-saving, no need to buy Mac devices, no iOS developer account, Telerik provides you with an app that allows you to run your code on the iphone and ipad with this app. (Leader & Users see the application feel good to buy is not more robust?

1.1 Design

AppBuilder Internal use of the kendo UI for mobile framework, you can learn the example, very simple to build your own interface.

1.2 Development

AppBuilder uses html,css,javascript to develop the code, you build an application through the template and debug the program in the built-in emulator.

1.3 Commissioning

AppBuilder After downloading the installation, connect the hardware device to the computer and you can synchronize the application for testing .

1.4 Department

AppBuilder helps you build your app in the cloud, so you can save money on your Mac and, of course, you can use Apache Cordova for Visual Studio to deploy your app for code security reasons, but this is a complex step.

2 AppBuilder2.1 Software Installation

After you install Visual Studio 2012 or Visual Studio 2013 (a personal developer can use Visual Studio Community), go to the Telerik appbuilder page to download Telerik AppBuilder for Visual Studio Extension.

Software Installation Checklist

Visual Studio Community Microsoft Benefits, free Activation development IDE, for individual users to use. http://msdn.itellyou.cn

AppBuilder Extension for Visual Studio Let's use it happily. Http://cdn.icenium.com/live/vs/Icenium.vsix

AppBuilder Companion app for IOS Install itunes, install the app on your iphone, ipad, connect your PC with a data cable, and run the app you're developing in real time. Https://itunes.apple.com/en/app/icenium-ion/id527547398?mt=8

AppBuilder Companion app for Android Install pea pods, install the app on your Android device, connect your PC with a data cable, and run the app you're developing in real time. Https://play.google.com/store/apps/details?id=com.telerik.AppBuilder

AppBuilder Companion app for Windows Phone 8 --- Http://www.windowsphone.com/en-us/store/app/appbuilder/0171d46b-b5f2-43d9-a36b-0a78c9692aab

Go to Telerik platform to apply for a Development Account, use Appbuilder extension when needed, Rich wayward program ape can buy some value-added services.

2.2 AppBuilder Extension Preview

After installing AppBuilder extension for Visual Studio, you can use the AppBuilder cloud service, hardware emulator, mobile app development template and more.

Important :

Do not run multiple instances of Appbuilder, and multiple Appbuilder projects running on the computer at the same time will result in unpredictable results. Multiple instances scramble for hardware devices, resulting in the loss of an app history version that has been posted on a hardware device. The emulator cannot connect to the project you are trying to debug, it needs to be closed until there is only one Appbuilder instance, and then run the emulator. The project output interface will output error messages that are not understood.

Visual Studio supports multiple open, but please do not open appbuilder projects, only one project can be developed at a time. Ah, endure a moment of calm. is the Appbuilder development interface.

1. In the menu bar, you can find Appbuilder, you can log in and use the Appbuilder cloud service via this menu. The cloud service can generate, deploy, and sign code, view connected devices, and synchronize changes in the cloud, see login information, run apps in the emulator, and move out of the cloud. (seemingly cloud-generated and deployed + code manager)

• Options, import and export signatures, plus decrypt information.
• Deviceslist, view the lists of hardware that have been identified by Appbuilder. Free
• run‹project name›in Simulator, run the project in the emulator. (free)
• build‹project name›in Cloud, you can build projects in the cloud so you can test apps in physical devices connected to your PC. (charge)
• build‹project Name›and Deploy, build this app and deploy it in connected physical devices. Free
• synchronize‹project name›with Cloud, sync your cloud code and sync apps to your hardware devices with unlimited. Surcharge
• remove‹project name›data from Cloud, remove cloud code and data. Surcharge
• publish‹project name›helps you publish your app to a variety of stores (appstore,googleplay, etc.). (Fee?? ）

2.Help menu, you can find Appbuilder's help resources here. Read a blog, see a Help, raise a level.

A list of 3.Solution Explorer Solutions.

You can add third-party plugins, configure item properties, reset default icons and initial interface splash screens, write code, etc.

4.Output interface, view Appbuilder log.

Various states, including the state of the hardware connection, can be found.

2.3 Running Hello World in iOS

Prepare the Environment

Make sure you have the PC ready and installed on the

• Visual Studio Community
• AppBuilder Extension
• Itunes

such as software, and iphone in hand, installed

• AppBuilder Companion app for IOS

Create a project

Open Visual Studio and select the Appbuilder template from Telerik Kendo UI tabscrip such as.

Writing code

Locate the scripts/app.js in the solution and modify the code in it.

Window. APP = { Models: { Home: { Title: ' Hello World Home ' }, Settings: { Title: ' Hello World Settings ' }, Contacts: { Title: ' Hello World Contacts ', Ds:new Kendo.data.DataSource ({ Data: [{id:1, Name: ' Bob '}, {id:2, Name: ' Mary '}, {id:3, Name: ' John '}] }), Alert:function (e) { alert (e.data.name); } } } };

Simulator debugging

Right-click on the solution and select Run in simulator as in the popup window.

Real-Machine debugging

Connect your iphone to your PC using a data cable, and the output interface should see your device, such as.

The phone output is consistent with the simulator as shown.

Create a cross-platform mobile app using Cordova+visual Studio (3)