PROGRAMMING WITHOUT PROGRAMMING: LEARNING MASHUPS AND WEB 2.0 IN THE INFORMATION TECHNOLOGY CLASSROOM

Transcription

1 IADIS International Conference e-learning 2008 PROGRAMMING WITHOUT PROGRAMMING: LEARNING MASHUPS AND WEB 2.0 IN THE INFORMATION TECHNOLOGY CLASSROOM Mark Frydenberg Bentley College 175 Forest Street, Waltham, MA USA ABSTRACT Mashups, the combining of data from multiple sources into a single web application, are popular Web 2.0 constructs, but are often difficult to create without previous programming skills. This paper describes how Microsoft Popfly, a platform for visually building mashups, was used in a first-year introductory technology survey course to introduce basic programming concepts within a Web 2.0 context. As a result, students also learned about issues related to software development and application architecture from a very high level. An end-of-semester written exam and student reflections suggest that by building mashups with Popfly, students better understand the importance that data plays in Web 2.0 applications. Popfly enables students to create functional web applications that demonstrate their facility with Web 2.0 concepts and technologies. KEYWORDS Web 2.0, mashups, Popfly, programming, e-learning 1. INTRODUCTION Mashups are at the heart of the Web 2.0 business revolution, as companies such as Facebook, Google, and Yahoo make their data available through open APIs (application programming interfaces) for other applications to incorporate. While writing code to create mashups is usually a task for Computer Science majors in an advanced web development class, new software tools such as Microsoft Popfly provide the ability to create mashups with little or no programming knowledge. This paper describes how a first-year introductory technology course at a business-focused college introduced Microsoft Popfly to teach students new ways to interact with digital data. Students also learned about the open, distributed architectures of Web 2.0 applications. 2. MASHUPS AND WEB 2.0 Mashups are a popular new breed of Web 2.0 applications, where existing web content is combined to form a new web application. Examples of popular mashups include Zillow.com, a web site that plots real estate listings on a map, Flickr badges that enable embedding one s digital photographs on another web site, and sidebar gadgets that display RSS feeds, weather, or stock data. Mashups exemplify software s long tail (Anderson, 2004) as many smaller applications can be combined to have an even greater impact. The popularity of mashups has resulted from the myriads of web services [from popular social networking, photo and video sharing, searching and mapping web sites that are] suitable to be used, linked, referenced or embedded in other applications. The result is a construct that could be linked from external services and be consumed in different environments from the one it was created for. (Portillo, Romo, Benito, & Casquero, 2007, p. 327) Creating mashups usually requires significant web development experience, as programmers must write source code in a programming language such as Java or C# to access open APIs and web services from the 231

