What is Hybrid Mobile App?
Well, if this question is stuck in your mind – fear not. My colleague John Bristowe has done an excellent article titled “What is Hybrid Mobile App”. Do have a read here. The article will give you some perspective on Hybrid Mobile Apps.
Kendo UI Core:
As you can see, with Kendo UI Core package you get the complete Hybrid Mobile Framework and Mobile Widgets. You can check our Kendo UI Hybrid Mobile Demos online here.
Developing with Cordova:
Apache Cordova is the preferred way to get started with Hybrid Mobile App development. Apache Cordova provide CLI or Command Line Interface using which you will create the project, simulate, build & package the mobile app. you can get started with Apache Cordova by following the Getting Started guide here.
Kendo UI Mobile Cordova Templates:
When you want to create a Hybrid Mobile App, you will mobile specific UI controls or widgets as we call it. Kendo UI Mobile provides you exactly that. In order to make it easier to start with Cordova + Kendo UI Mobile i have created 3 templates. You can use these templates to jump start your app development. Lets take a look at the templates below.
You will need to have the following installed on your machine:
- Node JS
Cordova Kendo UI Blank Template:
As the name says, this template will crate a blank app for you. The template will wire up the necessary pre-requisite which is Kendo UI framework and will create a blank screen in the app. Here are the steps to use this template:
- Open a command prompt/terminal on your laptop/desktop.
- Type the command cordova create <appname> –template cordova-kendo-ui-blank-template and press enter.
- Next type the command npm install and press enter. Wait for the command to complete.
- Next type the command gulp and press enter. Wait for the command to complete.
After that your blank app is ready with Kendo UI Mobile Framework and a blank screen has been created. Here is the screenshot of the app:
Cordova Kendo UI Drawer Template:
This template will provide you 3 screen and to perform navigation we will use a Side Drawer. You can follow the steps as explained above. Just the template name will change and you should use the template name as “cordova-kendo-ui-drawer-template“. Here is the screenshot of this template:
Cordova Kendo UI TabStrip Template:
This template is similar to Drawer template. This will provide you with 3 screen in the app and to perform navigation we will use a TabStrip. You can follow the steps as explained above. Just the template name will change and you should use the template name as “cordova-kendo-ui-tabstrip-template“. Here is the screenshot of this template:
If you are building Hybrid Mobile Apps and you need professional looking theme and mobile widgets – Kendo UI Mobile framework will provide you that. With the above templates, your app development will get boost as the templates provide you a basic skeleton to start with. Do try out the templates and let us know if you have any feedback/suggestion by means your comments below.
Till next time – Happy Coding !