מדריך: כך תייצרו אפליקציות Windows עם Flutter של גוגל

עדכון חדש מאפשר לערכת הפיתוח Flutter של גוגל ליצור אפליקציות Windows, שירוצו על כל PC. כך תעשו את זה שלב אחרי שלב

מאת: ברק מנחם

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

מדריך וידאו: כך תיצרו אפליקציית Windows בעזרת Flutter

 

שלב 1 – התקנת Flutter על המחשב

שלב זה הוא הבסיסי ביותר, ואם תרצו לגוגל יש מדריך נוח וברור שמותאם על פי מערכת ההפעלה שלכם – Windows, macOS, לינוקס או ChromeOS. מן הסתם, מאחר ומדריך זה מתרכז בהרצת Flutter כאפליקצית Windows, צריך להיות ברשותכם מחשב Windows עליו תוכלו להתקין את Flutter. בהדגמה הזו, אנחנו נעשה שימוש ב-Visual Studio Code כ-IDE לפיתוח בFlutter.

שלב 2 – יצירת הפרויקט

צרו אפליקציית Flutter רגילה ובסיסית ע”י יצירת פרויקט Flutter. ב-Visual Studio Code,  נלחץ על Ctrl+P ולאחר מכן נבחר את שם הפרויקט. לדוגמה: “flutter_windows”. לחצו Enter, ולבסוף ציינו את התיקייה בה הפרויקט יווצר. Flutter תייצר עבורכם פרוייקט בסיסי לדוגמה, שאיתו נוכל להתחיל לעבוד. המתינו כחצי דקה-דקה לסיום יצירת הפרויקט.

שלב 3 – הגדרת יצוא Flutter לWindows

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

כאשר נתקין את Flutter לראשונה, היא תגיע בגרסת Stable Channel, הערוץ אשר מכיל את הגרסהות היציבות, ולכן נרצה כעת לעבור לערוץ, שנמצא עדיין בפיתוח, כדי לקבל את יכולות הייצוא ל-Windows. נעשה את זה ע”י הרצת פקודות בטרמינל, כשאנחנו נמצאים על תיקיית הפרויקט שלנו:

flutter channel master
flutter upgrade

התהליך ייארך כ-5-10 דקות, ובסיומו יודפס Flutter Doctor, שידרוש מכם להתקין Visual Studio על המחשב שלכם, אם הוא עדיין לא מותקן או שהוא מותקן אך לא קיימים בו התוספים הרלוונטיים לפיתוח אפליקציות Windows ב-Flutter.

שלב 4 – התקנת ++Visual Studio With C

על מנת לפתח אפליקציות Windows, לרוב נידרש לסביבה תומכת ממיקרוסופט, כלומר, נידרש להתקין את Visual Studio עם ההרחבות המתאימות. היכנסו לאתר Visual Studio Download, ובחרו בגרסה החדשה ביותר הקיימת עבור Visual Studio Community, זו הגרסה החינמית, ונכון להיום, הגרסה החדשה ביותר הינה מ-2019.

לאחר שקובץ ההתקנה נמצא על מחשבכם, התחילו את ההתקנה. בחלון שיפתח נוכל לבחור את ההרחבות השונות עבור Visual Studio, סמנו את הרחבה הנקראת: “++Desktop Development With C”.

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

שלב 5 – סיום הקונפיגורציה עבור Flutter-Windows

על מנת לוודא כי ה-IDE איתו אתם עובדים והטרמינל שפתחתם יזהו את התקנת Visual Studio על המחשב, סיגרו את כל החלונות הפתוחים, ולאחר מכן היכנסו מחדש ל-IDE שלכם, ופתחו מחדש את הTerminal בתיקיית הפרויקט שלכם. ההמלצה שלי אגב היא Visual Studio Code עבור Flutter.

אתם ממש קרובים לסיום!

נגדיר כעת ל-Flutter, שאת ההרצה הקרובה שלו תבצע על המחשב שלכם, ולא על Device אחר כמו טלפון פיזי או אימולטור – נרצה להריץ על Windows!

ב-Visual Studio Code בצד ימין בתחתית החלון, בתוך השורה הכחולה, נלחץ על No Device, ובגלילה שתיפתח לנו במרכז החלון למעלה, נבחר בEnable Windows.

