Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Parse

Mulai Membuat Blog Anda Dengan Parse.js: Migrasikan Server Parse Anda Sendiri

by
Read Time:14 minsLanguages:
This post is part of a series called Building Your Blog with Parse.js.
Get Started Building Your Blog With Parse.js: Categories

Indonesian (Bahasa Indonesia) translation by Ilham Saputra (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Sayangnya, Parse.com ditutup pada 28 Januari 2017. Di seri sebelumnya, saya memandu Anda melalui seluruh perjalanan membangun sistem blog dari awal. Tapi semuanya didasarkan pada Parse.com, dan jika Anda masih menggunakan teknik tersebut, situs web Anda sayangnya akan berhenti bekerja saat itu.

Jika Anda masih menyukai Parse.js (seperti halnya saya), dan ingin terus menggunakannya, ada kabar baik. Orang-orang yang menyenangkan di sana membuatnya menjadi open source sehingga kami dapat menjalankan salinan kami sendiri di semua layanan hosting web populer. Tutorial ini bertujuan untuk membantu Anda membuat perubahan itu dan bermigrasi dari Parse.com ke Server Parse Anda sendiri di Heroku.

Saya bukan ahli di bidang back end, tetapi ini cara termudah yang saya temukan yang berhasil. Jika Anda melihat ada kekurangan dan memiliki metode yang lebih baik untuk dibagikan, pasti berikan komentar di bawah ini.

Jika Anda mengikuti episode ini, migrasi server dengan sendirinya tidak akan terlalu rumit. Dengan Docker, bahkan cukup mudah untuk menyiapkan Dasbor Parse lokal, sehingga Anda masih dapat melihat dan bermain dengan data Anda dengan mudah.

Namun, seri tutorial ini dibuat berdasarkan versi 1.2.19 dari Parse.js; untuk terhubung ke server Parse yang berdiri sendiri, kita perlu memperbarui aplikasi untuk menjalankan versi 1.9.2. Dengan versi 1.5.0, Parse mengambil dukungan untuk Backbone, dan itu berarti kita memerlukan beberapa perubahan besar dalam kode. Kami akan menambahkan Backbone kembali ke halaman, dan menggunakan campuran Parse dan Backbone di sana.

Itu intro yang cukup panjang, tetapi jangan terlalu takut. Anda mungkin perlu melakukan debug di sana-sini selama migrasi, tetapi Anda akan baik-baik saja. Anda selalu dapat memeriksa source code saya atau memberikan komentar di bawah ini — Saya dan komunitas fantastis ini di sini akan mencoba yang terbaik untuk membantu Anda.

Mengatur dan bermigrasi ke Server Parse

Pertama-tama, mari kita mulai membuat Server Parse. Parse sudah membuat ini sangat mudah dengan panduan migrasi terperinci dan daftar panjang aplikasi sampel di semua platform populer seperti Heroku, AWS, dan Azure.

Saya akan memandu Anda melalui yang paling mudah yang saya tahu: kombinasi Heroku + mLab. Ini bebas untuk memulai, dan Anda selalu dapat membayar untuk perangkat keras yang lebih baik dan lebih banyak penyimpanan dalam sistem yang sama. Satu-satunya peringatan adalah bahwa versi gratis dari Heroku akan 'sleep' setelah diam selama 30 menit. Jadi, jika pengguna mengunjungi situs Anda ketika server 'sleep', mereka mungkin harus menunggu beberapa detik agar server bangun sebelum mereka dapat melihat data. (Jika Anda memeriksa halaman demo untuk proyek ini dan tidak membuat konten blog apa pun, itulah sebabnya. Beri waktu sebentar dan segarkan.)

Bagian ini sebagian besar didasarkan pada panduan Heroku untuk Menyebarkan Parse Server dan panduan migrasi Parse sendiri. Saya hanya memilih jalan yang paling sederhana dan paling mudah dibobol di sana.

Langkah 1: Mendaftar dan Membuat sebuah Aplikasi Baru pada Heroku

Jika Anda belum memiliki akun Heroku, lanjutkan dan membuatnya. Ini adalah platform yang sangat populer untuk mengembangkan dan menghosting aplikasi web kecil.

Setelah Anda terdaftar, buka Dasbor Heroku Anda dan buat aplikasi baru — yang akan menjadi server Anda.

Create new appCreate new appCreate new app

Beri nama jika Anda ingin:

Add app nameAdd app nameAdd app name

Langkah 2: Tambahkan mLab MongoDB

Sekarang Anda perlu database untuk menyimpan data. Dan mari kita tambahkan mLab sebagai add-on.

Pergi ke Resources > Add-ons, temukan "mLab", dan tambahkan:

Add mLab MongoDBAdd mLab MongoDBAdd mLab MongoDB

Sandbox cukup untuk pengembangan — Anda selalu dapat meningkatkan dan membayar lebih banyak untuk mendapatkan lebih banyak penyimpanan di sana.

Setelah Anda menambahkan mLab, Anda dapat mengambil URI MongoDB itu.

Buka Settings > Config Variables di Dasbor Heroku Anda dan klik pada Reveal Config Vars.

Get MONGODB_URIGet MONGODB_URIGet MONGODB_URI

Di sana Anda dapat melihat URI MongoDB untuk database Anda. Salin, dan sekarang kita dapat mulai memigrasi database.

Langkah 3: Migrasi Database

Buka Parse.com dan temukan aplikasi yang ingin Anda migrasikan. Versi open-source dari Parse Server hanya mendukung satu aplikasi per server, jadi jika Anda ingin memiliki beberapa aplikasi, Anda perlu mengulangi proses ini dan membuat beberapa server. Sekarang pilih satu saja.

Dalam aplikasi, pergi ke App Settings > General > App Manajement, lalu klik Migrate.

Start MigrateStart MigrateStart Migrate

Lalu tempelkan URI MongoDB yang baru saja Anda salin, dan mulai migrasi.

Connect MongoDBConnect MongoDBConnect MongoDB

Segera Anda akan melihat layar ini:

Syne DoneSyne DoneSyne Done

Itu berarti sekarang Anda harus memiliki semua data dalam mLab MongoDB Anda. Mudah saja, kan?

Tetapi belum menyelesaikan aplikasi Anda — tunggu saja sampai kita dapat melihat dan bermain dengan data yang sama dari Dasbor Parse lokal kami, kemudian kembali dan selesaikan.

Langkah 4: Menyebarkan Server Parse

Sekarang, dengan database sudah bermigrasi, kita bisa menyebarkan Server Parse.

Jika Anda belum memiliki akun GitHub, lanjutkan dan membuatnya. Itu mungkin tempat paling populer di mana orang berbagi dan mengelola kode mereka.

Dengan akun GitHub Anda, pilih contoh repo Server Parse resmi.

Fork official Parse Server example repoFork official Parse Server example repoFork official Parse Server example repo

Kemudian, kembali ke Dasbor Heroku Anda. Pada Deploy > Deployment method, pilih GitHub dan hubungkan ke akun GitHub Anda.

Setelah itu, cari parse dan temukan repo parse-server-example Anda dan hubungkan.

Connect to GitHubConnect to GitHubConnect to GitHub

Jika semuanya bekerja, Anda harus melihatnya terhubung seperti ini:

Repo ConnectedRepo ConnectedRepo Connected

Sekarang, gulir ke bawah ke bagian bawah halaman. Di bawah Manual Deploy, klik Deploy Branch.

Deploy BranchDeploy BranchDeploy Branch

Anda akan melihat Server Parse Anda sedang di deploy, dan segera Anda akan melihat layar ini:

Successfully deployedSuccessfully deployedSuccessfully deployed

Klik pada tombol View dan Anda akan melihat halaman ini:

View Server PageView Server PageView Server Page

Itu berarti server Anda sekarang berjalan dengan gembira! Dan URL yang Anda lihat adalah URL server Anda. Anda akan membutuhkannya nanti.

Saya tahu rasanya tidak nyata untuk melihat garis sederhana ini dan mengetahui bahwa server sudah siap. Tapi percayalah, pembangkit tenaga listrik sedang berjalan di sana. Dan aplikasi Anda dapat membaca dan menulis darinya.

Jika Anda ingin Periksa, Anda dapat menjalankan sesuatu seperti ini:

Mengatur Dasbor Parse Lokal

Jika Anda seorang ninja command-line, Anda mungkin akan baik-baik saja dari sini. Tetapi jika Anda seperti saya dan menikmati antarmuka Dasbor Parse yang ramah, ikuti bagian ini untuk menyiapkan Dasbor Parse Anda sendiri di komputer lokal Anda, sehingga Anda dapat melihat dan bermain dengan data Parse seperti yang biasa Anda lakukan.

Sekali lagi, Anda dapat menginstal dasbor Anda dalam beberapa cara. Saya hanya akan menunjukkan kepada Anda cara paling sederhana dalam pengalaman saya, menggunakan Docker.

Langkah 1: Instal Docker

Jika Anda tidak memiliki Docker, install terlebih dahulu (Mac | Windows).

Ini menempatkan seluruh lingkungan dalam box, jadi Anda tidak perlu mengikuti tutorial instalasi lokal yang cukup rumit dan melompat melalui hoop di Terminal.

Langkah 2: Buat Gambar Dasbor Parse

Dengan docker Anda menjalankan, mengkloning repo Dasbor Parse ke komputer Anda dan masuk ke repo itu.

Untuk pemula GitHub mutlak, cukup unduh sebagai file zip.

Download Parse Dashboard RepoDownload Parse Dashboard RepoDownload Parse Dashboard Repo

Buka zip dan letakkan di lokasi yang dapat Anda ingat. Buka aplikasi terminal Anda jika Anda menggunakan Mac, ketik cd  (Anda memerlukan spasi setelah cd di sana) dan seret folder ke dalamnya.

Drag in unzipped folderDrag in unzipped folderDrag in unzipped folder

Lalu tekan Enter.

Anda harus melihat sesuatu seperti ini, dan itu berarti Anda berada di tempat yang benar.

Sekarang, Anda dapat dengan cepat memeriksa apakah Docker Anda dipasang dengan benar dengan menempel di perintah ini:

Jika ini menunjukkan versi Anda, seperti ini:

Sudah terpasang, dan Anda dapat melanjutkan.

Jika sebaliknya, ia mengatakan:

Anda perlu memeriksa ulang apakah Anda telah menginstal Docker dengan benar.

Dengan Docker terpasang dengan benar, tempelkan perintah ini dan tekan Enter:

Itu akan membuat Anda gambar lokal (jangan ragu untuk mengabaikan jargon docker) untuk Dasbor Parse.

Anda akan melihat banyak baris bergulir. Jangan panik — hanya sebentar, dan Anda akan melihatnya berakhir dengan sesuatu seperti ini:

Itu berarti Anda selesai — gambar telah berhasil dibuat.

Jika Anda menjalankan perintah docker images, Anda akan melihat:

Langkah 3: Hubungkan Parse Dashboard ke Parse Server

Sekarang, itu hanya sebuah gambar, dan itu bukan server yang berjalan. Ketika berjalan, kita ingin terhubung ke Server Parse dan MongoDB yang baru saja kita bangun.

Untuk melakukan itu, pertama-tama kita perlu membuat beberapa key di Heroku, sehingga dapat memberi tahu siapa yang memberi akses ke data.

Pergi ke Heroku Dashboard Anda dan pergi ke Settings > Config Variables lagi. Kali ini, kita perlu menambahkan dua variabel di sana: APP_ID dan MASTER_KEY. APP_ID dapat menjadi sesuatu yang mudah diingat, sementara MASTER_KEY sebaiknya menjadi kata sandi yang sangat panjang dan rumit.

Add APP_ID and MASTER_KEYAdd APP_ID and MASTER_KEYAdd APP_ID and MASTER_KEY

Sekarang dengan key tersebut, kita dapat menulis file konfigurasi sederhana di direktori root dari folder Parse Dashboard Anda. Anda dapat menggunakan semuanya dari vim ke TextEdit atau Notepad — tujuannya adalah membuat file config.json teks biasa dengan konten ini:

Dan tentu saja, gantilah your-app-url dengan URL tautan “View” (halaman yang mengatakan “Saya bermimpi menjadi situs web”), tetapi simpanlah /parse di sana di bagian akhir; ganti your-app-id dan your-master-key dengan variabel-variabel konfigurasi yang baru saja Anda tambahkan; dan berikan nama pada aplikasi Anda dan ganti your-app-name dengan itu.

Simpan file dan jalankan perintah ls di Terminal untuk memastikan Anda meletakkan config.json di tempat yang benar.

Jika Anda melihat config.json dalam daftar ini, Anda sebaiknya melanjutkan.

Sekarang jalankan perintah pwd untuk mendapatkan tempat Anda berada:

Salin path itu.

Kemudian tempelkan perintah ini untuk membuat container Docker (lagi, Anda dapat mengabaikan jargon ini) dan jalankan Dasbor Parse Anda. Ingatlah untuk mengganti jalur saya dengan jalan yang baru saja Anda dapatkan.

Dari atas ke bawah, perintah ini melakukan hal-hal ini (yang juga dapat Anda abaikan):

Jika semuanya berjalan, itu akan mengembalikan string panjang kepada Anda tanpa pesan kesalahan. Seperti ini:

Dan sekarang Dasbor Parse Anda sedang berjalan! Lihat di http://localhost:8080/.

Mungkin lambat dan menunjukkan halaman kosong pada awalnya, tetapi hanya berikan beberapa menit dan Anda akan melihat layar masuk:

Local Parse Dashboard LoginLocal Parse Dashboard LoginLocal Parse Dashboard Login

Sekarang Anda dapat masuk dengan user sebagai nama pengguna dan pass sebagai kata sandi — itu didefinisikan dalam config.json jika Anda tidak menyadari sebelumnya. Anda juga dapat mengubahnya ke apa pun yang Anda inginkan.

Dan Anda akan melihat antarmuka yang familiar ini dari mesin lokal Anda dan dapat bermain dengan data Anda (sekarang dalam mLab MongoDB) seperti yang selalu Anda lakukan.

Local Parse DashboardLocal Parse DashboardLocal Parse Dashboard

Beberapa catatan akhir di dasbor lokal ini:

Pertama, Anda dapat menghentikan dan memulai container ini mulai sekarang kapan saja dengan dua perintah ini:

Jadi ketika Anda me-restart komputer Anda, Anda tidak perlu mengikuti langkah-langkah sebelumnya lagi, cukup katakan untuk memulai lagi.

Dan kedua, jika Anda memiliki beberapa server Parse, Anda tidak perlu membuat beberapa dasbor Parse. Cukup tambahkan beberapa aplikasi di config.json seperti ini:

Setiap kali Anda membuat perubahan pada config.json, Anda perlu me-restart container Docker:

Dan kemudian Anda akan melihat perubahan yang Anda buat.

Langkah 4: Menyelesaikan migrasi

Sekarang mainkan dengan Dasbor Parse baru Anda, dan jika semuanya berfungsi, Anda sekarang dapat kembali ke Parse.com dan menyelesaikan migrasi.

Finalize migrationFinalize migrationFinalize migration

Kemudian, jika Anda memeriksa aplikasi dan dasbor, Anda akan menemukan bahwa semuanya secara ajaib mengarah ke server baru Anda tanpa masalah.

Perbarui Kode untuk Dijalankan pada Parse 1.9.2

Ini hebat! Saya berharap itu bisa tetap seperti itu dan kita bisa mengakhiri tutorial ini lebih awal. Tapi seperti yang saya sebutkan, aplikasi Parse.js lama Anda masih mengandalkan server Parse.com untuk mengarahkannya ke server baru yang benar. Dan itu akan berhenti berfungsi setelah 28 Januari 2017.

Untuk membuatnya berjalan selamanya (finger crossed) kita perlu berhenti menggunakan tombol JavaScript untuk menunjuk ke aplikasi (yang bergantung pada Parse.com untuk mencari tahu ke database mana), dan langsung menunjuk ke server parse kita.

Langkah 1: Perbarui JavaScript Libraries

Pertama mari kita update file Parse.js yang kami gunakan di index.html.

Daripada menggunakan versi 1.2.19:

Beralih ke versi terbaru:

Selain itu, mari tambahkan Lodash dan Backbone. Sekarang Parse telah berhenti mendukung Backbone, kita perlu memasukkannya agar tetap menggunakan Views dan Router.

Langkah 2: Arahkan ke Server Parse Anda

Kemudian, mari masuk ke site.js.

Hal pertama yang ada adalah memperbarui fungsi Parse.initialize() sehingga mengarah ke Server Parse Anda sendiri.

Sebelumnya mungkin terlihat seperti ini:

Sekarang, arahkan ke server Parse.

Langkah 3: Dari React ke Backbone

Teruskan, mari lakukan pembaruan cepat untuk mengubah semua Parse.View, Parse.Router, dan Parse.history menjadi Backbone.View, Backbone.Router, dan Backbone.history. Itu tidak lagi didukung oleh Parse, jadi kita perlu memiliki fallback.

Ini bukan hal yang paling menyenangkan di dunia untuk mencampur dan mencocokkan Class seperti itu, tetapi jika Anda ingin sedikit mengubah kode dan menjalankannya, ini mungkin cara termudah.

Langkah 4: Dari Collection ke Query; Dari fetch ke find

Sekarang, satu hal lain yang Parse berhenti mendukung adalah Collection. Dan itu jauh lebih berduri daripada tiga lainnya. Beralih dari Parse.Collection ke Backbone.Collection tidak akan berfungsi. Kita perlu menulis ulang logika menggunakan Parse queries.

Saya akan menggunakan koleksi Blogs sebagai contoh untuk menunjukkan kepada Anda bagaimana kami dapat memperbarui blog kami untuk bekerja dengan Parse.js yang baru.

Sebelumnya, pertama kali kita didefinisikan Class untuk Blogs:

Dan kemudian di fungsi BlogRouter.start() kami membuat sebuah instance dari kelas itu untuk menampung koleksi blok.

Setelah itu, kami memanggil fetch() pada koleksi itu untuk mendapatkan data blog. Seperti di BlogRouter.index():

Sekarang, kita bisa menghapus deklarasi Class itu dan membuat BlogRouter.blogs sebuah query Parse:

Dan ketika kita menyebutnya, bukan fetch() kita gunakan find().

Bagian ini mungkin memakan waktu cukup lama karena kami memiliki beberapa kasus penggunaan yang berbeda selama seri ini. Anda mungkin perlu melakukan debug sedikit — pada titik ini, bahkan jika data diambil dengan benar, halaman belum akan ditampilkan dengan benar. Jika Anda lebih suka melihat hal-hal berubah saat Anda memperbaikinya, baca sampai akhir, dan kemudian mulai mengubah kode dan debugging Anda.

Langkah 5: Periksa View Objects

Ketika semua data diambil dengan benar, hal berikutnya untuk diperiksa adalah data yang Anda berikan ke objek View Anda.

Sebelumnya, kita bisa melewati apapun yang kita inginkan ke objek View. Dalam contoh ini, kami memberikan username secara langsung ke dalam blogAdminView sehingga kami dapat menyapa pengguna dengan nama pengguna mereka.

Ini juga akan berhenti bekerja ketika kita mengubah View untuk diperpanjang dari objek Backbone.View. Kami hanya bisa lulus dalam model dan collection sekarang.

Jadi kita harus meneruskan currentUser sebagai model:

Dan ubah BlogsAdminView sesuai.

Sekali lagi, Anda mungkin perlu menguji dan men-debug sedikit untuk membuat semuanya bekerja.

Langkah 6: Perbarui Template Handlebar untuk Beradaptasi dengan Struktur Data Baru

Dan akhirnya, antara perubahan versi, struktur data Objek Parse juga berubah sedikit.

Sebelumnya, setiap objek terlihat seperti ini:

Sekarang, ini adalah struktur baru:

Ini berarti kita perlu memperbarui template Handlebar kita, juga, untuk membuat data baru dengan benar:

Misalnya, sebelumnya untuk kategori di sidebar kami menulis template berikut:

Sekarang kita perlu memperbarui {{objectId}} menjadi {{id}} dan {{name}} menjadi {{atribut.name}}.

Sekarang halaman Anda akan render.

Sekali lagi, jika Anda tidak ingat logika situs sepenuhnya dengan jelas, Anda mungkin perlu melompati beberapa lingkaran sedikit di sini. Jika Anda terjebak, Anda selalu dapat memeriksa source code saya.

Kesimpulan

Di sana Anda memilikinya. Semoga ini dapat membantu Anda menyimpan data Anda sebelum Parse.com mati - atau hidupkan kembali kode Anda saat Anda membutuhkannya. Anda akan kehilangan semua data setelah 28 Januari 2017, tetapi jika Anda memperbarui kode, itu akan berfungsi kembali.

Sekali lagi, saya sangat sedih Parse.com tidak akan berjalan lagi dan seri tutorial ini tidak akan berfungsi untuk pendatang baru (kecuali mereka tetap mengacu kembali ke bagian akhir ini). Tapi semoga itu membantu beberapa orang untuk belajar cara membuat kode situs web.

Mulai saat ini, apakah Anda memilih untuk bermigrasi atau belajar bahasa baru, itu sepenuhnya terserah Anda. Saya berharap ini akan menjadi sedikit lebih mudah karena Anda belajar beberapa konsep yang berguna di sini.

Semoga sukses! Dan tinggalkan saya komentar jika Anda menemukan seri ini bermanfaat.

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.