Cross browser/cross platform offline phone app - javascript

We have a new build requirement that needs to work as follows:
the functionality of the App is that the maintains data related to tasks assigned to the User
the App needs takes data in the form of XML via WebAPI, the XML is a list of tasks for the User has been assigned. This would be a task bundle
once the XML is downloaded the User can work offline, i.e. they need to be able to maintain data related to their tasks, the data needs to persist on the phone, tasks would be completed over time in different sessions
there can be a number of current taks bundles "on the device" for the User
when online the App can submit an XML back up to the server, the purpose of this is to communicate the data entered by the user for the task bundle
If this was an online app it would be fairly straightforward, the data resides on the server. I have done a lot of research on the web with regard to the best way to build the app to satisfy the requirement that the App works on all browsers and platforms.
We're thinking of going with HTML5 & JayData. Haven't made any firm and final decisions, so would welcome any suggestions and constructive comment.

I work for JayData. If you have concerns against JayData just let us know and we'll try to answer.

Probably this article will help you to start your online/offline app - How to create a synchronized Online/Offline data application with EntityFramework, JavaScript and JayData

Related

Different logins, but live session shared on two computers, what platform do I use and how would I build that?

I am trying to build a website that allows coordinators and teachers to be able to login with separate logins and see the same page at the same time on different computers (it is interactive). Do you know what platform we could use to do that? Any insight would be great!!
For example, a teacher would press a check next to a goal they think they met, and their coordinator would see that on their computer immediately, and press a checkbox and their side regarding whether they met the criteria.
The platform could be any web server language. The javascript framework express.js which runs on node.js is very popular.
You'll need some javascript to send the goals to the server.
You'll need a database to store the goals. Mongodb is popular.
You'll need code to set and get the database goal objects into web layer goal objects.
You'll need a template engine to render the web layer goal objects as html and some more javascript to update all clients screens when a goal is checked.

How to write a web application where updates by one user are immediately visible to all users?

