Difference between revisions of "Team:USTC-Software/Implementation"

 
(25 intermediate revisions by 3 users not shown)
Line 11: Line 11:
 
     </head>
 
     </head>
 
     <body>
 
     <body>
        <div class="ui menu pointing fixed" id="menu">
+
<!-- 导航栏开始 -->
            <div class="right menu">
+
<div class="ui menu pointing fixed" id="menu">
                <a class="active item" data-menuanchor="firstPage" href="#firstPage">Page 1 </a>
+
    <a class=" item" href="index.html"><img style="width:6em" src="https://static.igem.org/mediawiki/2018/4/42/T--USTC-Software--logo3.jpg"></a>
                <a class="item" data-menuanchor="secondPage" href="#secondPage">Page 2</a>
+
    <div class="ui item dropdown">Project
                <a class="item" data-menuanchor="thirdPage" href="#thirdPage">Page 3</a>
+
        <div class="menu">
             </div>
+
            <a class="item" href="Project.html#Overview">Overview</a>
 +
            <!-- <a class="item" href="Project.html#Motivation">Motivation</a> -->
 +
            <a class="item" href="Improve">Improve</a>
 +
             <a class="item" href="Implementation">Implementation</a>
 
         </div>
 
         </div>
 +
    </div>
 +
    <a class="item" href="Attributions">Attribution</a>
 +
    <a class="item" href="Demonstrate#Overview">Demonstrate</a>
 +
    <div class="ui item dropdown">Human Practice
 +
        <div class="menu">
 +
            <a class="item" href="Human_Practices#hp">Human Practice</a>
 +
            <a class="item" href="Human_Practices#ihp">Integrated Human Practice</a>
 +
        </div>
 +
    </div>
 +
    <a class="ui item" href="Collaborations">Collaborations</a>
 +
    <a class="item" href="Model#header1">Model</a>
 +
    <a class="item" href="Medal#Overview">Medal</a>
 +
    <a class="ui item" href="Team.html">Team</a>
 +
    <div class="ui item dropdown" href="ValidatedContribution">Validated Contribution
 +
        <div class="menu">
 +
            <a class="item" href="ValidatedContribution#Overview">Overview</a>
 +
            <a class="item" href="ValidatedContribution#Feedback">Feedback</a>
 +
            <a class="item" href="ValidatedContribution#Getting Started">Getting Started</a>
 +
            <a class="item" href="ValidatedContribution#Apply An Account">Apply An Account</a>
 +
            <a class="item" href="ValidatedContribution#Edit A New Report">Edit A New Report</a>
 +
            <a class="item" href="ValidatedContribution#Intelligent Search Engine">Intelligent Search Engine</a>
 +
            <a class="item" href="ValidatedContribution#Society">Society</a>
 +
            <a class="item" href="ValidatedContribution#For More Information">For More Information</a>
 +
        </div>
 +
    </div>
 +
</div>
 +
<!-- 导航栏结束 -->
 
         <div class="ui grid">
 
         <div class="ui grid">
             <div class="two wide column"></div>
+
             <div class="one wide column"></div>
             <div class="four wide column">
+
             <div class="three wide column">
 
                 <div class="ui secondary vertical pointing menu" id="leftnav" style="height: 100%;padding-top: 100px;width: 90%;">
 
                 <div class="ui secondary vertical pointing menu" id="leftnav" style="height: 100%;padding-top: 100px;width: 90%;">
 
                     <div class="item">
 
                     <div class="item">
 
                         <div class="header">Implementation</div>
 
                         <div class="header">Implementation</div>
 
                         <div class="menu">
 
                         <div class="menu">
                             <b>Server Part</b>
+
                             <a class="item leftnav-item disabled">Backend Part</a>
                             <a class="item leftnav-item" href="#Bricks Data">About the Bricks Data</a>
+
                             <a class="item leftnav-item" href="#Django">Django</a>
<a class="item leftnav-item" href="#Data Organizing">About Data Organizing</a>
+
                            <a class="item leftnav-item" href="#Python3">Python3</a>
