I am creating a small app in HTML/CSS/JavaScript. Internet access is unavailable, and so it must run entirely offline. A researcher will be using the app to collect data, and a CSV file will be generated with this data for the research to analyze.
JS has built in security mechanisms to prevent access to the local file system. My current plan is to build a Chrome app, store everything in chrome.storage, and eventually write to a file using Chrome's chrome.fileSystem. This isn't ideal though, as it requires the researcher to grant access for every file (I'm not sure if you can grant access to folders?), or require the researcher to "download" files as opposed to having them simply be written to disk.
I am looking for a solution that would be as seamless as reading/writing to local files in other languages (Java, Python). I thought perhaps there may be a build of WebKit that allows this, or some chrome flags that I can set. Are there any better solutions?
nw.js (formerly node-webkit) appears to be what I was looking for.
It allows you to access node.js modules directly from the DOM, so you can write to local files using javascript inline with the rest of your code. It also allows you to package the app together so that you can deploy it as an executable.
It also appears to have an active community and numerous apps from developers, so it is production ready.
There is an upcoming API that could provide a seamless way to reading/writing to local files: Native File System API.
But currently only Chrome supports that (by a special flag).
WebKit is probably not the best starting point here - if you need access to the local filesystem and you feel as though you want to build the app in HTML & Javascript, you should look at Node.JS, which will allow you to use the familiar syntax but has the power to do all the backend file manipulation stuff you're looking for.
There are plenty of tutorials on Node.js, and with Express, you can be up and running quickly.
Related
I've built a very simple assistant app in python which can do very basic tasks like taking notes, reminding you, stopwatch, timer, web scrape for news feeds etc. tkinter seems confusing and looks oldish to me. On the other hand, css js seems much easier to design gui side and way more elegant looking. Is it possible to design a desktop gui app (may be with electron?) using HTML+CSS+JavaScript but it will run my old python codes?
I've been coding for only two months and i suck at it. Please excuse my newbiness.
TLDR: Simply, i want to make the gui side using HTML+CSS+JavaScript to take user input but then it will run python scripts and shows output in the gui app. Is it possible?
It can't be done, you'd have to make it like a web app (although with local webserver serving python responses)
EDIT:
if you don't mind running it in webbrowser, you can make quite easily webserver, that will evaluate your queries...
The popular form of Javascript or ES6 (which you are talking about) is designed to run in browser, so, the limitations are that it can only make calls via browser, i.e. it cannot directly interact with the OS like python's OS module. This means you will need a web-service in your computer that would run a specific python code and return you the responses, this requires a web-service/web-framework, preferably python's like Django, Flask which will run the python script for you because they can make OS calls on the server machine. I do think other non-python web-services are cacpable to do so, but of course, the natural preference would be 'Python-based services'.
Sidenote:
If the case was with Node.js(i.e. the server-side js) and not ES6(client-side browser-run) you would have an upperhand i.e. you could invoke python scripts on your server because node.js like the python-based web-servers do support os calls.
Kinda, but its real ugly. If you can host your data and whatnot the other approaches will work.
You have to build your project around nw.js. Essentially it is a Chromium build that adds local file system access back in. You can build an HTML+JS Front end and access a node.js backend running in the same thread. Via node you can shellout to call your python program, or run a local python web server.
I built a mapping app that allowed the user to select a local file, process it on the local machine with python and display the results in an interactive D3 app with geojson based layers of the UnitedStates. Since the data was proprietary I could not host it outside the company. Since I was not IT, I could not host it inside the company. nw.js allowed me to package everything into an installer and deploy to other people within the company as a standalone app.
See here for more information:
Official site: http://nwjs.io
Official documentation: http://docs.nwjs.io/
Introduction
NW.js is an app runtime based on Chromium and node.js. You can write native apps in HTML and JavaScript with NW.js. It also lets you call Node.js modules directly from the DOM and enables a new way of writing native applications with all Web technologies.
It was created in the Intel Open Source Technology Center.
Features
Apps written in modern HTML5, CSS3, JS and WebGL.
Complete supportfor Node.js APIs and all its third party modules.
Good performance: Node and WebKit run in the same thread: Function
calls are made straightforward; objects are in the same heap and
can just reference each other;
Easy to package and distribute apps. Available on Linux, Mac OS X
and Windows
how to zip a folder using javascript
knowing that i am making a javascript win8 store app , i have access to MyDocumnets on the client PC ,
my task now is to zip a folder (saved data of the app) and upload it to my server ??
There is no direct way to zip a folder, or even a file for that matter, using plain JavaScript (no custom libraries). This is because JavaScript is generally limited to operating in the DOM. It would be really bad for example if some malicious website was able to get you to open a page with their JavaScript on it which say, deleted random files on your machine.
However, you do have an option or two. The closest thing that's available right now (again, not considering custom libraries) is the HTML 5 File API. Support for it across major browsers varies, but most newer builds have at least limited, if not full support for it.
With the HTML 5 File API you can access, edit, and write files in a sandboxed environment in the browser. Based on this, what you could do is:
Get access to all the files you want to put in the zip using the HTML 5 File API
Write all the data from those files into a new file, using the .zip format
Save that file as myfile.zip
Part 2 there is going to be your struggle. Parts 1 and 3 are pretty straight forward. Check out this guide on getting started with HTML 5 File API.
The other, likely better option is to zip the files on your server and then just send the .zip to the client machine. Likely will be a lot easier than using the HTML 5 File API.
An alternative to finding a straight-up JS library (which is difficult), is to find a good C/C++ library and wrap it inside a Windows Runtime component. To give a little quick background, the entirety of the WinRT API is written in a way that makes it possible to project that API surface area into multiple languages such as C++, C#, VB, and JavaScript. This model is extensible, which means that you can write your own APIs that behave in exactly the same way. Visual Studio even has templates for this in the C#, VB, and C++ language options.
For an app written in JavaScript, what this makes possible is that you can access a whole host of additional APIs that are not native to JavaScript, simply by creating a small WinRT component (it's just a DLL with some metadata) that's implemented in a language like C++ that does have access to many more APIs, e.g. those in Win32, COM, and .NET. The whitelist of such APIs for Windows Store apps can be found on http://msdn.microsoft.com/en-us/library/windows/apps/br205757.aspx.
Generally speaking, for a JS app you want to implement the component in C++ (which is how WinRT is implemented). Although can also do it a bit more easily in C# or VB, you end up loading the whole CLR and taking something on the order of a 45MB memory hit.
So if you can find a good ZIP library for C++, and it uses the whitelisted APIs on the previous link, then it's straightforward to create a WinRT component that presents an interface usable from JavaScript. I'd recommend having the JS app just pass something like the StorageFolder you're looking to compress and have it return the StorageFile to upload. Then you can simply pass that StorageFile to the BackgroundTransfer API (http://msdn.microsoft.com/en-us/library/windows/apps/windows.networking.backgroundtransfer.aspx), which you should be using for any significant transfer operation as it will make sure it continues if your app is suspended.
For more details on writing WinRT components, refer to Chapter 18 of my free ebook, Programming Windows Store Apps with HTML, CSS, and JavaScript, 2nd Edition. It also details how to create async APIs which is probably what you want in this case because a zipping operation could take a long time and you don't want to block UI responsiveness.
I'm planning to create a cross platform desktop application with Dart.
Because there's no ready built frameworks supporting Dart yet, i have to compile Dart to Javascript first.
I cannot develop completly in Dartium since the desktop frameworks built around HTML5 provide some custom Javascript API's (file system access, native library support, etc.) which i'm planning to use.
I've found the following frameworks which might suit my needs but i'm looking for best practices when developing with Dart.
node-webkit: a fusion of Node and the Webkit browser engine. Provides many packages in the form of NPM. Node and Webkit shares the same thread so it's efficient in terms of communication between the different worlds. Writing and accessing native modules from Javascript seems problematic. Has good documentation. There's node-webkit.dart to access some of the API's from Dart.
XULRunner: The Gecko engine behind Mozilla products as a reusable framework. Provides it's very own UI descriptor (XUL). Has an easier support for native modules (js-ctypes). Seems well documented on MDN. No Dart library written to support development yet.
TideKit/TideSDK: Supports many languages (Dart might be supported later on [link] [link]). Built around Webkit. Seems well documented. Cannot seem to find pub packages supporting it.
Maybe there are some other options i haven't seen yet. I've excluded projects like AppJs (dead), and Cappucino (OSX only).
One option is the Electron framework. Originally created by GitHub for their Atom editor, it allows you to build cross-platform applications for Linux, OS X, or Windows, using web technologies. There is an available Dart wrapper as well. However, this wrapper lacks complete support for the API, and doesn't appear to be under active development.
Another method of using Electron is to call all the electron and node methods via dart:js interop. I've had more success with this method than the library.
Electron uses a main process, stored in main.js, to run the app, and create new BrowserWindows, which load your html. I've found it easier to simply write this file in Javascript, as wrapping too many JS methods is a pain, and this script is relatively light. However, you can use a main.dart file and simply build it with dart2js. Electron will be happy as long as it can find a main.js file.
You can essentially build pages for the app just as you would a regular webpage. You can write it in dart, debug in Dartium, and compile to Javascript for testing it in your app. Of course, your code can't access node APIs from the browser, so you'll have to build the app every time you want to use these. (If anyone has a better way, please point it out!)
One final caveat: Dart's IO libraries won't work with Electron. This is a bit of a drawback, as accessing files is important for pretty much any application. Your best bet will be to use node's filesystem library through dart-js interop. At times, this may feel like a bit of a hack (for example, when working with callbacks), but it gets the job done.
There is the first option.
Chrome Packaged App
You can write Chrome Packaged App with Dart.
dart2js makes it possible to compile dart code to javascript.
and thanks to chrome.dart package, chrome APIs are availble.
Spark is nice example. See https://github.com/dart-lang/spark
I'm building a little locally run CSS driven site map for auditing a huge intranet site. I've already coded the ability, to bring up a context menu which provides for options to make updates to the DOM of index.html. I would like to save these changes to index.html.
I know JavaScript doesn't allow manipulation to the client file system, but I've also read in places that it is allowed if the JavaScript is retrieved from the local machine.
Can anyone confirm this and point me in the right direction on how this can be done WITHOUT setting up a local server?
It is possible to write to the local filesystem using the Filewriter object, as described here: http://www.html5rocks.com/en/tutorials/file/filesystem/
It is also possible to edit local files using the File System Access API.
I don't think this is possible even in IE's trusted zone, at least not with pure javascript (you may be able to with an activeX control / maybe flash or silverlight with the right trust levels).
It's a slightly different subject, but there is a writeup on HTML 5 local storage which may help for background reading: http://diveintohtml5.ep.io/storage.html
I'd like to write an application that would use both Javascript and HTML as for the user interface. The app wouldn't really need an internet connection but will need access to the user's local files.
My first thought was that this would be impossible in a browser due to the security restrictions on the access to local files.
My second thought was to try to use webkit directly from C++ and use Python instead of Javascript, but that seems rather complicated, and I feel like overkilling by using Qt.
My third thought was to use a signed Java applet to make all local accesses, but then I'm not too sure of this either.
Any suggestions on what I should do?
I'll admit that I know very little about this, but it sounds like what you're after is what XUL provides.
From the homepage:
XUL (XML User Interface Language) is Mozilla's XML-based language that lets you build feature-rich cross platform applications that can run connected or disconnected from the Internet.
...
Web developers already familiar with Dynamic HTML (DHTML) will learn XUL quickly and can start building applications right away.
Regarding filesystem access: https://developer.mozilla.org/en/Code_snippets/File_I//O
This article describes local file input/output in chrome JavaScript.
You access the file system using Mozilla XPCOM components. A list of resources and interfaces for local I/O is available for both Files and Streams at XUL Planet.
Because of my lack of familiarity, I'll leave it up to the community to decide whether or not this answer has merit.
EDIT: Making this answer a community wiki since I don't have much real information to offer.
It seems, 5 years after the question was asked, there is a framework to do exactly this: build cross platform desktop app with JavaScript, HTML, and CSS, and with access to local files, http://electron.atom.io/.
I have not used it myself, but it is recommended in other answers.
You can always install needed servers locally and access user's local files that way.
I have been using Server2Go and MAMP
You could - for example - use Cappuccino: It allows you to build Applications in Objective-J (a language written in JavaScript) and run them either in the browser or as a Desktop application with local file access .
Then there is Adobe AIR, which allows you to write apps in JavaScript/HTML and access the file system.
Or you could use the new File Access API: http://hacks.mozilla.org/2009/12/w3c-fileapi-in-firefox-3-6/ (it has big restrictions, though: HTML 5 File API)
JavaScript is a beautiful language! Please update this question with information on which route you choose.
If you're not a Microsoft basher and/or don't mind being bound to IE, a Hypertext Terminal Application (HTA) is another option. I once (long ago) create a complete and pretty large stand alone database-application using HTA.
Do you know PHP? I suggest you to install Wamp or phpTriad or something similar for Windows. That way you can reach to the local files. If it is Linux most of the *nix based operating systems have build in Apache and PHP..
Mozilla currently develops Chromeless, which seems to be able to do exactly what you want and has filesystem access