2 ISBN: IADIS various content providers, and then write the middleware to mash up the data between the chosen applications. Most of the data is available in an XML-based format obtained as a result of calling web services or RSS feeds. Within recent years, several commercial web-based tools for building mashups have been introduced, acknowledging the emergence of a generation of Lego-style software that is emblematic of the second generation of the Internet. (Markoff, 2008) Intel MashMaker (mashmaker.intel.com), Yahoo Pipes (pipes.yahoo.com), Google Mashup Editor (googlemashups.com), and Microsoft Popfly (popfly.com) are four recent corporate-developed tools for constructing mashups. Academic research into the use of mashup construction prototypes, such as Marmite (Wong & Hong, 2007), d.mix (Hartmann, Wu, Collins, & Klemmer, 2007) and MashMaker (Ennals & Gay, 2007) suggests that this new model of end-user programming has promise in lower[ing] the threshold of synthesizing new web applications (Hartmann, Wu, Collins, & Klemmer, 2007, p. 248) and therefore enables non-programmers to create simple web-based applications. The fact that first-year college students can now access these advanced ideas at a high level using a software tool demonstrates the dramatic shift that has occurred in how people use the Web. With Web 2.0 people have increased the amount of personal information that they store in or obtain from the web, giving mashups meaning to both beginners as well as large organizations. Now that beginners can actually interact with their data without needing a computer science degree, mashup tools become a possible platform for teaching basic programming and software development concepts. This paper examines the use of Microsoft Popfly in an introductory technology class as a tool for illustrating such software concepts. 3. MASHUPS TO INTRODUCE PROGRAMMING CONCEPTS IT 101 (Introduction to Information Technology) is an introductory technology course at Bentley College, a leader in business education located in New England (USA). Every first-year student must enroll in this course, which includes topics such as how to use the Internet, maintaining a personal computer, hardware and software, creating and posting web pages, multimedia, spreadsheets, and emerging topics in information technology. Students with previous computer experience or interest in technology may elect to take a technology intensive version of the course. The theme for the current offering of this technology intensive section of the course is Information Technology through the Lens of Web 2.0. In addition to the topics in the standard course, students actively use (and therefore learn about) blogs and wikis, subscribe to and create original podcasts, collaborate via Skype, monitor RSS feeds, use social networking applications, and learn about tagging and other Web 2.0 topics. Students create mashups as a culminating activity that applies knowledge of Web 2.0 topics covered earlier in the course and gives exposure to the logical and procedural thinking that software application development requires. Teaching introductory programming concepts to non-programmers continues to have varied approaches. StageCast.com and ToonTalk.com are popular visual environments for teaching programming concepts to younger children. (Yokokawa, 2006) These applications enable students to create simple video games, animations, and simulations without writing code. Alice, a 3-D interactive programming environment, is also a popular choice because of its visual interface and ability for students to interact with objects using simple English terminology. (Courte, Howard, & Bishop-Clark, 2006) In these applications, developers create a scene, story, or simulation by describing actions and assigning gestures or behaviors to animated characters. By interacting with a visual programming tool, users create applications through a simple, drag and drop interface whereas Visual Basic and JavaScript require technical skill and some commitment to master. (p. 4) Guzdial (2003) chose Jython (a Java-based version of Python) for an Introduction to Media Computation course for non-majors at Georgia Institute of Technology, so that students might explore programming concepts by interacting with multimedia. This course is based on the premise that digital formats are amenable to manipulation, creation, analysis, and transformation by computer. (p. 104) Another recent approach for teaching introductory programming concepts has been through building computer games. (Bayliss & Strout, 2006; Yokokawa, 2006) In all of these cases, using visual tools and interactive multimedia create an environment for learning to program that will engage the student. Programming empowers students to be creative and create meaning from their data. 232