<a class="item leftnav-item" href="#Search Engine">About Search Engine</a>
+
                            <a class="item leftnav-item" href="#Nginx">Nginx</a>
<b>Frontend Part</b>
+
                            <a class="item leftnav-item" href="#NLP">Standford CoreNLP</a>
<a class="item leftnav-item" href="#UI">About UI</a>
+
                            <a class="item leftnav-item" href="#Rest">Django-rest-framework</a>
<a class="item leftnav-item" href="#Sortable">About Sortable</a>
+
                            <a class="item leftnav-item disabled">Frontend Part</a>
 +
                            <a class="item leftnav-item" href="#Framework">About Framework</a>
 +
                            <a class="item leftnav-item" href="#UI">About UI</a>
 +
                            <a class="item leftnav-item" href="#Editor">About Editor</a>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
             <div class="ten wide column">
+
             <div class="twelve wide column">
 
                 <div class="inside-container" style="height: 100%;padding-top: 100px;">
 
                 <div class="inside-container" style="height: 100%;padding-top: 100px;">
 
                     <h1>Implementation</h1>
 
                     <h1>Implementation</h1>
<h3 id="Server Part">Server Part</h3>
+
                    <h2>Backend Part</h2>
 
+
                    <h3 id="Django">Django</h3>
<p>The server of Bioeditor is written in Python 3.6, which is a flexible and cross-platform language and can reduce the learning costs we develop. Django allows fast prototyping and large-scale deployment, that's why we choose Django to be the basic framework.</p>
+
                    <p style="text-align:center"><img style="width:40%" src="https://static.igem.org/mediawiki/2018/4/40/T--USTC-Software--Django.svg"></p>
<div class="divider"></div>
+
                    <p>Django is a free and open-source web framework, written in Python, which follows the model-view-template (MVT) architectural pattern. </p>
 
+
                    <p>Django makes it easier to build better Web apps more quickly and with less code, it emphasizes reusability and &quot;pluggability&quot; of components, less code, low coupling, rapid development, and the principle of don&#39;t repeat yourself. It also provides an optional administrative create, read, update and delete interface, which is generated dynamically through introspection and configured via admin models. </p>
<h3 id="Bricks Data">About the Bricks Data</h3>
+
                    <h3 id="Python3">Python 3</h3>
<div class="divider"></div>
+
                    <p style="text-align:center"><img style="width:40%" src="https://static.igem.org/mediawiki/2018/c/c0/T--USTC-Software--Python.svg"></p>
 
+
                    <p>Python is an interpreted high-level programming language for general-purpose programming. Python has a design philosophy that emphasizes code readability, notably using significant whitespace. It provides constructs that enable clear programming on both small and large scales. </p>
<h3 id="Data Organizing">About Data Organizing</h3>
+
                    <p>Python features a dynamic type system and automatic memory management. It supports multiple programming paradigms, including object-oriented, imperative, functional and procedural, and has a large and comprehensive standard library. It is cross-platform and it interpreters are available for many operating systems.</p>
 
+
                    <h3 id="Nginx">Nginx</h3>
<p>The initial data will be imported into a separate database.Bioeditor will link to it by creating virtual tables using MySQL's database view technology.Using database views may lower the speed of querying, but it also has a lot of benefits. On the one hand,it's easy to get started.Users don't need to care about the complex structure behind. On the other hand,it's safety for beginners, users who use views can only access the result set they are allowed to query.</p>
+
                    <p style="text-align:center"><img style="width:40%" src="https://static.igem.org/mediawiki/2018/3/32/T--USTC-Software--Nginx.svg"></p>
<div class="divider"></div>
+
                        <p>Nginx is a web server which can also be used as a reverse proxy, load balancer, mail proxy, and HTTP cache. Nginx can be deployed to serve dynamic HTTP content on the network using FastCGI, SCGI handlers for scripts, WSGI application servers or Phusion Passenger modules, and it can serve as a software load balancer.</p>
