Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile...
Transcript of Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile...
Next Generation Campus Mobile Applications
UC San Diego
Campus Apps
Campus Apps
•Mass audience focused• Static• Informational•User directed look-ups
Millennial Apps
Differences
•Personalized•Conversational•Up-to-the-minute information, active, actionable•Peer assistance, digital assistance
User Experience Goals
•Better connect students with campus•Better meet student expectations for applications
Technical Goals
• Leverage the capabilities of mobile •Enable distributed development
Where we're headed
•Personalization based on individual behavior modeling•Push notification•Conversational information feeds – a campus-wide chatbot• Foundation of a whole host of cards
• Dining info based on time, place and personal preference• Instant surveys to campus or segments• Student elections with real-time results
Choosing a Technology Platform
React Native Overview
• Launched with iOS support in March 2015 Android in October
• Supports all iOS 8.0+ and Android 4.1+ devices
•Open-source
• Leverages modern web development technologies
• Learn once, write anywhere
React Native Features (1/2)
•Develop in Real Time with NodeJS
•Native Components
• Styling with Flexbox
•Asynchronous Execution
• Standardized APIs
React Native Features (2/2)
•Touch Handling
•Extensibility
•NPM and RNPM
•Debugging & Performance
•Code Base Commonization
Development Process• Leveraging Web Development Background
• Tools
1. Xcode2. Android Studio3. Device Simulator4. Text Editor/IDE (Sublime)5. Chrome Debugger
• Version Control
• Backing & Support
Development Process Demo
• Initializing a new React Native project: HelloUCCSC
React Native Common Questions
• Facebook has a full-time staff of 30 people working on React Native, and over 1000 contributing developers since launch
• The goal of React Native is not to just solve the cross platform problem, but to be a better developer environment than the way you build iOS and Android apps natively today
• Facebook is currently using it for apps in production (Ads manager and Groups app). Over 500 iOS and 200 android apps live
• There is no WebView, it is JavaScript running in a virtual machine and controlling a native UI. At the core of React Native is a bridge to Objective-C or Java that lets native code call JavaScript and vice versa.
• React Native releases a new version every two weeks. So far each version upgrade has been packed with new native features and overall improvements. We are currently running version .29, and started on version .13 last December
Common Code
• Folders: app, ios, android•App: 13 common JavaScript files• iOS: AppDelegate.m, index.ios.js•Android: AndroidManifest.xml, index.android.js
Android Demo
Android Build
•Edited index.android.js ~45 lines of code•Added ACCESS_FINE_LOCATION permission to AndroidManifest.xml• Some image path updates•Run in emulator
Amazon Web Services
Lambda API GatewaySimple Storage Service
Amazon Web Services: S3
•News•Events• Surf
[{ "date": "Mon, 6 Jun 2016 05:55:00 PDT", "link": "http://www.surfline.com/rss/rssredirect.cfm?id=107951", "description": "A slow go, Bird with the report for Monday morning at 5:55 ", "title": "TORREY PINES STATE BEACH : 1-2 ft - knee to thigh high and poor "}, ….
Amazon Web Services: Lambda
•Weather• Shuttle Stops• .. 8 functions
“Run code without thinking about servers”
Amazon Web Services: Lambda• No charge when code is not running• Node.js, Python, Java• Timeout setting from 1 second to 5 minutes• Stateless• Event Driven
• API Gateway• AWS IoT• CloudWatch Events – Schedule• CloudWatch Logs• DynamoDB• Kinesis• S3• SNS
Amazon Web Services: Lambda
Amazon Web Services: Lambda
Amazon Web Services: Lambda
API Gateway
Amazon Web Services
Shuttle Stop Service
API Gateway
Amazon Web Services
Shuttle Stop Service
API Gateway
Amazon Web Services
Shuttle Stop Service
Caching
Lambda: Past week
706ms
1.2s
Amazon Web Services
• Lessons learned with Lambda; Java vs Node.js stats
Amazon Web Services
Weather Lambda Function (Feb 2016)
Java 29.8 MB 8 seconds cold startNode.js 751 bytes 4 seconds cold start
Node.js
ReactNativeAWS
Tools
•ReactNative• iOS•Android• (Windows)
•Mac•Windows
•AWS
Timeline
• iOS took 6 months to production•Android alpha took less than a day to run on an emulator and device
… and they are both native apps
Who’s Using ReactNative
• Facebook• Events Dashboard for iOS• Ads Manager• Facebook Groups (hybrid)
F8 App
Ads Manager
Who’s Using ReactNative
•Tencent QQ messenging app•April 2016, Microsoft announced support for Universal Windows
Platform (UWP) ; 10 releases since June 2016•https://github.com/ReactWindows/react-native-windows•https://facebook.github.io/react-native/showcase.html
What’s Next
•Continue to collaborate with campus groups•More data and features•Chatbot•Push notification•Personalized Analytics•Pushing data (vs pulling data)•CodePush integration• SSO integration
What’s Next
iOS App
APIs
SMSVoice
Open Source
•https://github.com/UCSD/now-mobile
Q&A
Jeremy WilesCharles BryantAlex Wu
UC San Diego