Web App Creation Toolchain with CSS/HTML/Javascript - javascript

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.

Related

I have the app and my database designer quit (need terminology help)

so me and a friend started a venture for an app as I'm sure many other friends did as well. My job was to develop the app and his was to develop the web page and database.
Brief description: The app is the end product and relies on information uploaded by users. This information is uploaded to the database through the web page and the app. The app in turn pulls information from this database and performs its functions with it.
Well, now the app is done and the site is only partially developed. He seems to have dropped off the face of the planet and I don't want to abandon the project.
My questions:
1) The queries to the database were being made using php searches. To start off, is that the right terminology?
2) I've stumbled across a ton of different hosting sites and software today. What site/software allows you to use server side code to error check data and store it? (I've seen a lot about wordpress but still don't grasp what I really need)
3) Most web pages seem to use java to check the form entries. However, Java seems to be an overarching group for a bunch of sub categories. What version of Java should I start learning to work with forms on web pages?
I'm a novice on this side of the fence, but what I need doesn't seem overly complicated in my mind so I'm pretty sure with a little direction I can start researching and learning how to get this done. Thanks for the help in advance.

Real time notification webapp with nodejs

I want to build a recipe maker webapp for practicing.
This webapp will contain 2 web pages: index and recipes.
On ,,index" the clients can make some recipes.
On the ,,recipes" page the user can see a table of recipes made by her/him and by other users (the last 10 or so).
The recipes will be stored in a database.
This sounds easy until now, but if a user creates a recipe and clicks on the ,,Add" button, I want to update the recipes table in the recipe page without refreshing, so it will contain the new recipe (like real-time notification).
Can I use node.js, express.js and socket.io to make this kind of behavior? If so, what functions, features should I look up? Recently I started learning these technologies but I can't see how can I pass data between pages and how to invoke functions if the data has arrived (maybe routing?).
I really appreciate any help you can provide.
Yes, definitely you can use these technologies or others. Its all about, with what you are comfortable with.
Secondly, Look at their getting started. Socket.io has few github repo to get started. It is pretty easy. I did it in around 10mins with 0% experience in socket.
Socket.io has node.js documentation too. HTML and JS are just complementing resources for look and feel.
Ref: https://github.com/shah-smit/socket.io-getting-started
Lastly, you want to take a look at JQuery for animation.

Turn based multiplayer for iOS using CouchDB and IrisCouch

Me and my startup app company is working on a turn based multiplayer iPhone application. Let it be said that neither one of us have any database, or server, knowledge whatsoever. Though, we are willing to learn.
The flow of the game will be similar to such games as: WordFeud, WordsWithFriends, Rumble etc.
Let me start of by where a lot of searching on the web has gotten us:
We have decided to use CouchDB as a tool for storing information about users, game sessions and other stuff. CouchDB is an open source noSQL database system. The reason is that we have been taught, that it should support a lot off concurring users. Besides, that it scales - we are hoping to go big, of course.
Our CouchDB, is hosted on IrisCouch. IrisCouch is an "in cloud" hosting service designed for running CouchDb.
So, we've got a CouchDB server up and running, and we know the basics on how to query data from the server.
Our biggest confusion right now, is how we should set up the system to work according to best practices. Right now we are at the point where we are able to receive and submit data to the server.
Our game is supposed to have Facebook integration, so that the users can register via our app or through Facebook. After that they can play with random matched opponents, or play with friends. After a match is started, one player will get a set of question to be asked, after he has answered, the other player should be notified, through push notification, that it's their turn. After a few rounds the game is finished.
At this point, we think this might be the best solution for the flow of the application:
A user connects to another user -> a game session is opened as a
document in a database called "games".
The newly created document contains both player names, question,
answers etc
A field named "whos_turn" decides which of the two players turn it is.
After the game has ended, the session is erased.
Again, and as you may see, we are in the dark as of how to really do it, but this is the general idea.
So, my questions goes as following:
Is it best to query the data directly from the iPhone application, or through a web service?
What is the best way to set up the database, to best manage the flow of the application?
Any information, that could lead us closer will be gladly appreciated :)
In advance, thank you!
Olav Gundersen
EDIT#1 : Our Objective-C programmer managed to connect two iPhone devices using CouchDb. The iPhone application consists of a table view, that has a concurrent connection with the database, so that when someone POST to the database, it shows up on the tableview of all the other connected phones. Behold: a severely ineffective chat system.
If is a multiplayer you would need to have the app to communicate to the remote iriscouch.db but I am concerned by the point where you state that neither you or your friends have any database experience. You are willing to learn so I think the best place to start is:
http://guide.couchdb.org/editions/1/en/index.html
There are several issue you might find with scalability if you plan to erase documents continuously. DB Size can be considerable on couchdb and you will need to compact &cleanup the db regularly. But I don't think is a major issue for now as this is at a start up level.
The question "best way to setup the database and best manage the flow of the application" should be addressed by your team. If you do not have someone with any database experience you should try to find someone willing to help you. It should be someone with extensive experience in databases. You might find some fairly reasonable professionals at http://www.odesk.com
In total honestly I don't think you will be successful if you don't have such a figure - either as a freelancer or contributor - to help you having a solid database logic in the game that will ensure a great user experience.
For example: have you considered the latency-delay issue by using a db based in the USA (Iriscouch) vs. where your users are located?
For this reason you might want to do as much as possible client side (embedded database like sqlite or touchDB that is essentially couchDB for iPhone)
For an iPhone application you might want to try TouchDB that is made exactly for that
https://github.com/couchbaselabs/TouchDB-iOS (caveat: being that you need connectivity to check turns etc this might not be the ideal solution but it could work to store some information locally).
To lay this out you would need someone with experience with couchdb to set up a proper, usable application. There is nothing wrong in being enthusiast about your idea but to make it a success you need a technical mind in the database side. Of course you might be well capable to learn this yourself. After reading the CouchDB book you should be in position to create a basic flow to fit your needs.
Of course other more experienced users might come with a more comprehensive answer or a sample layout but I don't think would be the best approach. Even if someone posts a full layout of the doc structure and how to query it how are you going to service the app if something goes awry e.g. sessions don't get deleted, conflicts etc. ? hence my sincere advice to get some ad-hoc expertise for your case.
This might also result in analyzing suitable alternatives. I don't think you should buy into the idea that CouchDB can scale and hence is the best/only option for you (of course this might well be the case and if you feel that is a good option..go for it). For example twitter, google adwords and many other online apps are using mysql to store their data so for sure CouchDB is not the only database that can scale!
I think this demo app could be a good example to follow: iOS Couchbase Demo

Building an interactive website for multiple clients

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.

Reflective Web Application (WebIDE)

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.

Categories

Resources