I'm struggling with the title of this post as I searched many ways but couldn't find something simple like this.
If you have any other name suggestions I'm totally open!
Here goes.
I wanted to send JSON from an AngularJS app and get it on my NodeJS side so I could do something with the data.
There may be better ways (Socket.IO anyone?) but here goes:
Here is my angularJS service:
And here is my nodejs page:
Install express, and body-parser (I think that's about all) and you should be able to send a message using
$message.create({ }); // That's a JSON object being passed in
Simple AngularJS controller
And Finally a simple HTML page for it.
Good Luck!
I hope that helps SOMEONE out there.
Thursday, August 28, 2014
Wednesday, August 20, 2014
Control your Network Connected Devices
Today I want to tell you about a little epiphany I had a few weeks back. I realized that I could connect firebase to a local nodejs server and a public facing website, and control my roku.
Most people read this and think....well duh you can already control your roku using your phone. At this time (please prove me wrong) you need to be on your Intranet. Your Intranet is the network in your house that your roku is on, so basically you have to be on the same wifi as your roku.
This means you can setup a website using firebase to authenticate you, connect to a common data point in your database and now control things in your house from ANYWHERE as long as both have an internet connection. So I could be in Hong Kong and change the channel on my roku.
Ok, big deal why should I care? Well what if I told you that your roku isn't the only device that connects to the internet? You can query for all these devices, setup commands for them, and control them from anywhere! Forgot a light on in the house when you left? With (some) devices you can check the status and turn it off/on. This kinda makes that whole "internet" of things a lot closer to reality without completely opening up your network, the only "failure" point here is if your firebase gets hacked or something.
But you want code....
Here is the side that runs in your house (and you could also just run this on a raspberry pi or something instead of a dedicated full blown computer).
Right now I have my own rolled roku controller, but I think there is one in npm already that I haven't checked out. You can control your Chromecast this way. Possibly smart tv's etc.
Details for the people who are interested:
Node Side:
1. Start server
2. Server does a query for network devices and adds them to a list.
3. Server pushes list to myfirebaseurl/mediadevices
4. Server then sets up a callback to trigger when a child changes (state specifically).
5. Server sets up functions to handle deleting devices in mediadevices when it closes (this is to ensure that the devices are always accessible).
AngularJS side:
1. Connect to myfirebaseurl/mediadevices
2. Associate NG model to a dropdown (that's how I'm swapping between, if you have other ideas I'd love to hear them).
3. When a button is pressed, it looks at which device is selected and changes it's state to whatever mode that button is designed to accomplish.
4. If the server is removed then mediadevices is empty and the dropdown goes away.
Let me know what you think! If you have a chromecast, amazontv, etc that you want to build this on, or want to lend me to build it on, lemme know I'd love to chat!
Tyson
Most people read this and think....well duh you can already control your roku using your phone. At this time (please prove me wrong) you need to be on your Intranet. Your Intranet is the network in your house that your roku is on, so basically you have to be on the same wifi as your roku.
This means you can setup a website using firebase to authenticate you, connect to a common data point in your database and now control things in your house from ANYWHERE as long as both have an internet connection. So I could be in Hong Kong and change the channel on my roku.
Ok, big deal why should I care? Well what if I told you that your roku isn't the only device that connects to the internet? You can query for all these devices, setup commands for them, and control them from anywhere! Forgot a light on in the house when you left? With (some) devices you can check the status and turn it off/on. This kinda makes that whole "internet" of things a lot closer to reality without completely opening up your network, the only "failure" point here is if your firebase gets hacked or something.
But you want code....
https://github.com/onaclovtech/MediaController
Here is the side that runs in your house (and you could also just run this on a raspberry pi or something instead of a dedicated full blown computer).
Right now I have my own rolled roku controller, but I think there is one in npm already that I haven't checked out. You can control your Chromecast this way. Possibly smart tv's etc.
Details for the people who are interested:
Node Side:
1. Start server
2. Server does a query for network devices and adds them to a list.
3. Server pushes list to myfirebaseurl/mediadevices
4. Server then sets up a callback to trigger when a child changes (state specifically).
5. Server sets up functions to handle deleting devices in mediadevices when it closes (this is to ensure that the devices are always accessible).
AngularJS side:
1. Connect to myfirebaseurl/mediadevices
2. Associate NG model to a dropdown (that's how I'm swapping between, if you have other ideas I'd love to hear them).
3. When a button is pressed, it looks at which device is selected and changes it's state to whatever mode that button is designed to accomplish.
4. If the server is removed then mediadevices is empty and the dropdown goes away.
Let me know what you think! If you have a chromecast, amazontv, etc that you want to build this on, or want to lend me to build it on, lemme know I'd love to chat!
Tyson
Friday, August 15, 2014
Can we make web apps less reliant on network?
So I was thinking a little about how I was using bootstrap for some of my sites, and with it being a pretty commonly used code across sites it got me thinking.
Could we somehow share these resources across domains reducing the need to download, which causes us to slow things down normally.
Here is my thought.
When parsing a .html file you come across a script tag with a src a la
When it downloads the file it (maybe?) puts it in memory so it can be used (I could be wrong here).
What I was thinking is that we maybe generate a key value store, and it does something like this:
{"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.6/angular.min.js", "pointer to memory that this resides"}
Now instead of simply downloading a .js file, it looks at the lookup (or hash table) and finds that that EXACT path file exists in memory and just uses that instead of downloading the file again.
Caveats.
1. I don't know if it would be possible to modify that memory.
2. I wouldn't expect this caching to be indefinite, but should be do-able across pages during an active session.
As long as the downloaded data isn't capable of being modified in memory, then doing a string lookup in a local hash *should* give us a decent startup decrease because we don't need to re-download the file(s) and I can't see how we would have any problems with safety/security since you're literally using the exact same file as you downloaded earlier, you just don't need to re-download.
I'm sure I'm missing something here, but I would think that this should be possible. Got any ideas? hit me up on twitter (@onaclov2000) or leave a comment here
Could we somehow share these resources across domains reducing the need to download, which causes us to slow things down normally.
Here is my thought.
When parsing a .html file you come across a script tag with a src a la
script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.6/angular.min.js"
When it downloads the file it (maybe?) puts it in memory so it can be used (I could be wrong here).
What I was thinking is that we maybe generate a key value store, and it does something like this:
{"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.6/angular.min.js", "pointer to memory that this resides"}
Now instead of simply downloading a .js file, it looks at the lookup (or hash table) and finds that that EXACT path file exists in memory and just uses that instead of downloading the file again.
Caveats.
1. I don't know if it would be possible to modify that memory.
2. I wouldn't expect this caching to be indefinite, but should be do-able across pages during an active session.
As long as the downloaded data isn't capable of being modified in memory, then doing a string lookup in a local hash *should* give us a decent startup decrease because we don't need to re-download the file(s) and I can't see how we would have any problems with safety/security since you're literally using the exact same file as you downloaded earlier, you just don't need to re-download.
I'm sure I'm missing something here, but I would think that this should be possible. Got any ideas? hit me up on twitter (@onaclov2000) or leave a comment here
Wednesday, August 6, 2014
Movies Oh My
I've been a busy boy.
In my quest to generate a boatload of Angular Services (for angularjsservices.com, dont hate the site it is terrible, if you want to help build it let me know!).
I wrote up another library but this time for my movies.
https://github.com/onaclovtech/movielibrary
The cool thing here is I built a rottentomatoes.js angular service for it.
https://github.com/onaclovtech/rottentomatoes
I got it all nice looking and then discovered omdbapi and guess what? now we have one for that too.
https://github.com/onaclovtech/omdbapi
You can substitute them and get your data.
Now the bad news. (but potentially good news).
The JSON returned is different between the two. So something I'm thinking about that would be really slick is if we could essentially take the format from each and push the data to a title,picture,etc variables, then we simply return our search and it contains an object with the appropriate fields in a standard location. I think this would be huge for ALL of my Angular Services to basically build a JSON format that will be consistent, and the service will manage converting.
If you're interested in helping out with coming up with standards for this I would love it. If you're interested in helping build angularjsservices to what it SHOULD be, I would love that.
In the mean time I'm building building building.
Join me and build an angular service too? (trust me they're surprisingly easy, and they make using angular even more fun)
I'm using Firebase to store off the data just like my book library. Firebase sure is handy.
While playing with this I realized something....I can control my roku with a webpage and I don't need chrome's special stuff (that the chromecast is using) I can just use a local nodejs server and firebase and host my site anywhere. I will be working on that next. Can you figure out how to do it? I think I've given some good hints :)
In my quest to generate a boatload of Angular Services (for angularjsservices.com, dont hate the site it is terrible, if you want to help build it let me know!).
I wrote up another library but this time for my movies.
https://github.com/onaclovtech/movielibrary
The cool thing here is I built a rottentomatoes.js angular service for it.
https://github.com/onaclovtech/rottentomatoes
I got it all nice looking and then discovered omdbapi and guess what? now we have one for that too.
https://github.com/onaclovtech/omdbapi
You can substitute them and get your data.
Now the bad news. (but potentially good news).
The JSON returned is different between the two. So something I'm thinking about that would be really slick is if we could essentially take the format from each and push the data to a title,picture,etc variables, then we simply return our search and it contains an object with the appropriate fields in a standard location. I think this would be huge for ALL of my Angular Services to basically build a JSON format that will be consistent, and the service will manage converting.
If you're interested in helping out with coming up with standards for this I would love it. If you're interested in helping build angularjsservices to what it SHOULD be, I would love that.
In the mean time I'm building building building.
Join me and build an angular service too? (trust me they're surprisingly easy, and they make using angular even more fun)
I'm using Firebase to store off the data just like my book library. Firebase sure is handy.
While playing with this I realized something....I can control my roku with a webpage and I don't need chrome's special stuff (that the chromecast is using) I can just use a local nodejs server and firebase and host my site anywhere. I will be working on that next. Can you figure out how to do it? I think I've given some good hints :)
Subscribe to:
Posts (Atom)