I am a programming novice, so please forgive the technical ambiguity here. I will try to be as specific as possible about what I am trying to accomplish.
I am trying to build an interactive website where multiple clients can log on and view a board game. The board game consists of regions on a map with color (player who controls it) and number (armies) variables, as well as draggable tokens.
I have built a client-end version in JavaScript using the Raphael interface for SVG graphics, and would like to build a server that can process any changes one client makes to the board and update the boards of the other clients. In my mind, the sequence would be something like:
Action performed by the user
Action listener updates client view
Update sent to server
Server changes database to reflect change
Server notifies all clients
Clients update view
I've read up on Ajax/XML a bit, but the tutorials I have found have mostly been about getting static data, and I haven't seen an example of actually CHANGING dynamic data on a server, nor have I been able to find any examples of what the server functions should look like.
So basically my question is, can anyone point me in the right direction here? I would very much appreciate a general outline about how I could go about accomplishing this, as well as direction to a tutorial or two that relates to the task. Thank you!
You may look at nodeJS and socket.io.
With this technology it is possibile to create real time web applications.
Its a bit older, but here is a game we did some time ago:
https://github.com/stravid/unitacs
It also uses raphaelJS.
Related
I would like to build an image classifier with ml5.js or Tensorflow.js. I want the user to be able to add their own labels, ie. train the model. Daniel Shiffman's tutorial in transfer learning is excellent for this: https://www.youtube.com/watch?v=kRpZ5OqUY6Y
However, I would want several users to be able to train the same model. People would contribute to the same model with their own classifications.
Ideally one participant could contribute from their own browser in country X and other in country Y. Or, at least, two users in the same space doing the labeling from their own browsers. Displayed images would probably come from a JSON file.
I have tested Socket.io for collaborative mouse drawing using p5.js, but that's basically all my relevant experience in this kind of collaborative apps. So: is it possible for multiple users to train the same ml5.js/Tensorflow.js model using Socket.io or something similar?
Warm thanks for any advice!
I once used TogetherJS from Mozilla in a simple way to collaboratively add to the training dataset across any number of browsers. But each instance needed to run tf.fit on the extended dataset. Federated Learning would be the next step to avoid all this redundant computation.
Perhaps you don't need real time collaboration for this? The users can supply images and labels from their browsers and press an upload button.
There can be a train button in the client that tells the server to start training again. The model is only on the server so everyone can contribute to it.
While the server is training and it receives a new train command, it will just send back a message already in training process.
This way you won't need socket.io...
First I know this might be received as an opinion-based question. If it is the case, could you advise some other appropriate places to get some feedback.
I want to make a web app that renders graphically tree data structure that needs to be updated on the browser as the data changes in real time on the server, and as we navigate through the data on the client-side (like if we were moving through a 2D map in a game, getting data as we progress and as it changes)..
I can do MongoDB, nodejs, and react at the moment. I'm planning to have a deeper look graphQL based on a guess that it might be helpful. Other than that I don't have too many ideas regarding open connections (is there anything other than socket.io that I should look into?)
About the GUI, I did a bit of canvas, a while ago, but I really don't know in which directions to look to see what exists today, and even if it is worth getting refreshed in python for example..
Any feedbacks appreciated before the question is deleted..
I would like to write a 3D application using Golang, my favorite programming language. However, I would prefer not to use native OpenGL directly as the graphical frontend as this would entail a larger learning curve than I'm willing to tolerate. Additionally, I don't really want to use a Golang game engine like go:ngine.
After doing some research I found out about the amazing WebGL Javascript library three.js and I was so intrigued that I completed an introductory Javascript course in a few hours. I'm not really a web developer at all, so I'm wondering how practical it would be for me to write my application primarily in Go but with a three.js frontend.
Some specific questions:
Is it worthwhile / practical to use Javascript/three.js as a frontend to a Golang server like this?
If it is worthwhile, where can I look to learn how to integrate the two cleanly?
If it isn't really worthwhile, which alternatives do I have?
Thanks, any response appreciated.
Edit:
Do you plan to make operations on geometry in Go, possibly in realtime and communicate with your Javascript layer using Websockets?
Yes, this is what I'm thinking now. I'm intending my (Golang) program to generate streams of vertices and triangles based on a few parameters from the user. Each "structure" is generated all at once after the users supply their parameters (which I see as slider bars + input boxes on a Javascript frontend).
Here's an example of something the Go program might generate, plotted in GNUPlot:
(source: alexozer.com)
If this is the case you underestimate Javascript a bit. You should write most of your application in Javascript and use Go as a classical backend service layer like user accounts, persisting state, etc.
I'd be fine with doing that, except for these reasons:
The core generating process fundamentally depends on Goroutines and channels
I know close to nothing about web development, including frontend and backend
So I suppose I'm asking about the implementation details of one of these three possibilities:
Writing most of the program, including the generator, in JS, and a minimal backend in Go
Writing most of the program in Go and using JS just as a graphical frontend
Something else?
I recommend leaving out the whole Websocket aspect because it's only a possible optimization (and maybe not even that).
If you need to depend on Go's concurrency model then go for it, write your component in Go, then a Webserver in Go that takes parameters coming from an HTML request, uses them to compute the result and sends back the data in a JSON format.
On the frontend you will then only focus on sending this request when the user changed a parameter and for displaying of the JSON data you can use ThreeJS right away.
You'll still have to learn a bit of web development and Javascript though. But hey, they say the web is the future ;-)
I think it's the way to go for your case because your application operates in a quite strict request-result way.
The answer to your question depends a lot on where exactly you plan to draw the line between your Go component and the Javascript component. From the way you describe the problem I get the feeling that you want to write most of your application in Go and use JS only as a display layer? I wouldn't recommend doing that.
To rephrase my question: Do you plan to make operations on geometry in Go, possibly in realtime and communicate with your Javascript layer using Websockets? If this is the case you underestimate Javascript a bit. You should write most of your application in Javascript and use Go as a classical backend service layer like user accounts, persisting state, etc.
I might be able to give a more specific answer if I know what exactly you plan to do.
I want to create a score keeping app that allows me to enter scores into the app, save score history by user, and have a webpage that can display the score in real-time as well as pump out some stats on previous games.
I've been doing some front-end development the past few years and I would say that my CSS/HTML/Javascript skills are intermediate. I have a rough game plan on how it would work, but having very little backend experience there are some gaps in my knowledge that I need help with.
The app: I would build it with what I know: CSS/HTML/Javascript. I would it to be assessable via a webpage or native app. The plan for the latter was putting it through PhoneGap.
Database: SQL? This is were I would save the scores.
The webpage: This is where things get tricky. I need live reporting for the current game status. Web sockets?
I would use a Javascript graphing library to create charts of stats based on current and previous game history. I need that data to be automatically refreshed (AJAX) but how would I do that with a SQL/JS interaction?
Also, ideally the graphs on the webpage would allow visitors to copy and paste iframe code so they can paste the stuff into their own website. I don't even know where to get started with that.
I'm not sure if I'm even asking the right questions so any help would be greatly appreciated!
Since you're a front-end developer I think you'll really like http://nobackend.org/
There are a number of Back-end as a Service solutions which handle both data persistence and data synchronising across multiple devices.
These solutions answer your SQL and WebSockets questions. You could implement these yourself using either open source solutions or by combining a number of services. But I'd give the BaaS options a go.
Preamble
So, this question has already been answered, but as it was my first question for this project, I'm going to continue to reference it in other questions I ask for this project.
For anyone who came from another question, here is the basic idea: Create a web app that can make it much easier to create other web applications or websites. To do this, you would basically create a modular site with "widgets" and then combine them into the final display pages. Each widget would likely have its own set of functions combined in a Class if you use Prototype or .prototype.fn otherwise.
Currently
I am working on getting the basics down: editing CSS, creating user JavaScript functions and dynamically finding their names/inputs, and other critical technical aspects of the project. Soon I will create a rough timeline of the features I wish to create. Soon after I do this, I intent to create a Blog of sorts to keep everyone informed of the project's status.
Original Question
Hello all, I am currently trying to formalize an idea I have for a personal project (which may turn into a professional one later on). The concept is a reflective web application. In other words, a web application that can build other web applications and is actively used to build and improve itself. Think of it as sort of a webapp IDE for creating webapps.
So before I start explaining it further, my question to all of you is this: What do you think would be some of the hardest challenges along the way and where would be the best place to start?
Now let me try to explain some of the aspects of this concept briefly here. I want this application to be as close to a WYSIWYG as possible, in that you have a display area which shows all or part of the website as it would appear. You should be free to browse it to get to the areas you want to work on and use a JavaScript debugger/console to ask "what would happen if...?" questions.
I intend for the webapps to be built up via components. In other words, the result would be a very modular webapp so that you can tweak things on a small or large scale with a fair amount of ease (generally it should be better than hand coding everything in <insert editor of choice>).
Once the website/webapp is done, this webapp should be able to produce all the code necessary to install and run the created website/webapp (so CSS, JavaScript, PHP, and PHP installer for the database).
Here are the few major challenges I've come up with so far:
Changing CSS on the fly
Implementing reflection in JavaScript
Accurate and brief DOM tree viewer
Allowing users to choose JavaScript libraries (i.e. Prototype, jQuery, Dojo, extJS, etc.)
Any other comments and suggestions are also welcome.
Edit 1: I really like the idea of AppJet and I will check it out in detail when I get the time this weekend. However, my only concern is that this is supposed to create code that can go onto others webservers, so while AppJet might be a great way for me to develop this app more rapidly, I still think I will have to generate PHP code for my users to put on their servers.
Also, when I feel this is ready for beta testers, I will certainly release it for free for everyone on this site. But I was thinking that out of beta I should follow a scheme similar to that of git: Free for open source apps, costs money for private/proprietary apps.
Conceptually, you would be building widgets, a widget factory, and a factory making factory.
So, you would have to find all the different types of interactions that could be possible in making a widget, between widgets, within a factory, and between multiple widget making factories to get an idea.
Something to keep on top of how far would be too far to abstract?
**I think you would need to be able to abstract a few layers completely for the application space itself. Then you'd have to build some management tool for it all. **
- Presentation, Workflow and the Data tier.
Presentation: You are either receiving feedback, or putting in input. Usually as a result of clicking, or entering something. A simple example is making dynamic web forms in a database. What would you have to store in a database about where it comes/goes from? This would probably make up the presentation layer. This would probably be the best exercise to start with to get a feel for what you may need to go with.
Workflow: it would be wise to build a simple workflow engine. I built one modeled on Windows Workflow that I had up and running in 2 days. It could set the initial event that should be run, etc. From a designer perspective, I would imagine a visio type program to link these events. The events in the workflow would then drive the presentation tier.
Data: You would have to store the data about the application as much as the data in the application. So, form, event, data structures could possibly be done by storing xml docs depending on whether you need to work with any of the data in the forms or not. The data of the application could also be stored in empty xml templates that you fill in, or in actual tables. At that point you'd have to create a table creation routine that would maintain a table for an app to the spec. Google has something like this with their google DB online.
Hope that helps. Share what you end up coming up with.
Why use PHP?
Appjet does something really similar using 100% Javascript on the client and server side with rhino.
This makes it easier for programmers to use your service, and easier for you to deploy. In fact even their data storage technique uses Javascript (simple native objects), which is a really powerful idea.