Setel Mobile

Table of Contents Saleor Update Build Deploy Debug Entrypoint Falcon Fitur Konsep Client-Server Ekstensi-API

Saleor

https://github.com/facebook/create-react-app

my-app
├── .gitignore
├── README.md
├── node_modules
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

Update

Lihat fresh installation of laravel run composer install; npm install; npm install cross-env -D (read it from laravel/framework#18446); npm run dev <script></script>

Build

Lihat

• npm install express --save

$ BACKEND_URL="https://product-dot-chetabahana.appspot.com"
$ export BACKEND_URL

$ cd ~ && rm -rf saleor-storefront
$ git clone https://github.com/mirumee/saleor-storefront.git && cd saleor-storefront
$ sudo apt-get install -y libpng12-dev

$ rm -rf node_modules
$ rm package-lock.json yarn.lock
$ npm cache clear --force
	
$ npm install cross-env -D
$ npm install webpack --save

$ npm run tslint
$ npm run build --prod
...
Child webapp-webpack-plugin:
     1 asset
    Entrypoint favicon.png = e4fd59d214d218045643
    [0] ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":
"/home/circleci/app/node_modules/.cache/webapp-webpack-plugin"}!
./node_modules/webapp-webpack-plugin/src/loader.js?{"prefix":
"images/favicons/","options":{"appName":"Saleor","appDescription":
"Storefront for the Saleor e-commerce platform","display":"standalone",
"developerURL":null,"background":"#ddd","theme_color":"#333",
"version":"0.5.0","developerName":"Mirumee"},"path":"/"}!
./src/images/favicon.png 1.06 MiB {0} [built]
Persisting to Workspace

$ npm start 

Deploy

Lihat

• Konfigurasi File app.yaml
• Gunakan npm run deploy

#gcloud app deploy --version=v1-1
env: standard
service: mobnile
runtime: nodejs10
instance_class: F1

env_variables:
  BACKEND_URL: 'https://product-dot-chetabahana.appspot.com'

handlers:
  - url: /.*
    script: auto

Debug

Entrypoint

{"severity": "WARNING", "message": "Entrypoint "cross-env NODE_ENV=develop \
webpack-dev-server --history-api-fallback --watch --port 3000 --mode development" \
requires a shell program to be the parent process. This will make the program \
slower to start and may cause unexpected behavior  when shutting down. \
To avoid this, remove any occurrences of "&", "|", ";", "=" in your command."}
events.js:174

Lihat:

• port 3000 package.json baris ke 100
• deploy react to gae
• Gunakan process.env.port
• nodejs8-standard-environment
• next.js

JSON
    "start": "cross-env NODE_ENV=develop webpack-dev-server --history-api-fallback -\
-watch --port 3000 --mode development"

Falcon

Untuk tampilan aplikasi diluar Saleor kita pakai DEITY Falcon dibangun dengan NodeJS, GraphQL, React, Apollo, Koa. Webpack. dan Jest.

Prinsipnya hampir sama yaitu merupakan pustaka agnostik platform, berdiri sendiri tetapi modular untuk digunakan dengan mudah membangun situs web PWA yang terpisah.

Fitur

Fitur / konsep dasarnya adalah sbb:

• Fleksibel - Memungkinkan untuk situs web apa pun; e-commerce, blog, portofolio, apa saja
• Integrable - Memungkinkan Anda untuk mengintegrasikan segala jenis sumber data dengannya
• Andal - Anda tidak perlu khawatir tentang lalu lintas tinggi dan skalabilitas
• Extensible - Memungkinkan Anda untuk memperpanjang proyek Anda dengan sebanyak mungkin fitur kustom

Konsep

Client-Server

Gagasan utama yang berdiri di belakang memiliki aplikasi terpisah untuk bagian Klien dan Server adalah untuk menyediakan pengembang skala kemampuan scaling:

• Anda dapat menetapkan persyaratan server khusus untuk instance Falcon Server, tetapi menjaga instance server Falcon Client lebih "ringan"
• Anda dapat memiliki beberapa instance Klien Falcon (didistribusikan secara geografis) yang terhubung ke aplikasi Falcon Server tunggal
• Falcon Server tidak memiliki ientitas, sehingga Anda dapat meningkatkannya sesuai kebutuhan (misalnya, Anda tidak ingin terjebak dengan satu instance Server Falcon sambil mendukung pengunjung seluler Anda dengan aplikasi khusus yang menggunakan Falcon Server sebagai penyedia data)

Ekstensi-API

Falcon Server sendiri tidak menyediakan data apa pun, melainkan bertindak sebagai lem untuk ekstensi data Anda. Sebagai hasil dari kerjanya - Falcon Server menghasilkan Skema GraphQL terpadu yang dapat digunakan oleh Klien GraphQL untuk bekerja dengan data.

• Falcon Server menggunakan Ekstensi Falcon sebagai lapisan abstrak untuk bekerja dengan entitas tertentu (misalnya, ekstensi toko, ekstensi blog, dll.) Untuk memberikan akses data "agnostik" dan menjadi penyedia data yang bebas platform.
• Ekstensi Falcon menggunakan API sebagai lapisan transportasi untuk bekerja dengan layanan back-end tertentu (misalnya, magento-api, wordpress-api dll), yang harus menerapkan semua metode Kueri dan Mutasi bersama dengan Jenis GraphQL yang telah diselesaikan (struktur data) yang ditentukan oleh Falcon Extension.

Falcon Extension harus mendefinisikan Kueri, Mutasi, dan tipe abstrak sebagai bagian dari Falcon Server API, yang akan "dijahit" ke dalam Skema GraphQL terpadu oleh Falcon Server.

Semua metode yang didefinisikan harus diproksikan ke Falcon API yang ditetapkan (didefinisikan dalam konfigurasi Falcon Server).

Sebagai contoh, wordpress-api dibuat sebagai lapisan transport untuk ekstensi-blog, yang berarti bahwa kelas wordpress-api harus memberikan semua Kueri dan Mutasi yang diperlukan yang ditentukan dalam skema-ekstensi GraphQL blog dan cocok dengan tipe GraphQL-nya (Ekstensi Falcon tidak peduli bagaimana data ini sedang diambil dan pra / pasca diproses oleh Falcon API, penting untuk "memenuhi" definisi skema).

Semua metode opsional bergantung pada konfigurasi Ekstensi.