Download - Introduction to Mobile Application Development with App Studio

Transcript
Page 1: Introduction to Mobile Application Development with App Studio

INTRODUCTION TO APPLICATION DEVELOPMENT WITH APP STUDIO

JAMES QUICK

@JQUICKWIT

[email protected]

MEETUP: HTTP://BIT.LY/MFLWAD (MIAMI FT LAUDERDALE WINDOWS APP DEVELOPERS

APP DEVS MIAMI AND SOUTH FLORIDA WINDOWS 8 DEVELOPERS

Page 2: Introduction to Mobile Application Development with App Studio

AGENDA

• 1:00-1:30 INTRODUCTION TO MOBILE APPLICATION DEVELOPMENT

• 1:30-2:30 INTRO TO APP STUDIO WITH DEMOS AND EXAMPLES

• 2:45-4:00 HANDS ON WORKSHOP WITH APP STUDIO

• 4:00-5:00 INTRODUCTION TO AZURE SPONSORED BY BIZSPARK

Page 3: Introduction to Mobile Application Development with App Studio

WHY MOBILE?

Page 4: Introduction to Mobile Application Development with App Studio

MOBILE PLATFORMS

• ANDROID

• IOS

• WINDOWS 8 AND WINDOWS PHONE

• BLACKBERRY

Page 5: Introduction to Mobile Application Development with App Studio

WINDOWS DEVELOPER ACCOUNT

• $20 DOLLARS PER YEAR (WINDOWS 8 AND WINDOWS PHONE)

• HTTPS://DEV.WINDOWS.COM/

• BIZSPARK…GET SIGNED UP TODAY TO PUBLISH!

• FREE DEVELOPER ACCOUNT

• $150 PER/MONTH TO USE IN AZURE

Page 6: Introduction to Mobile Application Development with App Studio

BIZSPARKSOFTWARE • 3 YEARS FREE SOFTWARE/DEVELOPMENT TOOLS

• WINDOWS AZURE CREDITS $200 FIRST MONTH/$150 THEREAFTER

SUPPORT• PROFESSIONAL TECHNICAL AND PRODUCT SUPPORT

• UNIQUE OFFERS FROM NETWORK PARTNERS

VISIBILITY• PROFILE, OFFERS AND EVENTS

• CONNECTION TO THE ECOSYSTEM

• OPPORTUNITIES FOR SHOWCASE, VISIBILITY (EVENTS, SOCIAL MEDIA)

Is your startup:• Developing Software?• Privately held?• Less than 5 years old?• Making less than US $1M in annual revenue?

http://aka.ms/BizSparkNow

Page 7: Introduction to Mobile Application Development with App Studio

HOW TO MARKET?

• BUILD A WEBSITE IN AZURE…FOR FREE!

• BLOGS

• SOCIAL MEDIA

• FACEBOOK, TWITTER, LINKEDIN

• HIGHLIGHTED ARTICLES

• EX. WMPOWERUSER

• COLLECT FEEDBACK

Page 8: Introduction to Mobile Application Development with App Studio

MONETIZATION

• FLAPPY BIRDS

• ADVERTISING

• CANDY CRUSH

• IN APP PURCHASING…PAY MORE MONEY TO KEEP PLAYING, BUY POWERUPS, ETC.

• CUT THE ROPE/ANGRY BIRDS

• SELL YOUR APP ($1,$2, ETC.)

Page 9: Introduction to Mobile Application Development with App Studio

LEAN STARTUP

• LEAN

• GET RID OF THE FAT

• OPTIMIZE YOUR TIME

• EVERYTHING SHOULD BE CUSTOMER CENTRIC

• STARTUP

• NOT NECESSARILY TECH

• UNCERTAINTY…GROWH…OPPORTUNITY

Page 10: Introduction to Mobile Application Development with App Studio

LEAN STARTUP

• “IDENTIFY THE RISKIEST PARTS OF YOUR BUSINESS PLAN, THEN FIND WAYS TO REDUCE THOSE RISKS IN A

QUICK, ITERATIVE CYCLE OF LEARNING”

Page 11: Introduction to Mobile Application Development with App Studio

DON’T SELL WHAT YOU CAN MAKE…MAKE WHAT YOU CAN

SELL

Page 12: Introduction to Mobile Application Development with App Studio

APP STUDIO

• BROWSER BASED DRAG AND DROP TOOL

• CREATE APPS FOR WINDOWS PHONE AND WINDOWS 8

• APP STUDIO – APPS.WINDOWSSTORE.COM

• LOGIN WITH MICROSOFT CREDENTIALS

Page 13: Introduction to Mobile Application Development with App Studio

STRUCTURE

• SECTION – LIST OF PAGES BASED ON ONE DATA SOURCE

• MENU – LIST OF LINKS (CAN POINT TO OTHER PAGES)

• PAGES – DISPLAYS DATA BOUND FROM DATA SOURCE

• DATA SOURCES – DATA TO BE BOUND TO UI

Page 14: Introduction to Mobile Application Development with App Studio

DATA SOURCES

• “A DATA SOURCE IS SIMPLY THE CONTENT YOU WANT TO DISPLAY IN EACH SECTION”

• “EVERY SECTION IS CONNECTED TO A DATA SOURCE”

• EXAMPLES- RSS, YOUTUBE, ETC.

• HINT…LOOK TO THE RIGHT!

Page 15: Introduction to Mobile Application Development with App Studio

COLLECTIONS

• AN EXCEL TYPE DATABASE

• CUSTOMIZE YOUR COLUMNS AND INPUT DATA

• STATIC RESOURCES VS APP STUDIO DATA SERVICES

