Mobile compatible/hybrid web application in MVC3/4 - html

I am creating an web application for user to manage their schedule. It will be MVC3/4 application. I want to know what will be the best approach to make it as mobile compatible also.
I read few articles online like using a phone gap,Kendo UI or a HTML 5 responsive view etc.Well i would love to try it all but dont ahve enough time to try it all.So what will be the best approach to handle this problem. Website will basic login,registration,Grids for data information and maybe a google calender intrigation for scheduling. User will be using this website on their desktop and also on their mobile devices.
Thanks in advance,
Arpan

I will definitely go with ASP.NET MVC 4 and jQuery Mobile
Since you are already building a web application, ASP.NET MVC 4 and jQuery Mobile will allow you to reuse your current model and controllers, and just build the presentation layer for mobile, you don't even have to take care of deciding which view to show to each device, MVC 4 will select the correct view when accessed from a mobile browser.
Note that this proposal implicitly chooses HTML5.
Kendo UI is a tool that will save time for complex controls like the schedule you plan to build, but it is not a different technology and you can add these controls later when you really need them.
Once your application is mature enough, then you can build a Native App to have better interoperation with the smartphone's own schedule, contacts and other features. When that moment arrives check out Xamarin that will allow you to build for any mobile platform using your existing C# knowledge. But do that later, start with the browser based version until the app mature.

Related

Xamarin: how to create views / UI of an app dynamically from a Json

Have you already developed a Xamarin app whose views are generated from a Json recovered when launching the application?
I met a client with this kind of need:
they are developing a web app to prototype the screens by adding and positioning some controls (TextBox, Label, ...)
this generates a Json that must be interpreted by the Xamarin app: this will build the different views dynamically
in a first version, the user's data would be stored locally (through a file or SQLite) and synchronized "manually" when the device is connected to a computer
the app will work on Android only in a first time, and then on WPF
The client has not yet decided between Xamarin.Forms or Xamarin native, but it's probably more interesting to do it through Xamarin.Forms, even if iOS is not required: this should make porting on WPF easier.
Have worked on similar cases? Have you some recommendations? Are there plugins or patterns that could be used to simplify this development?
I've found this one, but it doesn't seem to be the same use.
There is also this article on iOS, but there is not the same thing on Android.
This would in theory be possible using a massive code behind builder for a page but should NOT be done for a production app. Mobile apps have very specific requirements that need to be thought of before attempting.
Xamarin is great for simplifying code reuse, and if you use Xamarin Forms you can reuse the UI components for Enterprise apps.(the less fancy and pixel perfect the layouts need to be the better. )
Your client would be better served by making it a mobile compatible web page instead from the details you have shared.

Front end for an iOS web app using Django Rest API

I ve recently been asked to work in the front-end of a new app which will be written with Django for back end.(They said it will be for iOS).
Even though I have experience working with front-end I never wrote any code for iOS or Django REST API. What are the differences? Is it html/css ?
In another words lets assume that someone has a code in Django which asks user a question and stores the answer. The response will be in JSON(I think.) He wants me to write front end. Should I write it in html?
One more question: What will determine that our app will be working in iOS and will not work in android. They said the app will be for iOS at first but since it uses REST API what is the reason it cannot be available at the same time for android?
The usual process of using django rest framework is to have interactions with your backend exclusively using json.(most of the time, some people might use xml). So in general, all the information (requests and responses) will be JSON. Once you have that part setup, there are a number of technologies that will help you create user interfaces. You can use angularjs or JQuery to send JSON requests and responses to the endpoints and display the information obtained.(the whole interface is modified with javascript.)
Now, for your mobile apps. There are two approaches you either create what people call a native app using Java(for android apps) or Swift(for apple devices).
If you decide to use that approach you will have to mantain both apps in different languages. The other way of doing things would be to create an interface using something like angularjs and use a tool like ionic to convert that app into an android/apple app. Using that approach you will only have to mantain 1 application.
Here is a small diagram to represent the interaction.
(Django rest framework) <=JSON=> (front end app.)
I would suggest to start with django templates, it might just do the trick.