<h3 id="Search Engine">About Search Engine</h3>
+
                    <p>Nginx uses an asynchronous event-driven approach, rather than threads, to handle requests. Nginx&#39;s modular event-driven architecture can provide more predictable performance under high loads.</p>
 
+
                    <h3 id="NLP">Standford CoreNLP</h3>
 
+
                    <p style="text-align:center"><img style="width:30%" src="https://static.igem.org/mediawiki/2018/4/44/T--USTC-Software--CoreNLP.png"></p>
<p>We followed last year's filtering of initial data to reduce the impact of unwanted bricks on search efficiency.We used natural language processing during the search process. After the language model is established, the extraction of text keywords is realized by processing such as statistical features such as TF and IDF. So that our search results are more in line with the needs of users.
+
                        <p>CoreNLP is a program of natural language processing, it provides a set of human language technology tools. It can give the base forms of words, their parts of speech, whether they are names of companies, people, etc.</p>
At the same time, we have made the search conditions more diversified.Users can find the bricks they need more conveniently under more query conditions.
+
                    <p>It makes it very easy to apply a bunch of linguistic analysis tools to a piece of text. A tool pipeline can be run on a piece of plain text with just two lines of code. CoreNLP is designed to be highly flexible and extensible. With a single option, you can change which tools should be enabled and disabled. </p>
We will recalculate the ranking weights at regular intervals. The reason for not evaluating them in real time is that the task may update the whole table and become time-consuming.</p>
+
                    <h3 id="Rest">Django-rest-framework</h3>
<div class="divider"></div>
+
                    <p style="text-align:center"><img style="width:40%" src="https://static.igem.org/mediawiki/2018/b/b0/T--USTC-Software--django-rest.png"></p>
<h3 id="Frontend Part">Frontend Part</h3>
+
                        <p>Django REST framework is a powerful and flexible toolkit for building Web APIs.</p>
 
+
                    <p>REST framework use packages for OAuth1a and OAuth2 in Authentication policies, its serialization that supports both ORM and non-ORM data sources. It customizable all the way down, and it has extensive documentation and great community support.</p>
<p>In most templating systems,any changes that the user makes to the view are not reflected in the model. This means that the developer has to write code that constantly synchronize the view with the model and the model with the view.
+
 
+
So we choose the Angular template, which works differently. Any changes to the view are immediately reflected in the model, and any changes in the model are propagated to the view.You can think of the view as simply an instant projection of your model.
+
</p>
+
<div class="divider"></div>
+
<h3 id="UI">About UI</h3>
+
<p>
+
We choose NG-ZORRA as our basic framework. NG-ZORRA is a UI framework developed by Alibaba Group based on Angular template.NG-ZORRA provides us with multiple elegant components and comfortable visual experience. In addition,we also added many wonderful customized conponents and styles to improve the user experience.
+
 
</p>
 
</p>
<div class="divider"></div>
+
                    <h2>Frontend Part</h2>
<h3 id="Sortable">About Sortable</h3>
+
                    <h3 id="Framework">About Frontend Framework </h3>
<p>
+
                    <p style="text-align:center"><img style="width:30%" src="https://static.igem.org/mediawiki/2018/1/12/T--USTC-Software--angular.svg"></p><p>
When researchs writes an academic report,the scholae could click and drag the element of experimental process from the list to a new location in the report.Obviously,It is convenient for them to write experimental reports.</p>
+
                        ​ To make it easy to build applications with the web, we use advanced frontend framework Angular6 which is an open source framework maintained by Google. It is based on the Model View Controller (MVC) Architecture which ordinarily utilized for planning rich web applications. Angular6 combines declarative templates, dependency injection, end-to-end tooling, and integrated best practices to solve development challenges. It helps developers to build cross-platform applications that live on the web, mobile, and desktop across Mac, Windows, and Linux.
 