3 IADIS International Conference e-learning 2008 Introductory technology courses often include a unit on programming or application development to give students a taste of programming and encourage further study of the topic in later courses. Visual Basic is a popular language for introducing programming to non-majors. In one such general education course, the final major assignment is to write a simple number guessing game using Microsoft Visual Basic. The goal of this course unit is not to transform the students into experienced programmers, [but] only to introduce them to concepts they might find in an introductory programming course. (Cliburn, 2006, p. 80) Applications that students are able to create after four or five sessions of instruction in Visual Basic or Java are not very complex: they program simple number-guessing games, calculate areas of geometric shapes or costs of overtime pay, and convert from one unit of measure to another. While these are good academic exercises, and at the appropriate level given that amount of instruction, data that students interact with today goes far beyond lengths, widths, and heights of triangles, time-and-a-half, and the number of liters in a gallon. These elementary examples are not likely to excite today s students, who routinely interact with images, Facebook, maps, YouTube, and Google. Their data is much more complex and meaningful than the sides of a triangle. A student is likely to be more excited about creating an animation in Alice or editing a video than converting a temperature from Fahrenheit to Celsius. Teaching students to construct mashups with Popfly follows these same premises. Popfly allows students to create applications that interact with real data without writing any source code. Doing so allows them to experience the sense of profound accomplishment and relief when their applications run correctly for the first time, and the pride of being able to easily share them with others.. The use of mashups as a tool for teaching introductory programming concepts is as yet an unexplored area of pedagogical research. 4. POPFLY OVERVIEW First introduced in the summer of 2007, Microsoft Popfly was released in beta in October 2007 as a tool for hobbyists to visually create mashups and embed them in other web-based applications. Popfly allows users to build mashups that interact with data from Web 2.0 sources such as Flickr, del.icio.us, RSS feeds, blogs, YouTube, and Windows Live Maps. Popfly uses the notion of blocks to represent modules that obtain, process, or display data. Connecting one Popfly block that obtains data with another block that displays it is the simplest mashup that one can create using Popfly. One constructs a Popfly mashup by dragging different blocks onto a design surface, and connecting them together. Within each block are its operations and properties. (See Figure 2). Thus, blocks represent objects, operations represent methods, and some blocks have additional properties or attributes. Dragging two of the same block onto the design surface introduces the notion of creating an instance of an object of a particular class. By clicking on a block s wrench icon, one may select an operation (method to invoke) and specify its inputs (parameters) from other Popfly blocks connected to it. This interaction introduces basic concepts of object oriented programming, albeit with slightly different and possibly more user-friendly terminology. Consider the mashup task to create a news map as shown in Figure 2. This mashup plots Reuters News stories on a map in the cities in which they took place. The news headlines come from a Reuters News RSS feed, an edited version of which is shown in Figure 1. In order to plot each news story, the mashup must determine the city name. This is relatively easy to do because the descriptions of Reuters news articles always begin with the city name (or city and state) followed by the word Reuters in parentheses. To construct the mashup, the RSS block loads the Reuters News RSS feed, and passes the description to a Text Util block, which invokes the splitget operation to split the description at the left parentheses and return the collection of news story locations obtained by doing so. This process yields the location to send to the GeoNames block so it may look up the corresponding latitude and longitude. Passing these coordinates, along with the title and description item data from the RSS feed itself, to the Virtual Earth mapping block provides sufficient information for plotting each news story on a map. For a video demonstrating how to construct this mashup using Popfly, please visit The result is shown in Figure

4 ISBN: IADIS <?xml version="1.0" encoding="utf-8"?> <rss xmlns:feedburner=" version="2.0"> <channel> <title> Reuters: U.S.</title> <item> <title>schwarzenegger signs budget cuts, warns more to come</title> <description>los ANGELES (Reuters) - California Gov. Arnold Schwarzenegger on Saturday signed six budget-cutting bills that will close the projected $3.3 billion shortfall in the state budget this fiscal year, but warned that more spending cuts would be needed. </description> <link> </link> <pubdate>sat, 16 Feb :46: </pubDate> </item> <item> </item> </channel> </rss> Figure 1. Reuters News RSS Feed (edited for clarity) Figure 2. Creating a NewsMap mashup in Popfly. The user drags the appropriate blocks to the design surface, and specifies the operations and inputs for each. Figure 3. Running the NewsMap mashup. 5. MOTIVATION FOR TEACHING Web 2.0 touches all of the areas of distinction at a business university: arts and sciences, business and technology, ethics and responsibility, and global commerce and culture. While most students in a business school will not become professional software developers, as future 21st-century information technology professionals, they will be involved in projects that require them to work with application developers and 234

