Basic WebApp Questions - javascript

I am currently thinking about coding my first webapp.
I would say i have beginner to intermediate coding skills in html,css,js,jquery node,sql and monogodb.
The problem is that i do not really know how to achieve my goal.
My goal is to built a responsive single page website, which gets the stock price from an api and display it on one card. Furthermore the user should be able to click on the plus button and add another card with an stock index he chose from a choosing form option.
Now what want to know is:
Is this an example for choosing a js framework like react, vue etc. and how can I accomplish my goal ?
I coded the api get request etc. in node and was able to print everything I want into the console log. How do I do the same thing but displaying it on my html page ?
How can I create these cards which are automatically getting added to the homepage ?
How can I save the data for each individual card? (especially without a login procedure...)?
I know these are quite easy questions but I really want to learn how to do it.
Please check the images below.
(check:

I would say try to use your existing skills to achieve your goals. When you run into problems you cannot solve or problems that could be solved by a specific framework such as react, try using them. It's better to understand what these frameworks are doing before you rely on them for every development.
You need to use an http framework like express to return your api values from node js to a web client.
Needs more info but as you're already talking about component based libraries, a good approach would be to keep the cards in a json array and render your page from that. If you are persisting the card data in a database you will also may want to render them server side as the page is loaded using a server side technology like node.
To keep things simple, you can store the info client side using something like localStorage or indexeddb. If you want to store something on the server side, you will need to introduce a way of identifying the user.

Related

Python, Scraping Data from javascript website

So, i am kinda of a new python programmer, if i can call myself like that, and i am trying to learn through the "picking new projects" procedure.
What i want to do now is :
enter a website that gives live score results as http://www.livescore.com for example.
somehow scrape all the teams that playing against each other and manipulate those data.
Then i want to build an app that takes those data, arrange them nicely in a table format (let's say) and then update it every time a team scores a goal (possibly through scrapping again ? i don't know..). So i want to project them as my own data.
As i am new to python, i don't even know if that's possible to be done.
If so, can you help me ? Point me to some directions maybe, point me specific chapters of python to read, specific modules etc etc ?
I really need any help i can get because i am really lost on the matter.
I don't know where to begin with.
Thanks in advance
For web scraping i would recommand using regular requests library of python + the BeautifulSoup library for parsing HTML. This way you can have a look at the content of the website.
The problem starts with dynamically added data, which is probably the case for you. the actual live data is probably coming from XHR requests the site is making to the server, so there lies the data you are really interested in.
In order to get the data you can try looking at those XHR requests and maybe try to mimic them.
Another platform from extracting data from sites is the Selenium project. Its more of an automated web browser, which gives you the access to all the data , even the dynamically loaded ones.

Integrating an HTML GUI and Python with heavy computation

I'm just now tapping into real GUI-heavy stuff and I'm looking to integrate a GUI for a Python 3 application/("game"?). I need this to be cross-platform, responsive, and able to communicate with other users and a server.
I've looked at desktop application creation but I think that the best thing would be a web application. Now, here are the obstacles:
I need the web app to be able to use all my Python 3 code as its black box; it needs to be able to send a function call to the running python code.
More often than not, everything on the page is changed if a single value is changed.
If another user changes a value, it would affect multiple other users instantaneously.
I can't have the page constantly refresh.
The HTML "GUI" needs to have some degree of separation from the Python code. (I can't have Python sending snippets of HTML, only data is allowed.)
I realize that this is a lot to address, so my question then is:
How would one go about making a web app that has specific (most) data values update consistently without having to refresh the entire page?
My proposed solution would have some sort of simplistic javascript constantly checking to see if anything has been posted for the users closely interacting with each other (players in the same server, if you will). Each value in the HTML would have a linked javascript function which is linked to a value or function in the backend python code.
"Player" changes value on webpage -> JavaScript function call -> Python black box on "Server" -> JavaScript checking loop sees that there has been a change via simple Python variable on "Server" -> JavaScript gets all values via calls to functions in python code -> Update HTML for all "Players"
Finally, please note, I have no idea how to carry out my proposed solution, and I very much welcome a different, better approach. Thanks in advance.
So, for anyone who is trying to do the same thing as me, the answer is something called "websockets".
I initially tried Kivy, but found that it was too cumbersome and just hard to get good styling in. Using HTML, CSS, and JavaScript, you can make pretty fancy looking stuff, and Kivy just isn't robust enough to make something attractive without having to write tons of excess code. Since what I'm trying to make is basically a styled data readout/hud, the HTML combination takes the cake.
What I'm currently using for the websockets is a module called "Tornado" which allows you to update any data on the client side without them reloading the page. I'm sending this data as a single JSON to update the whole page.
In conclusion, I decided on HTML/CSS/JavaScript for the GUI and Python/Tornado for fast server-side computation.

Javascript solution for huge size value multiselect

I'm developing a web application where I need to allow to the users to select one or more values I'm usig Jquery 1.11 I was think to use a picklist and not an autocomplete mainly for the following reason: it's not sure that users know what they want to add; they may want to select what to add by seeing a list The problem I'm facing is that in my database I can have thousands of values and a picklist showing all these elements is not comfortable to use I was wondering is there is some kind of Javascript library who can offer to me a paged picklist Otherwise.... what is the best way to show this huge size of data? By taking care that users often don't know what they can add
My situation is the following one: in my project i'm using a WCM (Liferay) and I'm doing some extension to the redactional side of contents. I must provide to the user to fill a field by selecting 1 or N (with N>1) other web contents taken from WCM DB
Often redactors don't use tags and/or categories when they write web contents and some web contents can be written from some user groups and others web content can be written by others user groups; virtually each user group don't know/communicate with other user groups and this means that each user don't know what other user adds so I can't use some autocomplete solution
At the beginning I'll have few Web Contente, but after some time, by seeing the old web site, i can reach huge values (around 4000/5000 web contents and also more)
I already used select2 and I like it, but I have only two option for select2:
full load all data from DB but this means to kill performances and
show users all the data in a combobox
offer a search to users but users may not know what to search and so
they can do a lot of research without finding what they are looking
for
Now I was seeing also this JQuery plugin: https://github.com/yanickrochon/jquery.uix.multiselect but this plugin doesn't offer pagination options so I should always load all data from DB
I'm wondering if I can use some kind of Javascript utility to solve my issue or if I should take another kind of solution
If I should use another kind of solution.. what would be the best one?
I premise that this form will be only used on the redactional side and so I don't need a multi-device solution
https://github.com/lucknerjb/PaginationSelect
Couldn't find a verified project, however this one seems legit.
If you download zip and run index.html you will see this widget at work.
However personally I would rather implement some sort of server side user cart and download items range from a database dynamically instead of serving entire list of items to the user at once.

How to send static HTML to database via PHP

I am working on a simple "task list" project right now. I have built the I have so far using jQuery and Javascript to insert/delete/manipulate the "tasks". Because all of the elements are created/removed/changed in the DOM, every time the page is refreshed, all changes to the list are lost. I dont want to use a caching system because the aim is to create a system that can be accessed from multiple devices. I would like to set up some sort of PHP database that would allow me to create user profiles and have each users "tasks" separated.
I am familiar with Wordpress so I'm thinking I could use that and its user profile system to accomplish what I need. The issue I have is that I cant find any information as to how I could send the changes that were made to the DOM to a separate database entry associated with each user.
My strategy from there (unless anyone could suggest a better method of storing the data) would be to essentially make a copy of a set section of the raw HTML and post that to the database entry when the user hits a "save" button. Each time they log in, the most recent HTML would be loaded into the DOM as a starting point. They could then make the changes they desire, hit "save" before leaving the site and the cycle would repeat.
I am new to development side of things, so I could be making this way harder than it needs to be. Any links to topics similar to this, suggestions, advice would be appreciated. Im not asking for an in-depth how-to guide (though that would be nice) but to just be pointed in the right direction.

looking for a rails example using ajax, simpler the better

I am trying to locate an decent example of ajax json interaction with Rails. I have a Rails app that uses standard forms and wish to improve it with some ajax, but I have not found a good example to inform me.
I have a large investment portfolio model object, which requires multiple views to input all the data. I have a mechanism that allows page-to-page transition, using divs with a style of display:none or display:block around wrapping each 'pane'. I can selectively hide/show each pane as I move off-screen to the next pane. The user can navigate around, setting values, some of which need to be fetched from the server (such as look up a stock quote). When all is done, a commit sends it all back to the server, since it is one single form. So far, so good.
Now, I need to interact with the user when he is picking individual stocks, performing auto-complete on the ticker symbol during typing and then updating a table of stocks picked. This part has me stumped, since I don't understand how I can get interactive behavior while the input form is displayed. I am hoping to review some clean examples of ajax interacting with rails.
Oh, by the way, the app is a Facebook application, so I can't use prototype or any rjs templates, but must use FBJS.
I can't seem to find an example that shows ajax updating page sections dynamically.

Categories

Resources