AppointmentTrader allows you to create apps that execute within the AppointmentTrader ecosystem, you can either build apps for yourself or for others.

The basic structure on how AT Apps work is that you can develop the app using PHP 8 on your infrastructure and while adhering to a simple folder structure,
AT will ingest the output of your app using https calls to your infrastructure and present it within the AppointmentTrader Platform.

You can theoretically use any coding language however then you will not be able to publish your app for other users.

If you hold the AppointmentTrader Developer Medal you can create apps for yourself without having to wait for a review, if you want to publish apps to the App Marketplace
or answer a development bid you can submit your app to development review that will analyze your PHP 8 sourcecode and upon approval deploy that sourcecode on AppointmentTrader infrastructure which will insure rapid performance and that your code does not change after the review has been completed.

You can monetize your work in one or multiple of the following ways:

-> You will automatically receive a commission on any transaction that has been triggered through your app by another user (e.g. you create a improved calendar and checkoutflow, all transactions going through here will earn you a commission)

-> You will automatically receive a commission on any paid endpoint that gets executed by your app.

-> You can charge a subscription fee

Important: As Apps may become an integral part of AppointmentTrader you will keep your commission rights as long as the app is actively serving users, however we may not allow you to withdraw the app once it is deployed and enjoys usage.

Apps can listen to events that happen on AppointmentTrader.

Your App will get a unique identifier and a private key after registering it using /v1/apps/set

Registering an App using /v1/apps/set will deliver a response similar to the response below, please download the AppointemntTrader SDK at the url defined in the Payload->sdkUrl field.

Remember: DO NOT share this zip file, it contains your personal keys and will compromise your security if shared.
After unpacking the contents of this file you can download the file defined in "boilerplateUrl" to get the boilerplate setup as defined in the file structure below.
/v1/apps/get_list will provide these URL's for all of your apps if you need to look them up again.

{
"RequestUserAlias": "YourUserHandle",
"RequestPath": "/v1/apps/set",
"RequestStatus": "Succeeded",
"ResponseCode": 100,
"ResponseMessage": "Request Successful",
"Payload": {
"uniqueAppIdentifier": "ForecastExplorer",
"sdkUrl": "https://appointmenttrader.com/modules/apps/download_sdk.php?unique_app_id=ForecastExplorer&app_private_key=588f9b00f6038448a3200d8b736474f4",
"boilerplateUrl": "https://appointmenttrader.com/modules/apps/download_sdk.php?boilerplate"
}
}


Apps can be accessed as such:
https://appointmenttrader.com/[YourAppIdentifier]

Exemplary Root Folders:

For the current version: (in this example v3 would be the current version)
https://appointmenttrader.com/ForecastExplorer
For a legacy version: (only visible to the developers & reviewers user account)
https://appointmenttrader.com/ForecastExplorer/legacy-versions/v2
For the development state (only visible to the developers user account)
https://appointmenttrader.com/ForecastExplorer/development
For the current release candidate that is in review (only visible to the developers and reviewers user account) after executing the API: apps::set_new_version endpoint
https://appointmenttrader.com/ForecastExplorer/release-candidate

The App presentation structure is as follows:


[AppointmentTrader HTML5 Header, + libraries in "uiLibraries"]

[Your Rendered HTML & Javascript Code]

[AppointmentTrader HTML5 Footer]



Please follow the following instructions for building your UI facing HTML files:

Apps can not have external front or back-end libraries but must contain exclusively vanilla HTML5, PHP, JavaScript and CSS code, no frameworks are allowed.
On the backend https API calls must handle all communication with external providers.

Your AT App must implement Namespacing

We require name spacing within your app to avoid introducing duplicate html IDs, css classes or php&javascript functions across the ecosystem.

Required HTML ID Namespace Implementation:
HTML elements can either have no ID or if they have an ID you need to prefix your unique app identifier. (Returned by /v1/apps/set)
<span id="[YourAppIdentifier]-anyIdNameYouLike">Text</span>

Required JavaScript Namespace Implementation:
This way of implementing your javascript functions is required to avoid apps from introducing duplicate function names across the ecosystem.

Note: Use the global Javascript Variable _[YourAppIdentifier]BaseURL to access your current base url relative for your project for tasks such as HTTPS Fetch Calls.

var YourAppIdentifier = {};
YourAppIdentifier.CustomFunction = function(testParameter) {
console.log(testParameter);
};
YourAppIdentifier.CustomObject = {};