+
                        ​ Angular6 makes our web pages extremely high performance. It turns templates into code that&#39;s highly optimized for today&#39;s JavaScript virtual machines, giving us all the benefits of hand-written code with the productivity of a framework. And Angular apps load quickly with the new Component Router, which delivers automatic code-splitting so users only load code required to render the view they request.
 +
                        ​ Thanks to Angular popular, many well-known code editing products support Angular, like Visual Studio Code, Sublime text and WebStorm. We choose WebStorm as our IDE to makes code easily and spend less time.
 +
                        ​ When setting up our development environment, Angular CLI plays an important role. Angular CLI is a command line tool which makes build, add components and test faster. It has become one of the most essential tools for Angular.
 +
                        ​ We use Angular6 modularity system and component system to work together more easily and efficiently. The modularity system differentiates and combines the same and different functions and the component system can use less code to do a good job. Benefiting from Angular6’s performance and rendering mechanism which are better than most current mainstream frameworks,  including Vue and React, our web pages has faster response and more comfortable experience. With Karma for unit tests, our codes become stronger.
 +
                        ​ One of the important reasons we choose Angular6 is the issue of network security. Angular6 has built-in protections against common web-application vulnerabilities and attacks such as cross-site scripting attacks. To systematically block XSS bugs, Angular treats all values as untrusted by default. When a value is inserted into the DOM from a template, via property, attribute, style, class binding, or interpolation, Angular sanitizes and escapes untrusted values.</p>
 +
                    <h3 id="UI">About UI</h3>
 +
                    <p style="text-align:center"><img style="width:30%" src="https://static.igem.org/mediawiki/2018/b/be/T--USTC-Software--ng_zorro.svg"></p><p>
 +
                        ​ In order to match our frontend framework perfectly, we choose Ng-zorro, which is written in TypeScript with complete defined types as our UI framework. The high-quality components and style of Ng-zorro help us complete our design quickly and provides a better experience.
 +
                        ​ As a design system for enterprise-class products, Ng-zorro reduces the cost of redundant production through modular solutions based on deterministic and natural design values. With its simple and efficient design concept, NG-zorro allows designers to focus on better User experience.
 +
                        ​ Unlike Bootstrap’s 12 grid system, Ng-zorro use 24 grids system, so our web page has more detailed detail processing. Referring to Bootstrap responsive design, Ng-zorro has richer responsive choices to adapt to screens of different sizes. </p>
 +
                    <h3 id="Editor">About Editor</h3>
 +
                    <p style="text-align:center"><img style="width:40%" src="https://static.igem.org/mediawiki/2018/9/99/T--USTC-Software--sortable.png"></p><p>
 +
                        ​ Drag and drop function Plugin Sortable is applied to Editor. Sortable is a minimalistic instrument for sorting elements within a list or between lists. Its library doesn’t depend on jQuery or other libraries; it uses native HTML5 Drag and Drop API, and works on both desktop and touch devices. It works on both desktop and touch devices well. It has a simple API, can be easily integrated with any project and represents an excellent replacement.</p>
  
 
                 </div>
 
                 </div>

Latest revision as of 02:45, 18 October 2018

Implementation

Backend Part

Django

Django is a free and open-source web framework, written in Python, which follows the model-view-template (MVT) architectural pattern.

Django makes it easier to build better Web apps more quickly and with less code, it emphasizes reusability and "pluggability" of components, less code, low coupling, rapid development, and the principle of don't repeat yourself. It also provides an optional administrative create, read, update and delete interface, which is generated dynamically through introspection and configured via admin models.

Python 3

Python is an interpreted high-level programming language for general-purpose programming. Python has a design philosophy that emphasizes code readability, notably using significant whitespace. It provides constructs that enable clear programming on both small and large scales.

Python features a dynamic type system and automatic memory management. It supports multiple programming paradigms, including object-oriented, imperative, functional and procedural, and has a large and comprehensive standard library. It is cross-platform and it interpreters are available for many operating systems.

Nginx