Approaching a new Web app with Mobile app

I have a new project starting up that consists of building a webapp for a workorder based system. The main views are:
Viewing all open/closed/hold work-orders,
View Detail of Workorders
Create new Work orders
Account management.
In addition to being a webapp, it should also function as a mobile app.
What is the best approach for doing this? Will i have to develop a separate app for the mobile side? Can i use my webapp + sencha, jquery mobile, something.. that can work with my logic, classes, HTML structure to have it effectively work on mobile?
Or do i develop a mobile version first and think about progressive enhancement to the webapp (website)?
This question is open to all interpretations of flow, process, technologies.
Thank you Stack Overflowers.
Seperate out your business logic and model code from the view layer. Then use sencha touch and Extjs to create both a web and mobile (mobile web atleast) application. You can then reuse the model and business logic code and use the different frameworks to manage the view. When you have a mobile app running, use phone gap to turn it into a full-fledged app (assumming you need access to phone only systems (camera etc)).
We've done this with our own custom framework built on top of Ext and Sencha. We use ActiveRecord to run the models and then have a compile script that knows which files are for mobile and which are for web. We can then have all the code in the one repository and use the compiler to produce versions for the correct type (mobile or web).
It's definitely not a good idea to start with the mobile app, since web browsers are more ubiquitous than smart phones. Start with the web application and tailor the UI so that it can be easily displayed on smart phones as well as desktop browsers. If that's not a viable route, you could have a regular version and a mobile version of your website. In general, I think the overhead of writing a dedicated mobile client to browse your website is greater than the payoff unless you want to take advantage of the phones' hardware features like GPS or sensors (and even GPS you can still access from a web app using W3C geolocation api).

Web application architecture design - HTML/CSS/JS frontend + REST Backend

I have some experience developing websites, but none with proper web applications.
But this time I'm creating more of a web application, my server will surely handle API calls from a mobile app (iPhone/Android/MeeGo (...or not)) or even from third party clients.
So I'm thinking, is it really necessary that the "website" --the frontend part of my application using HTML (5)/CSS (3) and JS--interacts with my backend in a different way than my other "frontends"?
Am I thinking wrong? I think this is a common problem, and I need some experimented advices on that. Thank you for your help.
Actually No. You're thinking it the right way. You can Javascript to interact with your Rest API, so you can focus only on writing a scalable API, and the UI.
That's the approach taken by Twitter. Their web site, is a Rails application that uses the twitter API, written mostly in Scala, and uses by the hundreds of twitter clients out there, whether mobile or desktop app.

.NET Web application that can be accessed from mobile device

I am planning on developing .NET web application which also will be accessed from mobile device. I am thinking to create two separate projects, one for web site and one mobile device so that upon detecting whether users are accessing the web site either from computer or mobile device, start appropriate project (web site version or mobile version). So for example, if users are accessing the web site from computer, it will show full screens (with all the functionalities). And, if users are accessing the web site from mobile device, show screens with minimal controls.
Or, is there any other better design which to develop .NET Web application that can be accessed from mobile device?
Another question is that how do I detect whether users are accessing the web site from computer or mobile device in .NET web application?
Any suggestion or help would be appreciate it.
Thanks.
Ther is a very good tutorial that show you how to do this with mvc. Check it out ASP.NET MVC Videos, its totorial to create a complete app and they mention in one section how display content depending on what mobile phone the user is using
Have you considered ASP.NET MVC?
Scott Hanselman did a session on ASP.NET MVC and mobile browser detection at MIX 09. This blog entry that he did gives a good rundown.
He also talks about some code he was given that will help do the redirection based on the browser version.
I'm sure ASP.NET MVC 2 has even more goodies.
Good Luck,
Patrick