# Structure
This comprehensive guide is designed to provide developers with an in-depth understanding of the structure and functionalities offered by the Akinon Mobile App Maker platform. The purpose of this guide is to equip developers with the knowledge needed to efficiently create high-quality, robust, and feature-rich mobile applications using the Akinon framework. By following this guide, developers will gain insight into the platform's architecture, components, and workflow, as well as practical tips and examples that will streamline the app development process.
### Rules
This section is used to define certain settings to intended modules within the scope of the project from a fixed point.
#### Basket
| Name | Description | Type | Default Value |
| -------------------- | ------------------------------------------------------------------------------------------------------------- | ------- | ------------------------- |
| **basketItem** | | | |
| swipeToDelete | Indicates the Swipe to Delete process | boolean | true |
| swipeToDeleteOptions | Indicates the settings of the swipeToDelete value **iconName:** The name of the icon displayed while deleting | boolean | true |
| openModalForDelete | Indicates the opening status of the modal while deleting | boolean | false |
| **itemImage** | | | |
| imageSize | Indicates the image size of the products in cart | object | {width: 400, height: 600} |
| **itemPrice** | | | |
| showTotalPrice | Indicates the visibility of total price for retail products | boolean | true |
| **itemRetailPrice** | | | |
| showTotalPrice | Indicates the visibility of total price for retail products | boolean | true |
#### Combine
| Name | Description | Type | Default Value / Link |
| -------------------- | -------------------------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------- |
| **imageViewer** | | | |
| swiperOptions | Indicates the values available for the swiper component displayed for product images on the combine page | object | [Props](https://github.com/leecade/react-native-swiper#basic) |
| swiperImageCropSizes | Indicates the size for the images displayed on the swiper | object | {width: 500, height: 500} |
| zoomViewerOptions | Indicates the zoom settings for the images displayed on the swiper | boolean | [Props](https://github.com/ascoders/react-native-image-viewer#props) |
| zoomImageCropSizes | Indicates the size of the image zoomed on the swiper | object | {imageWidth: 750, imageHeight: 750} |
#### Product Detail
| Name | Description | Type | Default Value / Link |
| ---------------------- | ------------------------------------------------------------------------------------ | -------------------- | -------------------------------------------------------------------------------------------------------------- |
| **gridElements** | | | |
| content | Indicates the value for the content element in product detail | object | Content |
| **imageViewer** | | | |
| carouselOptions | Indicates the settings for the carousel component | object | [Props](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/PROPS_METHODS_AND_GETTERS.md) |
| carouselImageCropSizes | Indicates the size of the image displayed on the carousel component | object | {width: 400, height: 500} |
| zoomViewerOptions | Indicates the zoom settings of the images displayed on the carousel | boolean | [Props](https://github.com/ascoders/react-native-image-viewer#props) |
| zoomImageCropSizes | Indicates the size of the image zoomed on the carousel | object | {imageWidth: 750, imageHeight: 750} |
| **page** | | | |
| addToCartAnimation | Indicates the animation type for adding to cart | ‘modal’ , ‘snackbar’ | ‘modal’ |
| **modals** | | | |
| **contentDrawer** | | | |
| modalImage | Indicates the status of the feature “quick add to cart” | object | {width: 35, height: 35} |
| **quickAddToCart** | | | |
| isEnable | Indicates the size of the images on the modal where product variants can be examined | boolean | true |
| **validationModal** | | | |
| isEnable | Indicates the visibility of the validation modal | boolean | false |
| **variants** | | | |
| **colors** | | | |
| buttonImage | Sets the size of color buttons | object | {width: 500, height: 400} |
| **modalVariant** | | | |
| variantImage | Indicates the size of the modal images for product variants | object | {width: 500, height: 500} |
#### Profile
| Name | Description | Type | Default Value |
| ------------- | -------------------------------------------- | ------ | ------------- |
| **page** | | | |
| resendSmsTime | Indicates the time to resend SMS to the user | number | 180 |
### Styles
All the styles of the application are imported/exported to the `styles/index.js` path.\
The exported style objects are sent to the createApp function as a parameter via the **styles** key.\
Style objects must be exported as an object with a prefix starting with **$rules\_**.\
The prefix of the style objects starting with the $rules\_ prefix are split and created with [Stylesheet.create](https://reactnative.dev/docs/stylesheet). (For instance: $rules\_homeStyles is created as homeStyles.)\
The style path is sent with the className props while using framework elements.
#### Example
Creating a view on the homepage and defining a style.
As shown below, a style object starting with $rules\_ must be exported in the `styles/homePage/view.js` path.
```javascript
const $rules_customView = {
viewStyle: {
flex: 1,
backgroundColor: "#ccc"
}
}
export { $rules_customView };
```
All styles for the homePage in the `styles/homePage/index.js` path must be imported and exported.
```javascript
import { $rules_view } from "./view.js";
export { $rules_view }
```
All styles written for the application in the `styles/index.js` path must be imported and exported.
```javascript
import * as homePage from './homePage';
export { homePage }
```
When creating a style object with this structure, the className props of the View element should be given the `homePage.customView.viewStyle` value.
```javascript
import { View } from "@elements";
```
### Static Text Maps
This is used to define the static texts used within the project from a fixed point.\
This is where static texts are configured based on language. All the static texts of the application are imported/exported to the path `staticTextMaps/index.js`.
#### Example
If a static text is to be used on the account page:
The text that is going to be used needs to be defined within `staticTextMaps/account.json`.
```json
{
"LOGOUT": { "tr": "Çıkış Yap", "en": "Log Out" },
}
```
This definition needs to be exported from the path `staticTextMaps/index.js`.
```javascript
import account from './account.json';
export default {
account,
...
};
```
Then, the file `staticTextMaps/index.js` needs to be imported within the page to destruct the **account** object.
```json
import staticTextMaps from '../../staticTextMaps';
const { account: $account } = staticTextMaps;
```
#### Multiple Language
The languages that are going to be used within the project are defined within `staticTextMaps/languageConfig.json`.
```json
[
{
"name": "Turkish",
"isDefault": false,
"isRTL": false,
"label": "Türkçe",
"code": "tr",
"region": "tr",
"key": "tr"
},
{
"name": "English",
"isDefault": true,
"isRTL": false,
"label": "English",
"code": "en",
"region": "en",
"key": "en"
}
]
```
### Integration Maps
Integration Map is used for the configuration of states that can be customized within the process of fetching data used within the project from the backend. For instance, it can be used to determine the field name with which the data will be fetched or the URLs to which the request will be sent. The application’s entire map layer is imported/exported with the path `integrationMaps/index.js`.
#### Example
There are a minimum of two integrationMap objects that need to be defined while fetching data from the backend. In our exemplary scenario, we can look at the user’s search process.
First, the endpoint to which the backend will send a request needs to be defined. We can work with this object `integrationMaps/urls.json`.
```json
{
"SEARCH": "/autocomplete/?search_text=",
...
}
```
Then, the generated data needs to be standardized. We can work with this object **integrationMaps/search.json**.
```json
{
"GROUPS": "groups",
"TYPE": "suggestion_type",
"ENTRIES": "entries",
"CATEGORY": {
"ID": "extra.category_id",
"LABEL": "label",
"PARENT_CATEGORIES": "extra.parent_categories"
},
"PRODUCT": {
"TYPE": "extra.product_type",
"LABEL": "label",
"URL": "url",
"IMAGE": "extra.image",
"PRICE": "extra.price",
"RETAIL_PRICE": "extra.retail_price"
},
}
```
Follow this [link](https://github.com/akinon/docs/blob/main/technicalguides/app-maker/mobile/mobile-app-framework/project-structure/broken-reference/README.md) to fetch data via integrationMap and for stages of modeling.
#### Deeplink
Deeplink enables you to open your mobile app using HTTPS links. For example, you can redirect users opening campaign links sent via email to your mobile application. Android refers to this concept as “deep links,” while iOS calls it “universal links”.
**Universal Links on iOS**
**Apple App Site Association Configuration:**
To use universal links, you must first verify the domain you own. Verification is performed by serving an AASA (Apple App Site Association) configuration file on your web server.
The AASA file should be served from `https://.com/.well-known/apple-app-site-association` (no extension). Its content type must be **application/json**. If you want links like `https://.com/product/akinon` to open in your mobile app, your AASA configuration file should look like this:
```json
{
"applinks": {
"apps": [],
"details": [
{
"appID": "ABCDE.com.akinon.shop",
"paths": ["/product/*"]
}
]
}
}
```
This configuration allows all links starting with `/product/` to be opened by the app with the ID `ABCDE.com.akinon.shop`.
Replace the **ABCDE** field with your TEAM ID. You can find your team ID by logging into your Apple Developer account and visiting the membership details page. For more details, refer to [Apple's documentation](https://developer.apple.com/documentation/xcode/supporting-associated-domains).
**Akinon Configuration:**
After completing domain verification, update the `akinon.json` file in your project as follows:
```json
{
"ios": {
"associatedDomains": ["applinks:.com"]
}
}
```
After this configuration, your links will open the mobile app. If your app does not open, ensure that the AASA file is in the correct directory and properly configured.
**Deep Links on Android**
**Akinon Configuration:**
To open your app with specific links, define an `intentFilter` for Android in `akinon.json`:
```json
{
"android": {
"intentFilters": [
{
"action": "VIEW",
"data": [
{
"scheme": "https",
"host": ".com",
"pathPrefix": "/"
}
],
"category": ["BROWSABLE", "DEFAULT"]
}
]
}
}
```
This configuration will prompt users to choose your app to open the link. To bypass this prompt and have your app open automatically (like on iOS), you need to perform additional verification steps.
**Verify Your Domain:**
You need to serve a JSON file containing your application information in the `/well-known/assetlinks.json` directory on your web server. This JSON file must include fields such as `package_name` and `sha256_cert_fingerprints`. You can access the necessary data for these fields via the [Google Play Console](https://play.google.com/console/).
Navigate to:
**Release > Setup > App integrity > App Signing** under the **Digital Asset Links JSON** section to obtain the fingerprints.
For more information, refer to the [Android Documentation](https://developer.android.com/training/app-links/verify-android-applinks#web-assoc).
You need to define the `"autoVerify": true` configuration for the `intentFilter` specified in `Akinon.json`. This configuration instructs Android to check the `assetlinks.json` file on your server.
```json
{
"android": {
"intentFilters": [
{
"action": "VIEW",
"autoVerify": true // Add this line
"data": [
{
"scheme": "https",
"host": ".com",
"pathPrefix": "/"
}
],
"category": ["BROWSABLE","DEFAULT"]
}
],
}
}
```
**Handling Links into Your App**
When your application is opened via universal links, you need to specify the URLs to redirect in your project's `src/integrationMaps/deepLink.js` file.
For example, if you want to redirect users opening the URL `https://.com/baskets/basket` to the Basket page in your application, you need to configure it as follows:
```js
export const deepLink = [
{
page: 'Basket',
viewname: 'baskets/basket',
verifyRequired: false,
exact: true,
authRequired: false,
params: {
title: 'Basket',
},
},
];
```
**Dynamic URLs:**
Values added in the `:variable` format to the `viewname` field are passed as navigation parameters.
```js
export const deepLink = [
{
page: 'Orders',
viewname: 'users/orders/:orderId',
verifyRequired: false,
exact: false,
authRequired: true,
params: {
title: 'Order Detail',
},
},
];
```
**Params:**
Field Descriptions:
| Field Name | Type | Description |
| -------------- | ------- | -------------------------------------------------------------------------------------------------------- |
| page | String | Navigation screen name |
| viewname | String | DeepLink or Pretty URLs API path |
| verifyRequired | Boolean | Used for Pretty URL dependencies |
| exact | Boolean | Checks if the path triggered by the deep link matches exactly the path specified in the `viewname` field |
| authRequired | Boolean | Should be set to true if the user needs to be logged in for the DeepLink to the page |
| params | Object | Default parameters to be sent during redirection to the page |
**Extract Patterns:**
URLs opened via deep linking are modified according to the patterns defined under `extractPatterns` in the `deepLinkConfig` section of `deepLink.js` before being redirected to the page. This allows certain values in the URL to be excluded. Excluded parameters are sent as route parameters to the redirected page. If there are multiple values for the same pattern key, these values are sent as an array.
```js
export const deepLinkConfig = {
extractPatterns: [
{
key: 'locale',
pattern: /\/tr-try/gi,
replace: '',
},
{
key: 'locale',
pattern: /\/en-try/gi,
replace: '',
},
],
};
```
```js
// Example of parameters sent to the page based on the above pattern
// shop://en-try/tr-try/akinon-banana
{ extractedParts: { locale: [ 'tr-try', 'en-try' ] }, newUrl: 'shop://akinon-banana' }
```
**Params:**
Field Descriptions:
| Field Name | Type | Required | Description |
| ---------- | ------ | -------- | ------------------------------------------------ |
| key | String | Yes | Route parameter name |
| pattern | String | Yes | Regex pattern to be used for modifying the URL |
| replace | String | Yes | String to replace the matched pattern in the URL |
**Open With Browser:**
URLs opened via deep linking are opened in the browser on Android if they match the patterns defined under `openWithBrowser` in the `deepLinkConfig` section of `deepLink.js` before being redirected to the page.
```js
export const deepLinkConfig = {
openWithBrowser: [
{
pattern: /testProduct/g,
redirect: 'https://www.akinon.com',
},
],
};
```
**Params:**
Field Descriptions:
| Field Name | Type | Required | Description |
| ---------- | ------ | -------- | ---------------------------------------- |
| pattern | String | Yes | Regex pattern to check the URL |
| redirect | String | No | URL to redirect to after the regex match |
### Theme Configs
This section manages the general style and component config settings within the application. Style definitions can be made on this module when a central standard management is required.
| Name | Description |
| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| **form** | |
| PICKER\_HEADER | The style structure of picker headers |
| PICKER\_ITEM\_WRAPPER | The wrapper style structure of the items within pickers |
| CHECKBOX\_AND\_RADIO\_LABEL | The style structure of the labels of CheckBox and radio components |
| VALIDATION\_ERROR\_TEXT | The style structure of the text of the validation error messages |
| DATE\_PICKER\_CONTAINER\_IOS | The container style structure of the date pickers on the iOS platform |
| PICKER\_MODAL | The general container style structure of the picker modal component |
| INPUT | The style structure of input components |
| RADIO\_GROUP\_TITLE | The title style structure of radio group component |
| PICKER\_INPUT | The style structure of the input components of pickers |
| PICKER\_ITEM\_TEXT | The text style structure of the items within pickers |
| CHECKBOX\_AND\_RADIO | The general style structure of CheckBox and radio components |
| **general** | |
| FACEBOOK\_BUTTON | The general style structure of the Login with Facebook button |
| BUTTON\_ICON | The general style structure of button icons |
| TEXT\_LINE\_HEIGHT\_RATE | The value of text line height |
| CURRENCY\_POSITION\_RELATIVE\_TO\_PRICE | The value of currency position |
| BUTTON\_ICON\_CONTAINER | The container style structure of button icons |
| OUTLINE\_BUTTON | The style structure of the outline button |
| DISABLE\_BUTTON | The style structure of the disable button |
| CONTAINER | The general style structure of containers |
| BUTTON\_CONFIGS | The general config structure of buttons |
| hasIcon | The visibility status of the icon |
| textColor | Text color |
| textAlign | Text alignment |
| CONTENT | The general style structure of content |
| TEXT | The style structure of texts |
| SUCCESS\_BOX\_BUTTON\_CONTAINER | The container style structure of the success button component |
| BUTTON\_STYLE | The general style structure of buttons |
| USE\_BASE\_CURRENCY\_SYMBOL | The status of use for base currency value |
| **header** | |
| SEARCH\_BUTTON | Indicates the visibility of the search button in the header component |
| ALIGN\_BODY\_CONTENT | Indicates the alignment status of the body content |
| **navbar** | |
| NAVBAR\_ITEMS\_CONTAINER | The container style structure of the items on the Navbar |
| SEARCH\_INPUT | Indicates the input style value of the search bar |
| HEADER\_TEXT | The style structure of the text in the header component |
| PROMOTION\_TEXT\_WRAPPER | The wrapper style structure of the text in the promotion component |
| SEARCH\_INPUT\_TEXT | Indicates the text style of the input on the search bar |
| BASKET\_COUNT\_WRAPPER | The wrapper style structure of the section to show the number of products in cart |
| BARCODE\_SCANNER | The style structure of the barcode scan component |
| PROMOTION\_TEXT | The style structure of the text in the promotion component |
| NAVBAR\_CONFIGS | The config style structure of the Navbar |
| logoPositionCenter | The status for the central alignment of the logo |
| searchButtonVisible | The visibility of the search button |
| headerIconColor | The color value of the header icon |
| BASKET\_COUNT\_TEXT | The text style structure of the section to show the number of products in cart |
| **searchComponent** | |
| BARCODE\_BUTTON\_VISIBLE | Indicates the visibility of the barcode scan button in the search component |
| **sidebar** | |
| WIDTH | Indicates the width of the Sidebar |
| **snackBar** | |
| SNACKBAR\_CONFIGS | The structure for Snackbar’s config settings |
| successBgColor | The background color for Success status |
| successTextColor | The text color for Success status |
| **spinner** | |
| HAS\_ICON\_SPINNER | Indicates the status of the icon in the spinner component |
| ICON\_SPINNER\_SIZE | Indicates the size of the spinner |
| **textStatuses** | |
| secondary | The structure for the secondary font object information |
| bold | The structure for the bold style font object information |
| **touchableOpacity** | |
| ACTIVE\_OPACITY | The active opacity of the TouchableOpacity component |
| **fonts** | |
| config | Defines the configuration for default font families, including the font used for regular text and bold text, as well as icon font configurations. |
| list | Contains a list of custom fonts used in the application. Each entry specifies the font family name and the source file associated with that font. |
#### Fonts
**config**
**(object)** Contains configurations related to font processes.
**defaultFontFamily**
**(string)** Specifies the default Font Family to be used in the `Text` element.
```jsx
import {Text} from "@elements";
Default Text
```
**defaultFontFamilyBold**
**(string)** Specifies the Font Family to be used when the bold field is set to true in the `Text` element.
```jsx
import {Text} from "@elements";
Bold Text
```
**ICOMOON\_JSON**
**(object)** Specifies the path to the Icomoon `selection.json` file.
**RTL\_ICOMOON\_JSON**
**(object)** Specifies the path to the Icomoon `selection.json` file to be used when the application is in a right-to-left flow.
**list**
**(array)** The list of fonts to be used within the application. Each font object should be structured as follows:
```json
[
{
fontFamily: "FONT_FAMILY_NAME",
src: require('FONT_PATH')
}
]
```
Each `fontFamily` value specified here can be used as shown below:
```jsx
import {Text} from "@elements";
Medium Text
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.akinon.com/technical-guides/app-maker/mobile/mobile-app-framework/project-structure/structure.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.