Post JSON to Nodejs from Angularjs

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.

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....

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

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 :)

Emailster

+

+

=

Emailster

Today I'm planning to talk about SendGrid, AngularJS and FireBase. SendGrid is an email delivery service which supports a REST based interface for sending emails to customers, FireBase manages JSON data and syncing that data between clients really fast. Finally AngularJS provides us with a client side framework that has great databinding and is pretty fast and easy to use.

My goal was to make a client side only app and send emails from it as well as determine the validity of those email addresses.

I created a service called email and it's located in a file called sendgrid.js.

Now in theory anyone who can manage sending emails via REST or other web technology can be inserted in place as long as the function prototypes match. In this case I have a function called "send" that takes the parameters of api key/user, who the message is going to, what the subject is, what the body will say, and who the message is from. I'm working on a site called angularjsservices.com which I hope to collect all these services we can interchange and use for creating amazing client side only applications.

I am marrying Firebase by keeping track of what emails are valid, AngularJS to manage routing for the Firebase "ID" the user is assigned and setting it's validity in Firebase.

The whole reason I came up with this idea was because sometimes you have an idea you want to see if there is interest for. So you want to collect valid emails, or you want to give something away if someone provides a valid email address, this can be accomplished using these client side only technologies.

In Firebase I create a data structure like this:

{
  email: jon@doe.com,
  name: Jon Doe,
  valid: false
}

Next I setup routing in angularjs

webpage.com/:id

where :id is the firebase data element.

So now we can do something like this

firebaseurl.com/:id

to point to the specific firebase entity.

When the user clicks on their link webpage.com/:id it sets the validity of the email to true:
it becomes this:

{
  email: jon@doe.com,
  name: Jon Doe,
  valid: true
}

And there you have it, you can collect emails from a client side only application.

API Key and User
When you make a REST call to SendGrid it's passes your API Key and User in plain text, when you have a server application it's not *nearly* as big of a deal, however when you have a client side ONLY application, this becomes a big problem since your API Key and User are the User/Password to SendGrid's website.
I have a few suggestions. The first is Stop using the same User/Password as your API key, and allow you to generate new ones if you happen to require changing yours. This would prevent people from running off with your keys and logging in and changing settings. It would also allow you to change it if someone decided to grab your API Key and user in your client side only app and start using them. The second thing that could happen is similar to FireBase you could enable security settings for requests from specific domains. This solves the API Key and User name in the client side only app because we'll only be able to "send" and email if you're ON that domain. Either way splitting the API Key and User from the login credentials is a critical issue for me (and if I'm wrong PLEASE PLEASE let me know and I'd be happy to update this post).

XMLHttpRequest
Second is that when you make a REST post using my Angular Service I get a XMLHttpRequest cannot load [sent REST message url]  The 'Access-Control-Allow-Origin' header has a value ... that is not equal to the supplied origin. Origin 'null' is therefore not allowed access. If you click on the link the value in the browser says this:
{"message":"success"}

Which I find very surprising since it appears I got an error, I'm not sure if this is a mistake on my side or theirs, but either way I am able to send a message successfully so somethings up here. Again please contact me if you're able to help out.

You can see the application as it is here:
https://github.com/onaclovtech/Emailster
I'll slowly be cleaning it up and making it fancier, but I really wanted to show it off right away!


What other apps can we make that traditionally require a server side component, but we can write as client side only now?