5.1.Structure

¶ 5.1.1. /src

"/src" is the directory of source code. Other directories are automatically generated and maintained, and thus do not need any modification. Developers only need to modify *.html and *.js files in /src directory, where the *.html files define UI, and the *.js files define behavior and logic of the webpages.

Below are the files to be modified:

§ 5.1.1.1. /src/index.html

Homepage contains no node, but a few file references (URLs of external files). Thus only modify it when you add a file under /app.

§ 5.1.1.2. /src/index.js

Point indexes to corresponding files, and support translations among different languages i.e. Korean, Spanish.

§ 5.1.1.3. /src/app

1. Content.js: Load the list of article titles. Press while dragging down to update. Its interface is Content.html. Content.js and Content.html come together.

2. ContentCreate.js: Write, modify, and publish articles ContentCreate.html

3. directives.js: The purpose of directives.js is to unify the same behavior for a certain type of UI. Specifically, the types of UI include the button UI, image UI, input UI, and file UI. The directives.js acts on the type of UI (img, input, button, or file), rather than a specific UI object. Therefore, once the instructiona have been defined in the directives.js, all UI objects of the same UI type will behave the same. For example, if the login logic has been associated with the button UI in the directives.js, then all objects of button UI type could be used to achieve login. Here we are binding the file UI type with the functionalities of uploading profile images, illustrations, and icons of the article, so that file UI objects defined in different files could achieve all these three functionalities without redundant code.

4. Edit.js: Modify profile data i.e. user name, email address, birth date, password. Users will be redirected to other pages when doing so.

Edit.html

1. image-popover.html: Image viewer, also achieves image scaling

2. src/app/Login.js: Logics of user login. User interface is defined in Login.html.

3. Me.js: Display uploaded profile images, switch languages, and check birth date, company address, home address, and cell phone number. If the user uploads another profile image, the img UI type binded in directives.js will upload the newly added image, which will be copied to Me.js. Me.html

4. service.js: Same as the directives.js, service.js is also reusable by containing complete modules i.e. drop-down menus, modal dialogs, and camera photos. What differs from directives.js is that services.js contains both instructions and UI, and thus can be called independently without binding other UI types. However, directives.js only contains instruction code, and therefore requires additional UI binding. Here, when the user clicks on some UI, the corresponding module will pop up without changing the background page.

5. SignUp.js: User registration SignUp.html

¶ 5.1.2. /p.sh

publish command ("p" stands for publish)

run

sh p.sh

• What: publish src to docs (Website Version) or iOS (iPhone Version)
• How: compile the source code in the src directory.

¶ 5.1.3. /iOS

The directory of iOS version (automatically generated).

The code inside is 100% auto-generated and can be ignored.

1. /iOS/XXXX.xcodeproj is an Xcode project file that can be compiled into an iPhone app.
2. /iOS/www The contents of this directory are the same as /docs

¶ 5.1.4. /docs

Website version directory (automatically generated). The code inside is 100% auto-generated and can be ignored.

¶ 5.1.5. /android

The directory of Android version (automatically generated).

The code inside is 100% auto-generated and can be ignored.

1. /android/build.gradle is an android studio project file that can be compiled into an iPhone app.
2. /android/app/src/main/assets/www The contents of this directory are the same as /docs