5 IADIS International Conference e-learning 2008 database designers, and deal with data from several different sources. Today s students need to develop skills in critical and analytical thinking, and have an awareness of traditional software development concepts: objects, methods, parameters, APIs, compiling, and source code. The companies that they will start and work for will almost certainly face the challenges that O Reilly argues redefine the web as platform if they are to succeed. (O'Reilly, 2005) Today s students also need to understand why the syndicated content represented by the ubiquitous orange RSS icon that appears on practically every web page today opens the possibility to new business models in a distributed world. It is possible to teach basic algorithmic principles of sequence, selection, and repetition using Popfly. The work-flow of a mashup indicates sequence; a Filter block or a comparison block enable selection, and a timer block, where the remaining steps of the mashups are repeated at specified time intervals for a number of occurrences, suggests repetition. Popfly s graphical user interface makes the concepts of input, output and processing obvious. For non-programmers, the very process of connecting two Popfly blocks subtly introduces the programming concepts of inputs, outputs, processing, data types, and where data originates. There is an assumed level of technical and Web 2.0 literacy that is required in order to create even the simplest of mashups. To better appreciate how Popfly obtains data and processes a mashup, students must be familiar with web services and RSS. For the purposes of this first-year introductory course, it is sufficient for students to understand web services as methods or operations running on remote computers that a web application can access over the World Wide Web, and that they provide results in XML format. Showing the sample XML output from invoking a web method is a tangible way to demonstrate the difference between a web site and a web service. Students should be able to identify examples of how web services might be used in common web applications, such as to display news, stock, or weather data. Implementation details of SOAP, WSDL, and other protocols are beyond the scope of this course. Popfly also provides a framework for students to experience software development and architecture concepts not traditionally included in an introduction to technology course. As many software applications evolve from the desktop to the web-browser, issues related to deployment and maintenance, installations and upgrades constantly arise. O Reilly says that Web 2.0 software applications are constantly in a state of perpetual beta. (O'Reilly, 2005) By creating, modifying, and sharing their own mashups and deploying them to their own web sites, students experience first-hand on a small scale these software lifecycle milestones in a distributed environment. No longer do an application and its data always originate from the same place. The very act of sharing a mashup requires an understanding of the roles that clients, web servers and the Internet play in the process. Introducing Popfly in the information technology classroom gives students the experience of applying their knowledge of Web 2.0 concepts to create their own Web 2.0 applications without the need to know any programming syntax. By building mashups, students experience on a very small scale some of the advanced technologies that appear in today s distributed systems. 6. TEACHING POPFLY IN FOUR EASY LESSONS The course introduced Popfly during the last two weeks (four class sessions) of the fall 2007 semester. This is the same amount of time spent on introductory programming concepts using Visual Basic in previous semesters. Instruction consisted of guided hands-on mashup constructions, where students would follow along on their laptops, building the same mashup as the instructor; individual mashup constructions (where students would build or modify existing mashups during class time), and hands-off demonstrations (where students would watch as the instructor showed more-complicated, pre-constructed mashups to illustrate certain blocks, processes, or concepts. In order to better link the process of creating Popfly mashups with software development topics or familiar web sites, students were assigned to read relevant magazine articles or blog posts before each class. These provided students with a context to better understand software architecture or design issues related to the Popfly blocks or topics of each session. For example, students read an article about Facebook s open architecture (Vegelstein, 2007) to better understand how and why Facebook would make its data available for third party applications. This also provided a business context for the applications that students created. 235

6 ISBN: IADIS After each class session, students completed a homework assignment in which they individually created two mashups to test their mastery of the day s lesson. The first mashup was often similar to one shown in class with minor modification; the second usually required more independent thinking and analysis. For each mashup, students had to write a few sentences describing the blocks used, how each mashup worked, take a screen shot showing the blocks used and how they were connected, and embed the working mashup on their web pages. Table 1 describes the topics introduced in each session and sample homework assignments. Table 1. Popfly in Four Easy Lessons Session 1 Topics: Interacting with Images, Displaying Images, Combining Data Sources Assignment: Create a mashup that displays images from an online image source. Create a mashup that displays images from two different data sources (i.e., pictures of cats and dogs). Use the Combine block to combine the different data sources. Session 2 Topics: RSS Feeds, Text Processing Blocks, Text Displaying Blocks Assignment: Combine RSS feed containing your flickr, del.icio.us, and blog information into a single feed, displayed as a list of links to the individual items. Create an original mashup that uses at least five different Popfly blocks. Session 3 Topics: Facebook, Maps, GeoTagging Assignment: Create a mashup to display photos of your Facebook friends on a map. Create a mashup using any Reuters News RSS feed to display news story headlines on a map. Session 4 Topics: Extending Popfly: Discovering New Blocks, Creating Original Blocks Assignment: Add border thickness and border color enhancements to the original block created in class. (The class exercise had students create a block to display an image with a specified height and width.) Create a productive mashup that incorporates as many different blocks as possible. Using Popfly piqued student interest about software development, and related business applications. Students asked good questions, not only about how to create particular mashups, but also about the relevance of doing so. In one class example, the instructor demonstrated a mashup to display real estate properties on a map. One student commented, We saw the solution to this problem on Zillow.com. Why would we ever need to do this? This instructor placed the response in a business context: During the semester, the class examined several Web 2.0 companies and applications, and common to all of them is that they all began with an idea. Before those ideas could become marketable products, their originators needed two things: a business plan and a technical proof of concept. It doesn t matter how good the business plan is if current technologies cannot implement the most basic form of the idea, in this case, plotting real estate listings on a map. While the creators of Zillow.com did not use Popfly, they probably did do some sort of a proof of concept prototype to demonstrate that this was possible. One reason for learning about Popfly in this class is to give students an awareness of what is possible, and the skills to construct some basic proof-of-concept mashups to validate the feasibility of their own ideas. 7. LEARNING OUTCOMES Students demonstrated their proficiency in applying their Web 2.0 knowledge to create at least eight mashups using Popfly (two were assigned after each class for homework), as described in Table 1. In addition, students completed a written final examination that focused on programming concepts encountered while using Popfly rather than the functionality of any particular block. Finally, they provided qualitative feedback by submitting a blog post describing their experience using Popfly. These three instruments gave an indication of the learning outcomes using Popfly. 236

7 IADIS International Conference e-learning Written Exam Open-ended questions on a written final exam required students to synthesize their understanding of creating mashups. Questions focused more on the process of creating mashups and their applications, rather than on functionality of specific blocks. Sample exam questions included: What is a block in Popfly? What does it represent? Name two rules or guidelines when connecting Popfly blocks. How might businesses make use of mashups? Several students explained the rules for connecting Popfly blocks using language that showed their understanding of methods, parameters and matching data types, even though their descriptions did not use that terminology. In the words of one student: One major rule is that you must make sure the blocks or sets of information are compatible. If you take one block that takes information from Yahoo images and connect it to an MP3 player block the final outcome would be a defective, unusable mashup. Another student said: Blocks can be connected together to create a logical process in which data is initially fed in and then converted to something useful. You have to understand the idea of inputs and outputs to make sure they are connected in the right order. Also, you have to mash data that is compatible with the block its going into You can t just have a blog s RSS feed block connect to an image displaying block and expect it to work. One student related Popfly blocks to his experience learning about functions in a math class: In order to correctly create a mashup, the user must use a block to gather raw data. This is then used as an input into another block which then performs an operation, and finally produces an output. When we were learning this, the blocks reminded me of a mathematical teaching tool called the function machine. The function machine had a space for inputs, a function, and the outputs; the Popfly block is effectively the same idea. This could be a beneficial tool for math teachers in teaching functions. Students also were able to conceive of new possible business opportunities that involved mashups: Businesses could use mashups in a number of ways. For example, a delivery business could plot all its customer orders on a map, and maybe make the urgent ones be shown differently so that they are noticeable. The same business could also use a mashup to have online orders automatically generate receipts and update the inventory. Another student offered this suggestion: An idea that I was pursuing was to create a mashup that could be used as a substitute for marketing and surveying software. A mashup could be created that searches through blogs, del.icio.us, digg, Google, Yahoo and other similar sites to get a feeling of what Internet users are interested in to potentially get an idea for a new product or business process. For example, if there are 500 million tags for online banking articles, maybe that is an indication that a company should add an online payment plans to their business. 7.2 Student Reflections In their blogs, students reflected on their learning during the semester. Many commented how constructing mashups allowed them to express their creativity: We learned how to create mashups, which I feel was the most interesting thing I learned all semester. Mashups gave me a taste of what it is like to create applications and software and what's really involved in creating them. It also really gave me a good idea of the true meaning of Web 2.0 because you were in control of what data came from where and what you did with it. Said another student: Popfly helped me understand how some of the more complex programs on the Internet are created. [I have] very limited experience with writing blocks and using JavaScript. [After using] Popfly, I realized that there is an entire world of computers I need to learn more about. What I will take most from [this class] is the feeling that with enough work I can accomplish what I want on the Internet and given the right tools I have the ability to shape the Internet. 237

8 ISBN: IADIS A third student reflected: Since I have not done any programming before, Popfly made it easy for me see how the different components of a mashup work together, and that the same principle applies to other software. There are so many possibilities and it is kind of exciting when you can pull off a creative idea successfully. It helped me to learn more about myself as being a good problem solver. Popfly was probably the most interesting part of my experience in the course. 8. CONCLUSION Teaching students to make mashups has great educational potential for introducing basic programming principles, as well as learning software development and architecture concepts. By using Microsoft Popfly to easily access data from many familiar Web 2.0 applications, students learn to interact with data in new ways, as they create and share their own Web 2.0 applications. This pedagogical approach encourages both creative and analytical thinking as students learn beginning programming concepts using an interactive, visual mashup development platform. The relevance of their work may also motivate students to take additional courses in JavaScript, web design, and software development to further their knowledge in these areas. A future study might examine the extent to which using Popfly eases the transition to more conventional development environments such as Eclipse or Visual Studio for beginning programmers. REFERENCES Anderson, C. (2004, October). The Long Tail. Wired (12.10). Bayliss, J., & Strout, S. (2006). Games as a "flavor" of CS1. Proceedings of the 37th SIGCSE technical symposium on Computer science education (pp ). Houston: Association for Computing Machinery. Cliburn, D. (2006). A CS0 course for the liberal arts. Proceedings of the 37th SIGCSE technical symposium on Computer science education (pp ). Houston: Association for Computing Machinery. Courte, J., Howard, E., & Bishop-Clark, C. (2006). Using Alice in a Computer Science Survey Course. Information Systems Education Journal, 4 (87), 3-7. Ennals, R., & Gay, D. (2007). User-Friendly Functional Programming for Web Mashups. Proceedings of the 2007 ACM SIGPLAN international conference on Functional programming (pp ). Freiburg, Germany: Association for Computing Machinery. Guzdial, M. (2003). A media computation course for non-majors. Proceedings of ITICSE. 35, pp Thessaloniki, Greece: Association for Computing Machinery. Hartmann, B., Wu, L., Collins, K., & Klemmer, S. (2007). Programming by a Sample: Rapidly Creating Web Applications with d.mix. Proceedings of the 20th annual ACM symposium on User interface software and technology (pp ). Newport, RI: Association for Computing Machinery. Markoff, J. (2008, February 10). Mashups Are Breaking the Mold at Microsoft. The New York Times, p. B4. O'Reilly, T. (2005, September 30). What Is Web 2.0: Design Patterns and Business Models for the Next Generation of Software. Retrieved January 21, 2008, from O'Reilly Radar: Portillo, J., Romo, J., Benito, M., & Casquero, O. (2007). Reflections on the Next Generaton of Authoring Tools. IADIS International Conference e-learning , pp Lisbon: International Association for Development of the Information Society. Vegelstein, F. (2007, September 6). How Mark Zuckerberg Turned Facebook Into The Web's Hottest Platform. Retrieved February 3, 2008, from Wired Magazine: Wong, J., & Hong, J. (2007). Making Mashups with Marmite: Towards End-User Programming for the Web. Proceedings of the SIGCHI conference on Human factors in computing systems (pp ). San Jose, California: Association for Computing Machinery. Yokokawa, K. (2006). Script Synthesis Tool for Non-Experienced Programmers. Fourth International Conference on Creating, Connecting, and Collaborating through Comuting (pp ). Berkeley: IEEE Computer Society. 238