Rise Vision Widget Development Videos

  • 6
  • Announcement
  • Updated 3 years ago
Hello!

So I said I would make some widget tutorial videos, and here are the first couple of videos...

https://www.youtube.com/playlist?list=PLSaSzeomDTQQkHG3588vhdKpJgPRjWVvp

There is a lot more to talk about than I thought initially. So the first two videos cover the widget structure and setting up the development environment. It took me a while to figure out how all the pieces worked together at first, so these videos are important because they will help you focus on what is essential to get started. Then, next weekend I will talk about what is happening inside the widget itself.
Photo of Stephen Garrett

Stephen Garrett, Champion

  • 2,674 Points 2k badge 2x thumb

Posted 3 years ago

  • 6
Photo of Stephen Garrett

Stephen Garrett, Champion

  • 2,674 Points 2k badge 2x thumb
Oh, and by the way, I am still learning this stuff as well. Let me know if I missed anything, or if I got anything completely wrong!
Photo of Shea

Shea, Official Rep

  • 5,188 Points 5k badge 2x thumb
That's great Stephen! Thank you for putting these together. 
Photo of Donna Peplinskie

Donna Peplinskie

  • 7,142 Points 5k badge 2x thumb
Hi Stephen,

Great start to the video series! Thanks for taking this on!

One thing that we discovered with our Widgets is that users don't necessarily want to have to go through the process of installing Bower and npm in order to make very simple changes. What we do now is commit a Production ready version of the Widget code in the dist folder of the repository. That way, they can just download the code and go in and make their change directly to files in that folder, and then upload the contents of the entire folder to their server without having to run all those commands. The dist folder will only include those files that are necessary for the Widget to function.

You can build a Production ready version of the Widget by default when executing gulp build if you change this line from "dev" to "prod". If you wanted to create a build for the dev environment, you would execute gulp build --dev

Also, you may want to take a look at how the config files are set up for something like the Image Widget. The contents of those files will ensure that the translations work no matter the environment you run the build for. It may also resolve the errors you encounter when running gulp build.

Thx!
Photo of Donna Peplinskie

Donna Peplinskie

  • 7,142 Points 5k badge 2x thumb
Actually, I was mistaken. The command to run a build for the dev environment is NODE_ENV=dev gulp build.
Photo of Stephen Garrett

Stephen Garrett, Champion

  • 2,674 Points 2k badge 2x thumb
Thanks for this Donna! My secret reason for doing these is to make it easier for you guys to point out what I'm doing wrong. I'm going to try the build again today with this stuff in mind.
(Edited)
Photo of Blake Freeman

Blake Freeman, Official Rep

  • 36,116 Points 20k badge 2x thumb
This is awesome Stephen, thanks for your hard work!
Photo of Stephen Garrett

Stephen Garrett, Champion

  • 2,674 Points 2k badge 2x thumb
Hey Everyone,

I added a couple more videos. The first one is about setting up a widget and using it in a presentation, and the second is about how the widget.html file works. I'll go over the settings.html file next weekend.

https://www.youtube.com/playlist?list=PLSaSzeomDTQQkHG3588vhdKpJgPRjWVvp
Photo of Jose Muga

Jose Muga

  • 104 Points 100 badge 2x thumb
Hi,

I think Stephen you are just the best, Thanks for this. I wanted to learn how to develop widgets to show content relevant to my country like e.g. stock prices etc. Will be following keenly
Photo of Stephen Garrett

Stephen Garrett, Champion

  • 2,674 Points 2k badge 2x thumb
Hey thanks Jose! When you start working with the videos, let me know if there is anything that doesn't make sense. It will help me out a lot to know what's not working for people so I can fix it.

For the stocks, are you going to be using the financial table widget?
Photo of Steve Gregory

Steve Gregory, Champion

  • 1,186 Points 1k badge 2x thumb
Thanks, Stephen - these videos are very helpful!
Photo of Steve Gregory

Steve Gregory, Champion

  • 1,186 Points 1k badge 2x thumb
