Chapterبەش 2 · Lectureوانە 2.3
Native, Web, Hybrid and Cross-Platform Appsئەپی ڕەسەن، بەرنامەی وێب، ئەپی تێکەڵ و ئەپەکانی فرەسەکۆ
The four ways to build a mobile app (native, web and progressive web apps, hybrid WebView apps and cross-platform frameworks), how each one draws the screen, and how to choose between them.
چوار ڕێگای دروستکردنی مۆبایل (، و ، و )، هەر یەکەیان چۆن شاشەکە دەکێشێت و چۆن لە نێوانیاندا هەڵدەبژێریت.
What you will learnچی فێر دەبیت
- Explain what native, web, progressive web, hybrid and cross-platform apps are, with examples.
- Say who draws the screen in each kind of app: the platform, a WebView or the framework's own engine.
- Correct the old technology tree: Flutter is not a WebView hybrid, and Xamarin has ended.
- Choose a suitable road for an app from its users, features, team and budget.
- ڕوونی بکەیتەوە ، ، ، و چین، لەگەڵ نموونە.
- بڵێیت لە هەر جۆرە کێ شاشەکە دەکێشێت: ، یان بزوێنەری خودی .
- دارە تەکنەلۆجییە کۆنەکە ڕاست بکەیتەوە: نییە و Xamarin کۆتایی هاتووە.
- لە ڕووی بەکارهێنەران، تایبەتمەندییەکان، تیم و بودجەوە ڕێگایەکی گونجاو بۆ هەڵبژێریت.
One app, four roadsیەک ئەپ، چوار ڕێگا
Hana has a small bakery in Erbil. She wants her customers to order bread from their phones. Some customers have Android phones and some have iPhones. Her developer, Karwan, must first decide how to build the app.
هانا نانەواخانەیەکی بچووکی لە هەولێر هەیە. دەیەوێت کڕیارەکانی لە مۆبایلەکانیانەوە داوای نان بکەن. هەندێک کڕیار مۆبایلی Androidـیان هەیە و هەندێکیان iPhone. ، کاروان، پێش هەموو شتێک دەبێت بڕیار بدات چۆن دروست بکات.
First, one word. A is the base that an app runs on: an such as Android or iOS, or the Web. An app made for one platform does not run on another platform by itself.
سەرەتا یەک وشە. ئەو بنچینەیەیە کە لەسەری کار دەکات: وەک Android یان iOS، یان وێب. کە بۆ دروست کرابێت، خۆبەخۆ لەسەر تر کار ناکات.
Karwan has four main roads:
کاروان چوار ڕێگای سەرەکیی لەبەردەمە:
- Native: build a separate app for each platform, each with that platform's own language and tools.
- Web: build a website that works well on phones. A progressive web app can even be installed.
- Hybrid: write a web page once and pack it inside an app shell.
- Cross-platform framework: write one codebase and get a real app for every platform.
- : بۆ هەر جیا دروست بکات، هەر یەکەیان بە زمان و ئامرازەکانی خودی ئەو .
- وێب: دروست بکات کە لەسەر مۆبایل باش کار بکات. تەنانەت دەتوانرێت جێگیر بکرێت.
- : یەک جار بنووسێت و بیخاتە نێو بەرگێکی .
- : یەک بنووسێت و بۆ هەموو ڕاستەقینە وەربگرێت.
The lecture names three kinds of app (native, browser-based and hybrid) and shows a tree of technologies. This lesson explains all of them, corrects the tree, and adds what is missing today: progressive web apps and the modern cross-platform frameworks.
وانەکە سێ جۆر ناو دەبات (، و ) و دارێکی تەکنەلۆجیاکان پیشان دەدات. ئەم وانەیە هەموویان ڕوون دەکاتەوە، دارەکە ڕاست دەکاتەوە و ئەوەی ئەمڕۆ کەمە زیادی دەکات: و سەردەم.
Native appsئەپە ڕەسەنەکان
An built for one with that platform's own language and tools: Swift or Objective-C for iOS, Kotlin or Java for Android. It can use every feature of the device and is usually fast, but each platform needs its own code.
کە بۆ یەک و بە زمان و ئامرازە تایبەتەکانی ئەو سەکۆیە دروست کراوە: Swift یان Objective-C بۆ iOS، Kotlin یان Java بۆ Android. دەتوانێت هەموو تایبەتمەندییەکانی ئامێرەکە بەکار بهێنێت و زۆرجار خێرایە، بەڵام هەر سەکۆیەک کۆدی تایبەتی خۆی پێویستە.
A native app is built for one platform, with that platform's own programming language and its own (the set of tools and libraries the platform maker gives developers):
بۆ یەک دروست دەکرێت، بە خودی ئەو و خۆی (کۆمەڵێک ئامراز و کە دروستکەری دەیداتە ):
- Android: Kotlin or Java. Google has been "Kotlin-first" since 2019. Screens are built with Jetpack Compose or the older View system.
- iOS: Swift or Objective-C. Swift is compiled to machine code. Screens are built with SwiftUI or UIKit.
- Android: Kotlin یان . Google لە ٢٠١٩ـەوە Kotlin لە پێشینە دادەنێت. شاشەکان بە Jetpack Compose یان سیستەمە کۆنەکەی View دروست دەکرێن.
- iOS: Swift یان Objective-C. Swift بۆ کۆمپایل دەکرێت. شاشەکان بە SwiftUI یان UIKit دروست دەکرێن.
Native appsئەپە ڕەسەنەکان
Examples, and how native apps runنموونەکان و ئەپە ڕەسەنەکان چۆن کار دەکەن
The apps that came with your phone are good examples: the address book (Contacts), the Calendar, the Calculator, Maps, the camera, games and the web browser itself. Many apps you download from a store are native too.
ئەو لەگەڵ مۆبایلەکەتدا هاتوون نموونەی باشن: دەفتەری ناونیشان (Contacts)، ڕۆژژمێر، ، نەخشە، کامێرا، یارییەکان و خودی . زۆرێک لەو لە فرۆشگاوە دایاندەبەزێنیت هەروەها ڕەسەنن.
Native apps have their own runtime environment: they run straight on the phone's operating system, not inside a browser. On Android, apps run in the Android Runtime (ART). ART turns their code into machine code: some of it when the app is installed, more while the app runs, and the rest while the phone is idle and charging. On iOS, Swift code is compiled to machine code before it reaches the phone.
ژینگەی جێبەجێکردنی خۆیان هەیە: ڕاستەوخۆ لەسەر مۆبایلەکە کار دەکەن، نەک لەنێو . لە Androidـدا لەنێو Android Runtime (ART)دا کار دەکەن. ART کۆدەکەیان دەکاتە : هەندێکی لە کاتی ()، هەندێکی تر لە کاتی کارکردنی () و باقییەکەی لە کاتێکدا مۆبایلەکە بێکارە و بارگاوی دەکرێت. لە iOSـدا کۆدی Swift پێش ئەوەی بگاتە مۆبایلەکە بۆ کۆمپایل دەکرێت.
Native appsئەپە ڕەسەنەکان
Strengths and costs of native appsخاڵە بەهێز و تێچووەکانی ئەپە ڕەسەنەکان
| Strengthخاڵی بەهێز | Costتێچوو |
|---|---|
| Every feature of the phone is available, and new features of the operating system arrive in the native tools first.هەموو تایبەتمەندییەکانی مۆبایلەکە بەردەستن و تایبەتمەندییە نوێکانی یەکەم جار دەگەنە ئامرازە ڕەسەنەکان. | Two platforms mean two codebases, often in two languages, sometimes by two teams.دوو واتە دوو ، زۆرجار بە دوو زمان و هەندێک جار بە دوو تیم. |
| Very good speed and the platform's own look and behaviour.خێرایی زۆر باش و شێوە و ڕەفتاری خودی . | Every new feature is written, tested and fixed twice.هەر تایبەتمەندییەکی نوێ دوو جار دەنووسرێت، تاقی دەکرێتەوە و چاک دەکرێت. |
| Installs from the store and works offline.لە جێگیر دەکرێت و بەبێ کار دەکات. | Developers must learn each platform's language and tools. دەبێت زمان و ئامرازەکانی هەر فێر ببن. |
The lecture adds that highly interactive applications are "really only feasible" (practical) as native apps. For many years this was true: fast games and camera apps were native. Today compiled cross-platform frameworks also make smooth, highly interactive apps. Native is still the safest choice when you need the newest platform features on the first day or very deep links with the system, such as home-screen widgets or watch apps.
وانەکە دەڵێت زۆر کارلێککار «لە ڕاستیدا تەنها» وەک دەکرێن. بۆ چەندین ساڵ ئەمە ڕاست بوو: یاریی خێرا و کامێرا ڕەسەن بوون. ئەمڕۆ کۆمپایلکراویش نەرم و زۆر کارلێککار دروست دەکەن. ڕەسەن هێشتا سەلامەتترین هەڵبژاردنە کاتێک لە یەکەم ڕۆژدا نوێترین تایبەتمەندییەکانی دەوێت یان پەیوەندییەکی زۆر قووڵ لەگەڵ سیستەمەکەدا، وەک شاشەی سەرەکی یان کاتژمێر.
Web apps: the browser is the appبەرنامەکانی وێب: تۆڕگەڕ خۆی ئەپەکەیە
A program that runs on a and that people use through a , with nothing to install. Online shops and webmail are web applications.
بەرنامەیەکە لەسەر کار دەکات و خەڵک لە ڕێگەی بەکاری دەهێنن، بەبێ ئەوەی هیچ شتێک دابمەزرێنن. فرۆشگا ئۆنلاینەکان و ئیمەیڵی سەر وێب نموونەی ئەم جۆرە بەرنامانەن.
A browser-based app, or web app, is opened in the phone's . It lives on a and reaches the phone through the . Nothing is installed from a store: you open it with an address (a ), and every user always gets the newest version.
سەر بە ، یان ، لەنێو مۆبایلەکەدا دەکرێتەوە. لەسەر دەژی و لە ڕێگەی دەگاتە مۆبایلەکە. هیچ شتێک لە فرۆشگاوە جێگیر ناکرێت: بە ناونیشانێک () دەیکەیتەوە و هەموو هەمیشە نوێترین وەشان وەردەگرێت.
Web apps are built with (the structure; a ), (the look; a style-sheet language) and (the behaviour). The lecture also names XML, a markup language mostly used to describe data.
بە (پێکهاتە؛ )، (شێوە؛ زمانی شێوەدان) و (ڕەفتار) دروست دەکرێن. وانەکە ناوی XMLـیش دەهێنێت، ترە کە زیاتر بۆ وەسفکردنی بەکار دێت.
A responsive web app is one site whose layout fits the screen: one column on a phone, two or three on a laptop. It is still a web page in the browser. See the web browser and online and offline applications.
بە یەک کە ڕێکخستنەکەی لەگەڵ شاشەکە دەگونجێت: یەک ستوون لەسەر مۆبایل، دوو یان سێ ستوون لەسەر لاپتۆپ. هێشتا لەنێو . تۆڕگەڕ و بەرنامە ئۆنلاینەکان و بەرنامە ئۆفلاینەکان ببینە.
Web apps: the browser is the appبەرنامەکانی وێب: تۆڕگەڕ خۆی ئەپەکەیە
Progressive web apps (PWAs)ئەپە وێبییە پێشکەوتووەکان (PWA)
A that a phone can install like an app: it gets an on the home screen, opens in its own window and can work offline. It is one website for every .
کە مۆبایل دەتوانێت وەک ئەپێک بکات: لەسەر شاشەی سەرەکی وەردەگرێت، لە پەنجەرەی خۆیدا دەکرێتەوە و دەتوانێت بەبێ کار بکات. یەک بۆ هەموو .
A progressive web app is a normal web app with two extra pieces that let it behave like an installed app:
ئاساییە بە دوو پارچەی زیادەوە کە وای لێ دەکەن وەک جێگیرکراو ڕەفتار بکات:
- a small file called the web app manifest: the app's name, icon, colours and start page. With it, the browser can install the app: it gets an icon on the home screen and opens in its own window, without the address bar;
- a service worker: a small JavaScript program that the browser runs in the background. It keeps copies of the app's files, so the app can open without the internet, and it can receive push notifications.
- فایلێکی بچووک بە ناوی web app manifest: ناو، ، ڕەنگەکان و لاپەڕەی دەستپێکی . بەم فایلە دەتوانێت جێگیر بکات: لەسەر شاشەی سەرەکی وەردەگرێت و لە پەنجەرەی خۆیدا دەکرێتەوە، بەبێ ؛
- service worker: بچووکی JavaScriptـە کە لە پشتەوە کارای دەکات. کۆپیی هەڵدەگرێت، بۆیە بەبێ دەکرێتەوە و دەتوانێت وەربگرێت.
It is still one codebase for every platform, shared by a link, with no store needed (some stores accept PWAs too). Progressive means it works for everyone as a website and gets better where the browser supports more. The limit: some phone features work only in some browsers and operating systems.
هێشتا یەک بۆ هەموو ، بە بڵاو دەکرێتەوە و پێویست نییە (هەندێک فرۆشگاش PWA وەردەگرن). پێشکەوتوو واتە بۆ هەمووان وەک کار دەکات و لەو شوێنانەی پشتگیریی زیاتر دەکات باشتر دەبێت. سنوورەکەی: هەندێک تایبەتمەندیی مۆبایل تەنها لە هەندێک و کار دەکەن.
What a progressive web app is: a website with a manifest and a service worker that can be installed and work offline.
چییە: لەگەڵ manifest و service worker، کە دەکرێت وەک جێگیر بکرێت و بەبێ کار بکات.
Watch 0:00-2:03, the 'What is a PWA' part; the rest builds one in code.
لە 0:00 تا 2:03 سەیر بکە، بەشی What is a PWA؛ باقی ڤیدیۆکە یەکێک بە کۆد دروست دەکات.
Hybrid apps: a web page in an app shellئەپە تێکەڵەکان: لاپەڕەتۆڕ لەنێو بەرگێکی ڕەسەندا
An written with web technologies (, , ) and packed inside a native shell. It shows its pages in a , so one runs on several . Apache Cordova and Ionic make hybrid apps.
کە بە تەکنەلۆژیاکانی وێب (، ، ) نووسراوە و لە ناو بەرگێکی ڕەسەندا پێچراوەتەوە. لاپەڕەکانی لە پیشان دەدات، بۆیە یەک لەسەر چەند کار دەکات. Apache Cordova و Ionic ئەپی تێکەڵ دروست دەکەن.
Hybrid apps are like native apps in one way: they are installed and run on the device. But they are written with web technologies: HTML5, CSS and JavaScript.
لە یەک ڕووەوە وەک : لەسەر ئامێرەکە جێگیر دەکرێن و کار دەکەن. بەڵام بە تەکنەلۆجیاکانی وێب دەنووسرێن: HTML5، CSS و JavaScript.
They run inside a native container (a small native app that acts as a shell). The container shows the pages in a : the phone's browser engine placed inside the app, with no address bar and no browser buttons. So the app makes use of the browser engine, but not the browser app, to draw the HTML and run the JavaScript on the phone itself.
لەنێو بەرگێکی ڕەسەندا کار دەکەن ( ڕەسەنی بچووک کە وەک قاپ کار دەکات). ئەم بەرگە لاپەڕەکان لەنێو پیشان دەدات: بزوێنەری مۆبایلەکە کە خراوەتە نێو ، بەبێ و . کەواتە بزوێنەری بەکار دەهێنێت، نەک ، بۆ ئەوەی HTML بکێشێت و JavaScript لەسەر خودی مۆبایلەکە کارا بکات.
Hybrid apps: a web page in an app shellئەپە تێکەڵەکان: لاپەڕەتۆڕ لەنێو بەرگێکی ڕەسەندا
Plugins, tools and trade-offsپاشکۆکان، ئامرازەکان و قازانج و زیانەکان
Web pages alone cannot reach the camera or the contacts. Hybrid tools add : small pieces of native code that JavaScript can call, a bridge to the camera, GPS, files and notifications. Because the web code is the same everywhere, the same app works on different mobile operating systems: Android, iOS and, in the past, Windows Phone.
بە تەنها ناتوانن بگەنە کامێرا یان ژمارە تەلەفۆنەکان. ئامرازەکانی زیاد دەکەن: پارچە کۆدی ڕەسەنی بچووک کە JavaScript دەتوانێت بانگیان بکات، پردێک بەرەو کامێرا، ، و . چونکە کۆدی وێبەکە لە هەموو شوێنێک هەمانە، هەمان لەسەر جیاواز کار دەکات: Android، iOS و لە ڕابردوودا Windows Phone.
Well-known hybrid tools: Apache Cordova (it began as PhoneGap; Adobe kept the PhoneGap name for its own version and ended it, with the PhoneGap Build service, in 2020) and Ionic, built on the same WebView idea (today usually with Ionic's own runtime, Capacitor). Hybrid apps are easy for web developers and need one codebase, but the screen is a web page, so the app may feel less like the platform and can be slower than a native one.
ئامرازە ناسراوەکانی : Apache Cordova (بە ناوی PhoneGap دەستی پێکرد؛ Adobe ناوی PhoneGapـی بۆ خۆی هێشتەوە و لە ٢٠٢٠ لەگەڵ خزمەتگوزاریی PhoneGap Build کۆتایی پێ هێنا) و Ionic کە لەسەر هەمان بیرۆکەی دروست کراوە (ئەمڕۆ زۆرجار لەگەڵ Capacitor، ژینگەی جێبەجێکردنی خودی Ionic). بۆ وێب ئاسانن و یەک دەوێت، بەڵام شاشەکە ، بۆیە لەوانەیە کەمتر لە بچێت و لە خاوتر بێت.
Cross-platform frameworks: one codebase, real appsفرەیموۆرکەکانی فرەسەکۆ: یەک بنکەی کۆد، ئەپەکانی ڕاستەقینە
A cross-platform lets you write one codebase and build a real, installable app for each platform. The screen is not a web page. The frameworks differ in one big way: who draws the screen.
ڕێگەت پێ دەدات یەک بنووسیت و بۆ هەر ڕاستەقینە و جێگیرکراو دروست بکەیت. شاشەکە نییە. لە یەک خاڵی گەورەدا جیاوازن: کێ شاشەکە دەکێشێت.
| Framework | Languageزمان | Who draws the screenکێ شاشەکە دەکێشێت | Platforms |
|---|---|---|---|
| Flutter (Google) | Dart | Its own engine paints every widget. Release builds are compiled ahead of time to machine code.بزوێنەری خۆی هەموو دەکێشێت. بڵاوکردنەوە پێشوەختە بۆ کۆمپایل دەکرێت. | Android, iOS, web, Windows, macOS, LinuxAndroid، iOS، وێب، Windows، macOS، Linux |
| React Native | JavaScript or TypeScript, with ReactJavaScript یان TypeScript، لەگەڵ React | Each component becomes the platform's real view (an Android View or an iOS UIView).هەر پێکهاتەیەک دەبێتە پێکهاتەیەکی ڕاستەقینەی ڕووکاری (Viewـی Android یان UIViewـی iOS). | Android, iOSAndroid، iOS |
| .NET MAUI (Microsoft) | C# and XAMLC# و XAML | Uses the platform's native controls. Android apps are compiled at launch; iOS apps fully ahead of time.کۆنترۆڵە ڕەسەنەکانی بەکار دەهێنێت. Android لە کاتی کردنەوەدا کۆمپایل دەکرێن؛ iOS بە تەواوی پێشوەختە. | Android, iOS, macOS, Windows (not Linux)Android، iOS، macOS، Windows (نەک Linux) |
| Kotlin Multiplatform | Kotlinزمانی Kotlin | Shares the logic. The screens stay native, or are shared with Compose Multiplatform.لۆژیکەکە هاوبەش دەکات. شاشەکان ڕەسەن دەمێننەوە، یان بە Compose Multiplatform هاوبەش دەکرێن. | Android, iOS, desktop, web, serverAndroid، iOS، دێسکتۆپ، وێب، |
| NativeScript | JavaScript or TypeScriptJavaScript یان TypeScript | The platform's own UI, with direct access to native APIs.ڕووکاری خودی ، لەگەڵ دەستڕاگەیشتنی ڕاستەوخۆ بە ڕەسەنەکان. | Android, iOSAndroid، iOS |
One codebase still gives a separate package for each platform: one for Google Play, one for Apple's App Store.
یەک هێشتا پاکێجێکی جیا بۆ هەر دروست دەکات: یەکێک بۆ Google Play و یەکێک بۆ App Storeـی Apple.
Native or cross-platform? Swift and Kotlin for one platform versus React Native and Flutter for both, with the trade-offs.
یان ؟ Swift و Kotlin بۆ یەک ، بەرامبەر React Native و بۆ هەردووکیان، لەگەڵ قازانج و زیانی هەریەکەیان.
Watch 0:08-4:08, 'Native vs Cross-platform Development'.
لە 0:08 تا 4:08 سەیر بکە، بەشی Native vs Cross-platform Development.
Cross-platform frameworks: one codebase, real appsفرەیموۆرکەکانی فرەسەکۆ: یەک بنکەی کۆد، ئەپەکانی ڕاستەقینە
Who draws the button?کێ دوگمەکە دەکێشێت؟
Picture one button with the word "Hello" on it. The user sees a button every time, but four different things can draw it. Watch the animation:
وێنا بکە کە وشەی «Hello»ی لەسەرە. هەموو جارێک دەبینێت، بەڵام چوار شتی جیاواز دەتوانن بیکێشن. سەیری جووڵەوێنەکە بکە:
- Native: the platform's own button.
- React Native, .NET MAUI, NativeScript: shared code asks the platform for its own button.
- Flutter: its own engine paints the button, pixel by pixel. That is why a Flutter app can look the same on Android and iOS.
- Hybrid and web apps: a browser engine draws an HTML button.
- ڕەسەن: خودی .
- React Native، .NET MAUI، NativeScript: کۆدی هاوبەش داوای خودی دەکات.
- : بزوێنەری خۆی دەکێشێت، بە . لەبەر ئەوە دەتوانێت لەسەر Android و iOS وەک یەک دەربکەوێت.
- و : بزوێنەری HTML دەکێشێت.
The whole mapنەخشەی تەواو
Put together, the lecture's tree of mobile development technologies becomes this corrected map. Each branch is one road from the start of the lesson.
کاتێک کۆ دەکرێنەوە، دارەکەی وانەکە بۆ تەکنەلۆجیاکانی پەرەپێدانی مۆبایل دەبێتە ئەم نەخشە ڕاستکراوەیە. هەر لقێک یەکێکە لەو ڕێگایانەی سەرەتای وانەکە.
How to chooseچۆن هەڵدەبژێریت
No road is best for every app. This table compares them for the usual case: one app for Android and iOS.
هیچ ڕێگایەک بۆ هەموو باشترین نییە. ئەم خشتەیە بۆ حاڵەتی ئاسایی بەراوردیان دەکات: یەک بۆ Android و iOS.
| Comparedبەراورد | Nativeڕەسەن | Cross-platform framework | Hybrid (WebView) | Web app / PWA / PWA |
|---|---|---|---|---|
| Codebases for Android + iOS بۆ Android + iOS | 2 | 1 | 1 | 1 |
| How users get it چۆن دەستیان دەکەوێت | App store | App store | App store | A link; a PWA can be installed from the browser؛ PWA لە جێگیر دەکرێت |
| Look and feelشێوە و هەست | The platform's ownهی خودی | Native controls or the framework's own designکۆنترۆڵی ڕەسەن یان دیزاینی خودی | A web page | A web page |
| Phone featuresتایبەتمەندییەکانی مۆبایل | All, and new ones firstهەمووی، نوێکان یەکەم جار | Almost all, through packages and pluginsنزیکەی هەمووی، لە ڕێگەی پاکێج و | Through pluginsلە ڕێگەی | Fewer; depends on the browserکەمتر؛ بەندە بە |
| Speed for heavy screensخێرایی بۆ شاشەی قورس | Bestباشترین | Close to nativeنزیک لە ڕەسەن | Lowerکەمتر | Lowerکەمتر |
| Works offlineبەبێ کار دەکات | Yesبەڵێ | Yesبەڵێ | Yesبەڵێ | A PWA, with a service workerPWA، بە service worker |
How to chooseچۆن هەڵدەبژێریت
Five questions before you chooseپێنج پرسیار پێش هەڵبژاردن
- Usersبەکارهێنەران
Who will use it, on which phones? Must it also work on laptops?
کێ بەکاری دەهێنێت و لەسەر چ مۆبایلێک؟ دەبێت لەسەر لاپتۆپیش کار بکات؟
- Featuresتایبەتمەندییەکان
Which phone features does it need: camera, GPS, Bluetooth, notifications, widgets?
کام تایبەتمەندیی مۆبایلی پێویستە: کامێرا، ، ، ، ؟
- Team and budgetتیم و بودجە
Can you pay for two codebases, or do you have one developer?
دەتوانیت پارەی دوو بدەیت، یان یەک هەیە؟
- Storeفرۆشگا
Must people find it in an app store, or is a link enough?
دەبێت خەڵک لە بیدۆزنەوە، یان بەسە؟
- Skillsشارەزایی
Does the team already know web languages, Dart, Kotlin or Swift?
ئایا تیمەکە پێشتر زمانەکانی وێب، ، Kotlin یان Swift دەزانێت؟
For Hana's bakery, with one developer and simple screens, a cross-platform framework or a PWA is enough. A 3D game that needs the newest iPhone features on launch day would go native or use a game engine.
بۆ نانەواخانەکەی هانا، کە یەک و شاشەی سادەی هەیە، یان PWA بەسە. یارییەکی سێ‌ڕەهەندی کە لە یەکەم ڕۆژدا نوێترین تایبەتمەندییەکانی iPhoneـی پێویست بێت، ڕەسەن دەبێت یان بزوێنەرێکی یاری بەکار دەهێنێت.
Common mistakesهەڵە باوەکان
| Mistakeهەڵە | What is trueڕاستییەکە |
|---|---|
| "Native means pre-installed."«ڕەسەن واتە پێشوەختە جێگیرکراو.» | Native means built for one platform with its own language and tools. Downloaded apps can be native.ڕەسەن واتە بۆ یەک دروست کراوە بە زمان و ئامرازەکانی خۆی. دابەزێنراویش دەکرێت ڕەسەن بن. |
| "Flutter apps are WebView hybrids."« .» | Flutter compiles to machine code and its engine draws the widgets. بۆ کۆمپایل دەکرێت و بزوێنەرەکەی دەکێشێت. |
| "CSS is a markup language."«CSS .» | CSS is a style-sheet language; HTML is the markup.CSS زمانی شێوەدانە؛ HTML نیشانەکردنەکەیە. |
| "A hybrid app runs in the browser app."« لەنێو کار دەکات.» | It is its own installed app; a WebView inside it uses the browser engine. جێگیرکراوی سەربەخۆیە؛ لەنێویدا بزوێنەری بەکار دەهێنێت. |
| "A web app can never work offline."« هەرگیز بەبێ کار ناکات.» | A PWA with a service worker can open and work without the internet.PWA بە service workerـەوە دەتوانێت بەبێ بکرێتەوە و کار بکات. |
| "One codebase means one app file for all phones."«یەک واتە یەک بۆ هەموو مۆبایلەکان.» | The same code is built into a separate package for each platform.هەمان کۆد بۆ هەر دەکرێتە پاکێجێکی جیا. |
| "Xamarin is a good choice for a new app."«Xamarin هەڵبژاردنێکی باشە بۆ نوێ.» | Its support ended on 1 May 2024. Use .NET MAUI or another current framework.پشتگیرییەکەی لە ١ی ئایاری ٢٠٢٤ کۆتایی هات. .NET MAUI یان تری ئێستا بەکاربهێنە. |
Exercisesڕاهێنانەکان
Say which kind of app each one is: (a) the Calculator that came with an Android phone, written in Kotlin; (b) a news website that you open with a link and that changes its layout for the phone; (c) a shop app made with Ionic; (d) a taxi app written once in Flutter for Android and iOS; (e) a school timetable site that you can "Add to Home Screen" and that opens without the internet.
بڵێ هەر یەکەیان چ جۆرە : (أ) ئەو لەگەڵ مۆبایلێکی Androidـدا هاتووە و بە Kotlin نووسراوە؛ (ب) هەواڵ کە بە دەیکەیتەوە و ڕێکخستنەکەی بۆ مۆبایل دەگۆڕێت؛ (ج) فرۆشگا کە بە Ionic دروست کراوە؛ (د) تەکسی کە یەک جار بە بۆ Android و iOS نووسراوە؛ (هـ) خشتەی وانەکانی قوتابخانە کە دەتوانیت «زیادی بکەیت بۆ شاشەی سەرەکی» و بەبێ دەکرێتەوە.
Show answerوەڵامەکە پیشان بدە
- (a) Native: one platform, Kotlin.
- (b) Responsive web app.
- (c) Hybrid (WebView) app.
- (d) Cross-platform framework that draws its own UI.
- (e) Progressive web app: a manifest for the icon, a service worker for offline.
- (أ) ڕەسەن: یەک ، Kotlin.
- (ب) بە .
- (ج) ().
- (د) کە هەموو شتێکی سەر شاشەکە خۆی دەکێشێت.
- (هـ) : manifest بۆ ، service worker بۆ کارکردن بەبێ .
The course's technology tree puts Flutter next to PhoneGap and Ionic under "hybrid: WebView (container)". Explain in two or three sentences why this is wrong, and where Flutter belongs.
دارە تەکنەلۆجییەکەی کۆرسەکە لە تەنیشت PhoneGap و Ionic لە ژێر «تێکەڵ: (قاپ)» دادەنێت. بە دوو یان سێ ڕستە ڕوونی بکەرەوە بۆچی ئەمە هەڵەیە و شوێنی لە کوێیە.
Hintئاماژە
Ask: who draws the screen, and is it a web page?
بپرسە: کێ شاشەکە دەکێشێت و ئایا ؟
Show answerوەڵامەکە پیشان بدە
PhoneGap (Cordova) and Ionic show web pages (HTML, CSS, JavaScript) inside a WebView. Flutter does not use a WebView: its own engine draws every widget, and the Dart code is compiled to machine code. So Flutter belongs under cross-platform frameworks, in the "own rendering" group.
PhoneGap (Cordova) و Ionic (HTML، CSS، JavaScript) لەنێو پیشان دەدەن. بەکار ناهێنێت: بزوێنەری خۆی هەموو دەکێشێت و کۆدی بۆ کۆمپایل دەکرێت. کەواتە سەر بە ، لە گرووپی « خۆی».
Exercisesڕاهێنانەکان
More exercisesڕاهێنانی زیاتر
Choose a road and give one reason: (a) a university notice board that every student must reach cheaply, on phones and laptops; (b) an augmented-reality app that must use a brand-new iPhone feature on the day it is released; (c) a small company with one developer that needs a delivery app for Android and iOS.
ڕێگایەک هەڵبژێرە و یەک هۆکار بدە: (أ) تەختەی ئاگاداریی زانکۆ کە هەموو قوتابییەک دەبێت بە هەرزانی پێی بگات، لەسەر مۆبایل و لاپتۆپ؛ (ب) (AR) کە دەبێت هەر لە ڕۆژی دەرچوونیدا تایبەتمەندییەکی نوێی iPhone بەکاربهێنێت؛ (ج) کۆمپانیایەکی بچووک بە یەک کە گەیاندنی بۆ Android و iOS پێویستە.
Show answerوەڵامەکە پیشان بدە
- (a) A web app or PWA: one site for phones and laptops, shared by a link, no store.
- (b) Native (Swift): new platform features reach the native tools first.
- (c) A cross-platform framework: one codebase for both platforms with real access to GPS and notifications.
- (أ) یان PWA: یەک بۆ مۆبایل و لاپتۆپ، بە بڵاو دەکرێتەوە، فرۆشگای ناوێت.
- (ب) ڕەسەن (Swift): تایبەتمەندییە نوێکانی یەکەم جار دەگەنە ئامرازە ڕەسەنەکان.
- (ج) : یەک بۆ هەردوو لەگەڵ دەستڕاگەیشتنی ڕاستەقینە بە و .
The lecture lists three types of mobile app. Name them, say in one sentence how each one runs, and give one example of each.
وانەکە سێ جۆر مۆبایل دەژمێرێت. ناویان بنووسە، بە یەک ڕستە بڵێ هەر یەکەیان چۆن کار دەکات و بۆ هەر یەکەیان نموونەیەک بدە.
Show answerوەڵامەکە پیشان بدە
- Native: built for one platform with its own tools and runs straight on the operating system. Example: the phone's Calendar.
- Browser-based (web): lives on a server and is opened in the browser through the internet. Example: a news site.
- Hybrid: web code packed in a native container and drawn by a WebView. Example: an app made with Cordova or Ionic.
- ڕەسەن: بۆ یەک بە ئامرازەکانی خۆی دروست کراوە و ڕاستەوخۆ لەسەر کار دەکات. نموونە: ڕۆژژمێری مۆبایلەکە.
- سەر بە (وێب): لەسەر دەژی و لە ڕێگەی لە دەکرێتەوە. نموونە: هەواڵ.
- تێکەڵ: کۆدی وێب کە خراوەتە نێو بەرگێکی ڕەسەنەوە و دەیکێشێت. نموونە: کە بە Cordova یان Ionic دروست کرابێت.
Summaryپوختە
- A native app is built for one platform with its own language and SDK: Kotlin or Java for Android, Swift or Objective-C for iOS. Best access and speed; one codebase per platform.
- A web app lives on a server and runs in the browser (HTML, CSS, JavaScript). A PWA adds a manifest and a service worker, so it can be installed and work offline.
- A hybrid app is a web page inside a native shell, drawn by a WebView, with plugins as a bridge to the phone (Cordova, Ionic).
- Cross-platform frameworks give one codebase and real apps: React Native, .NET MAUI and NativeScript use native controls; Flutter draws its own widgets; Kotlin Multiplatform shares the logic.
- Corrections: native is not "pre-installed"; CSS is not markup; Flutter is not a WebView hybrid; Xamarin ended on 1 May 2024.
- بۆ یەک بە زمان و خۆی دروست دەکرێت: Kotlin یان بۆ Android، Swift یان Objective-C بۆ iOS. باشترین دەستڕاگەیشتن و خێرایی؛ بۆ هەر .
- لەسەر دەژی و لە کار دەکات (HTML، CSS، JavaScript). PWA manifest و service worker زیاد دەکات، بۆیە جێگیر دەکرێت و بەبێ کار دەکات.
- لەنێو بەرگێکی ڕەسەندا، دەیکێشێت و پردن بەرەو مۆبایلەکە (Cordova، Ionic).
- یەک و ڕاستەقینە دەدەن: React Native، .NET MAUI و NativeScript کۆنترۆڵی ڕەسەن بەکار دەهێنن؛ خۆی دەکێشێت؛ Kotlin Multiplatform لۆژیکەکە هاوبەش دەکات.
- ڕاستکردنەوەکان: ڕەسەن واتای «پێشوەختە جێگیرکراو» نییە؛ CSS نییە؛ نییە؛ Xamarin لە ١ی ئایاری ٢٠٢٤ کۆتایی هات.
Why can one Flutter app look the same on Android and iOS?بۆچی یەک ئەپێکی Flutter دەتوانێت لەسەر Android و iOS وەک یەک دەربکەوێت؟
Because Flutter's engine draws every widget itself instead of asking each platform for its own controls.
چونکە بزوێنەری هەموو خۆی دەکێشێت لە جیاتی ئەوەی داوای کۆنترۆڵەکانی هەر بکات.
What two pieces turn a web app into a PWA?کام دوو پارچە بەرنامەیەکی وێب دەکەنە PWA؟
A web app manifest (name, icon, start page) and a service worker (offline copies, background work, notifications).
web app manifest (ناو، ، لاپەڕەی دەستپێک) و service worker (کۆپیی بێ ، کاری پشتەوە، ).
Name one strength and one cost of hybrid apps.یەک خاڵی بەهێز و یەک تێچووی ئەپە تێکەڵەکان بڵێ.
Strength: one codebase in web languages. Cost: the screen is a web page, so it can feel less native and be slower.
خاڵی بەهێز: یەک بە زمانەکانی وێب. تێچوو: شاشەکە ، بۆیە لەوانەیە کەمتر ڕەسەن هەست بکرێت و خاوتر بێت.
Lesson complete!وانەکە تەواو بوو!
Well done. Review the key terms, then go on to the next lesson.دەستخۆش. سەیرێکی زاراوە سەرەکییەکان بکەرەوە، پاشان بڕۆ بۆ وانەی داهاتوو.
Key termsزاراوە سەرەکییەکان
Synchronous and Asynchronous Workکاری هاوکات و ناهاوکات
Related lecturesوانە پەیوەندیدارەکان
References and further readingسەرچاوەکان و خوێندنەوەی زیاتر
- MDN: Progressive web apps
- MDN: What is a progressive web app?
- Flutter architectural overview
- React Native: Core Components and Native Components
- Microsoft Learn: What is .NET MAUI?
- .NET: Xamarin official support policy
- Kotlin Multiplatform
- NativeScript
- Wikipedia: Apache Cordova
- Android Developers: Android's Kotlin-first approach
- Android Open Source Project: Android runtime (ART)
- Apple Developer: Swift
- Android Open Source Project: Configure ART (AOT, JIT and profile-guided compilation)
- Capacitor documentation (Ionic's native runtime)
This lecture is a first edition. The Kurdish text and terminology are waiting for review by Kurdish IT teachers.ئەم وانەیە چاپی یەکەمە. دەقە کوردییەکە و زاراوەکانی چاوەڕێی پێداچوونەوەی مامۆستایانی کوردی بواری IT ن.