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

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