Transfer Data from Click Event Between Bokeh Apps - javascript

I have two Bokeh apps (on Ubuntu \ Supervisor \ Nginx), one that's a dashboard containing a Google map and another that's an account search tool. I'd like to be able to click a point in the Google map (representing a customer) and have the account search tool open with info from the the point.
My problem is that I don't know how to get the data from A to B in the current framework. My ideas at the moment:
Have an event handler for the click and have it both save a cookie and open the account web page. Then, have some sort of js that can read the cookie and load the account.
Throw my hands up, try to put both apps together and just find a way to pass it in the back end.

The cookies idea might work fine. There are a few other possibilities for sharing data:
a database (e.g. redis or something else, that can trigger async events that the app can respond to)
direct communication between the apps (e.g. with zeromq or similiar) The Dask dashboard uses this kind of communication between remote workers and a bokeh server.
files and timestamp monitoring if there is a shared filesystem (not great, but sometimes workable in very simple cases)
Alternatively if you can run both apps on the same single server (even though they are separate apps) then you could probably communicate by updating some mutable object in a module that both apps import. But this would not work in a scale-out scenario with more than one Bokeh server running.
Any/all of these somewhat advanced usages, an working example would make a great contribution for the docs so that others can use them to learn from.

Related

Cloud explorer web client

Does anyone knows a javascript based open sources cloud explorer. I look for something more for the UI. I want to use it as a base to integrate capabilities for managing multiple accounts and communicate between them. Adding audio,photo, video player etc.
Thank' s in advance!
There are many, many 'file explorer'-type tree views. For example (from a superficial Google Search): https://www.jstree.com/ or https://www.uptickhq.com/react-keyed-file-browser/ for React.js. You would have to handle the 'multiple accounts that communicate with each other' separately to implementing the tree view.
This would likely be in form of a server-based API that did this and passed data to your client, where your tree used the information from the API to draw the tree, or you could probably use a library like browser-request/jquery-ajax/etc. to fetch from your different accounts directly to your browser (bearing in mind that there are probably some CORS limitations for this).

Best way for local HTML file to communicate with (read/write) local .xlsm Excel file

