סוקולמארק – פרויקט גמר תקציר

מטרת הפרויקט

-, לקורדינטות בDNA-אינפורמטיות לעבור מקורדינטות ב-הפרויקט בא לענות על צורך של חוקרים המשתמשים בשיטות ביו

RNA או בחלבון, ולהיפך, ומקורדינטות ב-RNA .ידע כזה מאפשר, למשל, לראות באילו חומצות לקורדינטות בחלבון ולהיפך

RNA בטאות מוטציות בגן ובאילו מקומות היא נמצאת בהן.וחלבונים מת

רקע ביולוגי

בכל אורגינזם חי )חיידק או אדם(, קיימים תאים שבונים אותו ואחראים על תפקודו. התאים מתפקדים באופן שונה )תאי כבד

ה תהליך מורכב שעדיין לא לעומת תאי עור, לדוגמא(, תלוי בחלבונים שהם מייצרים. כיצד כל תא יודע איזה חלבונים לייצר? ז

והוא זהה בכל הנמצא בגרעין התא)שמחולק לרכיבים: גנים( DNA-ידוע עליו הכל, אבל משוער שהבסיס ל"ידע" הזה נמצא ב

אם נעשה אנלוגיה לתחום התוכנה, זה קוד המקור .(גנים שונים בצורה שונהמתבטאים במערכת שונה אבל בכל תא ) התאים

מכונה שונה )גנים עבור אורגניזמים שונים יש קוד ברמה הבינארית. -)עבור אורגניזם מסוים( של כל מערכת ייצור החלבונים

מהגנים (. אם נמשיך את האנלוגיה, 4שונים(, אבל עדיין נכתב באותה שפה "בינארית" )למעשה, מדובר על שפה עם בסיס

מיוצרים החלבונים שהם כבר "קוד RNA-שהן ה"אסמבלי", ואילו מחומצות ה RNAחומצות מיוצרות DNA-המרכיבים את ה

תואמות, ולכל RNAות . לכל גן, יש מספר חומצבצעת בצורה הפוכה(תקה, כי ההדרה מ)האנלוגיה קצת דפו ברמה גבוה"

יש חלבון תואם. RNAחומצת

יש כמה מיליונים(. גן קלאוטיד הראשון עד לאחרון )(, מהנוכרומוזומים 44חים בכרומוזום )יש בביאונפורמטיקה נהוג לסמן טוו

, כל חומצה מבטאת RNA(, וכאשר מיוצרות ממנו חומצות 001,111עד 001,111נמצא בטווח מסויים כזה )למשל, ממספר

מסויים, יכול להוות RNA-, ואורכם שונה, ולכן ערך בטווח מסויים בספר קטעים בטווח הזה ובכל חומצה הקטעים האלו שוניםמ

מיוצר חלבון מסוים )כלומר גן מסויים יכול RNAעבור כל שונה של אותו גן. RNA-ערכים שונים שהיו בגן, אם אותו טווח היה ב

לייצר מספר חלבונים שונים(.

.גרפים כולל הפונקציות תיעודת להבין יותר טוב ולראות איך זה עובד, אנא עיינו בנספח על מנ

מימוש הפרויקט

והחלק השני Java-שמכיל את הפונקציות והאלגוריתם שנכתבו ב ,web service-הפרויקט מחולק לשתיים: חלק אחד הוא ה

באמצעות טכנולוגיות שנכתבו ,web service-שמשתמש ב(, UI: אתר אינטרנט עם ממשק משתמש גרפי )לקוח לדוגמההוא

Web (HTML ,CSS ו-JavaScript)שני החלקים נמצאים ב .-Domain ,שונה, נמצאים על שרתים שונים משתמשים בטכנולוגיות

web-התואמות לממשק שהגדיר ה web service-ל UI-ששולח ה HTTPחוץ מבקשות ואין ביניהם קשרשפות וספריות שונות

service.

הדגמה

WEB SERVICE-הדגמת ה

. אין הגבלה על סוג הלקוח, אבל על הלקוח לוודא שהוא HTTP GETבאמצעות בקשות web service-אנחנו מבצעים קריאות ל

, ולכן בשביל הפשטות HTTP GET. כל דפדפני האינטרנט מבצעים כברירת מחדל בקשת HTTP-עומד בדרישות פרוטוקול ה

אמצעות התהליכים הבאים:, בGoogle Chrome Version 39אדגים זאת דרך דפדפן

2014אוניברסיטת אריאל, המחלקה למדעי המחשב ומתמטיקה, דצמבר

שהוא: domain-נמצא ב web service-ה

https://concord-converter.herokuapp.com

(:APIלממשק תכנות היישומים ) עכשיו נגש. 0

https://concord-converter.herokuapp.com/webapi

כרומוזומאלית:ת העכשיו אנחנו בוחרים מאיזו מערכת אנחנו רוצים להמיר, נבחר את המערכ. 4

https://concord-converter.herokuapp.com/webapi/from/dna

(:1-' ה"הפוך" יהיה 0. גדיל בכיוון 1' )שזה הכיוון ה"ישיר", 0, וגדיל לכיוון 01עכשיו נבחר את כרומוזום מספר . 0

https://concord-converter.herokuapp.com/webapi/from/dna/chr/10/strand/1

:[52567500 , 52500001]חר את הטווח . נב4

https://concord-converter.herokuapp.com/webapi/from/dna/chr/10/strand/1/52500001..52567500

. נבחר את המערכת אליה נרצה להמיר את הקורדינטות:0

https://concord-converter.herokuapp.com/webapi/from/dna/chr/10/strand/1/52500001..52567500/to/rna

נריץ את הבקשה דרך הדפדפן, ונקבל את הפלט:

( בצורה קריאה:JSONהפלט )קובץ

"arguments":

"argument_0":

"name":"ENSG00000204147",

"start":"52500001",

"end":"52567500",

"strand":"FORWARD_STRAND",

"level":"CHR",

"nestedArguments":

"argument_0":

"name":"ENST00000374007",

"start":"686",

"end":"3715",

"strand":"FORWARD_STRAND",

"level":"RNA",

"argument_1":

"name":"ENST00000374006",

"start":"56",

"end":"632",

"strand":"FORWARD_STRAND",

"level":"RNA",

"argument_2":

"name":"ENST00000483649",

"start":"33",

"end":"516",

"strand":"FORWARD_STRAND",

"level":"RNA",

"argument_3":

"name":"ENST00000185907",

"start":"49",

"end":"1255",

"strand":"FORWARD_STRAND",

"level":"RNA"

הקורדינטות שלהם בכרומוזום, הפלט מכיל את רשימת כל הגנים שנמצאים בטווח הזה בכרומוזום )במקרה זה אחד(, ואת

ובהתאם -איזה גדיל ובאיזה רמה הם נמצאים במערכת. לכל גן שנמצא, מקוננת גם רשימת התעתיקים שנמצאת בטווח הזה

הקורדינטות ושאר המשתנים כנ"ל.

הפלט יהיה במסגרת אותו שלד כמו . 4-0צטרך פשוט לשנות את התהליכים קציות המרה נוספות, נאם נרצה להשתמש בפונ

לתרגום )או הפלט הנ"ל, גם במקרים שאנחנו עושים תהליך הפוך )עוברים מתעתיק לכרומוזום(. במקרה ועוברים מתעתיק

התעתיקים ולא גנים. ההתחלתיים בפלט יהיו arguments-להיפך(, ה

של שאר הפונקציות:דוגמאות

https://concord-converter.herokuapp.com/webapi/from/rna/ENST00000380152/10..10920/to/dna

https://concord-converter.herokuapp.com/webapi/from/rna/ENST00000380152/500..1000/to/prot

https://concord-converter.herokuapp.com/webapi/from/prot/ENSP00000369497/10..150/to/rna

https://concord-converter.herokuapp.com/webapi/from/dna/chr/10/strand/1/52500001..52567500/to/prot

https://concord-converter.herokuapp.com/webapi/from/prot/ENSP00000369497/10..150/to/dna

:Mozilla Version 5דרך דפדפן מלאה כולל תגובה GETדוגמא לבקשת

Status

200 OK Loading time: 642

Request headers

User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko)

Content-Type: text/plain; charset=utf-8

Accept: */*

Accept-Encoding: gzip, deflate, sdch

Accept-Language: en-US,en;q=0.8,he;q=0.6

Response headers

Date: Sun, 23 Nov 2014 11:56:04 GMT

Connection: keep-alive

Content-Type: application/javascript

Content-Length: 574

Server: Jetty(9.0.6.v20130930)

Via: 1.1 vegur

הארכיטקטורה "בעצמה מגדירה את הפרמטרים" לבקשה )הסברים -נוספים headersכפי שרואים, אין צורך בפרמטרים או

(.RESTארכיטקטורת על על כל בסעיף

.UI-ההדגמת

נמצא בשרת מקומי מסיבות טכניות, ובנוסף הוא גם אינו סופי ויעבור UI-במועד כתיבת שורות אלו, ה

עיצוב )עייף בסעיף , responsiveנבנה באמצעות ארכיטקטורת UI-הקציונאליות. שינויים/שדרוגים/תוספות בממשק ובפונ

responsive). בדוגמה נבצע את אותה המרה שבצענו ידנית בהדגמה של ה-web service .כפי שנראה, הפלט דרך הדפדפן

: מוצגים רשימת גנים, web service-שקבלנו בפלט בהדגמה של ה ההיררכיהי לפג כפאנל שנפתח ונסגר ע"י לחיצה, צמו

נפתחים ערכי הקורדינטות שלו ורשימת תעתיקים. כאשר לוחצים על התעתיק, נפתחים ערכי -כאשר לוחצים על גן

הקורדינטות שלו ורשימת התרגומים באופן דומה )לא במקרה זה(.

פרויקטתיאור ה

קים של הפרויקט בנפרד.אציג את שני החל

WEB SERVICE-ה

מבוא תאורתי

ואציין כמה דברים קשורים. world wide web (W3 )-תחילה אסביר על ארכיטקטורת האינטרנט ומה ההבדל בין אינטרנט ל

תפיסה שנקראת אציג בנוסף, .web application-ל web serviceאת ההבדלים בין ואפרט , web service מהואחר כך אסביר

לבסוף אפרט על . W3-נחת שירותים" ואת יתרונותיהם בשימוש עם המו "ארכיטקטורהכנות מונחה אירועים" ואת המושג "ת

.W3-עבור ה SOAשמייעדת REST ארכיטקטורת

ארכיטקטורת האינטרנט

( לפעמים מיוחסים כאותו הדבר, אבל W3בקיצור או world wide webבאופן פופולרי, האינטרנט ו"הרשת הכלל עולמית" )

, כלומר כמות גדולה של רשתות מחשבים ושרתים מקומיים שמחוברות אחת התשתית החומרית האינטרנט הוא פשוט

)טקסט, תמונות, קוד או ביטים כלשהם( בעלי תוכנהמשאבי אוסף שלהוא W3-, ואילו הTCP\IPלשנייה דרך פרוטוקול

פועל על גבי האינטרנט W3-( המקושרים לאפס או יותר כתובות )רשת לוגית( של משאבים אחרים. הURI)כתובות ייחודית

"שירותים" טכנולוגיות וכפלטפורמה של מוסכמות, W3-בנוסף, מתייחסים ל והוא רק אחד מאוסף השירותים שנמצאים עליו.

.[4]נוספים לוגים

, ולכן היא תוכננה בקווים [0]לשרת כמות גדלה ומתעצמת של צמתים שתתפרס על כל העולם W3-מתחילת דרכו תוכנן ה

כלליים אך המשיכה והתפתחה באופן דינאמי לפי דרישות המציאות ע"י משתמשיה )אם כי יש סטנדרטים שהארגון העולמי

, ורוב המשתמשים עומדים בהם(.[4]" קובעW3Cקרא "הנ

תכנות מונחה אירועים

קיימת תפיסת תכנות הנקראת "תכנות מונחה אירועים". תפיסה זו מתייחסת לחלקים בקוד כאובייקטים שצריך "להאזין להם",

שימושית כאשר מתכננים מערכת התפיסה .)ערכים מסויימים באובייקט משתנים( בזמן אמת ל"אירועים" הקורים להםולהגיב

לא בזמן ולא בערכו, כמו ממשק משתמש -שהפלט עבורם לא קבועאובייקטים עם הרבה ב"בזמן אמת" מורכבת דינאמית

W3את צורתם יש מאין. הוא יצור מורכב ולא צפוי(, וכאשר האובייקטים עצמם יכולים להיווצר או להיעלם או לשנות )האדם

מורכבת כזאת, ולכן במבט על אפשר לחשוב עליה במונחים של "תכנות -סופר-היא הדוגמה הגדולה ביותר למערכת דינאמית

.מונחה אירועים"

(SOAארכיטקטורה מונחת שירותים )

, הגישה ההגיוניות יתלפשט אותו מבחינת ארכיטקטונ הדרך הטובה ביותר יבנוי, ונחליט מה W3-אם נרצה לראות איך ה

ברמה גבוה של רכיבי decoupling. למעשה מדובר בתבנית עיצוב שמאפשרת Service Oriented Architectureביותר תהיה

: כלומר חוסר תלותיות, מדולריות גבוהה והיכולת להתייחס לרכיבי המערכת כמערכת שעומדת בפני עצמה שאפשר המערכת

במונחים של "תכנות לרכיבים של המערכת אפשר להתייחס , בעצם ים.לצורך מסוי גם מחוץ למערכתלבקש ממנה "שירות"

"אירועים" שמבוצעים כאשר הם והשירותים כאשר לכל רכיב יש "מאזין" שמחכה שיבקשו מהרכיב שירות, ,מונחה אירועים"

רכיב אחד קורא לרכיב , שרות אחד רים אחד עם השני, לצורכיהם )כחלק מנתינתכשרכיבי המערכת מתקש מבקשים אותם.

( או לצורך מאוגד, הם עושים זאת באמצעות פרוטוקול שמסוכם על כל רכיבי המערכת.אחד שמספק שירות מסויים

)לא משנה אם רכיב אחד נכתב הפרוטוקול מאפשר לספק את השירותים של הרכיבים ללא תלות בדרכי המימוש של הרכיבים

. הפרוטוקול השימושי [7]יימת ורכיב אחר עם נתונים שונים(, אלא דרך ממשקיםמשפה ובמערכת הפעלה עם חומרה מסו

בל מכיוון שהוא מורכב ודורש מימוש של חוזים בכל א. SOAPהוא 4110ביותר שתפס אחיזה בשוק והוגדר פורמלית בשנת

ברחבי האינטרנט פשוט דרך אותהאנשים רבים התחילו לממש מיישם באופן טבעי את הארכיטקטורה, W3-מכיוון שהרכיב, ו

.REST [9] ארכיטקטורתהדרך לעשות זאת היא באמצעות הקיים. HTTP-פרוטוקול ה

RESTארכיטקטורת

XMLבקבצי מגדיר חוזים מפורטים SOAP. SOAP-ה פרוטוקולמ" תלהרגיש "פחות טבעי היכול RESTכיטקטורת ארבהתחלה

והוא רק "תפיסה" לא מגדיר שום חוזה ושום פונקציות RESTכולל לאיזה פונקציות אפשר לקרוא בתוך הרכיב, ואילו

מתייחס לכתובות REST-הוכו'. HTTP :GET,POST,DELETE-מילות הפועל של ה מגדיר הן REST-. ה"פונקציות" שארכיטקטונית

URI בתור משאבים. אז אם למשל אני רוצה לברר מהו המחיר הגבוה ביותר בעולם עבור מכונית סיטרואןC5 4100 אז אני ,

-ל maxואז לבצע פונקציית resource :http://root/cars/all-countries/citroen/c5/2015/price-ל GETאצרך לבצע בקשת

resource להוסיף יותר אפשרויות לוגיות, כמו יב אותה כדי ח)או אובייקט( שהוחזר. זאת הפילוסופיה הבסיסית, אבל ניתן להר

" כמו maxאו להוסיף פרמטר " c5/2015/price/max/…כתובות כעיבוד לוגי כמו -למשל להוסיף עוד רכיב

…/c5/2015/price?=max או לבצע במקום בקשתGET בקשתPOST ואז להעביר בגוף הבקשה פרמטרים לוגיים )בבקשת

GET )[8]אין גוף לבקשה, אלא רק פרמטרים.

WEB SERVICEהמונח

web service להבדיל מ[4]ת "שירות" )כלומר פונקציונאליות שעונה על צורך מסוים( לתוכנות אחרותתוכנה המספקהיא .-web

application[0], שמספקת בדרך כלל ממשק משתמש ופועלת דרך הדפדפן ,web service לא מתחייבת על שני הדברים הללו

ואין לה הגבלה על סוג הלקוח, שיכול להיות גם מכונה, והיא יכולה לפעול ללא כל התערבות אנושית )חוץ מכתיבת הקוד

היא דואגת רק לספק פונקציונאליות .זציה עבור המשתמשהקורא ל"שירות"( ולפעול "מאחורי הקלעים" ללא כל ויזואלי

יכול להיות web service-)כלומר, "ממשק משתמש"(, לכן ניתן לומר שאמת ספציפית, אבל כן יכולה להחזיר ויזואליזציה בזמן

web application אבל לא ההיפך. בדרך כלל כשמדברים עלweb serviceניתן תון., מתייחסים להגדרה שציינתי בקו תח

.RESTזה מגביל את מרחב הלקוחות ולכן עדיף לעבוד עם , אבלSOAבאמצעות web services–לעבוד עם

WEB SERVICE-תיאור ה

מימוש טכני

מצעות דיאגרמה כדי לפשט את אציג את כל הפריטים )טכנולוגיות וספריות( ששימשו ככלים התכנותיים לפרוייקט באתחילה,

כל פריט בנפרד לפי סדר שנראה לי הגיוני כדי להבין את האינטגרציה אפרט על ההיררכיה והקשרים ביניהם. אחר כך

.ביניהם

דיאגרמת פריטי המערכת

HEROKU

שפה מסויימת, בצירוף , אלא רק הלאה של קוד אפליקציה ביאדמיניסטרטיבשרת "למפתחים", כלומר שרת שלא דורש טיפול

, שמכיל Procfile( וקובץ קונפיגורציה Mavenשמכיל הפניות לספריות שהאפליקציה תלויה בהן )ראה סעיף pom.xmlקובץ

שורה אחת, בדבר המשתנים שדרושים כדי להגדיר את הסביבה בה תרוץ האפליקציה בשרת. לדוגמא, אצלי הוא מוגדר כך:

web: java $JAVA_OPTS -cp target/classes:target/dependency/*

il.ac.ariel.concord.service.Converter

השרת מאפשר להגדיל את כוח החישוב, לנהל בסיסי נתונים וכו' בהתאם לצורך באופן ידני בעלות כספית.

MAVEN

-הפרויקט", בא לומרוהוא זה שבעצם מכיל את "הגדרת pom.xml זהו כלי להגדרת וניהול פרויקטים. שורש הכלי הוא קובץ

שיונות וכו'(, סביבת עבודה )פרופילים, רשימת דיוור, יהגדרות )שם פרויקט, גרסה/מודל/חבילה, המפתחים, ר-כל המטא

שהפרוייקט משתמש בהם. הכלי APIs-שהן הספריות וה -ופירוט כל הרכיבים הדרהמשתני סביבה, מאגרים(, הגדרות בנייה/

תיעוד ספריות ולחפש מקורות. כמוכן, ניתן לצרף גם את ה-מקובץ אחד, במקום להתפזר בתתשר לגשת לכל רכיבים אלו מאפ

(, ובקיצור לפתח פרוייקט מורכב הרכיביםתלויים בהם )קוד המקור של עצמםשל הספריות וגם את הספריות שהרכיבים

באופן פשוט.

". חברות רבות שמספקות רכיבי תוכנה מספקות גם קוד )על שם "מבין" ביידיש(, הוא "ארכיטיפוס mavenפיצ'ר נוסף של

ומכיל הדגמה של שימוש בסיסי בספרייה. הרעיון הוא שאם למשל, אני משתמש הדרהתוכנה מלא בג'אווה שרץ אחרי

, אני משתמש ב"ארכיטיפוס" שלהם, שמכיל את הדוגמה הבסיסית שעובדת RESTבספרייה שמספקת קוד לייצור שירותי

ק ללא בעיות, ו"עליה" בונה את הפרויקט שלי )או שפשוט מבין יותר טוב באמצעות ניסוי ותעייה איך הספרייה באופן חל

(.debuggingעובדת באמצעות

JETTY

בדרך כלל משתמשים Java-כפי שהוצג בדיאגרמה, זוהי ספריה שמספקת ומכמסת את כל הקוד הדרוש כדי להפעיל שרת. ב

רשת לבין המחלקות של הפרויקט )אין צורך להתעסק בתהליכי JVM-מקשרות בין ממשק השרת בש, שהן מחלקות Servlet-ב

, ומספק ממשק Servlet Container-משת כתמש Jetty(. . בשביל זה היא קיימתועד למערכת ההפעלה JVM-מה שעוברים

כו'. לאובייקטים/פונקציות בפרוייקט ו URI(, ומיפוי כתובות HTTPהעוסק בתהליכי רשת: כולל טיפול בפרוטוקולים )כמו

להמחשה:

שרת הוא בעצם אובייקט:

final Server server = new Server(Integer.valueOf(webPort));

ומכיל בתוכו אובייקט שאחראי לטיפול בתהליכי הרשת:

final WebAppContext root = new WebAppContext()

final String webappDirLocation = "WebContent/";

root.setDescriptor(webappDirLocation + "/WEB-INF/web.xml");

root.setResourceBase(webappDirLocation);

, כלומר לעבוד עם שרת.webשל הפרויקט שמאפשרות לו להיות פרויקט התצורהמכיל את web.xml-קובץ ה

JENSEMBL

מטיקה. באופן רונפילייצר אפליקציות בביוא , שמאפשרPerlבשפת APIהוא Ensemblבג'אווה. Ensemblלמעשה, מימוש של

של , שמכיל רצפים Ensembl, אלא פשוט גישה לבסיס הנתונים הגדול של API-מסויים, אין יותר מדי פונקציות אלגוריתמיות ב

אדם(.-)שהעיקרי שבהם הוא בן מיםרגניזועשרות דגימות מהרבה מקורות מהרבה מיני א

BIOJAVA

של ףקלאוטידים, ולראות איזה רצוונקציות שניתן לעבוד איתן. למשל לייצר אובייקט שהוא רצף נמכיל אובייקטים בביולוגיה ופ

חומצות אמונות הוא מייצר.

ProteinSequence seq = new ProteinSequence("MSTNPKPQRKTKRNTNRRPQDVKFPGG");

AminoAcidCompoundSet set = AminoAcidCompoundSet.getAminoAcidCompoundSet();

jEnsembl משתמש באובייקטים שלBioJava כדי לאחסן נתונים מבסיס הנתונים שלEnsembl וכמובן מכיל אובייקטים משלו(

(.registers, כמו שבדרך כלל קשורים ללוגיקה של מבני נתונים

JERSEY

ה עבודת באופן ישיר עם י. הספריRESTהספרייה מאפשרת להשתמש באנוטציות לפונקציות שמספקות ממשק למימוש

servlet containers ,במקרה זה(Jetty כדי להפנות )URIs לפונקציות התואמות ולגשת למימוש פרוטוקול ה-HTTP שה-

servlet container :מספק. לדוגמה

@Path("webapi")

public class RestfulConverter ..

למחלקה הספציפית הזאת http://root/webapi-מפנה את כל הבקשות שמתחילות ב

@GET

@Path("/from/dna/chr/chr-num/strand/strtype/start..end/to/rna")

@Produces("application/javascript")

public String doDNA2RNA(

@PathParam("chr-num") String chr,

@PathParam("str-type") int str,

@PathParam("start") int start,

@PathParam("end") int end,

@QueryParam("callback") String callback) ..

מדובר על.. -, כאשר מחרוזות עטופה ב...http://root/webapi/fromבתוך המחלקה, נגשים לפונקציה הזאת דרך

. rna?callback=XYZ/…"?", כלומר -אחרי התו URI-שמתווסף לסוף ה URI-" הוא פרמטר בcallback, והמשתנה "פרמטרים

(.jQuery-ב UI-הפרמטר הזה קשור להרשאות גישה )אני משתמש בו במימוש ה

האלגוריתם

Converter.java בקובץ. אנה עיין בקוד, להסביר אותו במילים האלגוריתם לכל פונקציה די פשוט וניתן

הקוד

converter-https://github.com/fatsokol/concordדרך: git-ניתן לגשת ל

UI-ה

מבוא תאורתי

AJAXך אפרט על טכנולוגיות , ואספר על מקורותיו ואיך הוא ממומש באופן כללי. אחר כresponsiveתחילה אסביר מהו עיצוב

.UI-אפרט על הטכנולוגיות ששומשו לבניית הבאופן דומה. בנוסף,

RESPONSIVEעיצוב

)כולל טאבלטים, מכשירי ם לאינטרנטהרבה מכשירים מחוברי. מכיוון שכיום לאתרי אינטרנטעיצוב מתודולוגייתמדובר על

ציות וגדלים שונים של ורזולקיימים מוזילה, אקספלורר, ספארי וכו'( וטלפון, מכוניות, שעונים וכו'(, הרבה דפדפנים )כרום,

כגון , החברות הגדולות ))או לפחות אמור לעשות זאת( באופן שונה CSSמש ממסכים וחלונות הדפדפן, שכל אחד מהן מ

שתאפשר (ראה סעיף רלוונטי -CSS)שהחלק העיקרי בהן אלו ספריות -( ניסו להפשיט רמה נוספת של עיצובטוויטר ופייסבוק

-המעצב פשוט משתמש ב לא לדאוג על חוסר עקביות בעיצוב )שלא לומר "באגים"( בכל אותן פלטפורמות. הןלמפתחים של

framework שמכיל ספריותCSSו ,-JavaScript כמו(Bootstrap וכותב קובץ מבית בקוד פתוח )טוויטרHTML אחד בלבד

, לדפדפן/פלטפורמה שעליה היא עובדתיצוב בהתאם , והיא כבר דואגת להתנות את העframework-מחלקות של השמכיל

)באיזה מכשיר/רזולוציה/גודל מדובר( ושימוש באחוזים במקום גדלים media@ כמואנוטציות שיטות כגון באמצעות

מחלקות מספקת ו )כדי לשמור על קביעות( עמודות 04למשל גם מממשת חלוקה של הדף ל Bootstrap .אבסולוטיים

.[0]מסך קטן או גדול וכו'.מגדירות עיצובים עבור ש

AJAX

במתודולוגיה. שיטת עבודה זו מתייחסת לאובייקטים באתר אינטרנט בתור נולוגיה או ספרייה מסויימת, אלהלא מדובר בטכ

לבקש אותן מהשרת. זה מאפשר לשלוח בקשות קצרות ובעצם למנוע ( שאפשרJavaScript-ישויות עצמאיות )אובייקטים ב

מ"רענון" של דפי אינטרנט )כלומר למנוע מלבקש מהשרת דף אינטרנט שלם, אלא רק חלקים ממנו(, וככה בעצם לייצר דפי

במקום JSON-", אבל אפשר להשתמש בAsynchronous JavaScript and XML: "הם אינטרנט יותר דינאמיים. רשי התיבות

XMLשזה אובייקטים ב ,-JavaScript( יצירת דפים דינאמיים .asynchronous ,מניעת "רענון" שלם של כל דף האינטרנט )

אבל המתודולוגיה הוגדרה והוצגה באופן (iframeעם אקספלורר של מייקרוסופט )אובייקטים הנקראים 0991התחילה עוד ב

.[1]4110-4114פורמאלי ע"י עובדי גוגל ב

HTML, CSS AND JAVASCRIPT

שזאת שפת סימון שזה אומר סימון חלקים של טקסט המציינים את המשמעות HTML-יש להתחיל בכדי לבנות דף אינטרנט,

heading>The World War 2</heading> <paragraph>When Hitler was> של:שלהם, למ

young…</paragraph>

וכאשר דפדפן רואה את הסימונים הללו, הוא בוחר איך לעצב את עליו שהחליטו והסכימו מפרטלמעשה הן HTMLסימוני

והוא מייצג את כללי העיצוב לכל "סימון" HTMLהם נספח שמגיע עם CSSהדף )או איך "להתייחס" לחלקים ממנו( בהתאם.

יכול להיות פשוט )לייצג סימון ספציפי( או selector-ה .selector property:rule שכזה. הוא נראה כך:

ם מאפיין מסויים שנמצאים כ"בנים" של "סימון" ע)או "אלמנטים"( מורכב )לייצג תבנית, למשל לבחור את כל ה"סימונים"

היא כבר שפת תכנות לכל דבר שמאפשר לעשות מניפולציה על "הסימונים" והעיצובים או JavaScript-ה ימת(.ממחלקה מסוי

היא שפה JavaScript (.ajaxפשוט לייצר לוגיקה מאחורי הקלעים כמו כל שפת תכנות אחרת )וכמובן לגשת לשרת ולבצע

varואין טיפוסי משתנים אלא טיפוס כללי לפונקציות( למדא )כלומר להעביר פונקציות בתור ארגומנטים -שמאפשרת ביטוי

JSON. jQueryכאלו ונקראים מקוניים בייקטיםובשפה. אובייקטים בשפה מכילים רשימה של פרמיטיבים או א שהוא פרמיטיב

י בעיקר.תעבור אתרי אינטרנט ובא השתמש JavaScript-היא אחת הספריות השימושיות ב

UI-תיאור ה

הראשון הוא החלק של section -. ה<section>אחד בלבד, שמכיל בתוכו חלקים עם סימון index.htmlמכיל קובץ UI-ה

בקצרה. יתווספו עוד בהמשך. web service-האפליקציה, והשני הוא החלק שמתאר את ה

, CSS-לקבצי השמפנה <heading> , ומכילHTML 5שמכריז כי מדובר בקובץ <DOCTYPE html!>הקובץ מתחיל ב

אלמנט )ולא קודם לטעון את -ואחד שלי. הם נמצאים בהתחלה, כדי שהדפדפן יוכל לעצב את הדף אלמנט bootsrapל אחד ש

לעצב(.הדף ואז

<!DOCTYPE html>

<html lang="en">

<head>

...

<!-- Bootstrap core CSS -->

<link rel="stylesheet"

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Custom style -->

<link rel="stylesheet" href="myCss.css" >

...

</head>

ניתן לראות איך מעצבים כאשר בהתחלה מופיע סרגל הניווט שבראש העמוד ובו ,<body>-אחר כך התוכן מגיע ב

responsive באמצעותbootstrap כאשר אופן העבודה הוא סימון עם ,<div> ושימוש במחלקות שbootsrap מספקת ,

כללי עיצוב מסויימים(: המהן מכיל ת. כל אחnavbar, navbar-default navbar-fixed-top) 0שבמקרה זה הן

<body>

<div class="navbar navbar-default navbar-fixed-top" role="navigation">

…

ניתן HTML-, כי רק אחרי שמסופק הjquery-ול javascript-עובד על אותו עיקרון. בסוף מופיע קישור ל HTML-כל שאר ה

.ajaxניתן לעשות מניפולציה ולבצע HTML-לדעת על איזה אלמנטים ב

…

<script

src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></scr

ipt>

<script

src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></s

cript>

<script

src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.mi

n.js"></script>

<!-- My scripts for this client -->

<script src="myJavaScript.js"></script>

</body>

</html>

. לפני הכל, אני $, באמצעות האובייקט העילאי jqueryת שמספקת קר בפונקציושלי אני משתמש בעי javascript-הקובץ ב

גדיר שימוש נטען במלואו ומ HTML-שמבטיחה טעינה של הפונקציות רק אחרי שדף ה readyעוטף את הקוד בפונקציית

מו למשל לעבוד ידוע כמי שמרשה "שימוש רופף" במשתנים, כ use strict" (JavaScript"נוקשים" באמצעות -ב"חוקים

עם משתנים לפני שמכריזים עליהם, ולכן ההגדרה(.

"use strict";

$(document).ready(function()//load script when document is ready

var appURL = "https://concord-converter.herokuapp.com/webapi";

ופס האפליקציה תמיד יהיה חוקי )למשל, מוודא ששמות שמוודא שט ()validateConverterבהתחלה מופיע פונקציה

התעתיקים יהיו חוקיים באמצעות ביטוי רגולרי תואם(, אחר כך רשומות הפונקציות שאחראיות על ויזואליזציה )ושינוייה

.. ()on("submit",function.('converterForm#')$הדינאמיים( של הטופס. אחר כך קיימת פונקציה

", שמייצרת משתנים מהטופס ומבצעת ריצה של הפונקציה !convert"-הכפתור ץ שנלחע שפועלת ברג

executeRequest() ומחזירהfalse .False זה בעצם מציין שהפקודה"submit" בטופסHTML וכל תהמקורי מבוטל ,

לפונקציה אתקורבתורה ()executeRequestהנ"ל. javascript-ה פונקצייתבתוך מה שיקרה יהיה רק מה שרץ

buildRequest() שמחזירה מחרוזת שה-web service יכול לעבד )בהתאם לקלט של הטופס(, ואז מבצעת בקשת

getJSON() שזוהי בקשתHTTP GET בנויה ב-jQuery האובייקט המוחזר הואומניחה ש-json .ובונה אובייקט בהתאם

ציג את האוייבקט שמ Outputנל אאת האובייקט לפמנתחת ()parseToOutputברגע שהאובייקט נבנה, הפונקציה

באופן קריא לאדם.

הקוד

ui-https://github.com/fatsokol/concordדרך: git-ניתן לגשת ל

נספחים

הפונקציות כולל גרפים תיעוד

FROM DNA TO RNA

Pipe il.ac.ariel.concord.service.Converter.fromDNAtoRNA(String chr, int start, int end, Strand str) throws

DAOException

This method converts a DNA coordinates to a list of Transcript coordinates (all transcripts that can be generated by

the nucleotide sequence within the given DNA coordinates).

Parameters:

chr The chromosome

start The first coordinate in the chromosome

end The last coordinate in the chromosome

str Forward or reverse strand

Returns:

a Pipe containing several genes (if the start and end coordinates exceeds a single gene), where each gene

also contain a Pipe with the relevant transcripts name (stable id) and their coordinates.

Throws:

DAOException

FROM RNA TO DNA

Pipe il.ac.ariel.concord.service.Converter.fromRNAtoDNA(String transName, int start, int end) throws DAOException

This method converts a given transcript with a start and end position within him, to a list of DNA coordinates

containing the exons of that transcript within the chromosome, that could have been generated to that transcript.

Parameters:

transName The ensembl string representation of the transcript name (stable id), e.g. ENST00000380152

(which is BRCA2-001 transcript).

start The first coordinate in the transcript.

end The last coordinate in the transcript.

Returns:

a Pipe with repetition of the given transcripts chromosomial coordinates attach to his father gene, with the

nested argument as the given transcript him self.

Throws:

DAOException

FROM RNA TO PROTEIN

Pipe il.ac.ariel.concord.service.Converter.fromRNAtoPROT(String transName, int start, int end) throws

DAOException

This method converts a given transcript with a start and end position within him, to a single amino acid coordinates

within a single translation. The returned coordinates define a complete set of amino acid.

Parameters:

transName The ensembl string representation of the transcript name (stable id), e.g. ENST00000380152

(which is BRCA2-001 transcript).

start The first coordinate in the transcript.

end The last coordinate in the transcript.

Returns:

a Pipe with the transcript name and the corresponding AA position coordinates

Throws:

DAOException

FROM PROTEIN TO RNA

Pipe il.ac.ariel.concord.service.Converter.fromPROTtoRNA(String protName, int start, int end) throws DAOException

This method converts a given translation with a start and end position (represented as i and j in the picture) to a

transcript (usually a single one) coordinates containing the nucleotides within the exons responsible for the

translation of the those particular amino acid.

Notes:

Must use JRE 7 to compile and run for this functions

UTR versions are deprecated for now..

Parameters:

protName The protein name (stable id) e.g. ENSP00000369497

start The first coordinate in the protein

end The last coordinate in the protein

Returns:

a Pipe with the translation name (stable id) and the corresponding transcript coordinates

Throws:

DAOException -

FROM DNA TO PROTEIN

Pipe il.ac.ariel.concord.service.Converter.fromDNAtoPROT(String chr, int start, int end, Strand str) throws

DAOException

Function composition of Converter.fromDNAtoRNA and Converter.fromRNAtoPROT

Parameters:

chr The chromosome

start The first coordinate in the chromosome

end The last coordinate in the chromosome

str

Returns:

a Pipe containing several genes (if the start and end coordinates exceeds a single gene), where each gene

also contain a Pipe with the relevant translation name (stable id) and coordinates.

Throws:

DAOException -

FROM PROTEIN TO DNA

Pipe il.ac.ariel.concord.service.Converter.fromPROTtoDNA(String protName, int start, int end) throws DAOException

Function composition of Converter.fromPROTtoRNA and Converter.fromRNAtoDNA

Parameters:

protName The protein name

start The first coordinate in the protein

end The last coordinate in the protein

Returns:

A Pipe with a Gene, nested Transcripts with nested Translations

Throws:

DAOException -

ביבליוגרפיה

0 - http://www.w3.org/Proposal.html

4 - 20040211/#webservice-gloss-ws-http://www.w3.org/TR/2004/NOTE

0 - http://webtrends.about.com/od/webapplications/a/web_application.htm

4 - http://www.w3.org/standards/

0 - design-web-tp://alistapart.com/article/responsiveht

1 - ys/archives/000385.phphttps://web.archive.org/web/20080702075113/http://www.adaptivepath.com/ideas/essa

7 - us/library/bb833022.aspx-http://msdn.microsoft.com/en

8 - cs.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htmhttp://www.i

9 - rest.html-is-http://rest.elkstein.org/2008/02/what