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.
Related
I am working on a jump to page short cut option in the login page of one of my projects. This will basically lists a few pages in a dropdown of the login page. User can choose one among them to navigate to that page directly post login. I have a personalise jump to page short cut page and user can add his favourite pages to this dropdown. Now the question is about the storage. I was initially planning to store these favourite pages in the local storage. Since it is browser specific, if the user opens the app in another browser, the data won't be available. My second thought was to get a unique id for the desktop and store the data in the server using this unique desktop / machine id. Is there any way to get this id using JS / Angular JS.
Cross-browser sessions can never be supported because of security reasons (A web application is inherently not allowed to directly write to a file system and is allowed to only access local storage, that too the area allotted to the particular application).
Thus, one browser application will never be able to know what the application wrote for the second browser as they can't use the same local storage which means, they can never really share the states.
You can read more about Local Storages here.
on the other hand, If you actually create a web_app for the browser, then you should be able to get permissions to write to file-system and thus, the same application can work across browsers.
I am working on a Web Application developed & hosted on Domino R9 Server (Non Xpages Web Application). Each form has WebQueryOpen and WebQuerySave events implemented for the server side business logic. Problem is that on every page, when the page refreshes from the browser, application's home page/form is loaded. I want to maintain the state of a page in this application.
Moreover, is there any possibility of implementing an Ajax based session handling (backend) in case the page was idle for sometime and session expired. For example if a user was writing something in the Web Editor (implemented in CKEditor latest version) and if his session is automatically dropped he should be able to start with least hassle and his already written stuff may not be lost.
My suggestion is to not use WebQueryOpen and WebQuerySave. Instead write the application to use modern web technologies (Ajax, JSON, REST API), then you don't need to save and reopen the page all the time. Doing that will give you everything you want.
I would build the page using standard HTML and Javascript (or even jQuery), then make Ajax calls to agents on the server to read/write data.
I have given several presentations on exactly this, with plenty of code samples and even finished code to download:
http://blog.texasswede.com/mwlug-2015/
http://blog.texasswede.com/my-mwlug-presentation-2/
http://blog.texasswede.com/my-connect-2017-demo-code/
You can save the contents from all fields and CKEditor in a JSON string and also the UNID (or any "primary key") to the current entity (=page).
Afterwards, you can send this string to the server using AJAX, or as an alternative...
... have you tried using HTML5 local storage? See this page:
https://www.w3schools.com/html/html5_webstorage.asp
Tell us how do you continue!!!
We have some scorm 1.2 content hosted in our server and would like to integrate in our website. I didn’t find any good article that explains how to do it right way. I found lot of articles/tutorials explaining various apis and events about Scorm 1.2, Scorm 2004 and TinCan but none about integrating content in a html page.
Are there any good javascript libraries (scorm players?) that actually reads imsmanifest.xml file and render content?
There are a lot of questions like this on StackOverflow. And the web in general.
Server side Recipe:
Serverside script to allow the upload of a zip or FTP/SFTP, scp etc...
Serverside script to Unzip a Zip file (optional)
Serverside script to parse the imsmanifest.xml (one to many content objects)
SQL or NOSQL DB to store data (optional)
You need to control any launch data, and parameters as well as thresholds defined in the imsmanifest.xml required to launch the content.
Client Side Recipe:
You probably will want a UI for login/user management and assignments
Shareable Content objects commonly run within IFRAMEs, popup windows, new tabs or windows. Determine how you want to launch them.
You'll need a JavaScript SCORM Runtime exposed "API" for 1.2. You'll need to read up on the CMI Object and its namespaces/rules. Don't worry, most the specification is optional.
You'll need to use AJAX to submit the student attempt when they call commit. You'll want to control this with a 'sync' call in cases where the student has closed their browser, or was navigated away from your site. Else, you'll lose their data.
You could get away with localStorage vs the server side storage of data depending on your goals.
General flow for your site is to wait for the student to choose an assignment. Load their CMI Object (clean/new or suspended/resumed). Then load the SCO, wait for them to make calls against your JavaScript API.
Be very careful about not round tripping your back end on get and set value requests. Use the commit to do that so your not spamming your backend.
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.
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