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

אנחנו לא באמת צריכים לספר לכם על עכבר העיר נכון? כל הכתבות, הביקורות, ההמלצות והחדשות מעולם הבידור, הבילוי והפנאי במקום אחד. אז עכשיו זה גם במקום אחר – בכיס שלכם. אבל לא רק גרסה סלולרית, הוא גם חכם מספיק לדעת איפה אתם ברגעים אלה ומציג לכם את כל המידע על המקומות שקרובים אליכם.
צוות יעודי של נטקראפט עובד באופן קבוע על אתר עכבר העיר תקופה ארוכה בפיתוח ותחזוקה, לכן טבעי היה שנטקראפט תהיה שותפה לפיתוח האפליקציה. על הפרויקט עבדנו בניצוחו של גלעד כץ מדה מרקר – גל, אביעד על פיתוח סרבר, אני על FED וג'ואי השלים את התמונה עם פיתוח native. אז איך יצא? הורידו כאן או לחצו play על הוידאו (זהירות – מוסיקת פאנק).


איך עשינו את זה?

תאמינו או לא.. התנועה, התגובות לטאץ', הגלילה, המפות, היומן, ההדר והפוטר – הכל HTML CSS JS ! אנשים, יתכן מאוד שזו הבשורה לעתיד הפיתוח לסמארטפונים – לא צריך לדעת Objective C לאייפון או JAVA לאנדרויד ובלאקברי. כל השלושה מריצים webkit mobile. הדפדפן הוא הקרוס פלטפורם האמיתי. כרגע האפליקציה זמינה רק דרך האפפ סטור של אפל אבל בקרוב בדפדפן בגלישה רגילה ואחר כך בוודאי במרקט של אנדרויד.
הנה סקירה של כמה מהפיצ'רים ומעט הסברים מלווים:


  • ספלאש סקרין עד שיסיים את כל הטעינות

  • שימוש ב-CSS3פינות מעוגלות, רקעים כפולים ומעברי צבע

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

  • חיוג בלחיצה ביצוע חיוג טלפוני בלחיצה על קישור

  • מקלדת בדרישה פוקוס על שדה החיפוש מקפיץ את המקלדת עם כיתוב מתאים במקש הפעולה

  • מיקום ומפות שימוש ביכולת geolocation של הדפדפן ואינטגרציה עם מפות waze

  • כפתורי רדיו עם לוק אנד פיל של אייפון. גם זה לגמרי בג'אווהסקריפט..

  • לוח שנה עם לוק אנד פיל של אייפון. זה הכל בג'אווהסקריפט..

  • סקרול פנימי הדר ופוטר קבועים וסקרול פנימי לתוכן

  • טעינה חכמה AJAX לטעינת מידע דינמי ו-animated gifs להצגת חיווי התקדמות

ויש עוד כל כך הרבה – תודו שהיתה פה עשיה :-)
עכבר העיר עוד מתכננים הרבה פיצ'רים חדשים וכיפיים והכל בחינם ובשבילנו אז תבדקו עדכונים באפפ סטור.

קדימה להוריד ולהתמכר! http://itunes.apple.com/il/app/id380098348?mt=8#



