Get started to build a Widget - javascript

I own a football community website (with RESTful web services available) written in Grails and I would like to develop an embeddable widget to be distributed into other websites or blogs.
My requirements:
This widget (written in javascript/HTML rather than Flash since I don't know Flash) will display the latest articles of my website (easy...since I have RSS feeds available).
However, the most difficult part consists in having remote users to make predictions or give a rate to football games directly from the widget itself.
Two modes are supported : anonymous user or user-authenticated (user account located and managed on my website).
Statistics from user actions of the client website (i.e. the website embedding the widget) will also be reported inside the widget.
My solution:
Here you go! Where do I start? Do you advise me to go with online widget creation tools like Widgetbox, KickApps, Widgadget, Grazz or any other ones you like? If yes, which one is the easiest to use and enough flexible to fit my requirements ?
Or is there another simpler solution like a Grails plugin?
Thanks for your help.

For something similar I have used Google Gadgets, which are very simple to create because you can use javascript with the API Google provides.
I wrote this post in my blog http://maricel-tech.blogspot.com/2008/11/how-to-create-google-gadget.html on how to create a google gadget that displays the news from CNN, it is a little outdated since Google changed their APIs, however the logic is the same you would just need to change the google method calls to use the new ones.
The example in the post reads the RSS feeds from CNN news and displays as a list the title and description of each article, in your case you would need to add some more logic to add the extra functionality you need, but I think you can find what you need in the Google API for gadgets.

Related

Should I use Next.js to allow the application to be indexed by google?

I created a web application for a family business using react.js a few months ago but the website is only accessible by people who know the exact URL. It is using a firebase backend and a React.JS frontend.
I've used the google crawler checker and it returns normal saying that the crawlers are able to access the website with a screenshot of the page. However, it is not indexed on google search results.
I've read about how SSR is a possible solution to this using Next.JS.. but not really sure what it means. How can i get the website to show towards the top of the search results when the business name is searched in google? Should I use Next.JS over React.JS for something like this?
Welcome to the massive world of Search Engine Optimization.
There are many, infinite ways, to get your website to the top of the rankings on Google. To name a few:
Readable domain, look up how to put your website behind jtsapebusiness.com instead of weird-animal-123.firebase.etc.io.
Serving certain files like robot.txt that Google specifically searches for
Having Meta Tags
Having specific Meta Tags for each page (Next JS is great for this)
Render Time (Server Side Rendering is also great for this, but if your "React" app is small enough the performance difference shouldn't really matter to be honest.)
Page accessibility, Google can scrape single page apps a lot better than it used to, but serving up each page individually via Sever Side Rendering has a lot of perks.
How often your page is searched and clicked on (tell your friends and family to search you on google and click on your website)
These are just a few! Reading more about Search Engine Optimization will help you come up with even more questions. When and if you do switch to Next.js, you will still be using React. You will just be writing it a little differently to fit a more server side pattern.
It will not matter much if you choose to pick between "React or Next". If you wanted to maximize your chances of ranking higher, then I would go with Next. But I wouldn't want you to pickup a whole new technology if you already have the React App built. Instead you would just need to add some Search Engine Optimization sprinkles on top (some examples listed above).

How to enable analytics for dynamic pages (Vue.js)

I'm building a website where users can create new pages with dynamic URLs. I would like to add traffic analytics for each of these pages individually and allow users to view a dashboard of the data collected for the page they have created (just view, they shouldn't be able to edit the dashboard they are given). This should also be automated so that when a new user registers and creates their own page, this is tracked automatically.
If possible, this should work in Vue.js, but anything that works with vanilla JS should be fine too.
Is this possible with a tool like Google Analytics or a similar alternative? Is this expensive?
Most of the Web applications now a days are single page apps or Client side web applications. This means most of the analytics platforms like GA etc will work with your web application.
However, You will need to implement the analytics in a specific way for you to capture the required metrics. I think using Google Tag manager and creating a DataLayer will make it easier in the long run. Once the datalayer is available you can use this data with any analytics tool.
In order to track a screenview change, you can use any custom trigger available with your application that notifies of the screen view change or you can use the History change as mentioned here: Google Tag Manager and Single Page apps.
You can also use the App Rote changes as mentioned here on simple routing to populate the datalayer and use the values from the datalayer in any analytics including the GA.
Other option is using vue-analytics . There is Easy to follow documentation from the author and the branch is here
This way any new pages added etc will be tracked automatically.
Hope this helps.
Legal context
Well... What is the targeted audience? If your main targets are privacy advocates or European people covered by the General Data Protection Regulation (GDPR), it would be a terrible idea to select Google Analytics as the solution. In France, for instance, we have a National Commission on Informatics and Liberty ("CNIL" in French). It is:
an independent French administrative regulatory body whose mission is
to ensure that data privacy law is applied to the collection, storage,
and use of personal data. (Source: Wikipedia)
The CNIL tends to strongly discourage the use of Google Analytics (see Q&A on the CNIL's formal notices concerning the use of Google Analytics). Therefore, be very careful about that, especially if you are targeting an international audience.
Recommended tool
When it comes to web analytics, you have a wide range of technical solutions. For obvious reasons, I will not put the complete list here, but I can give you a tool that I know and use: Matomo.
This one is recommended by the CNIL, it is open source (see GitHub) and GDPR-compliant. You can self-host Matomo (On-Premise), which is completely free. You only pay if you use Matomo Cloud.
Matomo has a technical website dedicated to developers and exposes an API which should allow you to do what you want. Doing some research, I even found a thread on the official forum where the OP seems to have a similar problem to yours. Since it is a requirement in your question, you can also find information about user permissions.
On this page, you can read that Matomo developers use Vue for the front-end code. There is also a plugin called vue-matomo, which may be useful in your project.
Finally, to track single-page applications (SPAs), read on: Single-Page Application/Progressive Web App Tracking: Integrate - Matomo Analytics (formerly Piwik Analytics) - Developer Docs - v5
As I read from this source-
If you have a website that has dynamic content or multiple pages
and steps under one URL (or an all-flash website), you have to do a
little more work to get Google Analytics to effectively track your
pages.
Here are some more references you can check upon-
Here you can read, how Google Analytics works.
Here you can find its pricing plans which are free for small businesses.
Here you can read how Google Analytics performs for dynamic links.
Here is another answer given by #Ruslan Konygin on a similar problem.
Here is a complete guide on Tracking Dynamic Sites and Pages with Google Analytics.

use of google script editor

Hey so currently working on my first personal project so bear with the questions!
Currently trying to create a Javascript program that will parse info from google forms to produce slides displaying the info. So far from my research the best way I've found to facilitate this process is googles app script editor. However, I was wondering if I can run this code by requesting it from a different javascript (or maybe even java) program that I will write code on webstorm. If I cant do this what is the best way to utilize the google apps script editor?
Thanks!
Google Apps Script is just javascript with extra built-in APIs (like SpreadsheetApp, FormApp, etc.).
It also has a UrlFetchApp API.
So you can run code like this:
// The code below logs the HTML code of the Google home page.
var response = UrlFetchApp.fetch("http://www.google.com/");
Logger.log(response.getContentText());
As such, if you want to provide JavaScript from elsewhere, you could fetch it and then eval it on the Google Apps Script side. (but we all know how tricky eval can get)
One other option is to have your own server side written using Google App Engine (or any other framework) and use Google's OAuth and authorize your app to fetch data from the Forms form
Slides and Google Apps Script
You might like to take a look at the addon "Slides Merge" by Bruce McPherson. I've never used it but it sounds like it might work for you. Here's what it's looks like in the addon store:
Getting information from Google Forms is a snap with google apps script since your can link the form right up to a spreadsheet. The Google Apps Script documentation is really quite good these days. Here's the documentation link. Google Apps Script is loosely based on Javascript 1.6. If your already a programmer my guess is that you'll have few problems learning to use it. In my experience the most difficult thing was dealing with the arrays of arrays produced by the getValues() method of ranges in google apps script and I made a short video that might be of some help to you.
I also have a script that I wrote in Google Apps Script that produces a sheet show that is a slide show inside of a spreadsheet.
I've found that using the Script Editor is pretty easy. There's some documentation in the support section of the documentation. It can be a bit buggy at times but overall I think it's a pretty good tool.

GAS: How to allow other people to use your library without sharing the code

How can I create a library in google app script in which I can share just the library key and people can use it, without sharing the code properly? I am trying hard to find a solution, but I failed.
I don't want to share the library for the world. I just want to use the library in different google drives, without having to share the code, but just the library/project key.
I found this link on stackoverflow that the guy had basically the same question as me, but it didn't has a good answer: How to share Spreadsheet with reference to a custom (private) library
Thanks in advance!
it is currently imposible with you requirement to end up "sharing a library key."
you must give at least read access to the library file for this case of running the script functions directly from the spreadsheet.
Once a script uses the library, and the user has view permission on the container script, a curious user could use the apps script debugger to "step into" a library function and there it is, the library source code.
If you were to instead publish the script as a web app, you could hide the library but that option does not apply in your case as you are making copies of the spreadsheet, and services do not get copied, need to be re-published.
Another option, but which does not give the library key in your requirement, is to publish an apps script service that uses the library and implements an API, which the other scripts (inside each spreadsheet copy) use. This however will not scale as quotas will be deducted from the API service publisher, and not the users that call the API.

Write A Facebook App In JavaScript

As an hobby I wrote a game in JavaScript and would love to publish it to Facebook, can you write a Facebook application using pure HTML and JavaScript?
Yes. Absolutely. In fact, one of the options for developing a Facebook application is an embedded frame pointing to your website which can be whatever you want, including straight HTML web serving.
There are two officially sanctioned libraries for accessing Facebook information and one of them is Javascript based.
You can do quite a bit on Facebook with just Javascript/HTML. There's a lot of possibilities using services outside of your own site (think Flckr, Google Ajax API etc...)
Facebook applications are pleasantly simple to develop.
The documentation is indeed at:
http://developers.facebook.com/
I would also note that traffic with regards to Facebook, things can spin up really quickly. There are stories of students creating applications which quickly scaled to millions of users. I'm not saying this is likely to be the case for you, but it is can be an effective and a highly viral distribution platform.
Yes, though your app may not be able to do much on Facebook. Have a look at http://developers.facebook.com for documentation.

Categories

Resources