I'm a teacher. My grade book is a .xlsm file, located in my Google Drive folder. I'm building a web app, also in my Drive folder, that shows the students names arranged according to the seating chart. I want to run the app on my Android phone, and click a student's name to add a participation mark to the grade book. The app should also display the students' existing participation scores (from the grade book). What is the best way to go about accomplishing something like this?
*I initially tried to do this using another .xlsm file but, when I realized that macros don't run on the Android version of Excel, I switched to an HTML-based app. Was that the right decision?
Here is a sample .xlsm file. In this case, the app would check cell A2 to make sure it's the correct student and then both read and write to cell B2.
If Excel isn’t doing it for you on Android then I’d strongly suggest looking in to Google Sheets. Creating an app for this yourself would be a fun project, if you enjoy that sort of thing, but Google Sheets sounds like it might do the job and you can be up and running in a few minutes.
Having got that out of the way I think it would be best to clear up how web apps work, it sounds like you have some confusion about how they work (or I am from your question!).
A web app is typically made up of two parts, a client and a server.
The client requests resources from the server and the server responds. For example, the client requests the resource associated with example.com, the server is listening for this request and fulfils it by returning a string of text with some meta saying its html. The client (lets say its a browser) understands this is html and begins to parse and render it. If it hits <link> or <script> (or some other stuff) it knows to go and request more resources from a server.
The client is totally detached from the server, it has limited access to the file system and must perform tasks by asking the server to do them. It can only ask, not enforce.
Often there is a 3rd piece which is storage of some sort, this could be a file system somewhere or a database. The client is also detached from this and the server (or another service) owns and manages the storage. In your case Google Drive can act as your storage.
A web client has no direct access to your Google Drive, although if its contents is public there is likely a scheme for you to get a resource (I don't know how Google Drive works but this is fairly likely). I'm not sure it will let you write to the Drive though, not without additional permissions (granted through authentication) being acquired. Many popular frameworks and libraries will allow you to interface with Google Drive and handle the auth handshake etc etc, they are often called a driver or connector.
Very basically, you'd likely need a couple of parts:
Storage -> Connector -> Service -> Client
You can get away with putting connector and service together, and you might be able to get away with connecting direct from the client, which would save you the trouble of creating, hosting and running a service.
The last piece of the puzzle is the conversion you must do from the .xls data into something JS on the client can work with (again, there are often multiple ways of doing things, you might decide to render your page on the server).
There are many tools out there that can convert from .xls to json, which JS can then parse and use (on client or server). I have used one a couple of times but I can't remember which one right now, a quick npm search throws up a number of hits.
Your best option is not to use Google Drive at all. If you are interested in doing something like you described, I would strongly recommend using either PHP and MySQL (a popular combination) or Google Cloud Platform's App Engine (they provide a lot of help, even allowing you to easily build an app that you can sign in to from your Android device with your Google account). If you're more in the mood for Do-It-Yourself, I would probably recommend Spring Boot (These tutorials look pretty good)
When it comes to integrating with Google Drive, it is technically possible to do, but so difficult that you would be much better off writing your own system from scratch and perhaps exporting to an Excel file. (See this page for a tutorial on exporting to Excel from Java)
You have several concerns with the final solution for your problem:
Security (You don't want students breaking into it, like I probably would have done)
Accessibility (You want to get at the information on your phone and your computer)
If I was in your position, I would probably write a Spring Boot application (which can house it's own database, website and API for a computer/phone to communicate with) and an Android application that talks to it.
Also, it would be helpful to know what programming languages and/or libraries/frameworks you have used in the past in order to make better recommendations for your situation. What have you used in the past?
If you need help or have questions, just message or comment.

Which (if any) Javascript storage API (Google Drive, Dropbox, OneDrive) provides automatic syncing?

I have an application that was developed using HTML and javascript. What I need now is to make use of a cloud storage system to access a user's files, which could either be using Google Drive, OneDrive or Dropbox.
One of the requirements is that the application should sync so that new files are added automatically and deleted files removed etc. The sync should be automatic, and there should be no need to poll for changes in the code "manually".
I have determined (as far as I can tell) that with the Dropbox Javascript API, you have to poll for changes and then pull the changes. It seems also with the Google Drive Javascript API that you need to watch for changes and then get those changes. I was leaning towards using OneDrive, but my big problem with that API is that you can (well, so it seems) only access files through a file picker, and I need to get the files without involving the user.
Can anyone confirm the above?
If not, if you need to poll for changes, which would be the best API to use?
And just if anyone has an idea, how often should this be done, and where in the code? Is there some sort of guideline for this?
You can get properties for Files and Folders without the need of the file picker.
File and folder properties (Windows Runtime apps using JavaScript and HTML)
The user will need to authentic with the service as well as grant consent for your application access to their data. Other than that there would be no user interaction required.
You can also use the REST Api's directly once authenticated and granted access. The REST API's are documented here.
Using the REST API
As for the polling interval I might consider using an "observer" design pattern. You're cloud storage system component would register with the "provider" (the parent HTML application) for notifications. You could call the "sync" logic to execute when a predefined operation occurred such as login. You could persist the modified date time your applications root data folder. Then only look for changes in the event of that miss match.
Polling at a given time frequency will only ensure that the data is in sync at that specific time. The user sync state may or may not be valid when they access your application regardless of what frequency you put on the polling method.
Regarding the Dropbox API at least, this is correct. Using the Dropbox JavaScript SDK you need to poll for changes and then pull those changes into your app's local state.

Using a third party library for collection of web events, push data to local servers

Most 3rd party analytics services that rely on client-side tracking (i.e. Javascript tags) are built around the assumption that you want to push data to the third party's servers, and then use their reporting front-end.
For a company with a large data warehouse, there is often a requirement to join the web (or mobile) events data to offline data on a persistent unique user id. From there, the company will have it's data scientist/devs/analysts build custom reports and front end dashboards.
I'm looking for a solution that handles all client-side tracking, but assumes you want to push the data to a local data warehouse. The solution must allow for a persistent unique user id to be associated with each event (unlike Google Analytics). I am NOT concerned with a reporting front end.
EDIT: the real limitation seems to be exporting data at per-event, per-user granularity from an API call, intra-day. Mixpanel allows this level of granularity, but only every 24 hours as a data dump.
edit based on clarification in comments
A couple clarifications: 1. I'm looking to push web event data to my
own servers, not push offline data to Google's Servers. 2. Google does
not allow for export of data at per user id granularity. 3. Mixpanel
does allow for export at per user id granularity, but only every 24
hours as a giant data dump
Here are the 2 that I have seen come up most often in my web analytics adventures:
Piwik is an open source tracking solution that you install and collect data on your own server. The main advantage to this one is that it's free. But it is also really popular and has a robust community.
Alternatively, WebTrends, has a version that can be installed on your own server (Analytics on Premises). Personally I'm not a fan of WebTrends, but I've had some clients swear by it for reasons unknown to me.

Using a server to send/receive information between a mobile phone and web page

I am trying to set up a simple set up as follows:
Have a mobile app with a page consisting of 4 lines (4 html paragraph lines (I am using phonegap)).
I want to use a web page from which I will input the data for those 4 lines. This information is sent to a server and that server transfers this information to that app on that mobile phone. Now, those 4 lines on the mobile phone is filled with the new information.
Similarly user inputs information on another page consisting of 10 lines of li (list). This information is again sent to the server and to the web page where the information is displayed.
I can almost feel the "internet police guys" getting all hyped and ready to vote this question down. But please understand that I have been on this site and various forums desperate to find a tutorial to guide me to do this and not able to find.
I am trying to use ajax to perform this setup. Confused how I would be using the php file. Information such as password n username is going to go in that php file to connect to the server. But php is a server side script thus needs to sit at the public_html folder. How do I use the php file from my desktop? Write a separate javascript to access it?
It is the concept that is confusing me. I am familiar with html,js,php.
I would appreciate any guidance or maybe a link to a tutorial which would help me to do the concept I mentioned. Thanks for listening.
You will need to create an API using PHP. This API is uploaded to your server and is considered "RESTful". Google a tutorial for what fits your needs. You can set all sorts of rules in this API such as requiring any requests to have an ID or access token.
Since you are using PhoneGap, your HTML and JS files rest on the device, so you will need to allow permissions to your API from anywhere. For this you will have to speak to your host provider about unless you know how to configure it yourself (some providers restrict what you want to do by default as an extra security precaution against XSS attacks).
Next, you can either use jQuery, or you can write some AJAX calls by writing the JavaScript yourself.
The most efficient way for this to work is to send JSON objects to and from the API. You will include a "command" in the JSON when you are sending from your app. On the PHP side, you will retrieve this command and use the rest of the data included in your JSON object to process the request. Your API will need to encode a JSON object for return (such as a user's profile information).
Here is a basic PHP API tutorial to get you going that explains some of the features of a RESTful API: PHP API
Here is a simple AJAX function (you will probably want to make this much more modular): AJAX
As broad as your question is, it seems like the best/easiest thing for you to do will be for you to first create a PHP webpage that will access a SQL database to perform the record updating. Actually, this should serve all of your needs for your mobile users assuming you don't need push notifications for live data updates.
I am assuming, since you are using phone gap, that you are more comfortable with web languages. After you get the webpage fully operational, then you should start building your app based on that exact same SQL database. With mobile app development there are a lot more "what if's" (what if the phone rings, what if the app is running in the background, what if there is no cellular service, etc...)
It is always easier to start with what you know and build on that, rather than starting with a new development platform and troubleshooting as problems arise.

Categories

Resources