Required CSS Namespace Implementation:
Global modifiers such as [name="xxx"] are not allowed, all style sheets must be encapsulated in classes or id operators

#[YourAppIdentifier]-anyIdNameYouLike {
color: red;
}

.[YourAppIdentifier]-color-red-text {
color: red;
}

Required PHP Namespace Implementation:
Include the at_app_header.php file as the first line of code in each of your php files which will result in your app operates in the correct namespace and will make API functions available - do not call AT API functions via a https call but use the provided ATApiRead(string $endpoint, array $variables) and ATApiWrite(string $endpoint, array $variables, bool $validateRequestOnly) php function as the methods will be invoked differently once you deploy your version to production.

Example Use of some PHP SDK functions:
// at_app_header.php will set the Namespace ATApp[YourAppIdentifier]
include __DIR__ . '../at_app_header.php';

// $ATUser['ID'] Contains the logged in UserID
// null when no user is authenticated
echo $ATUser['ID'] === null ? 'No logged in user present' : 'Logged in User ID:'.$ATUser['ID'];

//$ATUser['Alias'] Contains the logged in User Alias
// null when no user is authenticated
echo $ATUser['Alias'] === null ? 'No logged in user present' : 'Logged in User Alias:'.$ATUser['Alias'];

//your php code

Do _not_ use <html /> <head /> and <body /> tags - your html will be ingested and input to the AppointmentTrader HTML structure, placing these tags would be redundant.

Add all required libraries in the file structure.json.php file under the "uiLibraries" section as described below so the resources can be rendered into the AppointmentTrader html code correctly.

When making AppointmentTrader API calls from your HTML UI you _do not_ need to include the API key field as the currently logged in user of whoever is using your
interface will be used to execute your request.

