Joseph Mertz, Ph.D Teaching Professor H. John III Heinz College Dietrich College IS Program

Transcription

1 Joseph Mertz, Ph.D Teaching Professor H. John III Heinz College Dietrich College IS Program

2 Mobile Desktop Tablet Social Interac6ve Real Time Big data Share func6onality (e.g. maps) Interact with the physical world (e.g. body, house) Joe Mertz - Distributed ApplicaDon Development 2

3 ApplicaDons have evolved from single- computer to distributed E.g. History of what has become Customer RelaDonship Management (CRM) systems. Joe Mertz - Distributed ApplicaDon Development 3

4 Stand alone applicadons on a single computer. Single programming language Single compudng planorm Ad- hoc informadon storage No networking protocols Joe Mertz - Distributed ApplicaDon Development 4

5 Shared databases available via a LAN to all salespeople Single programming language Single compudng planorm Single DBMS LAN based networking Joe Mertz - Distributed ApplicaDon Development 5

6 CRM uses common web protocols for users to access customer informadon via a browser MulDple programming languages Middleware (souware on the server) Java and JEE, C# and.net, PHP, Ruby, or others HTML, Javascript, CSS MulDple compudng planorms Server User web browser PotenDally muldple web browsers with varying capabilides Server- side DBMS Web- based networking protocols: hzp Joe Mertz - Distributed ApplicaDon Development 6

7 Customer portal into your business MulDple languages Middleware (JEE,.NET, etc) Languages of legacy systems HTML, CSS, Javascript Frameworks: AJAX, JQuery, Struts, Springs, Hibernate, JPA, Flash, Silverlight MulDple compudng planorms Server, legacy systems, muldple web browsers Cloud- based planorms (IaaS, PaaS, SaaS) MulDple DBMS, some legacy Networking HTTP, web services protocols (e.g. SOAP, REST), enterprise- internal protocols to De to legacy systems. Joe Mertz - Distributed ApplicaDon Development 7

8 Customer can access all their account informadon for interacdng with the business via a mobile phone browser MulDple languages Middleware Languages of legacy systems HTML, CSS, Javascript Frameworks: AJAX, JQuery, Struts, Springs, Hibernate, JPA, Flash, Silverlight MulDple compudng planorms Server, legacy systems, muldple web browsers Cloud- based planorms (IaaS, PaaS, SaaS) Mobile phone planorms / browsers MulDple DBMS, some legacy Networking HTTP, web services protocols (e.g. SOAP, REST), enterprise- internal protocols to De to legacy systems, XML or JSON to pass objects to/from mobile. Joe Mertz - Distributed ApplicaDon Development 8

9 Customer can access all their account informadon for interacdng with the business via a mobile phone E.g. Checking Amazon account shipments on my iphone MulDple languages Middleware Languages of legacy systems HTML, CSS, Javascript ObjecDve- C for iphone, Java for Android and Blackberry, C# for Windows Phone 7. Frameworks: AJAX, JQuery, Struts, Springs, Hibernate, JPA, Flash, Silverlight MulDple compudng planorms Server, legacy systems, muldple web browsers Cloud- based planorms (IaaS, PaaS, SaaS) iphone, Android, etc mobile phone planorms. MulDple DBMS, some legacy Networking HTTP, web services protocols (e.g. SOAP, REST), enterprise- internal protocols to De to legacy systems, XML or JSON to pass objects to/from mobile. Joe Mertz - Distributed ApplicaDon Development 9

10 Early CRMs were: OUen built by one company Custom built or a commercial system Only included data from within that company The web has allowed developers to embed informadon and funcdonality from other sources in their applicadons aka mashup First mashup: HousingMaps.com Joe Mertz - Distributed ApplicaDon Development 10

11 HousingMaps.com was the first mashup. By Paul Rademacher The Google Maps team was thrilled to see how he and others were hacking (in the good sense) their system and describing it on blogs. Joe Mertz - Distributed ApplicaDon Development 11

12 Not really They now have a bulk- posdng API HousingMaps was built without the aid of a published API. What is an API? ApplicaDon Programming Interface A set of souware specificadons that enable a programmer to interact with a souware system Joe Mertz - Distributed ApplicaDon Development 12

13 Non- opdmized opdon: User does query for housing Housingmaps does query to craigslist Housingmaps processes all responses Housingmaps returns page to user. Apparently opdmized opdon: Craigslist provides RSS feeds (i.e. XML formazed response) Housingmaps subscribes to Craigslist RSS feed Periodically checks the RSS feed When updates, retrieves and screen- scrapes and stores the informadon This limits the number of queries HousingMaps needs to do to Craigslist. (Requests are limited by Craigslist). Joe Mertz - Distributed ApplicaDon Development 13

14 HousingMaps no longer works CraigsList now has mapping capability Uses OpenStreetMap hzp:// Joe Mertz - Distributed ApplicaDon Development 14

