AAG Mobile APP Framework.v1.5

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


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


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)


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


ID Int ID


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


ID Int ID

Type Varchar 20 1. Subcat2. Articles3. Forms


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


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


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/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=244


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)


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()


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


12/17


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.


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


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=getCategoryList


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


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

AAG Mobile APP Framework.v1.5

Documents

Transcript of AAG Mobile APP Framework.v1.5