version history - web viewaashiha priyadarshni lakshmi kumar (prototyper) ... downloading the entire...

Technical Manual (TM) Version no 1.2

Technical Manual

Diabetes Health PlatformTeam #6

Jasmine Berry (Client)Veerav Naidu (Project Manager)

Mukai Nong (Architect)Steven South (IV&V)

Vijaya Prabhakara (Quality Focal Point)Sudeep Sureshan (Operational Concept Engineer)Aashiha Priyadarshni Lakshmi Kumar (Prototyper)

Vishali Somaskanthan (Requirements Engineer)Vandy Somaskanthan (Implementer / Tester)

Surabhi Goyal (Architect)

29 November 2017


Version HistoryDate Author Version Changes made Rationale11/25/17 Steven South 1.0 Initial Draft Initial Draft11/28/17 Steven South 1.1 Updated for TRR Transitioning to Client12/3/17 Steven South 1.2 Adding Small Changes for App

Development. Rearranged to accommodate changes

Final Draft


Table of ContentsVersion History........................................................................................................................2

1.0 Configuration Management with Bitbucket.......................................................................41.1 Common Commands..................................................................................................................6

2.0 Uploading Web Pages to cPanel.........................................................................................7

3.0 Website Directory Architecture........................................................................................10

4.0 Website Content and Processes.......................................................................................114.1 Index Page................................................................................................................................114.2 Blog Pages................................................................................................................................114.3 Not Completed.........................................................................................................................114.4 Recommendations....................................................................................................................12

5.0 Auto-Generating Website Informational Pages................................................................135.1 Steps to Convert Pages.............................................................................................................135.2 Running the Perl Script.............................................................................................................16

6.0 App Directory Architecture..............................................................................................18

7.0 Android Studio for Android App Development.................................................................197.1 Steps to Load DHP App into Android Studio..............................................................................197.2 DHP Project Files......................................................................................................................227.2 Designing XML Layout Views....................................................................................................23


1.0 Configuration Management with BitbucketBitbucket was used to control the configuration of files for the Website and the App. The location of the repository is

- Website: https://bitbucket.org/csci577ateam6/dhp_web. - App: https://bitbucket.org/csci577ateam6/se_dhp_app

Currently, only those added to the group “CSCI577A Team 6” under the owner’s page may have access to the repository. The client may wish to create their own bitbucket / git repository so that this restriction is removed.

The standard process is to checkout or clone a repository (this example will show using dhp_web), and modify files on the developer’s system. Once files are ready to be integrated into the master, the developer will add the new updated files, commit the files, and then push the files onto the bitbucket repo.

For the website, the master branch is what should be uploaded to cPanel. The best way to manage that would be to have a master developer pull the latest changes and push new or updated files to the respective cPanel directories as outlined in “Uploading Web Pages to cPanel”. The client may also want to look into simpler methods that may integrate cPanel with bitbucket / git or other configuration management tools. This would simplify having to manage both bitbucket and cPanel, and ideally you would only need to control one source. It is up to the client to look into this for future iterations.

https://bitbucket.org/csci577ateam6/se_dhp_app

https://bitbucket.org/csci577ateam6/dhp_web


Source code directories on Bitbucket:

The current checkout repository is located at - Website: https://[email protected]/csci577ateam6/dhp_web.git - App: https://[email protected]/csci577ateam6/se_dhp_app.git

https://[email protected]/csci577ateam6/dhp_web.git

https://[email protected]/csci577ateam6/se_dhp_app.git


1.1 Common Commands

Clone the repo to local directory

Check Status (e.g., if new files added or modified)

Adding a file

Committing the file

Pushing the file


2.0 Uploading Web Pages to cPanelThis section covers the process to upload the website or pages to cPanel

Use the following information to log into Harexi’s cPanel page:cPanel URL: http://harexi.com/cpanel cPanel Username: harejullcPanel Password: nuDrpxFpHuSn

Once logged in, click on Files > File Manager

http://harexi.com/cpanel


Click Upload

