About אבי צוראל

אבי צוראל - יועץ ומפתח אתרי אינטרנט וRIA.

לבנות אתר מאפס ברובי און ריילס #2

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

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

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

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

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

איך עובדים בגוגובוט – פודקאסט

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

נשאלתי המון שאלות על המצגת שהעברתי בRubyUnderground בשנקר.

יצא פודקסט יחסית ארוך אבל למי שפספס את ההרצאה, שווה להקשיב.

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

קישור לפודקאסט

קישור ישירות לקובץ השמע

איך עובדים בגוגובוט?

אתמול (27.02) עשיתי הרצאה בשנקר במפגש של Ruby Underground.

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

התגובות שקיבלתי על ההרצאה היו פשוט מדהימות, בכול אמצעי מדיה אפשרי – כולל ברשתות החברתיות.

העליתי את ההרצאה ל-Speaker Deck  כדי שכולם יוכלו להתרשם, גם אלו שלא נכחו בהרצאה.

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

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

לבנות אתר מאפס ברובי און ריילס #1

לפני מספר חודשים התחלתי סדרה של סקרינקאסטים שעוסקים בבניית אתר באמצעות רובי און ריילס ממש מאפס – אתר מאפס ברובי און ריילס #1 (סקרינקאסט) ואתר מאפס ברובי און ריילס #2 (סקרינקאסט).

מסיבות שונות ומשונות הסדרה הופסקה ממש בתחילתה.

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

קצת על הסדרה

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

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

הפרק הראשון:

מומלץ מאוד לצפות במסך מלא (רזולוציה ההקלטה היא 1920*1200)

Show Notes

קוד מקור

https://github.com/KensoDev/project-management-example

פידבק בבקשה

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

איך לחשוף פיצ'ר רק למספר מוגבל של יוזרים?

הג'ם (Gem) בקישור המצורף מרשים מאוד – jamesgolick/rollout – GitHub.

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

היתרון של הג'ם הזה ברור – הוא מבוסס על Redis, ולכן הסקייל הוא הרבה יותר טוב מאשר משהו מבוסס על mysql.

הכנת המק שלך לעבודה עם רובי און ריילס

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

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

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

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

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

בת'כלס, זה סקריפט שנבע מעצלנות אבל למי אכפת :-) (אל תגלו לאף אחד!)

את הסקריפט, שהוא בסה"כ שורת Shell יחידה אפשר למצוא כאן: gogobot/laptop – GitHub.

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

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

 

כמו תמיד – הערות, הארות, רעיונות לשיפור, אפשר להגיב כאן, אפשר לפתוח Issue ב-Github, מה שבא לכם.

תוציאו הכל (כמעט) לקוד פתוח

את הפוסט הבא קראתי ממש כשיצא.

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

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

למשל…
כאשר התחלנו לעבוד עם Resque ממש היה לנו חסר פיצ'ר שיכול להוסיף משימות ל-Queue, מאוד דומה ל-Delayed Jobs.
לכן, כתבנו כזה, הדבר הראשון שעשינו אחרי שכתבנו, היה להוציא את זה ל-Open Source.

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

קישור לפוסט של טום למטה.

Open Source (Almost) Everything.

Best practices לעבודה עם צד לקוח בריילס

הקדמה – למה כדאי לכם להמשיך לקרוא גם אם אתם לא מתכנתי רובי און ריילס

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

סדר וארגון מביאים ליעילות ולכן, לחסכון בכסף ובזמן

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

אם אתם מתכנתי Web סביר מאוד להניח שיש לכם עשרות, אם לא מאות, ואם לא אלפים שורות קוד לכתוב ב-JavaScript וב-Css. סביר גם להניח שיש לכם מספר גדול מאוד של קבצים לעבוד איתם.

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

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

ארגון CSS צריך להיות מבוסס על Controllers

התמונה למטה, מראה רשימת Controllers טיפוסית בפרויקט תו"כ פיתוח.

רשימת Controller בפרויקט

רשימת Controller בפרויקט

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

אבל ראשית, יש לי כמובן קובץ Css ראשי אחד, שבו יש את כול החוקים שהם משותפים לכול האתר, לקובץ ה-Css הזה אני בד"כ קורא main.css (מיד נראה איך הכול מאורגן בתיקיות כמובן).

להלן ספריית ה-Css שלי בהתבססות על הקונטרולרים. שימו לב לדבר אחד, אני משתמש ב-Compass וב-Scss בשביל לכתוב את הקוד, ולכן הקבצים הם לא רגילים. כמו כן, כאן הקובץ הראשי שלי נקרא dashboard.css מכיוון שהפרויקט הוא אפליקציה ולא אתר.

קבצי Css

קבצי Css

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

שימוש בקלאס ראשי לארגון התוכן הפנימי של הדף

אם נסתכל על הקובץ Layout הראשי שלי, אנחנו יכולים לראות איפה אני משתמש בקלאס הזה

	<body class="<%= controller_classes.join(' ') %>">
		<div class="wrapper">
			<div class="header <%= yield(:header_class)%>">
	    		<%= yield(:upper_links) %>
		   		<%= yield(:dashboard_header) %>
				<%= yield(:top_button) %>
		    </div><!--/header-->
		    <div class="content">
				<%= yield %>
		    </div><!--/content-->
			<%= yield(:new_issue) %>
		</div><!--/wrapper-->
		<div class="footer">
			<%= render :partial => "shared/dashboard/footer" %>
		</div><!-- .footer -->

		<%- flash.each do |name, msg| -%>
			<div id="flash_message" class="flash <%=name%>">
				<strong>
					<%= msg %>
				</strong>
			</div>
      	<%- end -%>
	</body>

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