I have been watching these videos while I work on setting up my widget development environment and after spending a few days with Windows 8.1 I have been frustrated by various bugs and/or incompatibilities with npm modules for Windows, including the "long path name" issue and the "socket.io/ws broken for Windows" issue.  After a while I decided to set up Ubuntu in a VirtualBox and found that all the node/npm/bower/gulp stuff, as well as the widget-preview app, worked fine the first time.  So my impression is that this development stack works better in Unix than in Windows.

Do you have any tips for setting up the development environment in Windows, or do you recommend that people do development in Linux or OSX instead?  
Photo of Robb

Robb, Official Rep

  • 76,676 Points 50k badge 2x thumb
Steve,

Did the answers provided in this post answer your question?

Thanks!
Photo of Steve Gregory

Steve Gregory, Champion

  • 1,186 Points 1k badge 2x thumb
Hi Robb - The replies to the other post did answer my particular question about the widget-preview tool, but in this thread I was asking more generally about setting up the development environment and workflow featuring npm/bower/gulp, and hoping for feedback from others who have done this before, e.g. have others found happiness doing widget development in Windows or is everybody but me using Linux/Mac?  If you do use Windows, are there preferred versions of the component tools that seem to work best together?  I'm concentrating on the part of the workflow that goes:

git clone <project>
npm install    (so far this step is the most troublesome on Windows)
bower install
gulp build

So I'm not asking for support on any specific Windows issues here, just sort of probing for what setup works best for others.  So far I've spent a few days each in Windows and Ubuntu (VirtualBox inside Windows), and I had lots of frustration and component incompatibilities on Windows, mostly with npm and some npm modules, but the Ubuntu setup worked fine the first time.
Photo of Robb

Robb, Official Rep

  • 76,676 Points 50k badge 2x thumb
Ah, thanks for the clarifications Steve.
Photo of Stephen Garrett

Stephen Garrett, Champion

  • 2,674 Points 2k badge 2x thumb
At this point, I am only using Windows when I have to, and so far, that has only been to fix my parents' computer when my dad installs dumb stuff. I switched my desktop at work over to Ubuntu over a year ago, and I haven't logged in to Windows since. 

The previewer is really the only thing you absolutely have to get working to make widgets. All of the other bower and gulp stuff isn't required to run a widget on your own systems. The tasks those preprocessors are performing that normally fail have to do with translating the language of your settings menu into different languages and minimizing css and Javascript. If you are having issues getting past those errors, look at this repository...

https://github.com/tantangula/hello-world-widget-tutorial

This is what we have been using here as a starting point when we build a new widget. We don't process it or anything. We just write the new functionality in, and then host it. Tada! No errors.

As for the preview app, it may help to look up using NWjs on Windows

http://nwjs.io/

There may be something you can figure out by downloading their Windows runtime and then loading the preview app code from Rise's Github. NWjs is an app runtime that will run web apps locally. It originally did this by wrapping a Chromium instance up with a NodeJS backend. On Linux, I have the NWjs runtime installed and I open the preview app with the "nw" command.

Let me know if you run into any more issues.
Photo of Steve Gregory

Steve Gregory, Champion

  • 1,186 Points 1k badge 2x thumb
Thanks for those tips!  For practical reasons (software required for work) I need to keep Windows as my main desktop computer, but I am rapidly coming to appreciate that the npm/bower/gulp workflow is more "natural" in Linux and more "contrived" in Windows.  Most likely I will move forward using Ubuntu in a VirtualBox.

Your idea for a simplified workflow by omitting gulp and working directly on the distributable code is a good one.  Naturally I am interested in learning the Rise Vision conventions so that I can write code that complies with their standards, so I feel I have to work through setting this stuff up so that I feel comfortable with the underlying ideas, but, wow, npm sure adds a lot of moving parts and dev-side bloat to the business of managing packages and dependencies, and sometimes it seems like the tool creates more hassle than the problem it's intended to solve.

Thanks also for the tip about NWjs.  I am new to NWjs but I will investigate in the direction that you suggest.
Photo of Steve Gregory

Steve Gregory, Champion

  • 1,186 Points 1k badge 2x thumb
Thanks again for that tip about nw.js - I have got "widget-preview" working on Windows now by installing nw.js first and then passing the widget-preview directory through it.  I've posted detailed instructions in another post.