15 ProgrammableWeb mashup tag frequency Unfortunately ProgrammableWeb no longer provides these stats Joe Mertz - Distributed ApplicaDon Development 15

16 ProgrammableWeb mashup tag frequency Prior year Joe Mertz - Distributed ApplicaDon Development 16

17 ProgrammableWeb mashup tag frequency 4 years ago Joe Mertz - Distributed ApplicaDon Development 17

18 ProgrammableWeb mashup tag frequency For all Dme Joe Mertz - Distributed ApplicaDon Development 18

19 Source: hzp:// research Joe Mertz - Distributed ApplicaDon Development 19

20 Source: hzp:// research Joe Mertz - Distributed ApplicaDon Development 20

21 What does CraigsList look like on a phone? Joe Mertz - Distributed ApplicaDon Development 21

22 Customizing presentadon to fit the capabilides of any planorm. Design goal: Design to adapt content for your full customer base. Joe Mertz - Distributed ApplicaDon Development 22

23 Browse to: hzp://dnyurl.com/m2c- draw Uses HTML5 Canvas tag jquery Node.js Socket.io which uses WebSockets (if available) Only 36 lines of HTML 120 lines JavaScript client- side 36 lines JavaScript server- side Joe Mertz - Distributed ApplicaDon Development 23

24 The web has become a "planorm" Where once we programmed only individual computers, now our applicadons span many types of devices connected by the internet using open standards for easy interoperability Joe Mertz - Distributed ApplicaDon Development 24

25 Shrink your internal development team Lower your data center operadng costs Increase your funcdonality By Moving to a cloud- based, souware- as- a- service CRM soludon (e.g. Salesforce) Joe Mertz - Distributed ApplicaDon Development 25

26 Advances are coming rapidly: new frameworks new tools new products Anything you learn about a specific language, planorm, protocol, or framework will likely change in the next 5 years and perhaps before you graduate! The goal can t be only JavaScript, or Web Sockets, or accessing Amazon S3 storage using REST. Consequently what can you learn from a class like this? Joe Mertz - Distributed ApplicaDon Development 26

27 To pracdce using specific technologies to crau soludons To reflect on those technologies I.e. categorize, compare, contrast classes of technologies To reflect on those soludons I.e. base soludons on best- pracdce architectures, souware engineering pracdces, and soludon pazerns and extract new pazerns from viable soludons Joe Mertz - Distributed ApplicaDon Development 27

28 I'll give you an example of making dough, and we will walk through the process. Then I'll give you an example of using an oven and we will do an exercise in how to use it. I'll assume you can open a can. Then I'll give you a big assignment to make and bake something that involves dough. I might suggest as an idea making a creadve pizza. You might opt for making cinnamon buns instead. In any case, I won't walk you through making pizza or cinnamon buns. The learning happens in figuring it out. Joe Mertz - Distributed ApplicaDon Development 28

29 Joe Mertz - Distributed ApplicaDon Development 29

30 Developing interacdve web applicadons Improving client- side programming skills Developing server- side middleware Using public 3 rd party APIs AdapDng to mobile devices While we work to understand deeper: networking storing persistent data nosql MVC security Joe Mertz - Distributed ApplicaDon Development 30

31 JavaScript jquery jquery Mobile Node.js Express and other frameworks within Node.js MongoDB Web Sockets Socket.io MulDple cloud- based services Joe Mertz - Distributed ApplicaDon Development 31

32 My background Your background - before Thursday's class: Fill out the brief form at hzp://dnyurl.com/m2c- prior Joe Mertz - Distributed ApplicaDon Development 32

33 Web site hzp:// Contact info Syllabus Schedule Resources Blackboard Grade book Submitng assignments Piazza Forum for discussion of classes, labs, and assignments Joe Mertz - Distributed ApplicaDon Development 33

34 Use video, blogs, tutorials, and readings to get the bulk of content. Allows you to read/watch at your own pace Use class Dme for discussion, answering quesdons reviewing demos / examples working on exemplar small projects getng and sharing lots of help Joe Mertz - Distributed ApplicaDon Development 34

35 Install Google Chrome on your laptop if you don't already have it Read about the Chrome developer tools (links are on the course schedule) Set Up Chrome DevTools NavigaDng the Console Diagnose and Log to Console Inspect and Tweak Your Pages: the Basics Keyboard & UI Shortcuts Reference How to Add or Remove Breakpoints How to Step Through the Code Watch the Douglas Crockford video (1:49:55 long) hzp://yuiblog.com/blog/2007/01/24/video- crockford- tjpl/ AlternaDve: scan his slides to refresh your knowledge, watch when you have quesdons AlternaDve: scan the JavaScript: DefiniDve Ch 1-9 Come ready to write short JavaScript programs in the Chrome developer console. Fill out the brief form at hzp://dnyurl.com/m2c- prior Joe Mertz - Distributed ApplicaDon Development 35