Difference between revisions of "IS480 Team wiki: 2013T1 Kungfu Panda Technologies"
Jump to navigation
Jump to search
Yg.tan.2010 (talk | contribs) |
Yh.koon.2010 (talk | contribs) |
||
(39 intermediate revisions by 4 users not shown) | |||
Line 1: | Line 1: | ||
− | [[Image:KP- | + | [[Image:KP-NewHeader.PNG|1000x500px|center]] |
<div style="background-color:#FFFFFF" align="center"> | <div style="background-color:#FFFFFF" align="center"> | ||
{| style="background-color:#133C68; color:#000000 padding: 5px 0 0 0;" width="100%" cellspacing="0" cellpadding="0" valign="top" border="0"| | {| style="background-color:#133C68; color:#000000 padding: 5px 0 0 0;" width="100%" cellspacing="0" cellpadding="0" valign="top" border="0"| | ||
|- | |- | ||
− | + | ||
! style="background: #D72C25; color: #D72C25; text-align: center; border-top:solid #F6D049; border-bottom:solid #F6D049" width="100px" height="50px" | [[IS480_Team_wiki:_2013T1_Kungfu_Panda| <span style="color:#F6D049"><font face="Helvetica" size="4"> Home </font></span>]] | ! style="background: #D72C25; color: #D72C25; text-align: center; border-top:solid #F6D049; border-bottom:solid #F6D049" width="100px" height="50px" | [[IS480_Team_wiki:_2013T1_Kungfu_Panda| <span style="color:#F6D049"><font face="Helvetica" size="4"> Home </font></span>]] | ||
! style="background: #D72C25; color: #D72C25; text-align: center; border-top:solid #F6D049; border-bottom:solid #F6D049" width="100px" height="50px" | [[IS480_Team_wiki:_2013T1_Kungfu_Panda_About_Us| <span style="color:#F6D049"><font face="Helvetica" size="4"> About Us </font></span>]] | ! style="background: #D72C25; color: #D72C25; text-align: center; border-top:solid #F6D049; border-bottom:solid #F6D049" width="100px" height="50px" | [[IS480_Team_wiki:_2013T1_Kungfu_Panda_About_Us| <span style="color:#F6D049"><font face="Helvetica" size="4"> About Us </font></span>]] | ||
! style="background: #D72C25; color: #D72C25; text-align: center; border-top:solid #F6D049; border-bottom:solid #F6D049" width="200px" height="50px" | [[IS480_Team_wiki:_2013T1_Kungfu_Panda_Project_Overview|<span style="color:#FFFFFF"> <font face="Helvetica" size="4"> Project Overview </font></span>]] | ! style="background: #D72C25; color: #D72C25; text-align: center; border-top:solid #F6D049; border-bottom:solid #F6D049" width="200px" height="50px" | [[IS480_Team_wiki:_2013T1_Kungfu_Panda_Project_Overview|<span style="color:#FFFFFF"> <font face="Helvetica" size="4"> Project Overview </font></span>]] | ||
! style="background: #D72C25; color: #D72C25; text-align: center; border-top:solid #F6D049; border-bottom:solid #F6D049" width="200px" height="50px" | [[IS480_Team_wiki:_2013T1_Kungfu_Panda_Project_Management |<span style="color:#F6D049"> <font face="Helvetica" size="4"> Project Management </font> </span>]] | ! style="background: #D72C25; color: #D72C25; text-align: center; border-top:solid #F6D049; border-bottom:solid #F6D049" width="200px" height="50px" | [[IS480_Team_wiki:_2013T1_Kungfu_Panda_Project_Management |<span style="color:#F6D049"> <font face="Helvetica" size="4"> Project Management </font> </span>]] | ||
+ | ! style="background: #D72C25; color: #D72C25; text-align: center; border-top:solid #F6D049; border-bottom:solid #F6D049" width="100px" height="50px" | [[IS480_Team_wiki:_2013T1_Kungfu_Panda_User_Testing| <span style="color:#F6D049"><font face="Helvetica" size="4"> Testing</font></span>]] | ||
! style="background: #D72C25; color: #D72C25; text-align: center; border-top:solid #F6D049; border-bottom:solid #F6D049" width="200px" height="50px" | [[IS480_Team_wiki:_2013T1_Kungfu_Panda_Project_Documents |<span style="color:#F6D049"> <font face="Helvetica" size="4"> Project Documents </font> </span>]] | ! style="background: #D72C25; color: #D72C25; text-align: center; border-top:solid #F6D049; border-bottom:solid #F6D049" width="200px" height="50px" | [[IS480_Team_wiki:_2013T1_Kungfu_Panda_Project_Documents |<span style="color:#F6D049"> <font face="Helvetica" size="4"> Project Documents </font> </span>]] | ||
− | + | ||
|} | |} | ||
</div> | </div> | ||
Line 22: | Line 23: | ||
! style=" text-align: center; border-top:solid #F6D049; border-bottom:solid #F6D049" width="200px" height="25px" | [[IS480_Team_wiki:_2013T1_Kungfu_Panda_X-Factor| <span style="color:#F6D049"><font face="Helvetica" size="4">Our X-Factor</font></span>]] | ! style=" text-align: center; border-top:solid #F6D049; border-bottom:solid #F6D049" width="200px" height="25px" | [[IS480_Team_wiki:_2013T1_Kungfu_Panda_X-Factor| <span style="color:#F6D049"><font face="Helvetica" size="4">Our X-Factor</font></span>]] | ||
! style=" background: #D72C25;text-align: center; border-top:solid #F6D049; border-bottom:solid #F6D049" width="200px" height="25px" | [[IS480_Team_wiki:_2013T1_Kungfu_Panda_Technologies| <span style="color:#FFFFFF"><font face="Helvetica" size="4">Technologies</font></span>]] | ! style=" background: #D72C25;text-align: center; border-top:solid #F6D049; border-bottom:solid #F6D049" width="200px" height="25px" | [[IS480_Team_wiki:_2013T1_Kungfu_Panda_Technologies| <span style="color:#FFFFFF"><font face="Helvetica" size="4">Technologies</font></span>]] | ||
+ | ! style=" text-align: center; border-top:solid #F6D049; border-bottom:solid #F6D049" width="200px" height="25px" | [[IS480_Team_wiki:_2013T1_Kungfu_Panda_Future| <span style="color:#F6D049"><font face="Helvetica" size="4">Going Forward</font></span>]] | ||
|} | |} | ||
</div> | </div> | ||
<br> | <br> | ||
− | [[Image:KP- | + | [[Image:KP-Technologies(Final).PNG|626x395px|center]] |
− | == Front-End== | + | |
+ | == References: Technologies Used == | ||
+ | <br/> | ||
+ | {| class="wikitable" | ||
+ | |- | ||
+ | | style="background: #000000; color: #FFFFFF; text-align: center;" | <b>No</b> | ||
+ | | style="background: #000000; color: #FFFFFF;text-align: center;" | <b>Frontend/Backend</b> | ||
+ | | style="background: #000000; color: #FFFFFF;text-align: center;" | <b>Technology</b> | ||
+ | | style="background: #000000; color: #FFFFFF;text-align: center;" | <b>Link</b> | ||
+ | |- | ||
+ | | style="background: #FFFFFF;text-align: center;" | 1 | ||
+ | | style="background: #FFFFFF;text-align: center;" | Frontend | ||
+ | | style="background: #FFFFFF;text-align: center;" | [[Image:KP Frontend1.PNG|109x72px]] | ||
+ | | style="background: #FFFFFF;text-align: center;" | http://www.oracle.com/technetwork/java/javase/downloads/index.html | ||
+ | |- | ||
+ | | style="background: #FFFFFF;text-align: center;" | 2 | ||
+ | | style="background: #FFFFFF;text-align: center;" | Frontend | ||
+ | | style="background: #FFFFFF;text-align: center;" | [[Image:KP Frontend2.PNG|139x45px]] | ||
+ | | style="background: #FFFFFF;text-align: center;" | http://jquery.com/ | ||
+ | |- | ||
+ | | style="background: #FFFFFF;text-align: center;" | 3 | ||
+ | | style="background: #FFFFFF;text-align: center;" | Frontend | ||
+ | | style="background: #FFFFFF;text-align: center;" | [[Image:KP Frontend3.PNG|93x66px]] | ||
+ | | style="background: #FFFFFF;text-align: center;" | http://getbootstrap.com/ | ||
+ | |- | ||
+ | | style="background: #FFFFFF;text-align: center;" | 4 | ||
+ | | style="background: #FFFFFF;text-align: center;" | Frontend | ||
+ | | style="background: #FFFFFF;text-align: center;" | [[Image:KP Frontend4.PNG|92x82px]] | ||
+ | | style="background: #FFFFFF;text-align: center;" | http://backbonejs.org/ | ||
+ | |- | ||
+ | | style="background: #FFFFFF;text-align: center;" | 5 | ||
+ | | style="background: #FFFFFF;text-align: center;" | Frontend | ||
+ | | style="background: #FFFFFF;text-align: center;" | [[Image:KP Frontend5.PNG|157x41px]] | ||
+ | | style="background: #FFFFFF;text-align: center;" | http://underscorejs.org/ | ||
+ | |- | ||
+ | | style="background: #FFFFFF;text-align: center;" | 6 | ||
+ | | style="background: #FFFFFF;text-align: center;" | Backend | ||
+ | | style="background: #FFFFFF;text-align: center;" | [[Image:KP Backend1.PNG|124x40px]] | ||
+ | | style="background: #FFFFFF;text-align: center;" | http://www.tibco.com/company/default.jsp | ||
+ | |- | ||
+ | | style="background: #FFFFFF;text-align: center;" | 7 | ||
+ | | style="background: #FFFFFF;text-align: center;" | Backend | ||
+ | | style="background: #FFFFFF;text-align: center;" | [[Image:KP Backend2.PNG|111x52px]] | ||
+ | | style="background: #FFFFFF;text-align: center;" | http://www.mysql.com/ | ||
+ | |- | ||
+ | | style="background: #FFFFFF;text-align: center;" | 8 | ||
+ | | style="background: #FFFFFF;text-align: center;" | Backend | ||
+ | | style="background: #FFFFFF;text-align: center;" | [[Image:KP Backend3.PNG|124x67px]] | ||
+ | | style="background: #FFFFFF;text-align: center;" | http://www.soapui.org/ | ||
+ | |- | ||
+ | | style="background: #FFFFFF;text-align: center;" | 9 | ||
+ | | style="background: #FFFFFF;text-align: center;" | Backend | ||
+ | | style="background: #FFFFFF;text-align: center;" | [[Image:KP Backend4.PNG|140x46px]] | ||
+ | | style="background: #FFFFFF;text-align: center;" | http://www.jboss.org/drools/ | ||
+ | |} | ||
+ | |||
+ | == Front-End: Design & Technology Considerations== | ||
+ | <strong>Single Page Application</strong> | ||
+ | <br/> | ||
+ | |||
+ | *Reusable Codes | ||
+ | |||
+ | *More responsive application | ||
− | <strong> | + | *Reduce load on Server |
+ | **HTML loading etc. | ||
+ | |||
+ | <strong>Reasons for Client-Side Technologies Used </strong> <br/> | ||
*MVC for client side code | *MVC for client side code | ||
Line 43: | Line 110: | ||
*Stubs are easy to create with backbone’s Model | *Stubs are easy to create with backbone’s Model | ||
− | <strong> | + | <strong>Reasons for Server-Side Technologies Used </strong> <br/> |
− | *Simple interface with Service Mediation that uses | + | *Simple interface with Service Mediation that uses TIBCO JMS |
*Low learning curve | *Low learning curve | ||
Line 51: | Line 118: | ||
*Open-Source libraries that provide easy conversion from JSON to XML (vice-versa) | *Open-Source libraries that provide easy conversion from JSON to XML (vice-versa) | ||
+ | <br/> | ||
− | == Back-End== | + | == Back-End: Technical Complexity== |
<strong>Communication Model </strong> <br/> | <strong>Communication Model </strong> <br/> | ||
This model depicts how messages are sent to and fro from our Bank Teller Application (Frontend) through the Enterprise Service bus to retrieve / store information in the database. <br/> | This model depicts how messages are sent to and fro from our Bank Teller Application (Frontend) through the Enterprise Service bus to retrieve / store information in the database. <br/> | ||
Line 68: | Line 136: | ||
<br/> | <br/> | ||
<strong> Sample Backend Tibco Service </strong> <br/> | <strong> Sample Backend Tibco Service </strong> <br/> | ||
− | Service: | + | Service: Transaction_PartialLoanRepayment_Create<br/> |
− | [[Image:Sample-core-services.png]] | + | [[Image:Sample-core-services-complicated.png|798x596px]] |
+ | <br/> | ||
<br/> | <br/> | ||
+ | <br/> | ||
+ | <strong>Entity-Relationship Diagram for SMU Core Services Database</strong> | ||
+ | <br/><br/> | ||
+ | [[Image:KP-Core Services ER Diagram.png|769x1054px]] |
Latest revision as of 12:45, 25 November 2013
References: Technologies Used
No | Frontend/Backend | Technology | Link |
1 | Frontend | http://www.oracle.com/technetwork/java/javase/downloads/index.html | |
2 | Frontend | http://jquery.com/ | |
3 | Frontend | http://getbootstrap.com/ | |
4 | Frontend | http://backbonejs.org/ | |
5 | Frontend | http://underscorejs.org/ | |
6 | Backend | http://www.tibco.com/company/default.jsp | |
7 | Backend | http://www.mysql.com/ | |
8 | Backend | http://www.soapui.org/ | |
9 | Backend | http://www.jboss.org/drools/ |
Front-End: Design & Technology Considerations
Single Page Application
- Reusable Codes
- More responsive application
- Reduce load on Server
- HTML loading etc.
Reasons for Client-Side Technologies Used
- MVC for client side code
- Making javascript codes modular
- Backbone’s Router
- Detects change in URL, which is needed in a SPA
- Big community for open source support
- Templating made easy with Underscore JS
- Stubs are easy to create with backbone’s Model
Reasons for Server-Side Technologies Used
- Simple interface with Service Mediation that uses TIBCO JMS
- Low learning curve
- Open-Source libraries that provide easy conversion from JSON to XML (vice-versa)
Back-End: Technical Complexity
Communication Model
This model depicts how messages are sent to and fro from our Bank Teller Application (Frontend) through the Enterprise Service bus to retrieve / store information in the database.
Integration with Front-End
This diagram shows the translation in message formats within our Teller Application which is used to interpret a SOAP Response or create a SOAP Request message.
Sample Backend Tibco Service
Service: Transaction_PartialLoanRepayment_Create
Entity-Relationship Diagram for SMU Core Services Database