מבוא פשוט לדארט ולפרפר

תִכנוּת

קצת רקע

הכל התחיל בשנת 2011: Xamarin, כיום חברה בבעלות מיקרוסופט, הגתה פיתרון לאפליקציות סלולריות היברידיות באמצעות מוצר החתימה שלה, Xamarin SDK עם C #. וכך החלה המהפכה של יישומים ניידים היברידיים, הקלות בכתיבת בסיס קוד אחד לפלטפורמות רבות.

יונית צמחה בשנת 2013 עם המהדורה הראשונה שלה על ידי Drifty Co. Ionic סייעה למפתחי אתרים להשתמש בכישוריהם הקיימים בתעשיית האפליקציות הסלולריות הגדלה. בשנת 2015, פייסבוק השתמשה ב- React.js כדי להמציא אותה מחדש עבור מפתחי אפליקציות לנייד. הם נתנו לנו את React Native, בסיס קוד JavaScript לחלוטין המסתמך על SDK מקורי.

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

כעת אנו יכולים לצפות בתורו של גוגל לשים את אצבעותיו בעוגה עם פלאטר.

מה זה דרט?

לגוגל היה המהדורה הראשונה שלה אי פעם של Flutter 1.0 בדצמבר האחרון, לאחר שהייתה במצב בטא במשך למעלה מ- 18 חודשים. חץ היא שפת התכנות המשמשת לקידום אפליקציות פלטר. Dart הוא מוצר אחר של גוגל והוציא את גרסת 2.1, לפני Flutter, בנובמבר. עם תחילת דרכו, קהילת הרפרוף אינה רחבה כמו ReactNative, Ionic או Xamarin.

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

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

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

חץ משמש לא רק לפיתוח אפליקציות לנייד אלא הוא שפת תכנות. אושר כסטנדרט על ידי Ecma (ECMA-408), הוא משמש לבניית כמעט כל דבר באינטרנט, בשרתים, בשולחן העבודה וכמובן ביישומים ניידים (כן, אותם אנשים שהתקינו את המועדפים שלנו ES5 ו- ES6.)

חץ, כאשר משתמשים בו ביישומי אינטרנט, מועבר ל- JavaScript כך שהוא פועל בכל דפדפני האינטרנט. התקנת ה- Dart מגיעה גם עם VM להפעלת קבצי ה- dart מממשק שורת פקודה. קבצי ה- Dart המשמשים באפליקציות Flutter נערכים ונארזים לקובץ בינארי (.apk או .ipa) ומועלים לחנויות האפליקציות.

איך נראה קידוד בדארט?