Please structure your App on your infrastructure as follows:
(Example: https://yourhomelabip/myatapp/)

Important: Your AT project directory must have write permissions (on linux based systems 0777) for at_app_header.php, /appointmenttrader_sdk/ & /production/ as the AT revision management will make changes to your filesystem when deploying a new version such as zipping the respective version and hashing its source files and updating the sdk files when needed.

Security Notice: /v1/apps/set will return the public [YourAppIdentifier] and a private key that must be pasted into the variable $at_app_private_key variable in at_app_header.php as it will be used to securely access your filesystem from AppointmentTrader.
/at_app_header.php -> this file is part of the sdk package linked in /v1/apps/set and /v1/apps/get_list and must live in the root folder and must be included by all backend PHP files
/appointmenttrader_sdk/ -> includes asset files from the sdk package linked above
/development/ -> This is your development folder, while logged in with your development user you will be able to access the current state of development live, without review at https://appointmenttrader.com/[UserAlias]/[YourAppIdentifier]/development/, you'll make all changes in this structure and the AppointmentTrader SDK will handle deployment and revisioning through the API :apps::set_new_version endpoint once you completed development and testing of the current version.
/development/index.php -> startpage of your App
/development/structure.json.php -> file that includes the app structure
/development/invoke_event.php (optional) -> will be called when an event that has been registered for the app gets called (such as onNewBid)
/development/php-libraries/ (optional) -> if your app builds any libraries add them here, they must end in lib.php otherwise they will not be accepted in review, libraries can not be called directly but must be included, this insures namespaces are used everywhere
/development/css-libraries/ (optional) -> if your app builds css libraries add them here
/development/javascript-libraries/ (optional) -> if your app builds javascript libraries add them here
/development/datastore/ (optional) -> if your app writes or reads data locate it here, this is the only folder that may be written to or read from using file_get_contents() in your production environment
/development/assets/ (optional) -> if your app uses assets such as images store them here, to access them use the get variable _ATWebBasePath, Example: img src="echo $_GET['_ATWebBasePath']; assets/image.jpg" or the JavaScript variable _RequestPath
/development/marketing/ -> contains all materials used to present your app to other users
/development/marketing/storefront.html
/development/marketing/assets/ (optional)
/production/ -> the API :apps::set_new_version endpoint will talk to your server using the AppointmentTrader SDK to create a zip archive of the current development state and to then hand over the files to the AT production environment using this folder structure.

Exemplary structure.json.php structure, all paths are relative to [baseurl]version:

Important: Remember to not include any javascript or css files in your html code using <script /> or <link /> tags as AT will handle this using your structure.json.php file.
The 'any-ui-file' key will make your libraries available to all files in your project and the file keys will make them available to specific files.
The 'globalAliasFor' key in the navigation section allows you to specify where users can implement your app in their AppointmentTrader Portal, for instance if you build a better portfolio view users can select your app in the portfolio section.

{
"technical": {
"uiLibraries": {
"any-ui-file": [
{
"path": "/javascript-libraries/util.js",
"type": "javascript"
},
{
"path": "/css-libraries/style.css",
"type": "stylesheet"
}
],
"exampledir/examplefile.html": [
{
"path": "/javascript-libraries/extra_util.js",
"type": "javascript"
}
]
},
"registerForEventList": [
"OnNewBid"
],
"navigation": [
{
"itemName": "Pro Portfolio",
"itemDescription": "Advanced, fast Portfolio for Pro Sellers on AT",
"itemLink": "/exampledir/examplefile.php",
"globalAliasFor": "/modules/portfolio/index.php"
}
],
"marketing": [
{
"pricing":[{"monthly":[{"Type":"USDCent", "Amount":2900, "TrialperiodInDays":14}]}],
"appIconPath": "/assets/icon.png"
}],
"communityRewards": [
{
"perTranslatedKey":[{"Type":"Traderpoint", "Amount":25}],
"perValidatedBug":[{"Type":"Traderpoint", "Amount":250}]
}]
}
}


UI Styleguide

Please make sure your App follows the following style guide in order to provide a seamless user experience for AT users

Colors:
#FFFFFF (white)
#3C9A52 (AppointmentTrader Green)
#3D9563F (AppointmentTrader Red)

#555555 Gray (Mainly used for Text)

Headings:
Please use consecutive headings: h1 for the Main Page Content title, h2 for a lower ranking section etc.

Info boxes - please use the following style, as your html content will be rendered into the AppointmentTrader portal you will have access to the css classes and imagine files mentioned below


<div class="shadow">;
<h2>Title</h2>
<div class="info_box_line">
<div class="icon"> <img src="/images/ios-information-circle-outline.svg"> </div>
<div class="info">
<p class="small-text mb-1 gray-txt">Your Informational Content</p>
</div>
</div>
</div>


Items other than Infoboxes should have 16px padding to left and right
Vertical spacing between items should be 5px for items that belong together and 10px or a <hr> tag.

Paragraphs

<p class="small-text mb-1 gray-txt">Paragraph Text</p>


Links & Buttons:

Links

Unless you are linking to an external site please use the function javascript:Navigate() to navigate which will endable dynamic loading functions.


<a class="link" href="javascript:Navigate('abc');">Button Text

Confirmation Button:

<a class="btn-profit" href="https://appointmenttrader.com">Button Text

Cancel Button:

<a class="btn-cancel" href="https://appointmenttrader.com">Button Text

Delete Button:

<a class="btn-delete" href="https://appointmenttrader.com">Button Text

Major Confirmation Button:

<a class="btn full" href="https://appointmenttrader.com">Button Text

Forms

<div class="form-group">
<label class="small-text gray-txt" id="[YourAppIdentifier]-input-field-label">Label for your Input field</label>
<input autocomplete="off" type="text" class="form-control" value="" id="[YourAppIdentifier]-input-field">
</div>


UI Javascript Functions

Present a Message

ScreenFeedback("Your Message", "Your Title");


AppointmentTrader allows users to navigate the entire platform using the searchbar presented on each page,
App developers can leverage the system to by adding the following attributes to their content.

The general structure of the DOM Search is as follows:

CONTAINER
-- ITEM 1
-- ITEM 2


<ul data-domsearchgroupcontainer="Container Name">
<li data-domsearchgroup="Container Name" data-domsearchphrase="Container Name Item 1">Item 1</li>
<li data-domsearchgroup="Container Name" data-domsearchphrase="Container Name Item 2">Item 1</li>
</ul>



Multilanguage Support

When outputting text please use the sdk function echolang() which will automatically generate language keys and allows community users to translate your app.
You can offer rewards for users to translate your app so it as available across more AppointmentTrader regions by setting the "communityRewards"->"perTranslationKey" key in your structure.json.php which will pay a community user the specified amount each time they add a translation to your app.

Provides helpful functions to compliment appointment trades

Manages Community Related Functions

Handles all location related functions.

Manages portfolio related functions such as price changes and status changes

Manages all portfolio related functions

Manages all bid related functions

Manages AI Chat related functions

Manages Access to the AppointmentTrader Account

Contains all market data related functions to allow sellers to pick up on trends throughout the year

Manages All Medal and User Permission Related Functions

Contains all user related functions

Manages all notification related functions