Reactjs and requirejs

While working on the QlockTwo project I was struggling with combining react.js and require.js.

Finally I get it done:

  1. Download require.js from and http://requirejs.org/docs/download.html and jsx.js from https://github.com/podio/requirejs-react-jsx and put both e.g. in the javascript folder in your project.
  2. Index.html contains in the header the link to the require.js file:

     
  3. My app.js (main entry point from the index.html) looks like that

  4.  
  5. Qlock.js contains the jsx components that get rendered now. Please be aware that if you decide to use require.js you should load all your Javascript libraries with it to avoid errors.

 

GD Star Rating
loading...

Next hardware project – QlockTwo + weather

After finishing the photo booth I was looking for a new project.

As I am a big fan of the QlockTwo (but it is too expensive) first I was think about building it on myself. There a plenty of good tutorials out there.

But I am also keen on the Netatmo weather station so finally I decided to combine both.

So the idea is to use a Tessel for gathering, saving the weather data and act as a backend for a web app running on a Raspberry Pi to display it on a 10,1“ screen that will be embedded in a case.

The frontend will be done in react.js and the backend in node.js.

Currently I’m working on the frontend which can be found on GitHub.

So stay tuned for more updates!

GD Star Rating
loading...

Angular.js & Firebase

I was trying to build a little one page app to be able to manage releases in my company. The idea is just to have an app where you can request a release and then the request is queued and all release request are displayed as a list. When you are at the top of the list you do the release and afterwards you can mark your release as done and it will be moved to a second list where it is displayed as done. The decision was to use angular.js as Javascript framework, firebase as data store and AngularFire as library to connect both. In the beginning it was quite hard because the tutorials out there normally do the binding to firebase directly in the controller and I wanted to have it as a model in a firebase service. Additionally updating subelements in a list and having on the other side two lists really was challenging. The third main thing was updating elements when they are moved on top of the list was quite hard. Anyway finally I made it working and of course I want to show some code snippets to you to make it perhaps easier for you to use this cool stuff. Of course I tried to shorten the code a bit to make the example readable. If there are any questions do not hesitate to ask. The service

The controller

The template

 

GD Star Rating
loading...