Setting up your Mashup webpage

§ Navigate to http://www.popfly.com and click on the ‘Create a Mashup’ link

§ Sign In

o You will probably have to sign up for an account unless you already have one – to sign up, click on the “Sign Up” button

§ first screen: you can pick “Yes, use my email address” to avoid creating a hotmail account – simply use your UNC or Gmail email address

§ you will be presented with 2 more screens where you have to fill in your data

§ After you’re done, you’ll be forwarded back to the sign-in screen with a big Popfly Beta logo; click on “Sign In”

§ “Create Your Profile” screen: type in a username you want to use, select your avatar, and feel free to uncheck the 2 notification boxes; then hit “Accept and Submit” button

§ Shortly after your Popfly page starts loading, you most likely will be forwarded to the “Microsoft Silverlight” screen; click the “Click to Install” button

§ When the “File Download” window pops up, click on “Run”; once it’s downloaded and you see a window pop up asking you “Do you want to run this software?”, hit “Run”

§ Microsoft Silverlight will now be automatically installed (it should take about 30 seconds); once the Silverlight webpage confirms that “The latest version of Silverlight 1.0 is installed”, click on the “Return to the previous page” link in the bottom left corner

§ Now you’re back in your main Popfly menu; it should look something like this:

Creating mashups

You can check out the tutorials on the right hand side, or you can try out the following instructions for getting your friends’ addresses from Facebook and displaying them on a world map using Virtual Earth:

Facebook

§ In the grey sidebar, click on “Social Networks” and then Facebook

§ This will add a red cube into your page labeled “Facebook”

§ If you notice underneath the cube it will say “Missing Key”; to fix this, click on “Missing Key”

o A little window will pop up asking you to type in a 6 digit code; to acquire this code, click on the blue link at the top “Click here to generate a one-time Facebook code”

o This will open a new browser window with Facebook loaded and ask you to login

o After you login, click on “Generate”; at the next screen, you should see a 6-digit code that Facebook generated

o Copy this code and paste it back into the field in the Popfly window where it asked you for your “6 digit one-time code”, hit “Update”

o Now the “Missing Key” label should change to “You Have A Key”

§ Now your Popfly page will be able to get various information from your Facebook account!

§ Click on the little tool wrench icon on the right side of your Facebook cube, or just double-click on the cube

§ Now you should see a list of possible “Operations” in a drop down menu together with an option to provide inputs in a text box labeled “value” (this is similar in nature to the “functions” you’ve encountered before in Python)

§ By default, “getFriends” is selected with an input of 15: so our guess is that Popfly will get info about 15 of your friends (picked at random) and display it on your page…

§ Let’s verify this

§ Click on the wrench again to zoom back out

§ Click on the grey “Preview” button in the top middle portion of the screen, right next to “Clear” and “Add Custom HTML”

§ You should see a plain white page that lists all your friends’ basic contact info, status, and their main picture

§ Feel free to change the number of friends displayed or what the other functions do!

§ Clicking the grey “Customize” button will take you back to the editing screen where you will see your red Facebook cube

Virtual Earth

§ In the grey sidebar, click on “Maps” and then Virtual Earth

§ This will add a red cube into your page labeled “Virtual Earth” – you should also see a map of the world as the background of your main editing page

GeoNames

§ In the grey sidebar, click on “Maps” and then GeoNames

§ This will add a red cube into your page labeled “GeoNames”

Creating connections between the 3 services

§ We would like to have our friends’ address data from Facebook displayed in VirtualEarth as pushpins on the worldmap

o Facebook gives us City and State

o GeoNames can convert City/State information to Latitude/Longitude information

o VirtualEarth can place pushpins on the map given that we provide it with Latitude/Longitude information

§ To do this we make 2 connections: one between Facebook and GeoNames, and one between GeoNames and Virtual Earth

o Creating a connection between two cubes

§ Click on the first cube, dragging the mouse over towards the second cube (you should see a blue arrow coming out of the first cube as you do this)

§ Click on the second cube – this will effectively establish a connection (represented by a blue arrow) between the 2 cubes

o Connect Facebook to GeoNames and GeoNames to Virtual Earth

§ There is one more adjustment to be made now: by default, GeoNames uses the function getLatitudeAndLongitude with the input being an Address

§ We want is the lookupOnCityState function, which will accept City and State data (from Facebook) on input, and return the correct Latitude/Longitude data (to be used by Virtual Earth)

o You may recall that we can change the function by double-clicking on the GeoNames cube or by clicking on the tool wrench icon next to it

o Change the Operation performed by GeoNames to lookupOnCityState

§ Also, make sure that the function used in Virtual Earth gets the correct latitude and longitude input data: you might have to edit the input variables to come from the Latitude and Longitude data provided by GeoNames (if it didn’t change automatically)

§ Your screen should now look similar to this:

§ Click on the grey Preview button again to see what your page looks like – after everything is loaded, you should see a map of the world with some of your friends’ cities marked with pushpins

Saving your work

§ Click “Save As” in the top right corner (next to your avatar)

§ You can also click on the tiny “i” icon next to the project name in the top right corner, this will show you more details about your project

o URL address that your project can be accessed at (for example, http://www.popfly.com/users/John-Smith/MyFirstPopfFlyProject )

o HTML code to embed your Popfly project within another HTML page (for example: <iframe style='width:100%; height:100%;' src='http://www.popfly.com/users/John-Smith/MyFirstPopfFlyProject.small' frameborder='no' allowtransparency='true'></iframe> )