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

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.

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.

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.

import { View } from "@elements";

<View className="homePage.customView.viewStyle" />

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.

{
 "LOGOUT": { "tr": "Çıkış Yap", "en": "Log Out" },
}

This definition needs to be exported from the path staticTextMaps/index.js.

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.

import staticTextMaps from '../../staticTextMaps';
 
const { account: $account } = staticTextMaps;
 
<Button text={$account.LOGOUT} />

Multiple Language

The languages that are going to be used within the project are defined within staticTextMaps/languageConfig.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.

{ 
 "SEARCH": "/autocomplete/?search_text=",
 ...
}

Then, the generated data needs to be standardized. We can work with this object integrationMaps/search.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 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://<your-domain>.com/.well-known/apple-app-site-association (no extension). Its content type must be application/json. If you want links like https://<your-domain>.com/product/akinon to open in your mobile app, your AASA configuration file should look like this:

{
  "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.

Akinon Configuration:

After completing domain verification, update the akinon.json file in your project as follows:

{
  "ios": {
    "associatedDomains": ["applinks:<your-domain>.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:

{
  "android": {
    "intentFilters": [
      {
        "action": "VIEW",
        "data": [
          {
            "scheme": "https",
            "host": "<your-domain>.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.

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.

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.

{
  "android": {
    "intentFilters": [
      {
        "action": "VIEW",
        "autoVerify": true // Add this line
        "data": [
          {
            "scheme": "https",
            "host": "<your-domain>.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://<your-domain>.com/baskets/basket to the Basket page in your application, you need to configure it as follows:

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.

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.

export const deepLinkConfig = {
  extractPatterns: [
    {
      key: 'locale',
      pattern: /\/tr-try/gi,
      replace: '',
    },
    {
      key: 'locale',
      pattern: /\/en-try/gi,
      replace: '',
    },
  ],
};

// 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.

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.

import {Text} from "@elements";
<Text safelyTranslation> Default Text </Text>

defaultFontFamilyBold

(string) Specifies the Font Family to be used when the bold field is set to true in the Text element.

import {Text} from "@elements";

<Text bold safelyTranslation> Bold Text </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:

[
  {
    fontFamily: "FONT_FAMILY_NAME",
    src: require('FONT_PATH')
  }
]

Each fontFamily value specified here can be used as shown below:

import {Text} from "@elements";

<Text 
  defaultStyle={{
    fontFamily: "Jost-Medium"
  }}
  safelyTranslation
> 
  Medium Text 
</Text>