HeaderSIS.jpg

Difference between revisions of "IS480 Team wiki: 2013T1 Kungfu Panda Technologies"

From IS480
Jump to navigation Jump to search
 
(38 intermediate revisions by 3 users not shown)
Line 1: Line 1:
[[Image:KP-Header.PNG|950x400px|center]]
+
[[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-left:solid #F6D049; border-top:solid #F6D049; border-bottom:solid #F6D049" width="50px;" height="50px" | 1
+
 
 
! 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>]]
! style="background: #D72C25; color: #D72C25; text-align: center; border-right:solid #F6D049; border-top:solid #F6D049; border-bottom:solid #F6D049" width="50px;" height="50px" | 0
+
 
 
|}
 
|}
 
</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-TechnologiesUsed.png|837x466px|center]]
+
[[Image:KP-Technologies(Final).PNG|626x395px|center]]
== Front-End==
+
 
<strong>Front End: Single Page Application</strong> <br/>
+
== 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
 
*Reusable Codes
Line 37: Line 96:
 
**HTML loading etc.
 
**HTML loading etc.
  
 
+
<strong>Reasons for Client-Side Technologies Used </strong> <br/>
<strong> Front End: Reasons for Client-Side Technologies Used </strong> <br/>
 
  
 
*MVC for client side code
 
*MVC for client side code
Line 52: Line 110:
 
*Stubs are easy to create with backbone’s Model
 
*Stubs are easy to create with backbone’s Model
  
<strong> Front End: Reasons for Client-Side Technologies Used </strong> <br/>
+
<strong>Reasons for Server-Side Technologies Used </strong> <br/>
  
*Simple interface with Service Mediation that uses Tibco JMS
+
*Simple interface with Service Mediation that uses TIBCO JMS
  
 
*Low learning curve
 
*Low learning curve
Line 60: 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)
  
== Back-End==
+
<br/>
 +
 
 +
== 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 76: Line 136:
 
<br/>
 
<br/>
 
<strong>  Sample Backend Tibco Service </strong> <br/>
 
<strong>  Sample Backend Tibco Service </strong> <br/>
Service: Transaction_Withdrawal_Create <br/>
+
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

KP-NewHeader.PNG
Home About Us Project Overview Project Management Testing Project Documents


SMU tBank Our Project Scope Our X-Factor Technologies Going Forward


KP-Technologies(Final).PNG

References: Technologies Used


No Frontend/Backend Technology Link
1 Frontend KP Frontend1.PNG http://www.oracle.com/technetwork/java/javase/downloads/index.html
2 Frontend KP Frontend2.PNG http://jquery.com/
3 Frontend KP Frontend3.PNG http://getbootstrap.com/
4 Frontend KP Frontend4.PNG http://backbonejs.org/
5 Frontend KP Frontend5.PNG http://underscorejs.org/
6 Backend KP Backend1.PNG http://www.tibco.com/company/default.jsp
7 Backend KP Backend2.PNG http://www.mysql.com/
8 Backend KP Backend3.PNG http://www.soapui.org/
9 Backend KP Backend4.PNG 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.

Communication-model.png


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.

Communication-model-teller.png


Sample Backend Tibco Service
Service: Transaction_PartialLoanRepayment_Create
Sample-core-services-complicated.png


Entity-Relationship Diagram for SMU Core Services Database

KP-Core Services ER Diagram.png