את ה- controller_classes אני קובע דרך ה- application_helper בצורה הבאה:

module ApplicationHelper
  def controller_classes
    [controller.controller_name]
  end
end

למה זה מערך?

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

עכשיו, אתם בטח תוהים איך אני לוקח את כול קבצי ה-Css האלה. העוקצנים שבינכם בטח כבר חשבו למה אני טוען Css בכול עמוד בנפרד במקום קובץ אחד ויחיד שהוא Minified. ובכן, לא כך המצב. אני אכן טוען את כול הקבצים לתוך קובץ אחד ויחיד (ב-Production) שהוא Minified וגם gzipped.

אני מבצע את הדבר הזה דרך Gem שנקרא Jammit שעושה בדיוק את זה, הGem משתמש בקובץ Yaml בשביל לאחד את הקבצים, היופי ב-Gem הזה שבזמן פיתוח הוא נותן לי את כול הקבצים בצורת המקורית (אחרי ש-Compass עשה מהם Css רגיל), ובזמן Production מוגש קובץ אחד ויחיד.

אפשרות נוספת היא לעשות שימוש ב-Import של Sass, במקרה הזה הקבצים צריכים להתחיל עם Underscore ופשוט לייבא את כולם לתוך קובץ יחיד שנקרא לו application.scss או כל שם אחר שבא לכם.

דוגמא ל-Jammit Asset file

stylesheets:
  base:
    - public/stylesheets/base/all.css
    - public/stylesheets/base/form.css

ארגון קבצי JavaScript

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

הקובץ הראשון הוא הקובץ הכללי שכולל בתוכו קוד כללי לכול העמודים (אם יש כזה), כולל את ה-Framework לבחירה (Mootools כמובן) ועוד תוספים כאלה ואחרים.

להלן דוגמא:

javascripts:
  base:
    - public/javascripts/base/mootools-core-1.3.js
    - public/javascripts/base/mootools-more.js
    - public/javascripts/base/rails.js
  dashboard_base:
      - public/javascripts/base/flash_hanler.js
      - public/javascripts/base/scroller_bar.js
      - public/javascripts/base/behavior.js
      - public/javascripts/base/custom_select.js
      - public/javascripts/base/custom_checkbox.js
      - public/javascripts/base/paging_list.js
      - public/javascripts/base/new_project.js
      - public/javascripts/base/project.js
      - public/javascripts/modules/project/newIssue.js
      - public/javascripts/base/main.js

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

בנוסף, לכול אחד מה-controllers יש קובץ משלו. למשל home.js, user.js ועוד.

את הקובץ הזה אני טוען בתחתית העמוד מיד אחרי קובץ הBase בצורה הבאה:

<%= javascript_include_tag "/javascripts/views/#{controller.controller_name}.js" %>

האתר שלי הרבה יותר עשיר בJavaScript, רעיון לשיפור?

בהחלט, כרגע אנחנו עובדים ב-controller scope, אפשר בהחלט לעבוד ב-view scope ולייצר קבצים (גם Js וגם Css) לכול אחד מה-Views שלכם ול-Partials.

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

הערת שוליים קטנה או => נראה לכם באמת שאני עובד ככה…

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

מי אמר Rails Custom Generators?

בדיוק בשביל זה יש לי Custom Generator ובמקום ליצור Controller דרך הקומנד ליין הרגיל, אני יוצר אותו דרך Custom Command שבעצם עושה את כול הדברים בשבילי.

  • יצירת Controller
  • יצירת קובץ Scss
  • הוספה של הקובץ לסדר הMinify (פרמטר אופציונאלי האם הוא בייס או לא)
  • הוספה של קובץ Js
  • הוספה של הקובץ לסדר הMinify (פרמטר אופציונאלי האם הוא בייס או לא)

לסיכום

אשמח לשמוע תגובות, הערות, הארות (אני פתוח לכול ביקורת חיובית :-) )

לייקים בפייסבוק וגם תגובות דרך הפייסבוק יתקבלו גם הן בברכה.

בהצלחה!

אתר מאפס ברובי און ריילס #3 (סקרינקאסט)

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

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

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

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

Creating a rails application from scratch #3 from Avi Tzurel on Vimeo.

כמובן כרגיל, קוד המקור נמצא ב-Github ואתם יכולים לשכפל אותו ולעשות איתו כרצונכם, השימוש הוא חופשי לגמרי.
https://github.com/KensoDev/Adopt-A-Cause

מוזיקת הפתיח מאת http://www.danosongs.com/

לקוח חדש – GogoBot

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

הסרטון הבא יסביר בקצרה על חברת GogoBot – מה הם עושים, צוות העובדים ועוד.

הנה הסבר מטעם מנכ"ל החברה ואחד המייסדים, טרוויס כץ.

העבודה שלי

  • פיתוח רובי און ריילס
  • פיתוח אלגוריתם להשוואת בסיסי נתונים
  • פיתוח צד לקוח