כמו רוב שפות ALGOL (כמו C # או Java):

  1. נקודת הכניסה של מחלקת דרט היא main()השיטה. שיטה זו משמשת כנקודת מוצא גם לאפליקציות Flutter.
  2. ערך ברירת המחדל של רוב סוגי הנתונים הוא null.
  3. שיעורי חצים תומכים בירושה אחת בלבד. יכול להיות שיש רק מעמד-על אחד בכיתה מסוימת, אך יכול להיות שיש לו הרבה יישומים של ממשקים.
  4. בקרת הזרימה של הצהרות מסוימות, כמו אם תנאים, לולאות (למשך זמן ולעשות זמן), החלפת מקרה, הפסקה והמשך הצהרות זהים.
  5. הפשטה פועלת באופן דומה ומאפשרת שיעורים וממשקים מופשטים.

בניגוד אליהם (ולפעמים קצת כמו JavaScript):

  1. לחץ יש הסקת סוג. אין צורך להכריז במפורש על סוג הנתונים של משתנה, מכיוון שדארט "יסיק" את מה שהוא. ב- Java, משתנה צריך לקבל את הסוג שלו במפורש במהלך ההצהרה. לדוגמא String something;,. אך בדארט, במקום זאת משתמשים במילת המפתח כך var something;. הקוד מתייחס למשתנה בהתאם לכל מה שהוא מכיל, בין אם זה מספר, מחרוזת, בול או אובייקט.
  2. כל סוגי הנתונים הם אובייקטים, כולל מספרים. לכן, אם לא מותאם, ערך ברירת המחדל שלהם אינו 0 אלא הוא ריק.
  3. לא נדרש סוג החזרה של שיטה בחתימת השיטה.
  4. הסוג numמכריז על כל אלמנט מספרי, אמיתי ומספר שלם.
  5. super()שיחת השיטה היא רק בסוף הבנאי של תת.
  6. מילת המפתח newהמשמשת לפני הבנאי ליצירת אובייקטים היא אופציונלית.
  7. חתימות שיטות יכולות לכלול ערך ברירת מחדל לפרמטרים שעברו. לכן, אם אחד לא נכלל בשיחת השיטה, השיטה משתמשת בערכי ברירת המחדל במקום זאת.
  8. יש לו סוג נתונים מובנה חדש בשם Runes, העוסק בנקודות קוד UTF-32 במחרוזת. לדוגמא פשוטה, ראו אמוג'ים וסמלים דומים.

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

ל- Dart יש גם ספריות מובנות המותקנות ב- Dart SDK, הנפוצה ביותר:

  1. חץ: ליבה לפונקציונליות ליבה; הוא מיובא בכל קבצי החצים.
  2. חץ: אסינכרון לתכנות אסינכרוני.
  3. חץ: מתמטיקה לפונקציות וקבועים מתמטיים.
  4. חץ: להמיר להמרה בין ייצוג נתונים שונה, כמו JSON ל- UTF-8.

תוכל למצוא מידע נוסף על ספריות Dart כאן.

שימוש בחץ רפרוף

ל- Flutter ספריות ספציפיות יותר לאפליקציה, לעתים קרובות יותר על רכיבי ממשק משתמש כמו:

  1. יישומון: רכיבי אפליקציה נפוצים, כמו Text או ListView.
  2. חומר: מכיל אלמנטים בעקבות עיצוב חומר, כמו FloatingActionButton.
  3. קופרטינו: מכיל אלמנטים בעקבות עיצובים שוטפים של iOS, כמו CupertinoButton.

תוכל למצוא ספריות ספציפיות לפלוטר כאן.

הגדרת רפרוף

אז, כדי להכניס את הדבר הזה, עקוב אחר מסמכי הרפרוף. הוא מספק פרטים על התקנת ה- Flutter SDK והגדרת ה- IDE המועדף עליך; שלי יהיה קוד VS. הגדרת קוד VS באמצעות סיומת Flutter מועילה. זה מגיע עם פקודות מובנות, בניגוד לשימוש במסוף.

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

אם אתה מעדיף להשתמש במסוף, עבור לתיקיית היעד של האפליקציה. ואז השתמש בפקודהflutter create me> to create the app folder. This generates the entire app folder, including the Android and iOS project folder. To open these folders, use Android Studio and XCode, for building the app.

In the root of the project, you find pubspec.yaml. This file contains the app's dependencies. This includes both external libraries/modules and assets like images and config files. It works like a package.json, containing all external modules of the app. To install these packages, enter the package name and version under the dependencies: section of the pubspec.yaml. Run the command flutter packages get. Include the assets of the app inside the flutter: section of the same file.

The entry point of the app is main.dart, found inside the lib folder. This folder also contains all Dart classes (app pages or reusable components). On creation of the app, the main.dart file comes with a simple pre-written code. Before running this code, a device is either connected to the PC, with USB debugging enabled. Afterward, run the command flutter run on the terminal.

A First Look at the Flutter App

The app currently looks like this now:

Building the user interface of a Flutter app makes use of Widgets.

Widgets work in a similar way to React. A widget uses different components to describe what the UI should look like. They can be either Stateful or Stateless. In Stateful components, the widget rebuilds due to state changes, to accommodate the new state.

When we look at the current code for the Home page, we see that it’s a Stateful page. If the counter variable increases, the framework tries to find the least expensive way to re-render the page. In this case, find the minimal difference between the current widget description and the future one. It takes into account the changed state.

The Scaffold class is a material design layout structure and is the main container for the Home page. The AppBar, also a material design element is the title bar found at the top of the page. All other components, like the floating button and two text tags, fall under the body of the page. The Center class is a layout class that centers its child components vertically and horizontally.

The Column class, another layout widget, lists each child element vertically. Each of its child elements is added to an array and put underneath the children: section.

The two texts speak for themselves. The first displays the text ‘You have pushed.’ The second one displays the current value in the _counter variable.

The FloatingActionButton is part of the Material design widgets. It displays a + icon and triggers the increment of the _counter variable.

Hot Reloading

Another plus point of using Flutter is the hot reloading feature. It lets you see changes made to the code in real time, without restarting the build process. Type ‘r’ on the same console that you ran the flutter run command.

Altering the current code

As we can see, when you click the button, the _counter variable value increases. This re-renders the page and the new value is displayed on the body of the page.

I’m going to change that up a bit. For every button click, we will display a custom Card component with the item number.

Creating the Custom Card Component

So, to start off, we make a new .dart file inside the lib folder. I created mine in a subfolder commonComponents and named it customCard.dart.

import 'package:flutter/material.dart'; class CustomCard extends StatelessWidget { CustomCard({@required this.index}); final index; @override Widget build(BuildContext context) { return Card( child: Column( children: [Text('Card $index')], ) ); } }

This component will be a stateless widget and will only display the value that we send to it, in the Text widget.

Displaying a List of Custom Cards

Import the above component to the main.dart like so:

import 'commonComponents/customCard.dart';

I then replace the code of the home page body, from the one above to this:

body: Center( child: Container( child: ListView.builder( itemCount: _counter, itemBuilder: (context, int index) { return CustomCard( index: ++index, ); }, ) ), ),

It now displays a List of CustomCard elements, up to the number of times the button is clicked. The itemCount is used to define the number of elements the ListView must display. The itemBuilder returns the actual item that is displayed.

And that’s a simple example of using Flutter.

In conclusion…

Before my interest turned to JavaScript, I worked with Java. If I had encountered Dart around that time, I might have been able to understand it easier than I did now. All in all, It wasn’t too difficult but took a bit of time to get the hang of it. I could see myself using it in time.

Find the code repo, here.

Find the commit for this post, here.