1. StockWatch Developers: Nimrod Hagay Hagai Barkan Supervisors: Assaf Solomovitch Viktor Kulikov June 2009

2. StockWatch is a website (ASP.NET) which provides a User centric interface for managing stock portfolios, supply stock technical analysis (based on www.American-bulls.com web site), Live market data and news.www.American-bulls.com Overview

3. StockWatch should use advanced technologies such as AJAX, ASP.NET, JavaScript and Online data management APIS. StockWatch should be User friendly, attractive and quickly responsive. StockWatch should provide free technical analysis combined with real-time data and news feeds. StockWatch should relay on stable data sources. Project Goals

4. Multiple Users System Real Time Quotes Rich presentation layer Google Portfolios API User Portfolios Stocks Grading Various News Feeds Admin Management Main features

5. ASP.NET 3.5 ASP.NET 3.5 AJAX extension. Microsoft SQL. C# (.NET framework 3.5). Google spreadsheets API (C#). JavaScript YUI – Yahoo User Interface Google Visualizations Google Ajax Feed API Technologies

6. 1. ASP.NET – We have purchased the ability to build web sites using that technology. 2. AJAX – How to enhance a web site and give the user a good user experience. 3. SQL – Build and query our database. 4. C# - The code behind language of our web site. 5. JavaScript – Using it in order to reduce page reloads and pass some runtime job to the client side. 6. Using Advanced user interface and data APIS – such as Google spreadsheets, YUI, Google AJAX feed API and more… What have we learned ?

7. ASP.NET Server side & Client side Web Pages – Static & Dynamic data Code behind model Built-In controls View-State Master Page Membership & Security (Users & Roles)

8. AJAX (Asynchronous JavaScript and XML) Group of interrelated web development techniques used on the client-side to create interactive web applications. can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page. XMLHttpRequest object – Xml / pre-formatted HTML / plain text / JSON are being sent to the server and back. JavaScript code handles the dynamic data display. We used the following controls : AutoCompleteExtender, TextBoxWatermarkExtender ModalPopupExtender, TabContainer,AnimationExtender & UpdatePanel.

9. SQL SQL (Structured Query Language) is a database computer language designed for the retrieval and management of data in relational database management systems, database schema creation and modification, and database object access control management. We used SQL through SqlDataSource & Dataset controls in order to update and query data on our stocks table.

10. 3-Layers Design AJAX ASP.NET Google visualizations YUI Google Spreadsheets API SqlDataSource Yahoo web service

11. Layer 0 - Data sources Google finance Google Spreadsheets American Bulls StockWatch DB Portfolios page Stock page Yahoo finance Yahoo Web Service Google Portfolios API StockParser

12. Database – Layer 0

13. Google spreadsheet – Layer 0 Auto updates data Easy API for querying and updating data

14. Layer 1 - DAL Google Portfolios API - User portfolios are saved on A Google spreadsheet in order to get real time data. The API Provides an easy interface managing user’s portfolios. SqlDataSource – allows us to access and manipulate data in an ASP.NET page without using ADO.NET classes directly. Yahoo web service – provides an easy access to Yahoo finance real time data.

15. Layer 2 – Business logic – the whole picture

16. Layer 2 – Business logic – Users management & security StockWatch uses ASP.NET Built-in Users Management mechanism. The mechanism generate memberships data tables in the database. Built-in User controls offer easy login (Login control), registration (CreateUserWizard), Password recovery and Dynamic content according to the user state (LoginView control). Roles management – StockWatch uses the roles mechanism in order to distinguish between Admin user (management page) and regular user.

17. StockWatch collect news feeds from Yahoo finance, Google finance & Msn money. News feeds are dynamic according to the presented stock or stocks in current portfolio. News feeds are being displayed using Google feed Ajax API. (client side). Layer 2 – Business logic – News feeds

18. Layer 2 – Business logic – American Bulls data parsing Everyday at 2 am a data parsing process gets data from American Bulls web pages. The process has 3 stages : ◦Page download ◦Data parsing and saving into data base ◦Grading process:  Grade = (Stock hits / Stock predictions)  The information for the stock grade is based on predictions results history from American bulls.

19. Layer 3 – Presentation layer 1.To be visually appealing 2. To be responsive and easy to use What do we expect from a modern web site?

20. Layer 3 – Presentation layer – Design Technologies 1.Master Pages – give the site one constant look and feel. 2. Custom controls for better code reuse and modularity. 3. CSS to create a modern design that is also interchangeable.

21. We used Ajax auto complete control for symbol search, this control use Web Service function. The use of Web Service helps the System run smoothly, and enhance the system performance. Update Panel : Layer 3 – Presentation layer – AJAX

22. Layer 3 – Presentation layer – Google Visualization Dynamic News Feeds Google Table

23. Thank you ! Any questions ?