• STATIC RESOURCES – EMBEDDED DATA

• APP STUDIO DATA SERVICES – CONTENT THAT CAN BE CHANGED IN APP STUDIO AND PUSHED OUT ACCORDINGLY

• COLUMNS – USED IN PAGE CONFIGURATION FOR BINDING TO UI

Page 16: Introduction to Mobile Application Development with App Studio

APPLICATION SECTIONS

• “SECTIONS ARE THE PAGES OF YOUR APP”

• EITHER REGULAR SECTION OF MENU SECTION

• UP 6 TO SECTIONS (WITH CAVEAT)

• EDIT PAGES

• ADD A PAGE (NOT FOR EVERY TYPE OF DATA SOURCE)

• EX. WITH BING SEARCH (ONLY ONE PAGE)

• EDIT DATA SOURCE

• CHANGE SECTION NAME

Page 17: Introduction to Mobile Application Development with App Studio

MENU SECTIONS VS REGULAR SECTIONS

• SECTION

• GROUP OF PAGES THAT ARE CONNECTED TO ONE DATA SOURCE

• MENU

• INDIVIDUAL PAGE THAT CONTAINS A LIST OF ITEMS (EITHER SECTIONS OF ACTIONS)

• ACTIONS- CALL PHONE, SEND EMAIL, DIRECTIONS, LOCATION

Page 18: Introduction to Mobile Application Development with App Studio

CONFIGURING PAGES

• EDIT HEADER /TITLE

• EDIT CONTENT

• CHOOSE A LAYOUT

• CHOOSE DATA TO BIND TO UI

• CHOOSE FROM COLUMNS OF THE DATA SOURCE

• ENABLE/ DISABLE EXTRAS

• TEXTTOSPEECH, PIN TO START, ETC.

Page 19: Introduction to Mobile Application Development with App Studio

DATA BINDING…?

• “CONNECT PART OF A DATA SOURCE TO A CERTAIN AREA OF A PAGE”

Page 20: Introduction to Mobile Application Development with App Studio

CONFIGURING APP STYLE

• COLOR SCHEME

• ACCENT, BACKGROUND, FOREGROUND, AND APPLICATION BAR

• CUSTOMIZE WINDOWS PHONE TILES

• CYCLE, FLIP, ICONIC

• SELECT SPLASH SCREEN

• SELECT LOCK SCREEN

Page 21: Introduction to Mobile Application Development with App Studio

TILE TEMPLATES

• NOT PERFECT (CONSIDER USING VISUAL STUDIO)

• 3 KINDS

• CYCLE

• CYCLE IMAGES FROM A COLLECTION

• FLIP

• “FLIP” BETWEEN TWO TILES

• SMALL ICON- 160 X 160, NORMAL- 340 X 340, BACK IMAGE- 715 X 340

• ICONIC

• SIMPLE ICONS

Page 22: Introduction to Mobile Application Development with App Studio

SPLASH AND LOCK

• SPLASH SCREEN

• USED WHEN YOUR APP IS BEING LOADED

• LOCK SCREEN

• ALLOWS THE USER TO SET HIS OR HER LOCK SCREEN TO THIS PICTURE

Page 23: Introduction to Mobile Application Development with App Studio

FINAL STEPS OF APP STUDIO

• ICON .PNG 160X160 (FIRST STEP IN APP STUDIO)

• SMALL TILE – 160 X 160

• MEDIUM TILE (REQUIRED IF YOU CHOOSE ICONIC TEMPLATE)- 340 X 340

• LARGE/WIDE TILE (OPTIONAL) 340 X 715

• GET THE .XAP FILE

• TEST ON A PHYSICAL DEVICE!! (WE HAVE TEST DEVICES)

Page 24: Introduction to Mobile Application Development with App Studio

WHAT DID WE JUST DO?!

Page 25: Introduction to Mobile Application Development with App Studio

GETTING YOUR PUBLISH PACKAGE

• CREATE A DEVELOPER ACCOUNT (THROUGH BIZSPARK!)

• RESERVE YOUR APP NAME IN THE STORE

• “DON’T USE TEMPLATE PLACEHOLDER TEXT ([INSERT NAME HERE]) OR TEMPLATE APP CONTENT”

• USE UNIQUE TITLE, LOGO, AND DETAILED DESCRIPTION

• FINISH->GENERATE PUBLISH PACKAGE

• NEED TO HAVE YOUR APP NAME RESERVED

• INCLUDES YOUR SCREENSHOTS

Page 26: Introduction to Mobile Application Development with App Studio

SUBMITTING YOUR APP

• WINDOWS 8 - HTTP://BIT.LY/SUBMITW8

• WINDOWS PHONE- HTTP://BIT.LY/SUBMITWP

Page 27: Introduction to Mobile Application Development with App Studio

RESOURCES

• APP STUDIO - HTTP://APPS.WINDOWSSTORE.COM/

• APP STUDIO HOW TO - HTTP://APPS.WINDOWSSTORE.COM/HOME/HOWTO

• (SCROLL DOWN FOR GETTING STARED PDF)

• DVLUP (NOKIA REWARDS) - HTTP://WWW.DVLUP.COM/

WINDOWS DEVELOPER ACCOUNT- HTTPS://DEV.WINDOWS.COM

Page 28: Introduction to Mobile Application Development with App Studio

EXAMPLES…

Page 29: Introduction to Mobile Application Development with App Studio

DEMO 1

JAMES QUICK – PERSONAL MARKETING APP

Page 30: Introduction to Mobile Application Development with App Studio

HANDS ON DEMO

ONE DIRECTION!

Page 31: Introduction to Mobile Application Development with App Studio

HANDS ON