Hybrid Html5 Mobile Apps and MVC API Controllers

[Alexis]

Hello,

I am trying to get started with the Telerik AppBuilder to create a Hybrid Html5 Mobile Apps. I see that the documentations covers mostly the views with hardcoded JavaScript to provide the data. I am having a hard time understanding a real world application where the data is provided by MVC API controllers. First and foremost excuse my beginner level. Here are my questions:

What gets published to the app store and ultimately to the device? Would it be the binaries from the Icenium project?

How do I create my MVC API project within the Telerik Icenium project? Do they need to be two separate projects?

If they most be to separated project how do I configure the URL to the API controller in the views? It should not required an app update if the URL changes?

I modified the dataSource in one of the sample to provide data from my api.

var dataSource = new kendo.data.DataSource({
dataType: "json",
type: "GET",
transport: {
//read: '@Url.Action("MethodName", "ControllerName", new {parameter = myParameter} )'
read: 'http://localhost:4851/api/patient?firstName=T&lastName=Cor&memberNumber='
}
});

Thanks a lot in advance,

Alexis

[Tina Stancheva]

Hello Alexis,

Thank you for reaching out to us with your questions. Let me address them separately:

• What gets published to the app store and ultimately to the device? Would it be the binaries from the Icenium project? - In a Cordova-based hybrid project there are no binaries. The app is developed using HTML, CSS and JavaScript. The logic is defined in files within the project created by the AppBuilder client you're using for development. These files are then loaded and displayed in a browser view on the mobile devices. The UI of a Cordova application is effectively a 'web view' that takes up the entire screen. You can examine this post for more information.
• How do I create my MVC API project within the Telerik Icenium project? Do they need to be two separate projects? - You will need 2 separate projects. The MVC API project has to be hosted on a server while the Telerik Platform project developed through the AppBuilder extension for Visual Studio will run on a mobile device. The mobile project should get the data from the MVC API Controllers using ajax() requests.
• If they must be two separated projects how do I configure the URL to the API controller in the views? It should not required an app update if the URL changes? - Any requests for remote data in a hybrid application should happen with ajax requests to the server. If the service endpoints change you will have to change the URLs to those services(controllers) as well.
• I modified the dataSource in one of the sample to provide data from my api - Please keep in mind that in order to access a localhost URL from an app running on a mobile device, your machine and the device should run in the same network. Further, instead of using localhost you would need to use the IP address of your machine to reach the service. I would also recommend that you go through the Kendo UI DataSource documentation for more information on how it works and how it can be configured.

Let me know if that helps and if I can assist you with more information.

Regards,
Tina Stancheva
Telerik

 

 

[Alexis]

Thanks a lot Tina. It clarifies a lot for me. Is there a good way to keep the service endpoint URL in a single place (variable) so it can be used by all service controllers? I would not like to hardcode and IP address or host name in very ajax request. What is a common good way to stored the endpoint address in the Cordova application?

Thanks again,

var dataSource = new kendo.data.DataSource({
dataType: "json",
type: "GET",
transport: {
read: 'http://<IPAddress>/api/patient?firstName=T&lastName=Cor&memberNumber='
}
});

[Tina Stancheva]

Hi Alexis,

You can store the endpoint address as a global variable in the app. As long as the variable is declared in the global scope in the app you will be able to access it from any method and use it to create the service endpoint full address.

Regards,
Tina Stancheva
Telerik

 

 

[Alexis]

Thanks Tina