Drag and drop any files into this page. You may need to move the location to sub-directories if not in the desired location. By default, the pages will be uploaded into the public_html folder.


You may also have to modify the permissions in order for everyone else to be able to see the web page. Do this by right clicking on a page, then selecting “Change Permissions”.

This brings up a window in which you will select the desired permissions for the various groups (User, Group World). World must be selected in order for the public to be able to access this page of the website.


4.0 Website Content and ProcessesThis section will outline the content of the website and the processes used to update and generate the website using the Template Monster template.

4.1 Index PageThe index page is the starting point for the website. The original template index that was chosen for harexi.com is site/index-skin-sunrise.html. This was copied to site/index.html and modified. The portions that were modified were the headers and footers, including the tabs with all links to the informational blog pages. Additionally, images, logos, people, and text content has been modified to align with the goals of Harexi.

4.2 Blog PagesThe headers and footers from the index page were applied to all blog pages. The blog template chosen was site/blog-default-single.html. The blog pages underwent a multi-step process in which the content was converted to HTML from the original google documents, and then implemented into the format as desired by the client. The reason for this was to reduce the amount of busywork for the developers, otherwise each blog page would have to be implemented individually which would be a cumbersome process. This methodology may not work once the "commenting" section is live on the site. This will require further investigation from the future developers.

The basic way to add new informational pages is to copy one of the other pages and simply replace the content between the header and footers. All info page images are located under site/custom/images/info_pages.

To run the Perl script to generate the educational pages, please refer to the section Auto-Generating Informational Pages.

4.3 Not CompletedFor the CSCI 577A course in Fall 2017, the website was not the primary focus, but rather the mobile app. For this reason, the website has not been completed for all of the desired goals, although is operational to the extent agreed upon by the client and developers for the duration of the course.

Content that has not been implemented includes, but not limited to the following:- Commenting on blog / informational pages- Registering / Logging into the website- Integration of the website and the mobile app- Links to the mobile app from the website (requires uploading the app to the app store prior to putting a link in)- Implementing the desired color scheme on the blog (will require a CSS style sheet update)


4.4 Recommendations- If the headers & footers are updated (i.e., links to informational content, other pages), it is recommended to first update the index page, then copy and apply the same header & footer changes to the other web pages, such as the blog style informational sections. Alternatively, you may copy the header & footer sections into the Perl script that generates the blog pages.


5.0 Auto-Generating Website Informational PagesThis section covers the process to use Microsoft's HTML document converter along with the Perl script to convert the informational pages into the template. Portions outlined in this section requires that you have Perl installed. Perl 5.18.2 on a MacBook was used to run the scripts below and generate the html output files.

5.1 Steps to Convert PagesStep 1. Ensure all info pages are in Word Document format (google doc format will not work for this). Downloading the entire folder from Google Drive will give you the option of downloading as Word documents.

Step 2. This step is a manual process.

Open each document you would like to convert and click "File > Save As".


There will be options in the drop down menu. Select "Web Page, Filtered (.htm)". The filtered option will remove all office specified tags.

Click "Yes" to save.


You must do this for each document, unless there is a better way of converting word documents to HTML. The reason this method was chosen was because it preserves locations of all images as well as all formatting of the words (e.g., bold, italics, etc).

- For articles with images in the word document, such as in the "DM type 1_ Overview (Comprehensive)" document, there will be an associated .fld directory which contains all images. Change the names of the images as appropriate and copy to the "custom/images/info_pages" directory (where all others are currently located). - You must also make sure they link to the image in the new location (i.e., change the link in the info page to point to the correct image).

Output: All converted HTML files from the original Word documents.

Step 3. Update and run the Perl Script "parse_diabetes.pl". This simply applies the desired blog template to each of the HTML files generated in Step 2. You may want to update all links in the index page prior to completing this step. The reason being the updated links should be applied to every page, including all of these informational pages that are being created. See “Running the Perl Script” section below for more details on how to run the script.

