daily pastebin goal
1%
SHARE
TWEET

Untitled

a guest Dec 6th, 2016 671 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. 2015-12-26
  2.  
  3. - [[https://git.clixxie.de/femory/playboy-flexiphoto|GitLab Repository]]
  4. - [[https://trac.clixxie.de/query?group=status&milestone=Playboy+Flexiphoto+1.0.0|Trac Tickets]]
  5.  
  6. ------
  7.  
  8. = Architecture =
  9.  
  10. Please see [[Web-Shop-Application#Architecture|Web Shop Applications]] for architecture details.
  11.  
  12. __Additional notes about the playmate pictures__:
  13.  
  14. - 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.
  15. - 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.
  16. - 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.
  17. - Solution: #5071 was implemented and this will be the process flow:
  18.  - The image files are stored in different screen resolutions (thumbnail etc.) as static files on server-2.
  19.  - The image metadata (playmate in month X, woman's name etc.) is stored in static JSON files on server-2.
  20.  - After ordering, the SPA delivers the image URLs to the REST-API and the backend will download the playmate photos from server-2.
  21.  
  22. -----
  23.  
  24. == Process flow ==
  25.  
  26. [[Image(Process-Flow.png)]]
  27.  
  28. -----
  29.  
  30. = Technology =
  31.  
  32. Please see [[Web-Shop-Application#Technology|Web Shop Applications]] for technology details.
  33.  
  34. ------
  35.  
  36. = Development =
  37.  
  38. Please see [[Web-Shop-Application#Development|Web Shop Applications]] for additional notes.
  39.  
  40. == Initialization-Tickets ==
  41.  
  42. At project start (2015-08), there were two user story tickets that link to most of the differents tasks:
  43.  
  44.  * #5075 contains the design and view related tasks. This tickets are primarily for web- and graphic-designers (HTML, CSS, images).
  45.  * #5077 contains the logic related tasks. This tickets are primarly for webdeveloper (Angular.js, file deployment etc.).
  46.  
  47. == Local development environment ==
  48.  
  49. __''playboy-flexiphoto'' installation__ ([[https://trac.clixxie.de/attachment/wiki/Web-Shop-Application/architecture.png|Server-2]] and SPA = Angular.js Frontend)
  50.  
  51.  * 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.
  52.  * Get the code: {{{git clone git@git.clixxie.de:femory/playboy-flexiphoto.git}}}
  53.  * Install all dependencies: {{{cd playboy-flexiphoto && npm install}}}
  54.  * Start the node.js development server ([[https://trac.clixxie.de/attachment/wiki/Web-Shop-Application/architecture.png|Server-2]]): {{{cd playboy-flexiphoto && npm start}}}
  55.  * Go to http://localhost:4000/ (this pages should automatically reload when changing the code)
  56.  
  57. __''flexiphoto-api'' installation__ ([[https://trac.clixxie.de/attachment/wiki/Web-Shop-Application/architecture.png|Server-1]] = Rails Backend)
  58.  
  59.  * NOTE: This part is NOT needed for design/view development! Please skip it, if you are a graphic/HTML/CSS designer :)
  60.  * The SPA interacts with the [[https://trac.clixxie.de/attachment/wiki/Web-Shop-Application/architecture.png|Server-1]] Rails API.
  61.  * The easiest way is to skip the local installation and send requests directly to the flexiphoto-dev server ({{{flexiphoto-dev.clixxie.de}}}).
  62.  * But if you want to install the backend in the local environment:
  63.   * 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}}}.
  64.   * 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)
  65.  * Update the database data via Rails-Console if necessary.
  66.  
  67. == Staging and deployment ==
  68.  
  69. Three stages are implemented:
  70.  
  71. 1.) LOCAL
  72.  * Add and/or change the code in your [[#Local_development_environment|local environment]]
  73.  * Check http://localhost:4000/
  74.  * Push the changes to the repository
  75.  
  76. 2.) DEV
  77.  * {{{ssh deploy@playboy-dev.clixxie.de}}}
  78.   * {{{cd bin && deploy_playboy-flexiphoto.sh}}}
  79.  * Check http://playboy-dev.clixxie.de
  80.   * User = {{{femory}}}
  81.   * Password = {{{Pla-Fle-Fem-1}}}
  82.  * The used REST-API is https://flexiphoto-dev.clixxie.de (don't forget to allow this server to download pictures, see #5133)
  83.  
  84. 3.) PROD
  85.  * {{{ssh deploy@playboy.clixxie.de}}}
  86.   * {{{cd bin && deploy_playboy-flexiphoto.sh}}}
  87.  * Check http://playboy.clixxie.de
  88.  * The used REST-API (Rails API) is https://flexiphoto-api.clixxie.de
  89.  
  90. Please see #5133 (server configuration) and #5134 (deploy script) for details.
  91.  
  92. ------
  93.  
  94. = Maintenance =
  95.  
  96. == Install new playmate pictures ==
  97.  
  98. Please proceed the following steps to install new playmate pictures:
  99.  * On DEV and PROD server:
  100.   * 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} }}}.
  101.    * Please separate already on your disk the different photo assets in different folders: hero, thumb, preview, print, usw.
  102.    * E.g. copy {{{playmate_hero_2015_04_nicole_schumann.jpg}}} to {{{~/apps/playboy-flexiphoto-images/hero/playmate_hero_2015_04_nicole_schumann.jpg}}}.
  103.    * {{{ ${type_of_images} }}} can be:
  104.    * Homepage large photo -> ''/hero''
  105.    * Homepage small photo -> ''/thumb''
  106.    * Pictures page -> ''/thumb''
  107.    * Preview popup -> ''/preview''
  108.    * Print files ( not visible on the website ) -> ''/print''
  109.    * Slides -> ''/slider''
  110.    * Photobox files -> ''/photobox'' ( subfolders have the same structure as the main ''playboy-flexiphoto-images'' folder ).
  111.    * ''Special'' files -> ''/specpmates'' ( subfolders have the same structure as the main ''playboy-flexiphoto-images'' folder ).
  112.   * Check owner ({{{deploy:deploy}}}) and permissions ({{{664}}}) of the new files.
  113.  * Edit the webapp source code:
  114.   * Add the new pictures with their metadata to {{{app/data/pmates.json}}} (and {{{app/data/slider.json}}} if necessary). Don't forget {{{git push}}}.
  115.  * On DEV and PROD server:
  116.   * Deploy the adjusted JSON files: {{{cd bin && ./deploy_playboy-flexiphoto.sh}}}
  117.   * FYI: This deploy-script links subdirectories in {{{~/apps/playboy-flexiphoto/images/}}} to {{{~/apps/playboy-flexiphoto-images/...}}}.
  118.  * For testing: Access pictures via webserver: e.g. https://playboy-dev.clixxie.de/images/hero/playmate_hero_2015_04_nicole_schumann.jpg
  119.  
  120. == Configure Photobox ==
  121.  
  122. 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...
  123.  
  124. Add a new photobox:
  125.  * Add an additional object to the ''photoboxes'' list. Choose a pretty UID (only ASCII characters, no spaces), there are currently no naming standards.
  126.  
  127. Enable / Disable the photobox:
  128.  * Set ''activeUid'' to ''null'' to disable the photobox. But please note: The deploy script enables the photobox always in the '''DEV''' environment.
  129.  * Set ''activeUid'' to the related ''photoboxes.uid'' to enable a photobox. |
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top