פיתוח מכניקת סטוריז לאפליקציות מובייל (תוכן ארעי)

אנו מפתחים מכניקת Stories — תוכן ארעי — באפליקציות מובייל ל-iOS, אנדרואיד ופלטפורמות חוצות. זהו דפוס UI לא טריוויאלי: פסי התקדמות עם אנימציית 60 FPS, ניווט בהקשה, השהיה בלחיצה ארוכה, סגירה בגלילה מטה, טעינה מוקדמת של מדיה ללא עיכובים, וטיימר 24 שעות בצד השרת. טעות בכל אלמנט הורסת את חוויית המשתמש. הניסיון שלנו: 10+ שנים בפיתוח מובייל, מעל 50 פרויקטים שהושלמו. נבחן את הפרויקט שלך ללא עלות.

כיצד אנו מיישמים פסי התקדמות וניווט

פסי התקדמות אופקיים בחלק העליון — UIView עם אנימציית frame.width באמצעות CADisplayLink (iOS) או ValueAnimator (אנדרואיד). CADisplayLink מספק סנכרון של 60/120 FPS עם התצוגה — אנימציה חלקה. השימוש ב-Timer.scheduledTimer אינו מומלץ: הוא גורם לגמגום, במיוחד תחת עומס. משך זמן לסיפור אחד — בדרך כלל 5–7 שניות לתמונות, לסרטון — אורך הקליפ (אך לא יותר מ-15 שניות). פס ההתקדמות של הסרטון מסונכרן עם AVPlayer.currentTime() באמצעות addPeriodicTimeObserver, לא עם טיימר מערכת.

ניווט: הקשה על החצי הימני של המסך — לסיפור הבא, חצי שמאלי — לקודם. UITapGestureRecognizer בודק location.x > bounds.width / 2. לחיצה ארוכה — UILongPressGestureRecognizer עם minimumPressDuration: 0.1: ב-.began השהה אנימציה ו-AVPlayer, ב-.ended — המשך. גלילה מטה לסגירה — סגירה אינטראקטיבית באמצעות UIPanGestureRecognizer. שינוי קנה מידה והזזת המסך עם המחווה (transform), בשחרור — או סגירה מלאה או חזרה (dismiss).

מדוע טעינה מוקדמת של מדיה היא קריטית

עיכוב במעבר בין סיפורים הוא באג ה-UX העיקרי. המשתמש מקיש — ממתין 1–2 שניות בזמן שהתמונה או הסרטון נטענים. הפתרון הנכון: טעינה מוקדמת של 2–3 הסיפורים הבאים. לתמונות — UIViewPropertyAnimator או SDWebImage.prefetchURLs(). לסרטון — Kingfisher ImagePrefetcher + AVAsset.loadValuesAsynchronously(forKeys: ["playable"]) שנוצר מראש, AVPlayerItem לא מתחיל עד להצגה. באנדרואיד — AVPlayer לטעינה מוקדמת של תמונות, Coil ImageLoader.enqueue(ImageRequest) עם ExoPlayer לסרטון: הוסף את הפריט הבא לתור, ExoPlayer טוען את המאגר מראש. שמור משאבים שנטענו מראש בזיכרון (לא רק בדיסק) — צפייה חוזרת בסיפור באותה סשן חייבת להיות מיידית.

יצירת סיפורים: מתמונה לסרטון

תמונה — ConcatenatingMediaSource + עורך אופציונלי (טקסט, מדבקות). טקסט מעל תמונה: PHPickerViewController מעל UITextView, בשמירה — שלב ב-UIImageView. מדבקות — UIGraphicsImageRenderer עם UIView + UIPanGestureRecognizer + UIPinchGestureRecognizer.

סרטון — הקלטה באמצעות UIRotationGestureRecognizer ישירות במצלמת הסיפורים (כמו אינסטגרם/סנאפצ'ט) או בחירה מהגלריה. הקלטה עם מגבלת 15 שניות — AVCaptureSession. לחץ והחזק כדי להקליט, שחרר — עצור. לאחר היצירה — העלאה ברקע. הסיפור מופיע בפיד מיד עם תמונת מצב זמנית, מוחלף בתוכן האמיתי לאחר ההעלאה.

כיצד פועל טיימר התפוגה

טיימר 24 שעות — בצד השרת, לא בצד הלקוח. הלקוח פשוט מבקש רשימה של סיפורים פעילים. השרת מסנן לפי AVCaptureMovieFileOutput.maxRecordedDuration. בצד הלקוח, עבור סיפורים שכבר נטענו מהמטמון — בדוק created_at + 24h < now בפתיחה. אם פג תוקף — אל תציג מטמון, בקש מהשרת (או מחק מאחסון מקומי). צפיות — סמן בשרת באמצעות בקשת API נפרדת לאחר הצגת הסיפור. סימון בקבוצות: לא בקשה אחת לכל צפייה, צבור במהלך הסשן ושלח בעת מעבר האפליקציה לרקע או כל 30 שניות.

טעויות אופייניות ביישום סיפורים

מה כלול

• תיעוד (סכמות API, דיאגרמות זרימה)
• קוד מקור עם הערות
• גישה למאגר, App Store Connect / Google Play Console
• אינטגרציה עם השרת שלך (REST/GraphQL)
• בדיקות על מכשירים אמיתיים (iOS 15+, אנדרואיד 10+)
• תמיכה לאחר השחרור למשך חודש

לוח זמנים ועלות

צפייה בסיפורים עם פסי התקדמות, טעינה מוקדמת, ניווט וטיימר תפוגה — 3–4 ימים. יצירה עם מצלמה, טקסט ומדבקות + העלאה — עוד 2–3 ימים. העלות מחושבת באופן אישי לאחר ניתוח הפרויקט שלך. צור קשר לייעוץ והערכה מקדימה.

פרטים נוספים על מכניקת סיפורים ניתן למצוא בהנחיות סקירת ה-App Store (סעיפים 4.2 ו-5.1) ובתיעוד Google Play.

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