Post on 06-Apr-2018
transcript
8/3/2019 AAG Mobile APP Framework.v1.5
1/17
The AAG Mobile App Framework
Design Specification
This design framework shall be used for all Mobile apps developed by AAG.Modifications shall be made to brand an app for a client and the contents shall bechangeable.
1.0 Project DescriptionThe major components of the system supporting the mobile products shall include:the Mobile App, the CMS for the mobile app, and the Mobile Mirror website for smartphone users not supported by the app.
Overall Design Goals
Speed of the app data requests to web server should be kept to a minimum to allow for
the fastest screen load times
Usable in Airplane Mode this means contents must be stored on phone and the appmust note give error messages if no network connection is available.
Configurability the app should have some functions which are optional and able to beconfigured in memory
1.1 The CMS
There shall be a Content Management System which shall control the contents of themobile app. This CMS shall be available on a web server and store the data on a webdatabase.
1.2 The Mobile App
The screen data from the CMS shall be pulled via web services for display on the mobileapp.
1.3 The Mobile Mirror
There shall be a separate web application, The Mobile Mirror which is connected to theMobile CMS database but will display the data in a mobile friendly format for mobilephone browsers.
2.0 The Mobile AppOverview
8/3/2019 AAG Mobile APP Framework.v1.5
2/17
The screen types are:1. Welcome Screen2. Main Screen3. Settings Screen(s)
4. Category Screen(s)5. Article Screen(s)6. Credit Screen for AAG contact info
The app shall have a variable number of screens and categories. Each category maycontain other categories or articles. Each article contains only content from the CMS orcontent pulled from a client website via web services.
2.1 Welcome Screen
1. This screen is optional and may be turned off in the configuration data
2. This screen may contain introduction and title text3. This screen may contain client logo(s) or graphics
The Welcome screen has no sub-screens. It simply displays on start of the application forX seconds (programmable) and then loads the Main Screen.
2.2 Main Screen
This is the home screen for the app. This is the place where users return each timefrom other sub screens to start again to navigate down into a main section.A variable X number of items for display (the number is stored in the configuration table)Each item has icon and text label (short label, and long table for list view)
Two layouts are possible, List View or Apps View
List View Grid View
8/3/2019 AAG Mobile APP Framework.v1.5
3/17
Each category has the following components1. List of Items (items can be articles or other categories)2. Each item may have an icon and text label (only displayed in list view)3. Navigation bar which can vary from category to category
Navigation Bar is the horizontal bar with graphics icons for links to Major AppFunctions.
Pop Up Menu Bar (only visible when menu button is pressed): Lists App minor functionslike settings, exit, share, help, about, etc.
2.3 Mobile App Database
Tables for Category, Article, Article2Category Relation and configuration tables shall beidentical to those defined in the section 3.0 CMS. Additionally the following tables are
suggested.
Table Structure for ContentUpdates Table (only used on the mobile app)
Field Type Description
ID Int
ContentID Int ArticleID or CategoryID
LastModified Date Date last modified
Table Structure for SystemInfo Table (only used on the mobile app)
Field Type Description
ID Int
ContentLastModified Date The date of the last CMS update (algorithmTBD)
3.0 CMSArticle contents shall be formatted using HTML div tags and CSS. This will allow thecontents to be displayed properly in both the web app (for mobile browsers) and theMobile App screens.
Proposed Database Structure for CMS
Table Structure for Categories Table
Field Type Description
ID Int ID
8/3/2019 AAG Mobile APP Framework.v1.5
4/17
Parent ID Int ID
Short Label Varchar 20 Used where display space is limited (e.g. listview)
Long Label Varchar 80 User where full title is needed (e.g. article view)
Icon Name Varchar 20 This is name of icon which will be linked with
this category on app.Screen Type Varchar 10 This describes the layout of the screen. List
View is used to display a list of categories orarticles.Article View is used to display the full detailsof the article.
I think the field "ScreenType" can havefollowing options
1. Subcat2. Articles3. Forms4. Surveys5. Polls
So if we have "subcat" in screenthen next screen will be listing ofsubcategories on app.If we click on any category whichhave "forms" in "screentype" thenwe will list all forms titles onproceeding screen there and whenuser click on any form he will seethat form and he will be able to filland save data.Similarly if category have "Articles"in screentype then proceedingscreen will list article titles and thenuser will see details of articles if heclick on those titles.
ViewCount Int A counter to increment each time the screen isdisplayed on the mobile app.(used formarketing)
LastModified Date Holds the date of the most recent update
Table Structure for Articles Table
Field Type Description
ID Int ID
Type Varchar 20 1. Subcat2. Articles3. Forms
8/3/2019 AAG Mobile APP Framework.v1.5
5/17
4. Surveys5. Polls
Title Varchar 80 Title of article
Body Text Main text for article (includes HTML)
Data Source Varchar 10 Reserved for integration with 3rd
party sitesViewCount Int A counter to increment each time the screen isdisplayed (used for marketing)
LastModified Date Holds the date of the most recent update
Table Structure for Arcticle2FormData Relation Table[in case if Article Type is
form/survey/poll]
Table Structure for Arcticle2Category Relation Table
Table Structure for Configuration Table
ID Int Primary Key
ArticleID Int Foreign Keyfrom Article
tableFieldLabel Varchar20
FieldIntroText Varchar 255 If some textto be placedabove field todescribe fieldpurpose.
FieldType Enum(checkbox,radiobutton,textbox,textarea,dropdown)
FieldOptions text Option valuescommaseparated for
radio/selecttypes
Required Int 0=>no,1=>yes
ArticleID Int
CategoryID Int
8/3/2019 AAG Mobile APP Framework.v1.5
6/17
ID Int
Description Varchar 50
Value Varchar 50
3.1 Admin Add/Edit Article
A WYSIWYG editor shall be provided for creating and editing contents of the article.The text may be formatted using only HTML div tags which are saved in the database.Cascading Style Sheets shall be used to define styles for web or mobile display.
3.2 Admin Add/Edit Category
8/3/2019 AAG Mobile APP Framework.v1.5
7/17
The Wire-Frame of the Mobile app is as follows:
Welcome
(optional)
Main
Category 1
Category 2 Category 3 Category 4
Category 5
Category 6
Category 7
Category 8
Category 9
Category 10
Article 1
Article 2
Level 2
Level 1
Level 3
Level 4
8/3/2019 AAG Mobile APP Framework.v1.5
8/17
4.0 Operation of the Mobile AppMain Functions of the Mobile App
4.1 Configuration of Mobile App4.2 Content Update Protocol
4.3 APP Main Screen
4.4 App Display Article Details
4.5 Implement graphics for Main screen and categories
4.6 Data storage
4.7 User Favorites (save user preferences)
4.8 Display Categories and subcategories
4.9 Zoom text on all article pages
4.10 image download from CMS
4.11 Push notifications4.12 Create Survey/poll tool
4.13 Screen View Count
4.14 Visual Feedback
4.15 Search Function
4.16 Error conditions
4.1 Configuration of the Mobile App
There shall be a configuration table which stores basic functioning data that allows theapp to display the screens according to the configuration.
Upon app start-up, the app will check for a network connection. If no network connectionis found it will load the configuration from the local database (phone memory). If thereis a network connection the app will read the configuration from the CMS and update thetable on the phone.
http://apps4meetings.com/dp/index.php?m=tasks&a=view&task_id=220http://apps4meetings.com/dp/index.php?m=tasks&a=view&task_id=221http://apps4meetings.com/dp/index.php?m=tasks&a=view&task_id=225http://apps4meetings.com/dp/index.php?m=tasks&a=view&task_id=226http://apps4meetings.com/dp/index.php?m=tasks&a=view&task_id=230http://apps4meetings.com/dp/index.php?m=tasks&a=view&task_id=234http://apps4meetings.com/dp/index.php?m=tasks&a=view&task_id=224http://apps4meetings.com/dp/index.php?m=tasks&a=view&task_id=228http://apps4meetings.com/dp/index.php?m=tasks&a=view&task_id=229http://apps4meetings.com/dp/index.php?m=tasks&a=view&task_id=231http://apps4meetings.com/dp/index.php?m=tasks&a=view&task_id=239http://apps4meetings.com/dp/index.php?m=tasks&a=view&task_id=240http://apps4meetings.com/dp/index.php?m=tasks&a=view&task_id=243http://apps4meetings.com/dp/index.php?m=tasks&a=view&task_id=244http://apps4meetings.com/dp/index.php?m=tasks&a=view&task_id=220http://apps4meetings.com/dp/index.php?m=tasks&a=view&task_id=221http://apps4meetings.com/dp/index.php?m=tasks&a=view&task_id=225http://apps4meetings.com/dp/index.php?m=tasks&a=view&task_id=226http://apps4meetings.com/dp/index.php?m=tasks&a=view&task_id=230http://apps4meetings.com/dp/index.php?m=tasks&a=view&task_id=234http://apps4meetings.com/dp/index.php?m=tasks&a=view&task_id=224http://apps4meetings.com/dp/index.php?m=tasks&a=view&task_id=228http://apps4meetings.com/dp/index.php?m=tasks&a=view&task_id=229http://apps4meetings.com/dp/index.php?m=tasks&a=view&task_id=231http://apps4meetings.com/dp/index.php?m=tasks&a=view&task_id=239http://apps4meetings.com/dp/index.php?m=tasks&a=view&task_id=240http://apps4meetings.com/dp/index.php?m=tasks&a=view&task_id=243http://apps4meetings.com/dp/index.php?m=tasks&a=view&task_id=2448/3/2019 AAG Mobile APP Framework.v1.5
9/17
Following is updated flow chart for configs.This same flow will be there for each screen of app.
Start Up
Get Configfrom CMS NetworkConnection
Get Configfrom Memory
DisplayData
YesNo
Configuration Processing
(Initialized at Run Time)
8/3/2019 AAG Mobile APP Framework.v1.5
10/17
4.1 Content Update Protocol
TermsContentLastModified = Date on mobile app that updates were made from CMSArticleLastModified = Date a single article was modified on CMSCategoryLastModified = Date a category description was modified on the CMS
Option 1
Web Service (WS) calculationWhen the app is run, it will check for updates from the WS. The WS will respond withall categories and articles (by ID) which have been modified since the appsSystemLastModified date. This list shall be stored on the mobile app in theContentUpdates table. This table shall then be used on a per category basis to performupdates as the user navigates to the different categories of the app.
App Operation Flow
Run TimeIf $NetworkConnection then getConfigurationData() // get configuration dataIf $NetworkConnection then getUpdates() // get list of cat and article IDs
Read Configuration
If $DISPLAY_SPLASH_SCREEN then Display Splash ScreenDisplay Main Screen (using user favorites)
If $categorySelected then
If $catID in UPDATES then getCategory() // if cat is out of date, call WS toget // all articles and subcategories in// that category
Display Category // display all items in category
If $ArticleSelected then Display Article
// Note there is no need to check for article updates at the article level because this hasbeen done at the category level.
Note: The web server shall determine how many updated articles or categories there arefor a given update. A maximum of 200 updated items shall be given in a single requestfor getUpdates()
8/3/2019 AAG Mobile APP Framework.v1.5
11/17
2* => if there is network then app will call relevant WS [settings WS just after login,category WS if user click on any category]WS will return only lastModifiedDate we will have same field for all sections in appDB as well. So we will just match this WS returned date from the date stored in app DB.
IF (WS returned date is larger than that of stored in DB)this means there are updates available and app will initiate relevant WS to getdetails of that section.
ELSEDisplay data from app DB because there are no updates available.
Please note that there should be a setting in app which will be responsible for suchautorefresh feature. If user does not want such auto-refresh thing then he may turn off
Start Up
Get Configfrom CMS
NetworkConnection
Get Configfrom Memory
DisplayData
Yes
No
Configuration Processing(Initialized at Run Time)
Yes
Newupdatesare there onserver?(2*)
No
8/3/2019 AAG Mobile APP Framework.v1.5
12/17
8/3/2019 AAG Mobile APP Framework.v1.5
13/17
==========================Set 1Name: Prospective Students==========================News
AthleticsCalendarIgnatius InformationMediaPray @ IgnatiusAdmissionsCollege CounselingInteractiveSpirit GearPresident's MessageMore...
4.8 Display Categories and subcategories
As an icon on the main screen is selected the corresponding category should bedisplayed. One of the following three actions should take place:
1) If the Category has sub-categories, display the sub-categories2) If the Category contains only articles, then display the list of articles3) If the Category contains only ONE article DISPLAY that article
4.9 Zoom text on all article pages
All article displays shall be capable of zoom text.
4.10 Image download from CMS
The app shall be able to download an image from the CMS to the app for local storage.This function will only be used for icons associated with sub-categories. This will not beused for articles with images.
4.11 Push notifications
The app shall have Push Notifications. The administrator shall be able to use the CMS toinitiate a push notification. The device should display it as an alert if the user has enablednotifications under settings on the app.
The user shall be able to disable notifications under settings.
8/3/2019 AAG Mobile APP Framework.v1.5
14/17
4.12 Create Survey/poll tool
This function shall be implemented in the CMS and the app shall display any survey orform sent to it from the CMS. More info is coming.
4.13 Screen View Count
There shall be the ability to track each time an article or category is viewed by the user.Store this count in the sqlite table.
Then when app gets update list from CMS, it should upload these counts to web serverfor totaling the counts per category or article. And then these counts should be clearedfrom device db.
4.14 Visual Feedback
There shall be visual feedback for button press on all items for icons, category, or article.In the case of icons, an alternate image will not be used. Rather a background colorchange shall be used.
For text of Categories or Article titles, the background color shall be changed.
4.15 Search Function
The app shall have a search function which will search the sqlite database on the phoneonly.- available from icon on all screens (in top right of navigation bar)- must search article titles and article text- search local only - no webservices are needed
4.16 Error conditions
Error conditions of the phone must be addressed.There shall be a graceful way to handle the following errors;-- no network access - must not crash the app-- always issue a message to the user in cases where there is nothing to display - weshould always avoid system error messages from the phone
4.17 User Settings
There shall be a settings function available via a settings icon on each screen in theupper right corner. The following functions shall be available under settings:
1. User Favorites2. Notifications enable/disable
8/3/2019 AAG Mobile APP Framework.v1.5
15/17
WebServicesWe will create few webservices which will be used to show contents on app. We mayalso consider some sync WS for survey/poll/forms which may appear in app for users.
5.1 Load All CategoriesMethod: getCategoryListArgument: task nameURL : http://www.abstracts123.com/cmr/webservice/webservice.php?task=getCategoryList
Purpose: Mobile device will initiate request for all categories.
RESPONSE: Web Service responds with a list of categories with their last-modifieddates
1. Category_id2. Parent_id3. Title4. ShortLabel5. LongLabel6. IconName7. ScreenType8. LastModified
http://www.abstracts123.com/cmr/webservice/webservice.php?task=getCategoryListhttp://www.abstracts123.com/cmr/webservice/webservice.php?task=getCategoryListhttp://www.abstracts123.com/cmr/webservice/webservice.php?task=getCategoryListhttp://www.abstracts123.com/cmr/webservice/webservice.php?task=getCategoryList8/3/2019 AAG Mobile APP Framework.v1.5
16/17
*for now above green color fields are available in webservices, I need to decide contentfor other fields
Output:
-
21VW5jYXRlZ29yaXNlZA==
*Please note that all text data is encrypted so that it allow special characters.
5.2 Load All Article Data
Method: getArticleListArgument: task name
URL: http://www.abstracts123.com/cmr/webservice/webservice.php?task=getArticleList
Purpose: this webservice will load all article data
RESPONSE: Web Service will responds with a list of articles.1. id2. catid3. title4. introtext5. fulltext6. LastModified
Output:
-17Q3VycmVudCBQcmVzaWRlbnQgTWVzc2FnZQ==dGVzdCBmYWxsIHNwb3J0IGFydGljbGU=dGVzdCBmYWxsIHNwb3J0IGFydGljbGU=
*Please note that all text data is encrypted so that it allow special characters.
5.3 Load Latest SubCategories
Method: getCategoryListArgument: task name, category id, lastmodified date of
8/3/2019 AAG Mobile APP Framework.v1.5
17/17
category,totalhitURL : http://www.abstracts123.com/cmr/webservice/webservice.php?task=getCategoryList&category_id=2&totalhit=5&lastmodifieddate=2011-07-23T00:00:00
Purpose: Mobile device will initiate request for all subcategories/articles of clickedcategory when user hit any category icon. This will send total hit count on clickedicon[category] so that we may add 1 to this category on webserver [for the hit counter]
RESPONSE: Web Service responds with a list of subcategories which were modifiedafter2011-07-23T00:00:00 with their individual last-modified dates[these will be usedwhen user hit on subcategory to view its nested subcategory list]
1. Category_id2. Parent_id3. Title4. ShortLabel
5. LongLabel6. IconName7. ScreenType8. LastModified
*Please note that this is same webservice call getCategoryList which was used inalpha release, the difference is that this will function in two ways. If lastmodified date issupplied for a category then it will look for latest content, otherwise it will list allsubcategory/articles for that category.Output:
-21VW5jYXRlZ29yaXNlZA==
This approach is good if we plan to go with some default inbuilt data forcategories/articles and then user will be able to download latest data on later clicks.
If we dont want to supply inbuilt data then we can program this way that existing defaultdownload will work when user first install app.
We can program that user may download contents only upto July/Aug 2011 while install.This way user will download less data and it will take less time for him.Further data will be downloaded on his next clicks on icons.
http://www.abstracts123.com/cmr/webservice/webservice.php?task=getCategoryList&category_id=2&totalhit=5&lastmodifieddate=2011-07-23T00:00:00http://www.abstracts123.com/cmr/webservice/webservice.php?task=getCategoryList&category_id=2&totalhit=5&lastmodifieddate=2011-07-23T00:00:00http://www.abstracts123.com/cmr/webservice/webservice.php?task=getCategoryList&category_id=2&totalhit=5&lastmodifieddate=2011-07-23T00:00:00http://www.abstracts123.com/cmr/webservice/webservice.php?task=getCategoryList&category_id=2&totalhit=5&lastmodifieddate=2011-07-23T00:00:00http://www.abstracts123.com/cmr/webservice/webservice.php?task=getCategoryList&category_id=2&totalhit=5&lastmodifieddate=2011-07-23T00:00:00http://www.abstracts123.com/cmr/webservice/webservice.php?task=getCategoryList&category_id=2&totalhit=5&lastmodifieddate=2011-07-23T00:00:00