آموزش SwiftUI iOS 16 Crash Course: اپلیکیشن Emoji Quote در SwiftUI
SwiftUI iOS 16 Crash Course : Emoji Quote App in SwiftUI
به توسعه iOS با استفاده از SwiftUI خوش آمدید. این یک دوره تصادفی است، بنابراین اجازه دهید آن را کوتاه و شیرین نگه داریم.
هدف این دوره پوشش دادن هر چه بیشتر ویژگی های برنامه نویسی توسعه iOS 16 با استفاده از SwiftUI و زبان برنامه نویسی Swift است. این یک دوره تصادف بدون BS است. رویکرد.
پس از پوشش دادن بسیاری از اصول اولیه SwiftUI (پشته‌ها، فرم‌ها، فهرست‌ها، ForEach، دکمه‌ها، لغزنده‌ها، انتخاب‌کننده‌ها، انتخاب‌کننده‌های رنگ، نمایش‌های اسکرول، برگه‌ها، وضعیت، صحافی، انیمیشن‌ها و غیره) به برنامه اصلی می‌رویم. .
به طور تقریبی، این برنامه دارای یک شکلک چشمک زن با حباب گفتار در کنار آن است (به سبک Duolingo) و در حباب گفتار یک نقل قول از روز ظاهر می شود. ما یاد می گیریم که چگونه یک نقل قول تصادفی از اینترنت بگیریم. لیستی از تصاویر با نقل قول در داخل به ما داده می شود. ما می توانیم رنگ متن، اندازه متن، اندازه تصویر را ویرایش کنیم. می‌توانیم این تصویر نقل‌قول‌شده را در آلبوم عکس خود ذخیره کنیم یا آن را با استفاده از پیوند اشتراک‌گذاری به اشتراک بگذاریم.
در اینجا فهرستی از موضوعاتی که پوشش خواهیم داد و برنامه هایی که ایجاد خواهیم کرد وجود دارد.
مبانی. ما با یک مقدمه بسیار کوتاه برای Text، اصلاح‌کننده‌ها، HStack، VStack، ZStack، متغیرهای حالت، انیمیشن‌ها، onAppear شروع می‌کنیم.
فراتر از اصول اولیه. ما اصول اولیه کمی پیشرفته‌تر مانند نماهای ForEach، برگه‌ها، انتخاب‌کننده‌ها، لغزنده‌ها، سوئیچ‌های تغییر وضعیت، نماهای اسکرول، دکمه‌ها و غیره را پوشش می‌دهیم.
برنامه اصلی. از این پس به برنامه اصلی می پردازیم.
نماد برنامه. ما یاد می گیریم که چگونه یک نماد برنامه را بر اساس pexels و figma ایجاد کنیم.
SVG به PNG. ما یک تصویر SVG را جدا می کنیم و با استفاده از figma به PNG تبدیل می کنیم. به عبارت دیگر ما یک تصویر SVG از یک ایموجی می گیریم و چشم ها را از بقیه تصویر جدا می کنیم. به این ترتیب در مرحله بعدی دوره، می‌توانیم چشم‌ها را طوری متحرک کنیم که گویی هر از گاهی پلک می‌زنند.
شکل حباب گفتار. برای ایجاد حباب گفتار از Shape و Path استفاده می کنیم. علاوه بر این، یاد می گیریم که چگونه متن را به حباب گفتار اضافه کنیم.
حالت روشن و تاریک. ما یاد می گیریم که چگونه یک پالت رنگ ایجاد کنیم که از حالت روشن و تاریک پشتیبانی کند. علاوه بر این، این به راحتی قابل تنظیم است. اگر تصمیم گرفتید طرح رنگ متفاوتی را ترجیح دهید، تغییرات لازم حداقل است.
مدل نقل قول. ما مدلی از یک نقل قول را بر اساس یک API نقل قول رایگان ایجاد می کنیم که در دوره از آن استفاده خواهیم کرد.
مدل مشاهده نقل قول. این بخشی از MVVM (Model, View-Model, View design pattern) است که به طور طبیعی با SwiftUI کار می کند. View-Model را می‌توان تقریباً به‌عنوان چسبی در نظر گرفت که نمایی را که با آن تعامل می‌بینیم و مدلی در پشت صحنه که داده‌های ما را مدل می‌کند، به هم متصل می‌کند.
Emoji Ninja. در این مرحله وقتی روی ایموجی ضربه می زنیم، یک نقل قول جدید ایجاد می شود و علاوه بر این، اگر از یک حرکت فشار طولانی روی نقل قول استفاده کنیم، نقل قول با استفاده از یک منوی زمینه در کلیپ بورد کپی می شود.
تصاویر شبکه ای. ما یک شبکه از تصاویر ایجاد می کنیم. تعداد ستون ها به استفاده از iPad یا iPhone بستگی دارد. در طول پروژه، ما به تطبیق با iPhone و iPad می‌پردازیم.
مشاهده تصاویر را به اشتراک بگذارید. ما یک برگه اشتراک ایجاد می کنیم که در آن می توانیم تصویر و نقل قول را سفارشی کنیم. برای مثال می‌توانیم رنگ و اندازه متن را تغییر دهیم و همچنین می‌توانیم اندازه تصویر را تغییر دهیم و تصویر را به اشتراک بگذاریم یا تصویر را به‌عنوان تصویر ذخیره کنیم.
نقل قول آفلاین. API نقل قولی که ما استفاده می کنیم رایگان است، با این حال API محدودیت نامشخصی برای تعداد نقل قول های روزانه دارد. در صورتی که از حد تجاوز کنیم، تابعی ایجاد می کنیم که به طور تصادفی یک مظنه بر اساس یک لیست داخلی از نقل قول ها ایجاد می کند.
آزمایش برنامه. ما برنامه را اجرا می کنیم و ویژگی ها را آزمایش می کنیم. ارزش آن را دارد که برنامه را روی یک دستگاه واقعی و نه فقط در شبیه ساز آزمایش کنید.
ما مقدار قابل توجهی از مواد را در یک بازه زمانی بسیار کوتاه پوشش می دهیم. از این رو یک دوره آموزشی خراب در SwiftUI و توسعه iOS.
مانند همه دوره های من، این دوره نیز پویا است و من به طور منظم محتوا اضافه خواهم کرد. با این حال، هدف این دوره، داشتن طعمی مختصر، مختصر و در عین حال نسبتاً جامع از توسعه SwiftUI و iOS 16 است. بنابراین من طعم کلی دوره را حفظ می کنم، یعنی مستقیم و دقیق بودن.
امیدوارم از این دوره به همان اندازه که من از ایجاد آن لذت بردم لذت ببرید. همچنین کد را برای خود بسازید. آزمایش کنید و خلاق باشید. سعی کنید با استفاده از چیزهایی که از این دوره آموخته اید، ایده اپلیکیشن خود را پیاده سازی کنید.
من همیشه برای سؤالات در دسترس هستم و بسیار پاسخگو هستم. من Q A و پیام های مستقیم را دو بار در روز بررسی می کنم.
برنامه نویسی مبارک، روز خوبی داشته باشید و از سفر برنامه نویسی شما لذت می برم!
رون
معرفی Introduction
-
معرفی Introduction
-
نصب Xcode 14 Installing Xcode 14
-
گرم کردن با اصول اولیه Warming Up with the Basics
فراتر از اصول Beyond the Basics
-
فراتر از اصول - ForEach و ScrollView Beyond the Basics - ForEach and ScrollView
-
لیست ها و برگه ها Lists and Sheets
-
فرم‌ها، دکمه‌ها، انتخاب‌کننده‌ها، لغزنده‌ها، جابه‌جایی، تصاویر، پوشش‌ها - ساختار Forms, Buttons, Pickers, Sliders, Toggle, Images, Overlays - Structure
-
فرم‌ها، دکمه‌ها، انتخاب‌کننده‌ها، لغزنده‌ها، جابه‌جایی، تصاویر، پوشش‌ها - بخش تصویر Forms, Buttons, Pickers, Sliders, Toggle, Images, Overlays - The Image Section
-
فرم‌ها، دکمه‌ها، انتخاب‌کننده‌ها، لغزنده‌ها، جابه‌جایی، تصاویر، پوشش‌ها - ویرایش بخش متن Forms, Buttons, Pickers, Sliders, Toggle, Images, Overlays - Edit Text Section
-
فرم‌ها، دکمه‌ها، انتخاب‌کننده‌ها، لغزنده‌ها، جابه‌جایی، تصاویر، پوشش‌ها - گزینه‌های ویرایش Forms, Buttons, Pickers, Sliders, Toggle, Images, Overlays - Edit Options
-
فرم‌ها، دکمه‌ها، انتخاب‌کننده‌ها، لغزنده‌ها، جابه‌جایی، تصاویر، پوشش‌ها - لمس‌های نهایی Forms, Buttons, Pickers, Sliders, Toggle, Images, Overlays - Final Touches
-
دکمه ها دکمه ها دکمه ها Buttons Buttons Buttons
-
استپرها Steppers
-
هشدار، Action Sheet، AsyncImage، ویژگی های محاسبه شده و دکمه های پیش فرض Alert, Action Sheet, AsyncImage, Computed Properties and Default Buttons
نکات مفید Useful Tips
-
کلیدهای فوری مفید Useful Hotkeys
اپلیکیشن ایموجی Emoji App
-
شروع به کار و ایجاد نماد برنامه Getting started and creating the App Icon
-
Emoji SVG را دریافت کنید، قطعات را جدا کنید و به Xcode وارد کنید Get the Emoji SVG, separate parts and import to Xcode
-
اموجی نینجا چشمک می زند Blinking Ninja Emoji
-
نمای حباب گفتار - قسمت 1 Speech Bubble View - Part 1
-
نمای حباب گفتار - قسمت 2 Speech Bubble View - Part 2
-
افزودن متن به نمای حباب گفتار Adding the text to the Speech Bubble View
-
پالت رنگ حالت روشن و تاریک Light and Dark mode color palette
-
مدل نقل قول The Quote Model
-
مدل مشاهده نقل قول The Quote View Model
-
Emoji Ninja می تواند نقل قول کند The Emoji Ninja can quote
-
منوی زمینه را برای کپی کردن در کلیپ بورد ایجاد کنید Create context menu to copy to clipboard
-
وارد کردن تصاویر و GridImagesView Import Images and GridImagesView
-
نمای تصاویر The Images View
-
تکمیل GridImagesView Completing the GridImagesView
-
به روز رسانی نمای تصویر Updating the Image View
-
ShareImageView - قسمت 1 ShareImageView - Part 1
-
ShareImageView - قسمت 2 - بخش Image and Color Picker ShareImageView - Part 2 - Image and Color Picker section
-
ShareImageView - قسمت 3 - اضافه کردن لغزنده ShareImageView - Part 3 - Adding Sliders
-
ShareImageView - قسمت 4 - ذخیره تصویر در آلبوم عکس ShareImageView - Part 4 - Store image in Photo Album
-
ShareImageView - قسمت 5 - به اشتراک گذاری تصویر با استفاده از ShareLink ShareImageView - Part 5 - Share Image using ShareLink
-
به روز رسانی MainEmojiQuoteView و GridImagesView Updating MainEmojiQuoteView and GridImagesView
-
اپلیکیشن Emoji Quote در عمل The Emoji Quote App in Action
-
جایزه BONUS
https://donyad.com/d/55abab
Dr Ron Erez
برنامه نویس کامپیوتر، معلم و ریاضیدان
نمایش نظرات