כעת כל שנותר הוא להריץ בטרמינל:

flutter config --enable-windows-desktop
flutter create

כעת תופיע לכם תיקיית Windows בתוך פרויקט ה-Flutter שלכם. 

שלב 6 – לוחצים F5 – והקסם של Flutter מתחיל

עכשיו נותר לנו להריץ את הפרויקט, והנה הקסם – אותה האפליקציה בדיוק, זו שרצה על Android, iOS, ווב, גם רצה על Windows! אם תרצו להוסיף גם יכולות גישה ל-API של Windows, כמו למשל גישה לטרמינל, תוכלו להשתמש בספריית Dart הנקראת: dart:ffi.

זהו. עכשיו הכל תלוי בקוד שלכם. בהצלחה.

אם בכל זאת נתקלתם בבעיה בדרך – תרגישו חופשי לשלוח לי וואטסאפ ישיר, או לבקר בקהילה המגניבה שלנו בפייסבוק: https://fid.dev/facebook


ועוד כמה מילים 

אם שמתם לב, העיצוב שכרגע מופיע על המסך הוא עיצוב Material Design, המוכר לנו מסביבת אנדרואיד וסביבת ה-UI הNative שלו. אבל ב-Windows עיצוב הנייטיב שונה, אז איך בכל זאת הרכיבים אלו יכולים להופיע על כל פלטפורמה אפשרית? התשובה היא הקסם המרכזי של Flutter, זה שמקנה לנו ביצועים של 60fps-120fps, זה שמקנה לנו גמישות מלאה ושליטה בכל פיקסל על המסך, זה שמאפשר לנו לרוץ על כל פלטפורמה אפשרית, ולתמוך בכל פלטפורמה אפשרית.

הפיצ’ר הזה מורכב מ-3 רכיבים:

Canvas – כאשר Flutter נדרשת לרוץ על פלטפורמה מסויימת, היא משתמשת ב-Canvas, בדף לבן המאפשר לצייר אליו בכל פיקסל אפשרי – ולכן כמו שבטח ניחשתם – המימוש של הציור על ה-Canvas כלל לא תלוי בפלטפורמה שעליה אנו רצים – הוא תלוי אך ורק ב-Flutter. לכן גם, במקרה שלנו, עיצוב Material Design הוא ספריה שלמה הכתובה ב-Dart, ומכילה את כל העיצובים אפשריים ב-Material Design עבור רכיבי ה-UI השונים, בדיוק כפי שהם נראים ב-Native. כמובן שישנן ספריות עם כל הרכיבים גם עבור iOS או Cupertino כפי שהם מכונים

Skia – זה המנוע הגרפי עבור Flutter, המאפשר את הציור על ה-Canvas בצורה מהירה ויוצאת דופן. Skia נכתב ב-C++, ובזכות העובדה זו, הוא יכול לרוץ כמעט על כל מכשיר ומערכת הפעלה סטנדרטית, ומעבר לכך, עובדה זו מקנה לו את המהירות כצפוי מפיתוח LowLevel ב-C++.

Dart – שפת Dart, שפותחה ע”י גוגל, יועדה מתחילת דרכה להיות אופטימלית עבור תיכנות Frontend שהוא Cross-Platform, כאשר השימוש העיקרי אשר נעשה בשפה זו – הוא כמובן פיתוח ב-Flutter. ל-Dart יש 2 קומפיילרים עיקרים אשר מקנים לה יכולות מיוחדות; קומפיילרים שמאפשרים להמיר אותה ישירות לשפת מכונה (ללא שום Bridge או הידור אחר באמצע); ובנוסף, קומפיילרים המאפשרים להדר אותה באופן ישיר ל-JS על מנת לרוץ ב-Web. אם אתם מתעניינים, תוכלו תמיד לקרוא עוד על JIT, AOT, dart2native, dart2js.

‌הכותב הוא מנהל קהילת Flutter Israel Developers

 

Avatar

כתב אורח

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

הגב

14 תגובות על "מדריך: כך תייצרו אפליקציות Windows עם Flutter של גוגל"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 