18 תגובות לפוסט ”עכבר העיר מובייל – אפליקציית אייפון שכולה בדפדפן“

  1. אני מניח שאם רוב התוכנה כתובה ב-HTML+JS אין שום סיבה שלא תוכלו לייצר גם גרסת אנדרויד נכון?

  2. מהן הסיבות שלא בחרתם ללכת על אפליקציה וובית טהורה שתעבוד דרך הדפדפן?

  3. מקווים לקבל אור ירוק ליצירת גרסת אנדרויד בקרוב.

    אפליקציה וובית טהורה תצא ממש בקרוב גם. כל הרעיון היה לאפשר לגלוש אל http://www.mouse.co.il דרך דפדפן המובייל ולקבל את חוויית האפליקציה.
    ישנם 2 הבדלים מהותיים נכון לעכשיו בין גלישה בדפדפן לבין השימוש באפליקציה:
    1) מהירות עליית עמוד ראשי. מכיוון שכל הresources מורדים יחד עם האפליקציה, הם אינם נטענים בפתיחתה – דבר שחוסך שניות ארוכות של טעינה.
    2) פיצ'ר השיתוף כמו שהוא באפליקציה לא אפשרי בגרסת הדפדפן מסיבות טכניות :-/

    מצד שני, בגרסת הדפדפן לא צריך להתמודד עם ניהול גרסאות ועדכונים, אין תהליכי אישור וביצוע debug הרבה יותר קל. וגם, לא צריך להתעסק עם מאק ו-xcode, סימולטורים ופיבלושים למכשיר.

  4. רן
    נראה נהדר!

    לגבי caching על המכשיר – בדוק את יכולות ה-cache של html5
    לינק ראשון מגוגל:
    http://www.thecssninja.com/javascript/how-to-create-offline-webapps-on-the-iphone

    בנוסף, שילוב של meta tags כמו
    apple-mobile-web-app-capable
    apple-touch-icon
    יתנו חווית אפליקציה מלאה, ללא צורך להתקין מה-appstore.

  5. יפה!

  6. היי רן,
    אחלה תוכנה, מחכה לגירסת אנדרויד. :-)

    איך ארזתם הכל לתוך אפליקציה? באיזה framework השתמשתם?
    אני גם מחפש משהו דומה, כרגע אני מכיר רק את phonegap .

    תודה ובהצלחה. :)

  7. very cool

  8. מוזר שבאף מקום לא הוזכר השימוש בjqTouch. שעליו מתבססת כל האפליקציה הזאת.

  9. LIKE!
    מדהים כמה כוח בכל זאת יש ל-HTML CSS ו-JS.

  10. יפה מאוד!

  11. האם זה מבוסס jqTouch?

    בעבודה אצלי התבקשתי לבנות אתר סלולארי לאתר וקיבלתי אפיון מקיף בנושא.
    התחלתי לשחק עם jqTouch וזה באמת נראה טוב על האייפון, אבל אז ניסיתי את האתר בסלולארי של מיקרוסופט וזה פשוט לא עבד (בדקתי את זה בסלולארי גם על דפדפן של אופרה מיני וגם על אינטרנט אקספלורר).

    איך אתם מבצעים את ההבחנה באיזה סלולארי מדובר ובמידה ולא מדובר בטלפון "חכם" אתם מציגים לו את אותו האתר או שאתם פשוט מתעלמים מקיומם (אני בעד להתעלם מהם כמו שאני כמעט מתעלם לחלוטין מאינטרנט אקספלורר 6 כשאני ניגש עכשיו לבנות אתר חדש)?

  12. זה עובד די רע למען האמת…..

  13. נראה טוב, אני רץ לנסות את זה.

  14. תודה לכולם על המחמאות! :-)
    תאמינו לי שזה לא פיקניק. jqTouch זה רק ההתחלה (נועד לתנועה וניהול היסטוריה). יש צורך להרחיב את התשתית לטיפול בלינקים, ניהול זכרון, חישובי מימדים, התאמה לרזולוציות מסך, התיחסות לשינוי אוריאנטציה, מנגנון טמפלטינג ועוד ועוד.
    כרגע אין סטנדרטיזציה בכל הנוגע לדפדפני מובייל. כל OS ולעיתים כל מכשיר, מיישם את מנוע הדפדפן אחרת ולכן אי אפשר לצפות התנהגות. הדרך הטובה להתיחס לכך, היא להבין את צרכי הלקוח ובדרך כלל גם לקלוע לרוב המשתמשים אך לא לכולם. אם לשפוט לפי הOSים – webkit mobile הוא הדפדפן הנפוץ ולכן כדאי להתחיל בתמיכה בו. PPK פרסם טבלת תאימות שימושית.
    גם לנו יש עוד הרבה ללמוד ובקרוב נפנה תשומת לב לאנדרויד.

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

  15. שירה, האפליקציה עוד לא מושלמת, קצת מתאמצת לעיתים – עובדים על זה :-)

  16. תבדקו את jQtouch

  17. למה האפליקציות של האייפון לא עובדות בNEXUS למשל או כל סמרטפון?
    קניתי SATIO ואני ממש ממש מרוצה מהמצלמה המטורפת, אבל בכול מה שקשור לחווית הגלישה, – אכזבה מרה. והטאצ' חלש מאוד יחסית..

  18. אחלה פיתרון לאפליקציה עם מלא תוכן עדיף מניטיב נראה ביצוע מרשים שאפו

לכתוב תגובה

(חובה לפחות לרשום שם!!!)

(...אף אחד לא יראה את זה)

(תפרסם/י את עצמך! שידעו מאיפה את/ה!)