I am trying to write a web application that displays to users a hierchical tree. Users can add,delete, and update the tree but the tree should look the same for all users. My first thought to save the state of the tree (i'm using JSON to represent the data in the tree) in a database but, what happens if there are a million/billion/etc number of people using the application? How do you make sure that all users are physically seeing the same thing if additions/updates/deletes could be going on simultaneously?
Something like signalr would would help:
http://signalr.net/
What can you do with ASP.NET SignalR? SignalR can be used to add any
sort of "real-time" web functionality to your ASP.NET application.
While chat is often used as an example, you can do a whole lot more.
Any time a user refreshes a web page to see new data, or the page
implements Ajax long polling to retrieve new data, is candidate for
using SignalR.
It also enables completely new types of applications, that require
high frequency updates from the server, e.g. real-time gaming.

patterns for building Web/Mobile apps that processes a lot of data on the client side

I'm trying to build a single page web app using Backbone. the app looks and behaves like a mobile app running on a tablet.
The web app is built to help event organizers manage their lists of people attending their events, and this includes the ability to search and filter those lists of attendees.
I load all attendees list when the user opens the attendees screen. and whenever the user starts to search or filter the attendees, the operation happens on the client side.
This way always works perfectly when the event has about ~400 attendees or less, but when the number of attendees gets bigger than that (~1000), the initial download time takes longer (makes sense) .. but after all data is loaded, searching and filtering is still fast relatively.
I originally decided to go with the option of fully loading all the data each time the app is loaded; to do all search operations on the client side and save my servers the headache and make search results show up faster to the user.
I don't know if this is the best way to build a web/mobile app that processes a lot data or not.
I wish there's a known pattern for dealing with these kinds of apps.
In my opinion your approach to process the data on the client side makes sense.
But what do you mean with "fully loading all the data each time the app is loaded"?
You could load the data only once at the beginning and then work with this data throughout the app lifecycle without reloading this data every time.
What you also could do is store the data which you have initially fetched to HTML5 localstorage. Then you only have to refetch the data from the server if something changed. This should reduce your startup time.

Mobile app for web application (offline storage)

I hope this question belongs here. I am developing a web application for a client. It involves creating appointments/quotes for tradesman and need some advice.
Basically there are products that can be added to a quote created on the webapp. I want to be able to select the quote on the mobile app from a smartphone a fill out the quote.
The problem I face is that because there might not always be internet connectivity I need to store quote data offline on the device so that it can be synchronised when there is internet.
Here is the process using the mobile app:
User gets appointments from web application and stores them (preferably in a database)
Even with no connection user can then fill out quote on the appointment.
User saves quote
Mobile app automatically sends new quote to web application (if connection)
When internet is available user manually synchronises data
The web application takes care of creating appointments and managing the products. The mobile device stores it's own copy of the products and simply just a reference to the quote.
So the user can see a list of appointments. Selects the appointment and then begins to add products.
appointments
appointment_id
description
products
id
description
quote
id
appointment_id
product_id
The web application has been developed in PHP.
I'd like to take advantage of HTML5's offline storage for the mobile app as I'm a web developer and don't have time on this project to learn a native language (i.e objective-C). I've read in a couple of places that web SQL database is not going to be continued so I'm not really sure what my options are.
Also for code in thinking HTML5 and JavaScript, so probably using jQTouch or jQuery Moble.
If anyone has any suggestions or recommendations for me that would be great!
I have a jQuery Mobile app which stores data off-line. Users push completed records up to a web service when connected (the app also uses the off-line capabilities in HTML5). This uses Web SQL (which is SQLite in WebKit and Opera) in Mobile Safari, and works well on the principal devices (iPad / iPhone) but is also fully functional in Chrome and Safari on the desktop (I haven't tried Opera, but obviously it wouldn't work in Firefox or IE).
A few considerations:
As you point out, Web SQL has a somewhat uncertain future. You might want to look at IndexedDB instead, although depending on the browsers you need to support Web SQL might just be fine.
Local database size is limited, but you should be OK if you "purge" data flagged as complete and submitted every so often (I think it's 5MB per db or thereabouts, so quite considerable).
My app talks to a SOAP web service via ajax, and we're all on the same domain. You may need to look at CORS / reverse proxies and such if domains are going to differ
I don't like fiddling with XML in Javascript, but XMLObjectifier makes that side of things easier (parses XML into JSON objects)
PhoneGap applications use HTML5 and CSS3 for their rendering, and JavaScript for their logic
What that mean is that you have two possibilities, whether your client's data in your application is meant to be modified without an application update or not. Since I cannot determine that from the information you gave in the question, I'm going to detail the answer for each case.
If your client's data does not need to be updated (without an update of your application)
In this case, you consider your client's data to be static. The provenance of this data is not relevant, as you will include it in your application data, like any other text or image (or other asset), before distributing your application. That means that the listings of your client will be tied with your application, and that modifying them will require to update your application.
Technically that means that you will simply add your client's data as a static file. It can be HTML5 code, right in the middle of your own application code, or it can be any kind of file (for instance Json), that your application will have to parse and display (using JavaScript).
However, if you go for the HTML5 solution, for maintainability purposes (and maybe other reasons), you will probably want to separate the content from your client from the content from your application. To do so, create an HTML5/CSS3 page which contains your client's data, and include it in your application's page(s) using that method (or you can use the pager.js library as mentioned in this answer).
As a side note: the next method will perform as well as this one in the present case; with the downside of being a bit more complex.
If your client's data needs to be updated without an update of your application
In this case, you consider your client's data to be dynamic. The provenance of the data is relevant, as only the method to fetch the data will be stored in your application: the rest will be done by the device which will execute your application. While more complicated to achieve, this method has the advantage of allowing a constant update of the data without requiring an update of your application.
Technically that means that you will describe your application layout and (graphical) design in HTML5/CSS3, and that you will code your application behavior (fetching your client data, storing it, querying it, displaying it, etc.) in JavaScript.
To do so, you will need to fetch your client's information using JavaScript (embedded in your application's HTML5 files) and then use JavaScript again to store these information in the PhoneGap Storage. Then, your application will also need to query the PhoneGap Storage (still using JavaScript) to access the stored information and to display it, according to the layout/design described in the HTML5/CSS3 files (probably the HTML5 skeleton in your application for your client data logical layout, with CSS3 ids and classes for its design/appearance).
It is worth noting that if you have an always-online device, as long as your client's website is up, you don't need to store the listing information in your application. But if your client's website goes down, or if the device goes offline, you will need a local storage.
Bottomline
In other words, if your application never requires an Internet connection to work, it is safe to include the listings within the HTML5/CSS3 data; otherwise, you will need to go for the JavaScript/PhoneGap Storage solution, even though it's more complex.

The Javascript Datastore Problem

This might sound super crazy but I really want to know if this can be done.
Assume a multi-user site that gives users some tools to build web apps from the site itself (using only HTML/CSS/JS) and share them. Now, if each of the apps were to be assigned a datastore, say just a table for convenience, is it possible to make secure query/insert requests from the app to the backend to write to the assigned table.
Take an example - the app is a small game. The developer wants to record the scores of the users who play the game and wants to use his assigned datastore (see above) for it. Is it possible for the site to ensure that no other app/user can access this datastore? If so, how can it be done?
Edit: Please do note that there are three parties involved - the developer of the app who is a registered user, the app itself which has been granted the datastore and an app user (registered/unregistered) who is viewing the app.
I think this is the same as using any type of backend datastore for any web app. You could assign the user a unique ID (which they have to validate by logging in) and then manage access to the datastore through AJAX post backs.

Categories