* היי, אנחנו אוהבים תגובות!
תיקונים, תגובות קוטלות וכמובן תגובות מפרגנות - בכיף.
חופש הביטוי הוא ערך עליון, אבל לא נוכל להשלים עם תגובות שכוללות הסתה, הוצאת דיבה, תגובות שכוללות מידע המפר את תנאי השימוש של Geektime, תגובות שחורגות מהטעם הטוב ותגובות שהן בניגוד לדין. תגובות כאלו יימחקו מייד.

סידור לפי:   חדש | ישן | הכי מדורגים
שם כלשהו
Guest

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

ברק מנחם
Guest

ההתקנה היא השלב הקצת ארוך, אחכ הכל זורם כמו מים! :)

בהצלחה רבה,
ברק מנחם

af db creid
Guest

אין שום צורך להתקין את Visual Studio רק בשביל C++. במקום זה להתקין את Build Tools for Visual Studio מהכתובת https://visualstudio.microsoft.com/downloads/#build-tools-for-visual-studio-2019.

ברק מנחם
Guest

נכון זו גם אפשרות, הראנו את הדרך הקלה והפשוטה :)

השם שלי קצר מידי
Guest
השם שלי קצר מידי

או אפשר להשתמש במוצר קוד פתוח של חברה ישראלית (קודניים וואן) שמאפשר את זה בלי התקנות ובשפות ״נורמאליות״ כמו ג׳אווה וקותלין. תומך בכל הפלטפורמות שflutter תומכת ועוד כמה (UWP). כולל שרות ענן שחוסך התקנות כלים וכולל תמיכה מיקצועית.
עוד כמה יתרונות:ֿ
– ביצועים (ג׳אווה) וגודל אפליקציה
– עיצוב בCSS ולא שפה מוזרה
– סימולטור מהיר ונוח
– Gui Builder
– זה לא גוגל

שם כלשהו
Guest

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

השם שלי קצר מידי
Guest
השם שלי קצר מידי
תעיף מבט בקוטלין. היא מודרנית יותר וכוללת הרבה מהדברים הטובים מג׳אווה ועוד הרבה יתרונות אחרים. עובדתית flutter מייצרת תוצר יותר גדול כי היא כוללת את המכונה הווירטואלית שלה. אז זה מדיד בקלות. כ2mb לאפליקציית קודניים וואן ואתה יודע לבד כמה flutter שוקלת… מבחינת מהירות יש פה כמה יתרונות. אנדרויד בנויה בג׳אווה (וקצת קוטלין שזה אותה מכונה וירטואלית). זה ה״נייטיב״ של אנדרויד כי כל הממשק בנוי בזה. אפליקציית קודניים וואן היא אפקטיבית נייטיבית לאנדרויד. זה יתרון עצום. כל פעם שאפליקציה שלא בג׳אווה (או קוטלין) צריכה להתממשק למערכת היא צריכה לעבור את גשר הJNI. זה גשר איטי מאד שפוגע בביצועים. זה גם… Read more »
רותי
Guest

בגלל החשש שflutter יסתיים בבית הקברות של פרוייקטים של גוגל אני משתמשת בחלופות כמו ionic או אלקטרון ככה בכל מקרה אני אשאר עם קוד שאפשר להשתמש בו גם אם הפרויקט יופסק ואין בעיות עם ביצועים Visual code בנוי ורץ על js חלק וגם github desktop

Maor
Guest

[flutter] flutter doctor -v

Oops; flutter has exited unexpectedly: “Invalid argument(s): join(null, “Google”, “AndroidStudio4.1”, “.home”): part 0 was null, but part 1 was not.”.
Unable to generate crash report due to secondary error: Invalid argument(s): join(null, “Google”, “AndroidStudio4.1”, “.home”): part 0 was null, but part 1 was not.
Please report a bug at https://github.com/flutter/flutter/issues.

Help! Any ideas? Uninstalled Android studio 4.0 and installed 4.1, still getting this error.

רום
Guest

cmd runas administrator
format c: /f
install 98se

קרקר
Guest

עשיתי את זה פעם עם אקסס וביבי6

זיקו
Guest

מי בכלל רוצה לעשות אפליקציה לווינדוס?
בכל מקרה בישבילי רק ריאקט נייטיב

בצל כחול
Guest

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

ברק מנחם
Guest

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

wpDiscuz

תגיות לכתבה: