פיתוח אפליקציות וממשקי משתמש בטכנולוגיית WPF

‫אשכול קורסי תעודה טכנולוגיים באקדמית ת"א‪-‬יפו‬
‫פיתוח אפליקציות ‪ Mobile Web‬לאייפון ואנדרואיד‬
‫סילבוס לקורס ‪-‬‬
‫פיתוח אפליקציות ‪ Mobile Web‬לאייפון ואנדרואיד‬
‫אודות פיתוח אפליקציות ‪Mobile Web‬‬
‫כיום‪ ,‬כשמפתחים אפליקציה לטלפונים חכמים (‪ ,)Smartphones‬כזו שתהייה זמינה לכמה שיותר משתמשים‪/‬לקוחות‪,‬‬
‫חשוב לדאוג שהיא תהייה מותאמת למכשירים (ומערכות ההפעלה) הנפוצים ביותר‪ .‬בפרט‪ ,‬כיום‪ ,‬רצוי שתהייה בעיקר‬
‫זמינה למשתמשי אייפון ואנדרואיד‪ .‬והרי לנו בעיה‪ :‬לכל מכשיר מתאימות טכנולוגיות‪ ,‬שפות‪ ,‬וכלי פיתוח שונים‪.‬‬
‫על פניו‪ ,‬כדי לפתח אפליקציה לאייפון עלינו ללמוד ולהתמקצע בטכנולוגיות המאפשרות זאת (למשל ‪)Objective C, XCode‬‬
‫וכדי לפתח אפליקציה לאנדרואיד נצטרך ללמוד ‪ Java‬ולהתמקצע בכלי הפיתוח המתאימים‪ .‬בפרט‪ ,‬המצב הוא שבמקום‬
‫לפתח אפליקציה אחת — נפתח שתיים או יותר‪ ,‬אחת לכל פלטפורמה‪/‬מכשיר‪ ,‬ונצטרך בהמשך לתמוך במספר גרסאות‬
‫נפרדות‪ ,‬לתקן באגים בגרסאות נפרדות‪ ,‬לשדרג גרסאות נפרדות וכיו"ב‪ .‬בעיה זו העלתה את הצורך לחפש שיטה‬
‫שתאפשר לפתח מערכת אחת‪ ,‬וממנה‪ ,‬באופן אוטומטי‪ ,‬לייצר אפליקציות לכל הפלטפורמות הרלוונטיות‪ .‬או באנגלית –‬
‫!‪Develop Once, Deploy Everywhere‬‬
‫מאחר וכל הטלפונים החכמים מאפשרים גלישה נוחה באינטרנט‪ ,‬אחת האפשרויות היא לפתח אתר אינטרנט שמותאם‬
‫במידותיו ואופיו למכשיר והמסך הקטן (אתר "מותאם")‪ .‬אולם‪ ,‬אתר כזה איננו אפליקציה המותקנת על המכשיר‪ ,‬איננו‬
‫יכול לשלוח התראות (‪ )Push Notifications‬למכשיר של המשתמש (תכונה חשובה מאוד בתרחישים רבים)‪ ,‬ואיננו יכול‬
‫לעשות שימוש בכל השירותים של מערכת ההפעלה של המכשיר (רשימת אנשי קשר‪ ,‬אוסף תמונות‪ ,‬מצלמה וכו')‪.‬‬
‫לעומת זאת‪ ,‬ניתן לפתח אפליקציית מובייל‪-‬ווב (‪ ,)Mobile Web Application‬כזו שבעצם עוטפת דפדפן משלה‬
‫(בעזרת טכנולוגיית ‪ )PhoneGap‬אשר מארח‪/‬מריץ את ממשק המשתמש‪ .‬אפליקציה כזו‪ ,‬מפתחים בטכנולוגיות‬
‫הפיתוח הנהוגות בעולם פיתוח האתרים (‪.)Java Script / HTML5 / CSS3‬‬
‫עד לא מזמן‪ ,‬החיסרון הבולט בשיטה זו היה הקושי בלייצר ממשק משתמש עשיר‪ ,‬נוח וססגוני‪ ,‬כגון אלה זה שאנחנו‬
‫רגילים לראות באפליקציות ה"רגילות"‪ .‬בנוסף‪ ,‬אפליקציות כאלה לא יכלו לנצל את כל היכולות המתקדמות במכשירים‬
‫(כגון שירותי מיקום‪ ,‬מצלמה‪ ,‬מצפן‪ ,‬ניווט ‪ ,GPS‬זיהוי תנועה ועוד) ו‪/‬או להשתמש ברכיבים חשובים במערכת ההפעלה‬
‫של הטלפון (כגון גישה לספר טלפונים‪ ,‬לספריות המוסיקה‪/‬תמונות‪/‬וידאו‪ ,‬שימוש ביומן ועוד)‪.‬‬
‫תקן ‪ ,HTML5‬הנמצא בפיתוח בשנים האחרונות‪ ,‬בשילוב עם הפתרונות הטכנולוגיים המוצעים ע"י התשתית התכנותית‬
‫‪ ,PhoneGap‬והתקנים‪ ,‬השפות והטכנולוגיות הנפוצות בעולם ה‪ Web -‬כגון‬
‫(המהווים שדרוג משמעותי ביכולות פיתוח אפליקציות ‪ ,Mobile Web‬כולל כאלה העושות שימוש בטכנולוגיות הזמינות‬
‫במכשירים החכמים) מהווים‪ ,‬אם כן‪ ,‬אלטרנטיבה לפיתוח אפליקציות בשיטת ‪.Develop Once, Deploy Everywhere‬‬
‫השילוב של ‪ JavaScript ,CSS3 ,HTML5‬ו‪ jQueryMobile-‬מאפשר לבנות ממשקי משתמש עשירים בגרפיקה‪ ,‬שילוב וידאו‬
‫ואנימציות באופן פשוט וזמין (כולל אנימציות למעברים בין דפים!)‪ ,‬הצגת מפות וניצול טכנולוגיות ה‪ GPS -‬של המכשיר‪,‬‬
‫ובכך לייצר חוויית משתמש הדומה לזו שהמשתמש רגיל אליה מאפליקציות "רגילות"‪.‬‬
‫התשתית התכנותית של ‪ PhoneGap‬מאפשרת לאפליקציה לעבוד עם מערכת ההפעלה של המכשיר עצמו ולהשתלב בו‬
‫כאפליקציה "רגילה" לכל דבר‪.‬‬
‫‪CSS3, JavaScript, jQuery, jQueryMobile, Angular.js‬‬
‫דוגמא שווות אלף מילים‬
‫‪‬‬
‫‪– BBC Olympics‬‬
‫‪‬‬
‫‪A London travel mobile app by Microsoft - Bing GetMeThere‬‬
‫‪‬‬
‫‪Book and check-in your flights the easy way with AirAsia Mobile App - Air Asia‬‬
‫‪‬‬
‫‪Lets you quickly find doctor answers to health questions - Health Tap‬‬
‫‪‬‬
‫‪- Mobile Web Sites Collection‬‬
‫‪BBC Sport's Olympics app for smartphones‬‬
‫‪A great collection of mobile web sites‬‬
‫אודות הקורס‬
‫הקורס הוא בהיקף של כ‪ 01 -‬שעות (אקדמיות) ומהווה סקירה יסודית ומקיפה של שפות התכנות‪ ,‬הטכנולוגיות‪ ,‬התשתיות‬
‫התכנותית וכלי הפיתוח הנדרשים לצורך פיתוח אפליקציית ‪ Mobile Web‬מודרנית מלאה (כולל צד שרת!)‪ ,‬ואריזתה‬
‫כאפליקציה "רגילה" (‪ )Native‬לטלפון לצורך פרסומה בחנות האפליקציות‪.‬‬
‫הקורס משלב כמובן דוגמאות מ"העולם האמיתי" וכולל עצות בסגנון "עשה ‪ /‬אל תעשה"‪.‬‬
‫בקורס המשתתפים ילמדו לפתח אפליקציות ‪ Mobile Web‬הכוללות הן את ממשק המשתמש (שאותו מפתחים בעזרת ‪-‬‬
‫‪ ,)HTML5, CSS3, JavaScript, jQuery, jQueryMobile, Angular.js‬ו הן את צד השרת (כולל אירוח ופיתוח של בסיס‬
‫הנתונים ושכבת התקשורת בעזרת ‪ Node.js ,MongoDB‬ו‪ .)Express.js -‬בנוסף‪ ,‬יילמד האופן בו נוכל "לארוז" את‬
‫האפליקציה כאפליקציית טלפון לכל דבר לצורך פרסומה בחנות האפליקציות‪ ,‬בעזרת התשתית התכנותית ‪,PhoneGap‬‬
‫ולהשתמש בתשתיות אלו כדי להתחבר לשירותים של הפלטפורמה (קבלת הודעות ‪ ,Push Notification‬עבודה מול‬
‫רשימת אנשי הקשר‪ ,‬שימוש במצלמה‪ ,‬יומן פגישות‪ ,‬נתוני מיקום ‪ /‬תנועה ועוד)‪.‬‬
‫פיתוח אפליקציות ‪ Mobile Web‬לאייפון ואנדרואיד‬
‫כל הזכויות שמורות‬
‫‪2102-2102‬‬
‫©‬
‫יפו‬-‫אשכול קורסי תעודה טכנולוגיים באקדמית ת"א‬
‫ לאייפון ואנדרואיד‬Mobile Web ‫פיתוח אפליקציות‬
‫נושאי הקורס‬
●
:‫ יודגמו ויתורגלו הנושאים הבאים‬,‫בקורס יילמדו‬
HTML5 and CSS3 – For Implementing the rich and modern mobile app UI
●
JavaScript – The Application Programming Language.
●
DOM / jQuery – For easily interacting between the logic (JS) and UI (HTML) Layers
●
Angular.js / Handelbars.js – Templating Engines (HTML compilers and databinders)
● Node.js, Express.js – A platform built on Chrome's JavaScript engine. Used for
easily building fast, scalable server applications. Perfect for data-intensive real-time
applications. Will be used to develop server-side REST API using Express.
● MongoDB and Mongoose– A scalable, high-performance, open source, documentoriented, NoSQL leading database (for server side database management).
●
Developing And Distributing Mobile Applications for iPhone And Android Devices.
● PhoneGap – Used for utilizing the device API and capabilities and for packaging the
app for delivering it and deploying in the app store(s).
*:‫רשימת הנושאים בהרחבה‬
User Interface With HTML & CSS3
●
●
●
●
●
●
●
●
●
Introduction to Web Technologies (HTML, CSS, JavaScript)
HTML Basics
CSS Basics (basic syntax, inline vs. external, CSS selectors, combinators)
UI Styling using CSS (backgrounds, texts, fonts, links, lists)
UI Positioning and Layout (visibility, display, dimentions, positioning, floating, align)
Styling Navigation elements, forms and tables
Fixed layout vs. Fluid layout and Responsive layout
Cross browser techniques
CSS3 enhancements (borders, gradients, 2D transforms, Transitions, Animations)
CSS3 For Mobile Devices
●
●
●
●
Styling for alternative devices and the mobile
Working With Different Screen Sizes
CSS Media Types
Native Looking and Mobile-Oriented Controls (Buttons, Lists)
JavaScript Language
●
●
●
●
●
●
●
Key Concepts
Core Types
Control Flow
Variable Scope and the Global Object
Function Objects
Object Oriented JS
Organizing your code using modules
JavaScript & The DOM
●
●
●
●
©
The DOM Theory
Dynamic DOM manipulations
Handling Events
jQuery Introduction
2102-2102
‫כל הזכויות שמורות‬
‫ לאייפון ואנדרואיד‬Mobile Web ‫פיתוח אפליקציות‬
‫יפו‬-‫אשכול קורסי תעודה טכנולוגיים באקדמית ת"א‬
‫ לאייפון ואנדרואיד‬Mobile Web ‫פיתוח אפליקציות‬
Using HTML5 Mobile APIs
● HTML5 Form Input Types
● Location API
● Client Side Data Storage
● 2D Graphics Canvas
● Audio & Video
● Multi Touch Gestures
UI Design With jQuery Mobile
●
●
●
●
●
●
Page Architecture
Writing List Views
Creating Icon Grids
Adding Buttons
Adding Toolbars and Tab Bars
Wiring Up Actions
AJAX And Client/Server Communication
●
●
●
●
●
●
●
Intro to HTTP/REST API
Data transfer using JSON and AJAX
Parsing and building DOM elements from JSON data.
The single page pattern.
The same origin policy and JSONP
Using web sockets API and sockcet.io for full-duplex communication
Data Binding, Templating And Page Routing Frameworks (Handlebars.js and Angular.js)
Implementing Server-Side REST APIs using Node.js and Mongo DB
●
●
●
●
●
Introduction to Node.js – A JavaScript Server-Side Framework
Implemeting an HTTP/REST Server with Node.js (using JavaScript) and Express.js
Introduction to NO-SQL Databases and to MongoDB
Store/Fetch Data using MongoDB and Mongoose.js
Deploying your app on Cloud9, Mongolab and Microsoft Azure Cloud Services
PhoneGap
●
●
●
Package A Mobile Web App
PhoneGap Build Server
PhoneGap API
Facebook Connect
●
●
●
●
An introduction to Facebook Graph/REST API
Authorizing your app using OAuth and fetching an Access Token
Fetching user’s information (list of friends, list of albums, list of events, list of checkin places..)
Performing actions: Posting on the wall, Checking in places
.‫ בהתאם לאילוצי זמן ודגשים‬,‫ סדר הנושאים וחלוקת הזמן‬,‫* ייתכנו שינויים קלים ברשימת הנושאים‬
‫ קהל יעד‬/ ‫רקע נדרש‬
‫ רצוי מונחות עצמים) ומעוניין‬,‫טכנולוגיה כלשהיא‬/‫הקורס מיועד לכל בעל רקע כלשהוא בתכנות (בשפה‬
.‫ כולל פיתוח צד השרת ובסיס הנתונים‬,‫אנדרואיד באופן מקיף ויסודי‬/‫ללמוד לפתח אפליקציות לאייפון‬
‫ תעודה‬/ ‫חובות הקורס‬
.‫יפו‬-‫קורס מטעם המכללה האקדמית ת"א‬-‫ מההרצאות תזכה את המשתתף בתעודת‬01% -‫נוכחות ב‬
.‫ המשתתפים יוכלו להיעזר במרצה בשאלות במייל ובפורום הקורס‬.‫בקורס יינתנו תרגילי אימון רשות לבית‬
©
2102-2102
‫כל הזכויות שמורות‬
‫ לאייפון ואנדרואיד‬Mobile Web ‫פיתוח אפליקציות‬


‫אשכול קורסי תעודה טכנולוגיים באקדמית ת"א‪-‬יפו‬
‫פיתוח אפליקציות ‪ Mobile Web‬לאייפון ואנדרואיד‬
‫מועדי הקורס והרישום‬
‫הקורס יתקיים בקמפוס של המכללה האקדמית ת"א‪-‬יפו (הוראות הגעה)‪.‬‬
‫שימו לב‪ :‬המחזור הנוכחי של הקורס כבר החל וההרשמה אליו הסתיימה‪.‬‬
‫להלן קישור לטופס הרישום שיש למלא במידה ומעוניינים לקבל עידכון לכשיתוכנן המחזור הבא‪.‬‬
‫יום א'‬
‫יום ב'‬
‫יום ג'‬
‫‪ /1‬לפברואר‬
‫‪///2‬‬
‫‪///2‬‬
‫יום ד'‬
‫יום ה'‬
‫יום ו'‬
‫ש'‬
‫‪///2‬‬
‫‪///2‬‬
‫‪2//2‬‬
‫‪2//2‬‬
‫מועד אחרון לרישום‬
‫(לא ניתן להצטרף לקורס לאחר מועד זה)‬
‫‪2//2‬‬
‫‪21/2‬‬
‫מפגש מס' ‪/‬‬
‫מפגש מס' ‪2‬‬
‫מפגש מס' ‪/‬‬
‫‪//:// – 2/://‬‬
‫(מפגש ערב)‬
‫‪//:// – 2/://‬‬
‫(מפגש ערב)‬
‫‪//:// – 2/://‬‬
‫(מפגש ערב)‬
‫‪ 22‬לפברואר‬
‫‪2//2‬‬
‫‪2//2‬‬
‫‪2//2‬‬
‫‪2//2‬‬
‫מועד אחרון לביטול‬
‫(עד למועד זה‪ ,‬ביטול יחייב את המבטל ב‪01%-‬‬
‫מדמי ההשתתפות‪ .‬לאחר מועד זה‪ ,‬לא יינתן‬
‫החזר כספי בשום מקרה)‬
‫‪2//‬‬
‫‪ /‬למרץ‬
‫‪///‬‬
‫‪///‬‬
‫‪1//‬‬
‫‪///‬‬
‫‪///‬‬
‫מפגש מס' ‪/‬‬
‫‪//:// – 2/://‬‬
‫(שימו לב‪ :‬מפגש כפול)‬
‫‪ /‬למרץ‬
‫‪///‬‬
‫‪////‬‬
‫‪////‬‬
‫‪/2//‬‬
‫‪////‬‬
‫‪////‬‬
‫מפגש מס' ‪1‬‬
‫‪//:// – 2/://‬‬
‫(מפגש ערב)‬
‫‪ /1‬למרץ‬
‫‪////‬‬
‫‪////‬‬
‫‪////‬‬
‫‪////‬‬
‫‪2///‬‬
‫‪2///‬‬
‫מפגש מס' ‪/‬‬
‫‪//:// – 2/://‬‬
‫(מפגש ערב)‬
‫‪ 22‬למרץ‬
‫‪2///‬‬
‫‪2///‬‬
‫‪21//‬‬
‫‪2///‬‬
‫‪2///‬‬
‫‪2///‬‬
‫מפגש מס' ‪/‬‬
‫‪//:// – 2/://‬‬
‫(מפגש ערב)‬
‫‪ 2/‬למרץ‬
‫מפגש מס' ‪/‬‬
‫‪////‬‬
‫פסח‬
‫‪////‬‬
‫פסח‬
‫‪///‬‬
‫פסח‬
‫‪2//‬‬
‫פסח‬
‫‪///‬‬
‫פסח‬
‫‪///‬‬
‫פסח‬
‫‪//:// – 2/://‬‬
‫(שימו לב‪ :‬מפגש כפול)*‬
‫‪ 1‬לאפריל‬
‫פסח‬
‫‪ /2‬לאפריל‬
‫‪///‬‬
‫פסח‬
‫‪////‬‬
‫‪///‬‬
‫פסח‬
‫‪////‬‬
‫‪///‬‬
‫פסח‬
‫‪/1//‬‬
‫‪////‬‬
‫פסח‬
‫‪////‬‬
‫‪////‬‬
‫פסח‬
‫‪////‬‬
‫‪////‬‬
‫פסח‬
‫‪////‬‬
‫מפגש מס' ‪/‬‬
‫‪//:// – 2/://‬‬
‫(שימו לב‪ :‬מפגש כפול)*‬
‫‪ //‬לאפריל‬
‫‪2///‬‬
‫‪2///‬‬
‫‪22//‬‬
‫‪2///‬‬
‫‪2///‬‬
‫‪21//‬‬
‫מפגש מס' ‪//‬‬
‫‪//:// – 2/://‬‬
‫(מפגש ערב)‬
‫‪ 2/‬לאפריל‬
‫‪2///‬‬
‫‪2///‬‬
‫‪2///‬‬
‫‪////‬‬
‫‪//1‬‬
‫‪2/1‬‬
‫מפגש מס' ‪//‬‬
‫‪//:// – 2/://‬‬
‫(מפגש ערב)‬
‫‪ /‬למאי‬
‫‪//1‬‬
‫‪1/1‬‬
‫‪//1‬‬
‫‪//1‬‬
‫‪//1‬‬
‫‪//1‬‬
‫מפגש מס' ‪/2‬‬
‫‪//:// – 2/://‬‬
‫(מפגש ערב)‬
‫‪ //‬למאי‬
‫‪///1‬‬
‫‪/2/1‬‬
‫‪///1‬‬
‫‪///1‬‬
‫‪/1/1‬‬
‫מפגש מס' ‪//‬‬
‫‪//:// – 2/://‬‬
‫(מפגש ערב)‬
‫* שימו לב‪ ,‬ייתכן ואחד או שניים מהמפגשים הכפולים יתקיימו באחד מהמפגשים האחרים‪.‬‬
‫פיתוח אפליקציות ‪ Mobile Web‬לאייפון ואנדרואיד‬
‫כל הזכויות שמורות‬
‫‪2102-2102‬‬
‫©‬
‫‪///1‬‬
‫אשכול קורסי תעודה טכנולוגיים באקדמית ת"א‪-‬יפו‬
‫פיתוח אפליקציות ‪ Mobile Web‬לאייפון ואנדרואיד‬
‫פרטי התקשרות‬
‫‪‬‬
‫לפרטים בנוגע למחירים‪ ,‬הרשמה ונושאים מנהלתיים אחרים‪:‬‬
‫איילת תירוש‪ ,‬טלפון‪ ,13-0013012 :‬אימייל‪:‬‬
‫‪‬‬
‫לשאלות מקצועיות בנוגע לתכני הקורס ולטכנולוגיה ניתן לפנות באימייל או בטלפון‪:‬‬
‫גיא רונן‪ ,‬טלפון‪ ,122-0350203 :‬אימייל‪[email protected] :‬‬
‫‪[email protected]‬‬
‫לנוחיותכם‪ ,‬להלן קישור לטופס הרישום שיש למלא במידה ומעוניינים לקבל עידכון לכשיתוכנן המחזור הבא‪.‬‬
‫ביבליוגרפיה וחומרי ‪ /‬ספרות עזר‬
‫הספרים הבאים יכולים להוות מקור ידע נוסף לנושאים הנלמדים בקורס‪:‬‬
‫)‪Maximiliano Firtman (2010‬‬
‫‪Programming the Mobile Web‬‬
‫)‪Maximiliano Firtman (2012‬‬
‫‪jQuery Mobile: Up and Running‬‬
‫)‪Steven Hoober (2011‬‬
‫‪Designing Mobile Interfaces‬‬
‫)‪Shi Chuan (2012‬‬
‫‪HTML5 Mobile Development Cookbook‬‬
‫)‪Pascal Rettig (2012‬‬
‫‪Professional HTML5 Mobile Game Development‬‬
‫)‪Andrew Keig (2013‬‬
‫‪Advanced Express Web Application Development‬‬
‫פיתוח אפליקציות ‪ Mobile Web‬לאייפון ואנדרואיד‬
‫כל הזכויות שמורות‬
‫‪2102-2102‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫©‬