Note that the HTML Files were renamed due to the requirement of having no spaces or special characters in the file names for HTML links. Each of the files were taken as-is and the given titles converted based on the following convention:- All spaces are replaced with underscores- All parentheses (right or left) are replaced by underscores- Double underscores (from above changes) replaced by single underscores- Filename starts with "edu-" in order to simplify searching for them in the site directory- All letters converted to lowercase

Example of name change: - Original File Name: DM type 1 Overview (Comprehensive).docx- Converted File Name: edu-dm_type_1_overview_comprehensive.html

Step 4. Copy all generated HTML files (all "edu-*.html" files) to the top level site directory.

Step 5. Click on one of the tab links to verify the website works properly and goes to the selected page. Update links for the index page, if necessary, and redo any of the above steps if links change or as pages are added.


5.2 Running the Perl Script- Ensure you have Perl installed on your computer. This script was run with Perl v5.18.2.

- Open a terminal window

- Change working directory to the location where all .html files were saved from Step 2.

- If headers & footers were updated for the blog template, you must change the variables $TEMPSTART and $TEMPEND respectively. These control the header and footer. Simply replace everything inside these two variables with whatever the header & footer should be (e.g., from the index.html page).

- Run the Perl script by entering perl parse_diabetes.pl. You may need to add the path to the Perl script if its location is not included in your run path. Or just put the script in this directory to avoid dealing with paths.


Output: All updated HTML files with the headers & footers applied with an associated "_files_created.txt" file that indicates all files that this Perl script generated.

Originals on left, updated (output) on right in the “_updated” directory


6.0 App Directory ArchitectureTop level directory structure is as follows: se_dhp_app > Keck_dhp |-> app |-> build |-> gradle

The contents under "Keck_dhp/app" are where the main files for this app are. See “DHP Project Files” section under “Android Studio for Android App Development” for more info on the app’s core files when viewing through Android Studio. It is not recommended to modify the files without using Android Studio.


7.0 Android Studio for Android App DevelopmentAndroid Studio was used to develop the Android Application for this project. Android studio can be downloaded from: https://developer.android.com/studio/index.html

After downloading, complete installation as required for your machine. Tutorials on installation can be found on the same site as the download.

7.1 Steps to Load DHP App into Android Studio

Open Android Studio

Select “Open an existing Android Studio Project”

https://developer.android.com/studio/index.html


Highlight the “Keck_dhp” folder (the folder itself, not anything inside the folder), and select “Open”

Android Studio will build the gradle project


The project will be loaded into the studio


7.2 DHP Project Files

All project file are located under the “app” section on the left navigator screen

The main folders under “app” with descriptions follow:- manifests: Stores the Android Manifest. This file registers application info such as the

various activities that will be included in the build.

- java: stores all Java fileso com.dhp.keck.keck_dhp: This is the main spot for all Java files associated to the

project. Typically, each java file will have a corresponding “View” that is located under “res/layout”

- res: Resource fileso drawable: images (such as logos, smiley faces), etc.o layout: xml files that tell the app how to display pages. See “Designing XML” o menu: XML file for the drop down menu (top right button)o mipmap: Launcher iconso values: XML files that contain info on global colors, strings, and styles for use

throughout the app


7.2 Designing XML Layout Views

Text Tab. When an XML file under the layout directory is selected (e.g., activity_menu.xml), the studio will bring up the XML file as well as a preview. Notice in the center screen, the “Text” tab is selected. This will allow you to edit the XML file directly. New buttons, or other objects, can be added via XML tags within the main layout tag.


Design Tab. When the “Design” tab is selected, the developer can choose buttons, text fields, and other objects to drag and drop from the Palette onto the design preview instead of having to design via XML tags. This drag and drop design methodology will automatically insert the tags for you into the XML file. Note that you may still have to rename and link the objects to be usable within the context of the app (e.g., via Javascript, etc.), but give you an easy to manage visual representation of each object on the screen.

version history - web viewaashiha priyadarshni lakshmi kumar (prototyper) ... downloading the entire...

Documents