Nginx is a web server which can also be used as a reverse proxy, load balancer, mail proxy, and HTTP cache. Nginx can be deployed to serve dynamic HTTP content on the network using FastCGI, SCGI handlers for scripts, WSGI application servers or Phusion Passenger modules, and it can serve as a software load balancer.

Nginx uses an asynchronous event-driven approach, rather than threads, to handle requests. Nginx's modular event-driven architecture can provide more predictable performance under high loads.

Standford CoreNLP

CoreNLP is a program of natural language processing, it provides a set of human language technology tools. It can give the base forms of words, their parts of speech, whether they are names of companies, people, etc.

It makes it very easy to apply a bunch of linguistic analysis tools to a piece of text. A tool pipeline can be run on a piece of plain text with just two lines of code. CoreNLP is designed to be highly flexible and extensible. With a single option, you can change which tools should be enabled and disabled.

Django-rest-framework

Django REST framework is a powerful and flexible toolkit for building Web APIs.

REST framework use packages for OAuth1a and OAuth2 in Authentication policies, its serialization that supports both ORM and non-ORM data sources. It customizable all the way down, and it has extensive documentation and great community support.

Frontend Part

About Frontend Framework

​ To make it easy to build applications with the web, we use advanced frontend framework Angular6 which is an open source framework maintained by Google. It is based on the Model View Controller (MVC) Architecture which ordinarily utilized for planning rich web applications. Angular6 combines declarative templates, dependency injection, end-to-end tooling, and integrated best practices to solve development challenges. It helps developers to build cross-platform applications that live on the web, mobile, and desktop across Mac, Windows, and Linux. ​ Angular6 makes our web pages extremely high performance. It turns templates into code that's highly optimized for today's JavaScript virtual machines, giving us all the benefits of hand-written code with the productivity of a framework. And Angular apps load quickly with the new Component Router, which delivers automatic code-splitting so users only load code required to render the view they request. ​ Thanks to Angular popular, many well-known code editing products support Angular, like Visual Studio Code, Sublime text and WebStorm. We choose WebStorm as our IDE to makes code easily and spend less time. ​ When setting up our development environment, Angular CLI plays an important role. Angular CLI is a command line tool which makes build, add components and test faster. It has become one of the most essential tools for Angular. ​ We use Angular6 modularity system and component system to work together more easily and efficiently. The modularity system differentiates and combines the same and different functions and the component system can use less code to do a good job. Benefiting from Angular6’s performance and rendering mechanism which are better than most current mainstream frameworks, including Vue and React, our web pages has faster response and more comfortable experience. With Karma for unit tests, our codes become stronger. ​ One of the important reasons we choose Angular6 is the issue of network security. Angular6 has built-in protections against common web-application vulnerabilities and attacks such as cross-site scripting attacks. To systematically block XSS bugs, Angular treats all values as untrusted by default. When a value is inserted into the DOM from a template, via property, attribute, style, class binding, or interpolation, Angular sanitizes and escapes untrusted values.

About UI

​ In order to match our frontend framework perfectly, we choose Ng-zorro, which is written in TypeScript with complete defined types as our UI framework. The high-quality components and style of Ng-zorro help us complete our design quickly and provides a better experience. ​ As a design system for enterprise-class products, Ng-zorro reduces the cost of redundant production through modular solutions based on deterministic and natural design values. With its simple and efficient design concept, NG-zorro allows designers to focus on better User experience. ​ Unlike Bootstrap’s 12 grid system, Ng-zorro use 24 grids system, so our web page has more detailed detail processing. Referring to Bootstrap responsive design, Ng-zorro has richer responsive choices to adapt to screens of different sizes.

About Editor

​ Drag and drop function Plugin Sortable is applied to Editor. Sortable is a minimalistic instrument for sorting elements within a list or between lists. Its library doesn’t depend on jQuery or other libraries; it uses native HTML5 Drag and Drop API, and works on both desktop and touch devices. It works on both desktop and touch devices well. It has a simple API, can be easily integrated with any project and represents an excellent replacement.