|
|
| Line 63: |
Line 63: |
| | </header> | | </header> |
| | <div class="content-top"> | | <div class="content-top"> |
| − | <img src="https://static.igem.org/mediawiki/igem.org/9/9f/Uestc_software-project_design2.png">
| + | |
| − | <p class="title">Design</p>
| + | |
| | </div> | | </div> |
| | <div class="detail-content"> | | <div class="detail-content"> |
| − | <p>To realize a fluent and efficient DNA-based information storage system, great efforts have been devoted to designing of its web system.</p>
| + | |
| − | <h2 id="The optimization of the front-end">The optimization of the front-end</h2>
| + | |
| − | <strong>Website based</strong>
| + | |
| − | <p>Due to the rapid development of network, web is now used extensively throughout the whole world. Meanwhile, website is more likely to be used without installing any app. Most importantly, website is compatible with different equipment and systems such as windows, mac os, linux and so on. So we developed our software based on website. In order to ensure the stability and high efficiency, we accomplished all computational calculating on our server and provided users an API to download the final result. </p>
| + | |
| − | <strong>User-friendly Interface</strong>
| + | |
| − | <p>The interface of our webpage is concise. We have two main buttons on our webpage—encode and decode, which can complete users’ demand of uploading, transforming and downloading files. Users can easily familiarize the operation of our software, and use our software to do more things they want. To develop a cross-platform software, HTML, CSS, bootstrap, and jQuery are integrated into the framework of the present software. The webpage is a humanized and beautiful design, and quick in response.</p>
| + | |
| − | <p class="img-p" style="font-size:13px;"><img src="https://static.igem.org/mediawiki/2016/9/93/Uestc_software-design-2.jpg"/></br><B>Fig.1.</B>The interface of Bio101.</p>
| + | |
| − | <strong>Clear operation flow</strong>
| + | |
| − | <p>Our website has a clear operation flow as the following figure. When a user starts to encode a file, he or she will submit a file and a code as token to encrypt the file. The file will be compressed and encrypted after stored in our server. After that, process goes to encode it and user will go to the ‘Download’ page after the encoding process. User can choose txt, fasta or SBOL-xml format to download the final DNA sequences. As for decoding, user will submit a file with DNA sequences which are encoded by our software and a code which is set when encoding the file. Decoding will start after the file being stored in our server. Then, the file will be decrypted by token and decompressed. After that, website will skip to ‘Download’ page, so user can download the decoded file.</p>
| + | |
| − | <p class="img-p" style="font-size:13px;"><img src="https://static.igem.org/mediawiki/2016/e/e2/Uestc_software-design-1.jpg"/></br><B>Fig.2.</B>Design process of Bio101.</p>
| + | |
| − | <h2 id="The design of back-end">The design of back-end</h2>
| + | |
| − | <strong>Rigorous process designed</strong>
| + | |
| − | <p>Before the file transformed to DNA sequences, a compression step is needed, which can help decrease the length of synthesized DNA sequences to reduce the consuming of money and time. Thanks for Martin Scharm’s blog “<a href="https://binfalse.de/2011/04/04/comparison-of-compression" target="_blank" style="color:blue;">Comparison of compression</a>” systematically analyzed different compression algorithms. We choose bzip2 to compress file. In consideration of a good information storage system, encrypting the message is essential. So after compression process, we use a fast cryptographic random number generator(ISAAC) to encrypt the compressed file to minimize the safety cases so as to keep the information secret. Then, we need to transform the binary numbers to DNA sequences. In order to store various large pieces of information, we fragment the long DNA sequence into pieces and add each new sequence address code and check code, which help to rebuild the sequence with errors.</p>
| + | |
| − | <p class="img-p" style="font-size:13px;"><img src="https://static.igem.org/mediawiki/2016/1/12/Uestc_software-design-fig3.jpg"/></br><B>Fig.3.</B>The process of encoding and decoding.</p>
| + | |
| − | <strong>Different file formats supported</strong>
| + | |
| − | <p>Our software supports the transforming of all formats of files, including jpg, pdf, mp3, etc. So users can store all kinds of computer files in DNA. On the other hand, we provide different formats of recording DNA sequences for users to download, including txt, xml, SBOL, etc. Users can easily use these different formats of files to do more things.</p>
| + | |
| − | <strong>C language and Python Combined</strong>
| + | |
| − | <p>C language has high execution efficiency, crossing platform application, etc. Whereas Python holds a great promise for conciseness, extensibility, abundant library, etc. So, the two are combined in Bio101 to form an ideal environment. The encryption and bit2nt parts are handled in C language while the rest is in Python, to guarantee the efficiency and the extensibility of the program. </p>
| + | |
| − | <p class="img-p" style="font-size:13px;"><img src="https://static.igem.org/mediawiki/2016/3/3f/Uestc_software-design-4.jpg"/></br><B>Fig.4.</B>Bio101 combine python and C programming language.</p>
| + | |
| − | <h2 id="Framework of our website">Framework of our website</h2>
| + | |
| − | <strong>Web Programming with Django</strong>
| + | |
| − | <p>The front-end and back-end are separated, which are connected with Django web framework. Django is a high-level Python Web framework that facilitates rapid development and clean, pragmatic design. It’s also a free and open source. When users upload a file to the server-side interface, the back-end works, and then a DNA sequences file will be returned for the users to download. Developers can easily improve the codes in the back-end without worrying about any conflict with present front-end codes. </p>
| + | |
| | </div> | | </div> |
| | <footer class="footer"> | | <footer class="footer"> |
| Line 112: |
Line 90: |
| | </div> | | </div> |
| | <script type="text/javascript" src="https://2016.igem.org/Team:UESTC-software/js/basic/jquery?action=raw&ctype=text/javascript"></script> | | <script type="text/javascript" src="https://2016.igem.org/Team:UESTC-software/js/basic/jquery?action=raw&ctype=text/javascript"></script> |
| − | <script type="text/javascript" src="https://2016.igem.org/Team:UESTC-software/js/basic/three?action=raw&ctype=text/javascript"></script> | + | <script type="text/javascript" src="https://2016.igem.org/Team:UESTC-software/js/basic/threeLevel?action=raw&ctype=text/javascript"></script> |
| − | | + | <script> |
| | + | $(document).ready(function(){ |
| | + | $('.content-top').eq(0).find('.title-img').eq(0).attr('src','https://static.igem.org/mediawiki/igem.org/3/3a/Uestc_software-human-practice.png'); |
| | | | |
| | + | }) |
| | + | </script> |
| | </body> | | </body> |
| | </html> | | </html> |
CATALOGUE