Cloud explorer web client - javascript

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).

Related

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.

Transfer Data from Click Event Between Bokeh Apps

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.

How does Google's analytics.js authenticate the hostname?

I'm building JS-only plugin which will be implemented on multiple websites, each website having its own unique ID, which is passed to a Rails API along with some other data. My API will verify the hostname and ID provided by the JS plugin - but these things can of course be seen and used to fake impressions or events by anyone.
As far as I'm aware, there is no foolproof way of authenticating a website without an invisible, server-side key. That said, how does Google do it?
Analytics requires no server-side implementation, only an ID, which it of course checks against the hostname. Does this not mean that page views and events can be faked by a third party, and if so, why isn't it a prevalent issue?
Thanks in advance

How to add database system to WebGL application

I'm currently working on a WebGL sketch drawing project where users can draw arbitrary objects on an html canvas. The javascript libraries and files are all stored on a node.js server which is currently being started up locally every time the software has to be run. Essentially all of the functionality for saving all of the drawn objects on the page has been implemented where the drawings are being written as JSON objects, but the next step is to persist these objects to a database where they can be mapped to a user id. I will also need to implement a login system where users will login and be able to select previously drawn objects to edit from the database.
If this was just a normal website, I would probably just use express.js or something similar, but as the views are essentially rendered entirely in WebGL, I wouldn't think that frameworks would work well with this construct.
Given that I currently just need to create a login system and implement a feature for persisting the JSON object to the DB, are there any frameworks or existing software that accommodates the specified needs of the system?
With regard to authentication, I would recommend taking a look at OAuth and using existing identity providers (e.g. Google, Facebook, etc). You can still retain profiles for your users but you don't have to deal with all of the intricacies of authentication, authorization, security, etc.
There are a ton of JavaScript libraries out there for handling OAuth/OAuth2 interactions. Some even have built-in identity providers. Here are a couple links that returned all sorts of potentially useful libraries:
https://www.npmjs.com/search?q=oauth2
https://www.google.com/search?q=javascript%20oauth2%20library
As for a database, you have a lot of options for storing raw JSON. Some that I've used recently for my JavaScript projects are PostgreSQL, MongoDB, and ArangoDB. You can find well written JS libraries for interacting with any of those.
Another thing to think about is if you want to install the database on your server or use a hosted solution such as RDS or DynamoDB (available from Amazon).
Regardless of the exact authentication and persistence options you choose you will likely use a pattern similar to this:
Your Node.js server is deployed somewhere accessible on the internet, where it exposes the endpoints for your WebGL application, authentication, and saving/loading sketches.
When the user navigates to the WebGL application endpoint on your Node.js server they are required to authenticate (which will utilize your authentication endpoints on the Node.js server).
When the user requests a "save" in your WebGL application you will submit the JSON representation of their sketch (and their authorization token) to the "save" endpoint of your Node.js server.
This "save" endpoint validates the user's authorization token and inserts the JSON into whatever database you've chosen.
The "load" endpoint works just like the "save" endpoint but in reverse. The user asks for a specific sketch. The identity of the sketch (id, name, etc) is sent along with their authorization token. The "load" endpoint on your Node.js server validates their authorization token and then queries the database for the sketch.
The key pattern to notice here is that users don't send requests to your database directly. Your WebGL application should communicate back to your Node.js server and it should commmunicate with your database. This is essential for controlling security, performance, and future updates.
Hopefully this gives you an idea of where to go next.
EDIT based on comments:
I searched around for a Node.js + PostgreSQL guide but didn't find anything I would feel comfortable recommending. I did find this JS library though, which I would check out:
https://github.com/vitaly-t/pg-promise
For MongoDB I would just use their official guide:
https://docs.mongodb.org/getting-started/node/introduction/

Wrap javascript API?

We are looking for your input regarding architectural design of a Javascript API and a .Net (Rest) API.
Background
We are building an enterprise solution with several different channels (Site, App etc) that are consuming data through a service layer, or API. The API is on one hand a .Net WebAPI that are communicating with the business layer but we are also thinking of wrapping external Javascript services (Communication with Google Maps, Google Analytics, Social Login etc) in some sort of API, or maybe SDK. The idea is to have the possibility to quick change components in the Javascript Library (Replace Social Login Provider with someone else).
What is your ideas regarding the Javascript? Should that just be a SDK that wraps other libraries?
Thank you,
Robert
I think it will depend on how much control you want to give to your client side development groups. If the UI development group is faster (and on different release schedules) than the group that manages this SDK, then the SDK will just get in the way (unless they are in lock step with the UI group). It would be better to just give them access to the server side APIs then let me compose the page as they see fit.

Categories

Resources