2015-12-26

- [[https://git.clixxie.de/femory/playboy-flexiphoto|GitLab Repository]]
- [[https://trac.clixxie.de/query?group=status&milestone=Playboy+Flexiphoto+1.0.0|Trac Tickets]]

------

= Architecture =

Please see [[Web-Shop-Application#Architecture|Web Shop Applications]] for architecture details.

__Additional notes about the playmate pictures__:

- The SPA HTML code integrates the images as links and the browser downloads them automatically as needed. But the latter is a browser logic, the SPA has no access to the images, the images are not stored inside the local storage.
- So, it is not easy to upload the images to the backend. The SPA would have to download the images first and than upload them.
- Another point is security: After the successfull payment, a user could upload any (not Playboy related) image and also more as ordered images. The backend have to validate this processes.
- Solution: #5071 was implemented and this will be the process flow:
 - The image files are stored in different screen resolutions (thumbnail etc.) as static files on server-2.
 - The image metadata (playmate in month X, woman's name etc.) is stored in static JSON files on server-2.
 - After ordering, the SPA delivers the image URLs to the REST-API and the backend will download the playmate photos from server-2.

-----

== Process flow ==

[[Image(Process-Flow.png)]]

-----

= Technology =

Please see [[Web-Shop-Application#Technology|Web Shop Applications]] for technology details.

------

= Development =

Please see [[Web-Shop-Application#Development|Web Shop Applications]] for additional notes.

== Initialization-Tickets ==

At project start (2015-08), there were two user story tickets that link to most of the differents tasks:

 * #5075 contains the design and view related tasks. This tickets are primarily for web- and graphic-designers (HTML, CSS, images).
 * #5077 contains the logic related tasks. This tickets are primarly for webdeveloper (Angular.js, file deployment etc.).

== Local development environment ==

__''playboy-flexiphoto'' installation__ ([[https://trac.clixxie.de/attachment/wiki/Web-Shop-Application/architecture.png|Server-2]] and SPA = Angular.js Frontend)

 * The development environment needs node.js to work, so install node.js (e.g. [[https://nodejs.org/dist/v0.12.2/|v0.12.2]]) first.
 * Get the code: {{{git clone git@git.clixxie.de:femory/playboy-flexiphoto.git}}}
 * Install all dependencies: {{{cd playboy-flexiphoto && npm install}}}
 * Start the node.js development server ([[https://trac.clixxie.de/attachment/wiki/Web-Shop-Application/architecture.png|Server-2]]): {{{cd playboy-flexiphoto && npm start}}}
 * Go to http://localhost:4000/ (this pages should automatically reload when changing the code)

__''flexiphoto-api'' installation__ ([[https://trac.clixxie.de/attachment/wiki/Web-Shop-Application/architecture.png|Server-1]] = Rails Backend)

 * NOTE: This part is NOT needed for design/view development! Please skip it, if you are a graphic/HTML/CSS designer :)
 * The SPA interacts with the [[https://trac.clixxie.de/attachment/wiki/Web-Shop-Application/architecture.png|Server-1]] Rails API.
 * The easiest way is to skip the local installation and send requests directly to the flexiphoto-dev server ({{{flexiphoto-dev.clixxie.de}}}).
 * But if you want to install the backend in the local environment:
  * See Clixxie-fotobuch for [[Clixxie-fotobuch/Installation|installation]] instructions. The steps for Clixxie-Flexiphoto are the same, but use the GIT repository {{{git@git.clixxie.de:femory/flexiphoto-api.git}}}.
  * Add the following line to ''/etc/hosts'' while developing: {{{127.0.0.1 clixxie.de}}}. This step is needed by the Rails API image download (see [[https://trac.clixxie.de/attachment/wiki/Web-Shop-Application/processflow.png|Playmate Photos]] action)
 * Update the database data via Rails-Console if necessary.

== Staging and deployment ==

Three stages are implemented:

1.) LOCAL
 * Add and/or change the code in your [[#Local_development_environment|local environment]]
 * Check http://localhost:4000/
 * Push the changes to the repository

2.) DEV
 * {{{ssh deploy@playboy-dev.clixxie.de}}}
  * {{{cd bin && deploy_playboy-flexiphoto.sh}}}
 * Check http://playboy-dev.clixxie.de
  * User = {{{femory}}}
  * Password = {{{Pla-Fle-Fem-1}}}
 * The used REST-API is https://flexiphoto-dev.clixxie.de (don't forget to allow this server to download pictures, see #5133)

3.) PROD
 * {{{ssh deploy@playboy.clixxie.de}}}
  * {{{cd bin && deploy_playboy-flexiphoto.sh}}}
 * Check http://playboy.clixxie.de
 * The used REST-API (Rails API) is https://flexiphoto-api.clixxie.de

Please see #5133 (server configuration) and #5134 (deploy script) for details.

------

= Maintenance =

== Install new playmate pictures ==

Please proceed the following steps to install new playmate pictures:
 * On DEV and PROD server:
  * Copy the new images to the related subfolders in {{{~/apps/playboy-flexiphoto-images/}}}: {{{ cd ${name_of_the_folder_with_the_new_photos_inside } && scp *.jpg deploy@playboy-dev.clixxie.de:/home/deploy//apps/playboy-flexiphoto-images/{type_of_images} }}}.
   * Please separate already on your disk the different photo assets in different folders: hero, thumb, preview, print, usw.
   * E.g. copy {{{playmate_hero_2015_04_nicole_schumann.jpg}}} to {{{~/apps/playboy-flexiphoto-images/hero/playmate_hero_2015_04_nicole_schumann.jpg}}}.
   * {{{ ${type_of_images} }}} can be:
   * Homepage large photo -> ''/hero''
   * Homepage small photo -> ''/thumb''
   * Pictures page -> ''/thumb''
   * Preview popup -> ''/preview''
   * Print files ( not visible on the website ) -> ''/print''
   * Slides -> ''/slider''
   * Photobox files -> ''/photobox'' ( subfolders have the same structure as the main ''playboy-flexiphoto-images'' folder ).
   * ''Special'' files -> ''/specpmates'' ( subfolders have the same structure as the main ''playboy-flexiphoto-images'' folder ).
  * Check owner ({{{deploy:deploy}}}) and permissions ({{{664}}}) of the new files.
 * Edit the webapp source code:
  * Add the new pictures with their metadata to {{{app/data/pmates.json}}} (and {{{app/data/slider.json}}} if necessary). Don't forget {{{git push}}}.
 * On DEV and PROD server:
  * Deploy the adjusted JSON files: {{{cd bin && ./deploy_playboy-flexiphoto.sh}}}
  * FYI: This deploy-script links subdirectories in {{{~/apps/playboy-flexiphoto/images/}}} to {{{~/apps/playboy-flexiphoto-images/...}}}.
 * For testing: Access pictures via webserver: e.g. https://playboy-dev.clixxie.de/images/hero/playmate_hero_2015_04_nicole_schumann.jpg

== Configure Photobox ==

The photobox data file {{{app/data/photobox.json}}} (resp. {{{app/data/photobox.dev.json}}} for the local development environment) contains the configuration. Edit this file to...

Add a new photobox:
 * Add an additional object to the ''photoboxes'' list. Choose a pretty UID (only ASCII characters, no spaces), there are currently no naming standards.

Enable / Disable the photobox:
 * Set ''activeUid'' to ''null'' to disable the photobox. But please note: The deploy script enables the photobox always in the '''DEV''' environment.
 * Set ''activeUid'' to the related ''photoboxes.uid'' to enable a photobox. |