Makassar, Irsyad — Setelah membuat dua artikel tentang pembuatan project Laravel dan pemilihan template saya berpikiran bagaimana kalau langsung setup full project saja. Karena tutorial ini akan menggunakan Angular dan Laravel berarti akan ada dua environment yang berbeda. Kedua framework tersebut juga tidak ada masalah jika disimpan pada direktori khusus tidak harus dalam local server seperti XAMPP karena memiliki built-in server masing — masing. Untuk menyamakan development dan menghindari error lain silakan ikuti pembuatan folder saya. Pada folder user (C:\Users\admin\) buat folder development dan dalam folder development buat folder OMS struktur folder akan menjadi C:\Users\admin\development\oms. Nah dalam folder oms ini nantinya akan ada dua folder yaitu frontend dan backend. Folder frontend adalah project angular yang akan create dan backend adalah project laravel yang telah saya siapkan di Bitbucket saya.
Clone Repository
Clone repository merupakan proses untuk mendownload dari server ke local dengan semua yang ada mulai dari branching dan sebagainya. Kalau sekedar mendownload hanya source codenya saja yang akan ada sedangkan branch dan historynya tidak ada. Langsung saja masuk ke folder yang telah kita buat tadi dan gunakan perintah git clone <url> untuk clone repo.
c:\Users\admin\development\oms>git clone https://irsyadjpratamap@bitbucket.org/irsyadjpratamap/project-oms.git
Cloning into 'project-oms'...
remote: Counting objects: 109, done.
remote: Compressing objects: 100% (83/83), done.
Receiving objects: 100% (109/109), 225.99 KiB | 1Resolving deltas: 100% (9/9), done.Setelah clone dari server, karena saya belum menambahkan README.md pada server, saya menambahkan dari local. Setelah menambahkan README.md selanjutnya adalah menambahkan dari folder ke local repo, dari local repo ke server repo. Perhatikan perintah berikut. Saya tidak menjelaskan secara detail karena sudah dijelaskan pada artikel sebelumnya.c:\Users\admin\development\oms>cd project-omsc:\Users\admin\development\oms\project-oms>echo "# My project's README" >> README.mdc:\Users\admin\development\oms\project-oms>git add README.mdc:\Users\admin\development\oms\project-oms>git commit -m "Initial commit"
[master acbc301] Initial commit
1 file changed, 1 insertion(+)
create mode 100644 README.mdc:\Users\admin\development\oms\project-oms>git push -u origin master
Counting objects: 3, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (2/2), done.
Writing objects: 100% (3/3), 314 bytes | 314.00 KiB/s, done.
Total 3 (delta 1), reused 0 (delta 0)
To https://bitbucket.org/irsyadjpratamap/project-oms.git
174c9bc..acbc301 master -> master
Branch master set up to track remote branch master from origin.Setup Laravel EnvironmentRepository yang kita clone tersebut belum dapat dijalankan karena belum memiliki dependency Laravel, untuk menambahkan dependency gunakan perintah composer install.c:\Users\admin\development\oms\project-oms>composer install
Loading composer repositories with package information
Installing dependencies (including require-dev) from lock file
Package operations: 69 installs, 0 updates, 0 removals
- Installing doctrine/inflector (v1.2.0): Loading from cache
- Installing phar-io/manifest (1.0.1): Loading from cache
- Installing myclabs/deep-copy (1.7.0): Loading from cache
- Installing phpunit/phpunit (6.5.4): Loading from cache
symfony/var-dumper suggests installing ext-intl (To show region name in time zone dump)
symfony/var-dumper suggests installing ext-symfony_debug ()
symfony/routing suggests installing doctrine/annotations (For using the annotation loader)
symfony/routing suggests installing symfony/config (For using the all-in-one router or any loader)
paragonie/random_compat suggests installing ext-libsodium (Provides a modern crypto API that can be used to generate random bytes.)
symfony/event-dispatcher suggests installing symfony/dependency-injection ()
symfony/http-kernel suggests installing symfony/browser-kit ()
symfony/console suggests installing symfony/lock ()
egulias/email-validator suggests installing ext-intl (PHP Internationalization Libraries are required to use the SpoofChecking validation)
ramsey/uuid suggests installing ext-libsodium (Provides the PECL libsodium extension for use with the SodiumRandomGenerator)
symfony/translation suggests installing symfony/config ()
symfony/translation suggests installing symfony/yaml ()
monolog/monolog suggests installing aws/aws-sdk-php (Allow sending log messages to AWS services like DynamoDB)
laravel/framework suggests installing symfony/psr-http-message-bridge (Required to psr7 bridging features (~1.0).)
psy/psysh suggests installing ext-pcntl (Enabling the PCNTL extension makes PsySH a lot happier :))
psy/psysh suggests installing ext-pdo-sqlite (The doc command requires SQLite to work.)
psy/psysh suggests installing ext-posix (If you have PCNTL, you'll want the POSIX extension as well.)
psy/psysh suggests installing hoa/console (A pure PHP readline implementation. You'll want this if your PHP install doesn't already support readline or libedit.)
filp/whoops suggests installing whoops/soap (Formats errors as SOAP responses)
sebastian/global-state suggests installing ext-uopz (*)
phpunit/phpunit-mock-objects suggests installing ext-soap (*)
phpunit/php-code-coverage suggests installing ext-xdebug (^2.5.5)
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover
Discovered Package: fideloper/proxy
Discovered Package: laravel/tinker
Package manifest generated successfully.Setelah menginstall semua dependency, secara default Laravel akan memasukan .env dalam list file .gitignore. File .gitignore adalah list file atau folder yang tidak akan diupload dari local repo ke server repo. Saat menjalankan built-in web servernya akan muncul error berikut. Untuk fix error tersebut cukup rename file .env.example menjadi .env. File Dot Env adalah properties atau pengaturan untuk Laravel.[caption id="attachment_359" align="aligncenter" width="523"]Error tanpa file .env[/caption]Dengan fix tersebut belum cukup untuk menjalankan aplikasi, masih ada satu error lagi yaitu key. Laravel adalah salah satu framework php yang memiliki tingakat keamanan tinggi. Oleh karena itu setiap project harus memiliki key. Untuk generate key gunakan perintah php artisan key:generate. Berikut contoh error tanpa key.[caption id="attachment_360" align="aligncenter" width="523"]Error yang disebabkan tanpa key[/caption]Sebagai programmer, jika terdapat error jangan langsung menyerah atau bingung harus bagaimana. Perhatikan pesan error dan investigate ke codingan untuk cara memperbaikinya. Sebagai seorang programmer, pengetahuan Bahasa Inggris akan sangat mendukung. Karena error yang muncul pasti dalam Bahasa Inggris. Kalau gak bisa Bahasa Inggris agak riweuh juga kayaknya kalau harus menggunakan google translate.c:\Users\admin\development\oms\project-oms>php artisan key:generate
Application key [base64:wqbM9or/3NnGUb9LWfQXudBiG+2OHnqtEGXnvvp4mYM=] set successfully.Langkah terakhir adalah rename folder dari project-oms ke backend. Untuk project Laravel tidak masalah rename folder karena untuk menjalankan tidak perlu dari localhost. Built-in servernya akan otomatis menjalankan dengan URL localhost:8000.Setup Angular EnvironmentAngular memiliki Command Line Interface (CLI) sendiri yang digunakan untuk create project, menambahkan file, dan melakukan berbagai kebutuhan development seperti testing, bundling, dan deployment.Setup Development EnvironmentSebelum mengembangkan aplikasi berbasis Angular atau framework JavaScript lain, kita harus menginstall NodeJs dan NPM. Pastikan gunakan NodeJS versi LTS terakhir dan NPM versi terbaru, jangan menggunakan versi beta atau release candidate karena masih terdapat beberapa bugs. Setelah install NodeJS dan NPM, selanjutnya adalah install Angular CLI gunakan perintah berikut.npm install -g @angular/cli
Create New Project
Command prompt masih pada folder OMS (C:\Users\admin\development\oms) gunakan perintah berikut untuk membuat project Angular ng new <namaapp>.c:\Users\admin\development\oms>ng new frontend
create frontend/e2e/app.e2e-spec.ts (290 bytes)
create frontend/e2e/app.po.ts (208 bytes)
create frontend/e2e/tsconfig.e2e.json (235 bytes)
create frontend/karma.conf.js (923 bytes)
create frontend/package.json (1313 bytes)
create frontend/protractor.conf.js (722 bytes)
create frontend/README.md (1024 bytes)
create frontend/tsconfig.json (363 bytes)
create frontend/tslint.json (3044 bytes)
create frontend/.angular-cli.json (1243 bytes)
create frontend/.editorconfig (245 bytes)
create frontend/.gitignore (516 bytes)
create frontend/src/assets/.gitkeep (0 bytes)
create frontend/src/environments/environment.prod.ts (51 bytes)
create frontend/src/environments/environment.ts (387 bytes)
create frontend/src/favicon.ico (5430 bytes)
create frontend/src/index.html (295 bytes)
create frontend/src/main.ts (370 bytes)
create frontend/src/polyfills.ts (2667 bytes)
create frontend/src/styles.css (80 bytes)
create frontend/src/test.ts (1085 bytes)
create frontend/src/tsconfig.app.json (211 bytes)
create frontend/src/tsconfig.spec.json (304 bytes)
create frontend/src/typings.d.ts (104 bytes)
create frontend/src/app/app.module.ts (316 bytes)
create frontend/src/app/app.component.html (1141 bytes)
create frontend/src/app/app.component.spec.ts (986 bytes)
create frontend/src/app/app.component.ts (207 bytes)
create frontend/src/app/app.component.css (0 bytes)
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Successfully initialized git.
Project 'frontend' successfully created.Untuk menjalankan aplikasi atau project tersebut, masuk ke foldernya dan gunakan perintah ng serve. URLnya adalah http://localhost:4200, port 4200 merupakan port default untuk Angular.c:\Users\admin\development\oms>cd frontendc:\Users\admin\development\oms\frontend>ng serve
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2017-12-13T23:58:52.881Z
Hash: 7ec6664d8a8b7747a62e
Time: 16554ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 20.7 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 552 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 33.9 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 7.14 MB [initial] [rendered]webpack: Compiled successfully.Untuk masalah VCS gunakan tutorial sebelum - sebelumnya. If any comment you can email me to mailto:irsyadjpratamap@gmail.com atau comment di bawah aja.Suasana menulis artikel masih dengan kopi dan musik. Tapi kali ini genrenya Reggaen kan udah pagi jadi Reggae enak banget. Kalau masalah reggae saya gak terlalu suka dari luar negeri, ada sih beberapa tapi gak seperti enaknya reggae Indonesia. Pagi ini saya banyak dengerin lagu Reggae dari Duta Reggae Indonesia siapa lagi kalau bukan Ras Muhammad. Dari sekian banyak lagunya yang paling saya suka adalah Musik Reggae Ini, Salam, dan Farmerman (ft. Naptali). Cek youtube aja untuk video dan lagunya seperti apa. Selain Ras Muhammad, kayaknya seru juga dengerin lagu Rebelution yang Safe and Sound.
