uMobile Preconference Seminar
-
Upload
jennifer-bourey -
Category
Technology
-
view
651 -
download
0
description
Transcript of uMobile Preconference Seminar
uMobile SeminarJen Bourey
Atlanta Jasig-Sakai ConferenceJune 10, 2012
About Unicon
Trusted Partner since 1993
Expertise in Open Source Software for Education
Professional Services for uPortal, Sakai, CAS, Shib, Grouper, and soon Student Success Planner
Innovative Cooperative Support Program
Going Mobile
What’s Different?
User Interface
Screen size
Touchscreen interactions
Performance
Bandwidth
Processing power
Content
Overlap with existing apps
Touchscreen Interactions
Tap
Touch
Pinch
Swipe
Additional Hardware
Accelerometer
Camera
Microphone
Common Themes to Date
Student or visitor-focused
Cater to campus life use cases
News, events
Maps, transportation
Maybe some course features
Often no authentication or personalization
How to get started?
Adopt what’s easy and build from there
Build additional pieces as time permits
Questions to Ask
What content needs to be accessed on the go?
What changes frequently?
What do visitors need?
What’s specific to my campus?
Consider diverse audiences
Visitors
Recruits
Students
Faculty
Staff
Alumni
uMobile Overview
uMobile Application Server
Presents browser-based mobile experience
Serves as an administrative console
Provides web-based modules, RESTful data to native app
Based on uPortal
Native App Codebase
Based on Titanium Appcelerator
JavaScript-based platform-independent development framework
Compile shared codebase to iPhone and Android applications with native controls
Open source under the Apache 2.0 License
Choosing a Distribution
uPortal
Includes mobile framework and skin
Can power the native app
uMobile
Branch of uPortal codebase
Adds additional modules, test data
Adding Content
uMobile Content
Overall Development Style
Create well-defined integration APIs
Support personalized content, multiple sources
Support common data formats (iCal, RSS)
If no standard exists, define our own XSD
Allow custom implementations
Calendar
Read-only calendar aggregator
iCal, CalDAV, XML, Bedework, Exchange
API for custom integrations
Allows for delegated authentication / credential replay
Role-based feed distribution
News
Read-only news aggregator
RSS / Atom feeds
Role-based feed distribution
Search
Portlet registry
Directory search results
Google Search Appliance
Directory
Uses uPortal’s person directory configuration
Permissions control visibility of users, user attributes
Videos
Displays recent posts by a single YouTube author
Configure author name in portlet definition
Map
Custom XSD defines map data format
Name, geocoordinates, search keys, categories, campuses
Include static JSON file of location data
Courses
Merges multiple data sources
Supported LMSs
In-progress DAOs for Sakai and Moodle
Looking for collaborators
Campus Life
Sample Campus Life Data<laundromat-list xmlns="https://source.jasig.org/schemas/portlet/laundry" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="https://source.jasig.org/schemas/portlet/laundry ../xsd/laundry.xsd">
<laundromat name="Saybrook" location-code="SY"> <machine-type key="Washer" message-key="laundry.type.washer" icon-key="Washer" available="5" total="12" /> <machine-type key="Dryer" message-key="laundry.type.dryer" icon-key="Dryer" available="5" total="12" /> </laundromat>
<laundromat name="Branford" location-code="BR"> <machine-type key="Washer" message-key="laundry.type.washer" icon-key="Washer" available="2" total="10" /> <machine-type key="Dryer" message-key="laundry.type.dryer" icon-key="Dryer" available="10" total="15" /> </laundromat>
<laundromat name="Berkeley" location-code="BK"> <machine-type key="Washer" message-key="laundry.type.washer" icon-key="Washer" available="10" total="12" /> <machine-type key="Dryer" message-key="laundry.type.dryer" icon-key="Dryer" available="3" total="8" /> </laundromat>
</laundromat-list>
Custom Content
Type Advantages
External Website via IFrame or Web Proxy
• Chose any language / framework• Manage outside of portal
framework
JSR-168 / JSR-286Portlet
• Well-defined API• Share views w/ desktop portal• Take advantage of portal services
such as auth and roles
Native Module• Access to native device services• Potential performance
improvements
Web-based vs. NativeWeb-based modules
Allow sharing code with web views
Easier to update and deploy
Native framework
Young framework with quickly changing APIs
Frameworks are changing quickly, want to leave options open
WebView presents
markup from portal
Native components
provide navigation
External Content
Leverage existing mobile investment
Allow departments to develop and control their own content
Enable web-based development in other frameworks
Include external content via WebView, IFrame, WebProxy
IFrame Publishing Type
Rendered as
Desktop browser: include external site via IFrame
Mobile browser: link to external site
Native app: include in web view
Examples
Transit, library in default uMobile dataset
IFrame Content
Web Proxy
Proxy an external website
Recommendations
Design specifically for web proxy view
Use portal CSS styles
Avoid AJAX to prevent XSS restrictions
Advanced CMS
<div class="portlet"> <div class="portlet-content" data-role="content"> <ul data-role="listview"> <li data-role="list-divider">Fish!</li> <li>Red Fish</li> <li>Blue Fish</li> </ul> </div></div>
Portlet-based Content
JSR-168 / JSR-286 portlet standards
Enables collaboration beyond uMobile project
Google Gadget integration
Alternate language modules
Provides a familiar, well-defined development model
Assures modules will work across uMobile versions
Mobile Portlet UIs
Tailoring Mobile Views
Using a Single View
Combine desktop and mobile markup to display the same content to both clients
Best for simple content
Reasonable strategy for developing new portlets
Developing for mobile first helps keep your interface focused and simple
Single View Markup Template<!-- Portlet --><div class="fl-widget portlet portlet-content" role="section" data-role="content">
<!-- Portlet Body --> <div class="fl-widget-content portlet-body" role="main"> <!-- Portlet Section --> <div id="${n}search" class="portlet-section" role="region">
<div class="portlet-section-body">
<p>Hello World!</p>
</div>
</div> </div>
</div>
Device-Specific ViewsOften need a different feature or interface on one platform
Separate layout / CSS for desktop, tablet, mobile
Mouse vs. Touch-based interactions
Want to share backend logic where possible
Business logic
Controllers
Multiple ViewsController
View Resolver
Desktop View
Mobile View
Model
Calendar Views
Phone
Desktopin-page
MobileMobile
Tablet
Parsing the User Agent
User agent available as request property
Strategy in uPortal 3.2 and below
Maybe more portal-agnostic
Potential for mismatch between theme and portlet
Parsing the User Agentprivate List<Pattern> mobileDeviceRegexes = null;
/** * Set a list of regex patterns for user agents which should be considered * to be mobile devices. * * @param patterns */public void setMobileDeviceRegexes(List<String> patterns) { this.mobileDeviceRegexes = new ArrayList<Pattern>(); for (String pattern : patterns) { this.mobileDeviceRegexes.add(Pattern.compile(pattern)); }}
@Overridepublic boolean isMobile(PortletRequest request) { String userAgent = request.getProperty("user-agent"); // check to see if this is a mobile device if (this.mobileDeviceRegexes != null && userAgent != null) { for (Pattern regex : this.mobileDeviceRegexes) { if (regex.matcher(userAgent).matches()) { return true; } } }
Checking Reported Theme
Theme is provided by portal as a request property
Requires mapping theme name -> mobile in portlet
Used by uPortal 4+
Using the Theme Nameprotected static final String THEME_NAME_PROPERTY = "themeName";protected static final String MOBILE_THEMES_KEY = "mobileThemes";protected static final String[] MOBILE_THEMES_DEFAULT = new String[]{ "UniversalityMobile" };
@Overridepublic boolean isMobile(PortletRequest request) { String[] mobileThemes = request.getPreferences().getValues(MOBILE_THEMES_KEY, MOBILE_THEMES_DEFAULT); String themeName = request.getProperty(THEME_NAME_PROPERTY); if (themeName == null) { return false; } for (String theme : mobileThemes) { if (themeName.equals(theme)) { return true; } } return false;}
jQuery Mobile
View Layer: jQuery Mobile
Easily create mobile-friendly views
More lightweight
Fairly new project, though growing quickly
Works with jQuery framework
Adds touch-based events like tap, swipe, pinch
MIT or GPL 2
jQuery Mobile
jQuery Mobile Documentation
URL
View in a mobile browser to use as an example
Hint: Get markup by removing hash tag
Not Using All Features
jQuery Mobile Theming
AJAX Navigation
jQM Configuration
jQM is loaded *very* early
To alter default configuration, must include a script *before* loading jQM
jQM uPortal-Level Configuration
$(document).bind("mobileinit", function(){ $.extend( $.mobile , { ajaxEnabled: false, ajaxFormsEnabled: false });});
uportal-war/src/main/webapp/media/skins/muniversality/common/javascript/up-mobile-config.js
jQM + Fluid
The trick: allow jQM to modify markup
Example: YouTube portlet
jQM-only Markup Template
<div class="portlet">
<div data-role="header" class="titlebar portlet-titlebar"> <a href="javascript:;" data-role="button" data-icon="back" data-inline="true">Back</a> <h2 class="title news-reader-feed-title">Title</h2> </div>
<div data-role="content" class="portlet-content">
<p>Hello World!</p>
</div>
</div>
Using the Feed Class
<div class="portlet"> <div data-role="content" class="portlet-content"> <ul data-role="listview" class="feed"> <c:forEach items="${ feed.entries }" var="entry"> <li> <a href="${ entry.link }"> <img src="${ entry.imageUrl }"/> <h3 class="title">${ entry.title }</h3> <p> ${ entry.description.value } </p> </a> </li> </c:forEach> </ul> </div></div>
Including jQM in a Portlet
<script type="text/javascript">$("[data-role=page]").live('pagebeforecreate',function(event){ return false;});</script><script type="text/javascript" src="<rs:resourceURL value="/rs/jquery-mobile/1.0a3/jquery.mobile-1.0a3.js"/>"></script>
Improving Performance
Optimizing JS/CSS LibrariesReduce browser traffic as much as possible
Minify
GZip
Cache
Use Jasig filters
Only apply long-term cache headers to resources that will really, truly never change
ETags
String marks version of a page/resource
Browser only re-downloads if the tags don’t match
Use Spring’s ShallowETagHeaderFilter to automatically set ETags
uMobile Integration
Minimized Window State
public class MinimizedStateHandlerInterceptor extends HandlerInterceptorAdapter {
@Override public boolean preHandleRender(RenderRequest request, RenderResponse response, Object handler) throws Exception {
if (WindowState.MINIMIZED.equals(request.getWindowState())) { return false; } return true; }
}
New Item Count
Number indicates “new” items associated with a module
Invites users to visit a module
Set via a portlet response property
Linking to Other Portlets
Create links to other portlets, services
Examples:
/s/person?id=student
/s/location?id=DH
Search Integration
New search API in uPortal 4
Based on JSR-286 events
https://wiki.jasig.org/display/UPM40/Using+the+new+Search+API
Notifications Integration
On uMobile 1.3 roadmap
Publish notifications to drop-down panel in native app
Module Distribution
Role-based ContentUse existing campus roles to drive personalized content
Potential data sources
LDAP, Active Directory, Grouper
Local (app-specific) group definitions
Attribute-based ad-hoc groups
Use roles to distribute both module list and content within modules
“hideFromMobile” global CPD preference
Removes portlet during structure transform
Set via portlet administration menu or portlet definition file
Disabling Content in Mobile Theme
Adding mobile-only fragments
UserAgentProfileMapper distributes fragments by user agent
Use to distribute fragments just to mobile users
Can’t combine with role-based rules :-(
Skinning uMobile
User Profiles
Maps to a theme, structure, skin, and layout
One user can have multiple profiles, but only one layout
By default two profiles: mobile and desktop
Can create / configure through data import
User Profile Selection
Controlled by IProfileMapper API
By default selected by user agent regexes
Configure in userContext.xml
Home Screen View
Either folder-based or grid-based view
Icons set via portlet administration tool
Development Tips
Jasig Portlet ArchetypeQuickly create a new portlet project
Project structure and spring config
Desktop and mobile views
Resources
https://wiki.jasig.org/display/UMM/Using+the+uMobile+Portlet+Archetype
http://www.youtube.com/jasigumobile
Maven deploy-war plugin
Specific to uPortal and uPortal 4
Allows deployment directly from portlet directory
Performs pluto-fication and deploys to tomcat
mvn -Plocaldev -Dmaven.tomcat.home=/path/to/tomcat install org.jasig.portal:maven-uportal-plugin:deploy-war
Disabling Aggregation
Turn off all aggregation, minification, and caching of JS/CSS
Useful for development and debugging
Don’t do in a production portal!
SASS watch goal
Compiles SASS files and copies to tomcat whenever a SASS source file is edited
Useful for skin development and debugging
Spoofing User Agents
Change browser’s reported “user agent” string
Describes browser type and version, machine, etc.
View portal’s response to particular device
Helpful for testing skin, browser mappings, and portlet UIs
Firefox User Agent
Safari User Agent
Logging Transformations
## Uncomment to see the XML at various stages in the rendering pipelinelog4j.logger.org.jasig.portal.rendering.LoggingStAXComponent=DEBUG, Rlog4j.additivity.org.jasig.portal.rendering.LoggingStAXComponent=false
log4j.properties
Native App Development
Titanium Appcelerator
JavaScript platform for creating mobile apps
Compiles OS-independent JS into Android and iPhone projects
Open source Apache 2 licensed project
Titanium APIs
Views
Network
Map
Contacts
Anatomy of a Project
Driven by a main app.js file
Can include other javascript files
Titanium Documentation
http://developer.appcelerator.com/documentation
Includes APIs, Getting Started guide
For API, use PDF, not web
Getting Started
Preparing for Native Development
Install Titanium
Lots of extra steps for Windows :-(
Install an Emulator
Android on all platforms
iPhone on OS X only
Install Jasig uMobile SDK
Check out the project
Some Tips
Troubleshooting: When in doubt, clean!
for the iPhone, delete build/iphone
Turn log level up to TRACE
Configuring uMobile
Most settings in config.js
Base portal URL
Authentication method
Person directory information
Emergency contact numbers
Skinning the Native App
Controlled by style.js
CSS-like javascript file provides style attributes for new objects
Module Icons
Map modules to icons by fname in config.js
Need multiple versions for various resolutions
Localizing uMobile
Messages in localization.js
Simple dictionary of translations
Configure default language in config.js
In the future, maybe get default locale from portal?
Using the messages
app.localDictionary.translatedTextStringKey
Adding External Sites
UPM.LOCAL_MODULES.twitter = { title: 'Twitter', fname: 'twitter', url: 'http://mobile.twitter.com/searches?q=jasigsakai12', externalModule: true};
config.js
Overriding Portlets
UPM.LOCAL_MODULES.directory = { title: 'directory', fname: 'directory', iconUrl: 'icons/directory.png', doesRequireLayout: true, window: 'directory'};
config.js
Adding Native Modules
Follow tutorial at https://wiki.jasig.org/display/UPC/Build+a+Native+Module+-+Hello+World
High-level steps
Create controller
Add facade to window manager
Add to config and set icon
Present native components based on portal data
Request data fromuPortal map service
Return location data as JSON
uMobileServer
uMobileApp
Testing
Real actual phone
Best way to test, need to do this before releasing
Should consider multiple versions
Emulator
iPhone: OS X only
Android: all platforms
Testing: iOS
Need an iOS Developer Program Account ($99/year)
A Development Certificate to sign applications for testing on devices
A Development Provisioning Profile to install on devices for testing
Publishing: iOS
Create publishing certificates and profiles
Set up the app in iTunes Connect
Create a new Bundle ID
Generate a Distribution Profile
Validate and submitting the app binary through Xcode
Publishing: Android
Set up an Android Developer account for ($25)
Create a self-signed certificate to sign your application
Compile your app for distribution in Titanium Developer
Zipalign your APK
Set up and upload your app in Android Market Developer Console
Tips
Make sure to handle network errors and other exceptions
Use at least a 1.0 version number
Leave lots of time to publish to the Apple store
The Future
Layout Support
Native App Platform
Investigating PhoneGap as an option
Multiple Layouts / User
Requires fix to uPortal codebase
Development item for 4.1
Add mobile theme layout editing
More Resources
uMobile Roadmap
https://wiki.jasig.org/display/umobile/uMobile+1.2+%28Phase+3%29+Roadmap
DocumentationuMobile Manual
https://wiki.jasig.org/display/UMM/Manual+Home
uPortal 4 Manual
https://wiki.jasig.org/display/UPM40/Home
Jasig Portlet Developer Space
https://wiki.jasig.org/display/PLT/Portlet+Development
Documentation
uMobile YouTube
http://youtube.com/jasigumobile
jQuery Mobile
http://jquerymobile.com/test/
Additional Resources
Jasig mailing lists
uMobile, portlet, and uPortal lists
https://wiki.jasig.org/display/JSG/Jasig+Mailing+Lists
Questions?
Want to make something? :-)