Project Architecture

UI Editor

You can design and code your apps right in your browser. The editor makes it easy to design native apps without worrying about fragmentation.

Workspace

Dist

The compiled Javascript output is located here. This file is added on .gitignore by default.

Assets

This folder is used to store files which are accesses directly by the app. Unlike the “Resources” and “Images”, this folder can be accessed by file operations such as read. Moreover, Assets folder is a unified location for all types of devices, you don’t need to use separate folders like the Resources folder.

Configuring assets to be different for both platforms

Optionally, you can separate the assets for both platforms. To do that, we need to make a couple of changes.

danger

Static files(assets) are managed differently on Smartface Emulator and Published Application. Separation of assets directory will not work properly on Smartface Emulator.

1. On project.json file (default project.json is located under empty workspace), change
   1. build.input.ios.assets from assets to assets/iOS
   2. build.input.android.assets from assets to assets/Android
2. Create two different directories under assets folder.
   1. Create iOS directory for iOS based files
   2. Create Android directory for Android files
3. Check if your assets folder is located in .gitignore file. If so, you will need to modify the entries.

The files on the app will remain unchanged, but in the project you can assign to different folders.

For reference, let's have a directory list like this:

• assets
  • iOS
    • animation.gif
    • GoogleService-Info.plist (From firebase)
  • Android
    • animation.gif
    • image.png

Basic usage:

console.info(Path.AssetsUriScheme); // This will be assets:// for both OS.
const animation = new File({
  path: Path.AssetsUriScheme + "animation.gif",
});
/**
 * This will throw error for iOS, since it doesn't exist.
 * It would be better to check for which OS we are in.
 */
const image = new File({
  path: Path.AssetsUriScheme + "image.png",
});

Config

Config folder is used to store the application configuration for:

• Android
• iOS
• Fonts
• project.json
• project.rau.json
• project.testingdistribution.json

Android

AndroidManifest.xml : It's an editable ".xml" file which you can change API Keys and Permissions for Android. For more information you can read the related Android documentation.

PackageProfiles.xml : Customizing Android packages is possible with PackageProfiles.xml . You can simply add the line “” to the PackageProfiles.xml in order to use xxxhdpi folder. Reducing APK size is also possible. If you don’t want to provide support for certain resolutions, you can remove some image folders. Commented lines are required for Android publishing to Google Play. Compatible-screens and supports-screens are the settings about the supported device types.

ids.xml : This file is autogenerated for Testing Automation purposes. You should commit this file.

Test Automation

Fonts

You can add your own font files which in this folder.

project.json

All main application settings resides in project.json. Such as ;

• Plugins
• Application Information
• keystore information
• Orientation settings
• Build settings
• Output folder
• API keys

iOS

It includes the Info.plist file which is required file for iOS Publishing. You can add new keys if required.

Images

All application images should be placed in this folder.
Android images should be located in the Images\Android folder and iOS images should be located in the Images\iOS folder.

Output

When you publish your app, the output files related to your project will be located in separate folders with timestamps under the output folder.

Plugins

All the plugins you use in your application should be placed under this folder. The plugins need to be set as active in project.json .

Scripts

Application sources (Typescript files) should be placed in the scripts folder.