Penyusunan sketsa,penyusunan prototipe toko online dan menampilkan data toko online dalam bentuk json

 

penyususan sketsa website toko online.

1.        Membuat Sketsa Desain

Buatlah sketsa homepage pada kertas Bufallo , sehingga terdapat gambaran mengenai homepage yang sudah selesai dan bagaimana cara mengatur letak halaman  setiap menunya. Pembuatan sketsa ini akan sangat membantu untuk membuat desain web yang mempunyai daya saing. Sayangnya, banyak orang yang melewatkan langkah pertama ini. Sketsa atau wireframe ini menjadi sangat penting karena menjadi acuan awal bagaimana website akan dibentuk.

2.        Membuat Layout Desain

Anda dapat membuat layout desain atau memvisualisasikannya dengan menggunakan software seperti Figma untuk memperhalus sketsa desain yang telah selesai.

3.     Design system

Desain Sistem didefinisikan sebagai penggambaran perencanaan dan pembuatan sketsa atau pengaturan dari beberapa elemen yang terpisah ke dalam satu kesatuan yang utuh dan mempunyai fungsi.Merancang alir kerja (workflow) dari sistem dalam bentuk diagram alir (flowchart) atau Data Flow Diagram (DFD).Merancang basis data (database) dalam bentuk Entity Relationship Diagram (ERD) bisa juga sekalian membuat basis data secara fisik. Merancang input ouput aplikasi (interface) dan menentukan form-form dari setiap modul yang ada. Merancang arsitektur aplikasi dan jika diperlukan menentukan juga kerangka kerja (framework) aplikasi. Pada tahapan ini atau sebelumnya sudah ditentukan teknologi dan tools yang akan digunakan baik selama tahap pengembangan (development) maupun pada saat implementasi (deployment).

Pemilihan Media

1. Prototype Website Prototype Website merupakan media utama yang digunakan dalam perancangan dalam bentuk prototype yang dapat digunakan seperti website pada umumnya. Fokus utama dari prototype website yang dirancang adalah e-commerce yang dapat melakukan proses jualbeli. Website yang dirancang juga dapat berfungsi sebagai company profile UD Sumber Hasil Pangan. Selain itu website juga bersifat fleksibel atau responsif karena dapat digunakan dalam berbagai ukuran layar dan gadget seperti smartphone dan laptop atau komputer yang terhubung dengan internet

. 2. Online Catalog Media pendukung yang digunakan dalam perancangan ini adalah Online Catalog dalam bentuk PDF yang dapat di lihat dan di unduh oleh siapa saja. Online Catalog akan dimasukan kedalam Google Drive yang kemudian link atau tauntannya akan diletakan pada profil media sosial UD Sumber Hasil Pangan. Online Catalog berisikan produk-produk yang dijual, kelebihan dari UD Sumber Hasil Pangan, kontak, lokasi toko, serta cara pemesanan dan pembayaran.

3. Media Sosial Media pendukung lainnya yang digunakan dalam perancangan ini adalah media sosial Instagram, Facebook page dan WhatsApp. Pada media sosial Instagram dan Facebook page berisikan produkproduk yang dijual, kelebihan dan manfaat produk, serta informasi tentang UD Sumber Hasil Pangan. Pada media sosial WhatsApp akan digunakan untuk membagikan online catalog, serta informasi terkait produk dan pre order yang menggunakan bahasa yang ramah dan tampilan yang menarik. Unsur-unsur Interaktif dan Sistem Navigasi Website

1. Unsur Teks Penggunaan bahasa dalam prototype website menggunakan bahasa Indonesia yang agak formal, jelas dan ramah agar tidak terkesan kaku dan membosankan. Bahasa Indonesia digunakan karena merupakan bahasa utama yang digunakan oleh target audience, terutama mereka yang berusia 45-55 tahun yang tidak fasih bahasa Inggris dan bahasa kekinian (gaul).

2. Unsur Gambar Pada prototype website menggunakan beberapa gambar ilustrasi yang mendukung dan memperjelas informasi yang dibutuhkan target audience. Penggunaan ilustrasi digunakan pada bagian background agar tidak terlihat polos dan kosong, bagian icon, dan bagian kategori produk.

 3. Sistem Navigasi - Navigation Menu: Search Field, Akun, Notifikasi, Keranjang, Katalog, Artikel, Tentang Kami, Bantuan, Gabung Jadi Mitra, Multi-Languange. - Notifikasi: Memunculkan daftar notifikasi terkait status pesanan, pre order yang sedang terjadi, serta promo dan diskon yang ada. - Akun: Mengarahkan pengunjung pada halaman Pengaturan Akun, Wishlist dan Riwayat Pesanan.

 

- Keranjang: Mengarahkan pengunjung pada halaman proses Checkout dan Pembayaran.

 - Katalog: Mengarahkan pengunjung pada halaman Keseluruhan Produk, Detail Produk, serta Promo dan Diskon.

 - Artikel: Mengarahkan pengunjung pada halaman Blog dan Resep.

 - Tentang Kami: Mengarahkan pengunjung pada halaman Cerita Kami, Hubungi Kami, Lokasi Kami, dan Karir.

- Bantuan: Mengarahkan pengunjung pada halaman Cara Pemesanan, Cara Pembayaran dan Frequently Asked Questions.

 - Gabung Jadi Mitra: Mengarahkan pengunjung pada halaman Gabung Jadi Mitra.

 - Footer: Logo UD Sumber Hasil Pangan, Informasi Toko (lokasi, jam operasional, dan kontak), Metode Pembayaran, Tentang Kami, Bantuan, Gabung Jadi Mitra, Jurnal, Media Sosial, dan Subscribe Newsletter.

 Kali ini saya akan membahas tentang web scrapping pada salah satu situs online shop yaitu shopee. Data Scrapping merupakan kegiatan untuk menemukan data dan mengumpulkannya. Data diambil secara langsung dari sebuah sumber, tidak hanya dari web tetapi bisa dari berbagai sumber dimana terdapat data. Ini mencakup spreadsheets, storage devices, dll. Proses ini diperlukan untuk menyaring (filtering) dan membedakan berbagai jenis data mentah dari berbagai sumber menjadi sesuatu yang berguna dan informatif. Sedangkan web scrapping sendiri merupakan proses data scrapping yang dilakukan hanya dari sumber website.Web scrapping ini sangat berguna pada bisnis online baik itu untuk riset pasar, riset kompetitor, atau mencari leads. Namun, manfaatnya lebih dari sekedar itu. Pada artikel kali ini saya akan membahas langkah-langkah web scraping pada salah satu website online shop yang cukup terkenal yaitu shopee. Untuk melakukan web scraping pada situs shopee ini kita akan menggunakan bahasa pemrograman python karena bahasa python sendiri yang mudah untuk diaplikasikan serta ketersediaan library-library pendukung yang sangat melimpah. Data yang akan kita hasilkan pada proses scrapping ini berupa data json. Untuk mendapatkan data dari web shopee kita menggunakan Api yang telah tersedia pada situs shopee yang dapat kita lihat ketika kita melakukan inspect elemen pada situs website shopee.

Sebelum memulai tutorial kali ini pastikan anda telah menginstall python pada laptop atau pc kalian. Jika belum kalian bisa mendownloadnya terlebih dahulu melalui situs python di python.org. Pada tutorial ini saya akan menggunakan library Beautiful Soup. Silahkan baca artikel saya sebelumnya mengenai beautifulSoup

Copykan script berikut pada file python baru yang kalian telah buat serta pastikan indentasinya sudah benar agar tidak terjadi error dikarenakan python sangat sensitif terhadap indentasi .

import requests

import json

from bs4 import BeautifulSoup

class Scrape:

    def __init__(self, USERNAME):

        REQ = requests.Session()

        print('Getting User ID..')

        USERID = self.GET_USERID(USERNAME, REQ)

        if USERID == False:

            print('User ID not found, try again..')

            return

        print('Getting Product list..')

        PRODUCTS = self.GET_PRODUCTS(USERID, REQ)

        if PRODUCTS == False:

            print('Product list not found, try again..')

            return

        print('Saving hTML page..')

        self.SAVE_PAGE(USERNAME, REQ)

        print('Complete...')

 

    def SAVE_PAGE(self, USERNAME, REQ):

        #url yang akan dilakukan scrapping datanya

        URL = "https://shopee.co.id/{}".format(USERNAME)

        #melakukan request data dengan metod get pada url Api

        RESPONSE = REQ.get(URL)

        #digunakan untuk men scrape semua data html

        SOUP = BeautifulSoup(RESPONSE.content, 'html.parser')

        # Menyimpan halaman utama toko dalam format html

        FILE_NAME = 'Shopee_{}.html'.format(USERNAME)

        with open(FILE_NAME, 'w') as file:

            return file.write(SOUP.prettify())

       

 

    def GET_USERID(self, USERNAME, REQ):

        HEADERS = {

            "accept-encoding": "gzip, deflate, br",

            "content-type": "application/json",

            "if-none-match": "55b03-1ae7d4aa7c47753a96c0ade3a9ea8b35",

            "origin": "https://shopee.co.id",

            "referer": "https://shopee.co.id/asusofficialshop",

            "x-api-source": "pc",

            "x-csrftoken": "8XtQ7bHlv09rlx5U4NPN6rmavFn7MvTO",

            "x-requested-with": "XMLHttpRequest",

            "user-agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2)

AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36",

            "cookie": 'SPC_IA=-1; SPC_EC=-; SPC_F=QpolQhTSikpnxRXO6T4RjIW8ZGHNBmBn;

REC_T_ID=ac80cdde-0e7d-11e9-a8c2-3c15fb3af585; SPC_T_ID="e4t1VmH0VKB0NajA1BrHaDQlFRwW

jTZT7o83rrHW+p16sTf1NJK7ksWWDicCTPq8CVO/S8sxnw25gNR0DLQz3cv7U3EQle9Z9ereUnPityQ=";

SPC_SI=k2en4gw50emawx5fjaawd3fnb5o5gu0w; SPC_U=-; SPC_T_IV="in3vKQSBLhXzeTaGwMInvg==";

_gcl_au=1.1.557205539.1546426854; csrftoken=8XtQ7bHlv09rlx5U4NPN6rmavFn7MvTO;

welcomePkgShown=true; bannerShown=true; _ga=GA1.3.472488305.1546426857;

_gid=GA1.3.1348013297.1546426857; _fbp=fb.2.1546436170115.11466858'

        }

        URL = "https://shopee.co.id/api/v1/shop_ids_by_username/"

        #url Api untuk get data nama toko berdasarkan ids tokonya

        DATA = {

            "usernames": [USERNAME]

        }

        GET_DATA = REQ.post(URL, headers=HEADERS, json=DATA)

        RESULT = GET_DATA.json()

        USERID = RESULT[0][USERNAME]

        return USERID

 

    def GET_PRODUCTS(self, USERID, REQ):

        HEADERS = {

            "user-agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit

/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36"

        }

        #url Api untuk get semua produk pada setiap toko

        URL = 'https://shopee.co.id/api/v2/search_items/?match_id={}

&order=desc&page_type=shop'.format(

            USERID

        )

        GET_DATA = REQ.get(URL, headers=HEADERS)

        RESULT = GET_DATA.json()

 

        # menyimpan data yang telah di scrapping dalam format json

        FILE_NAME = 'Shopee_{}.json'.format(USERID)

        with open(FILE_NAME, 'w') as file:

            json.dump(RESULT, file)

        return RESULT['items']

 

URL = input('Masukkan ID toko disini: ')

Scrape(URL)

Sedikit penjelasan dari scritb scrapping shopee tersebut kita menggunakan 2 buah url Api. Api yang pertama kita gunakan untuk mencari toko berdasarkan ids tokonya. Url Api yang digunakan pada proses pencarian nama toko ini adalah seperti berikut ini :

URL = "https://shopee.co.id/api/v1/shop_ids_by_username/"

Akan tetapi saat mengakses Api tersebut kita membutuhkan sebuah Http header seperti berikut ini :

 "accept-encoding": "gzip, deflate, br",

            "content-type": "application/json",

            "if-none-match": "55b03-1ae7d4aa7c47753a96c0ade3a9ea8b35",

            "origin": "https://shopee.co.id",

            "referer": "https://shopee.co.id/asusofficialshop",

            "x-api-source": "pc",

            "x-csrftoken": "8XtQ7bHlv09rlx5U4NPN6rmavFn7MvTO",

            "x-requested-with": "XMLHttpRequest",

            "user-agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36",

            "cookie": 'SPC_IA=-1; SPC_EC=-; SPC_F=QpolQhTSikpnxRXO6T4RjIW8ZGHNBmBn; REC_T_ID=ac80cdde-0e7d-11e9-a8c2-3c15fb3af585; SPC_T_ID="e4t1VmH0VKB0NajA1BrHaDQlFRwWjTZT7o83rrHW+p16sTf1NJK7ksWWDicCTPq8CVO/S8sxnw25gNR0DLQz3cv7U3EQle9Z9ereUnPityQ="; SPC_SI=k2en4gw50emawx5fjaawd3fnb5o5gu0w; SPC_U=-; SPC_T_IV="in3vKQSBLhXzeTaGwMInvg=="; _gcl_au=1.1.557205539.1546426854; csrftoken=8XtQ7bHlv09rlx5U4NPN6rmavFn7MvTO; welcomePkgShown=true; bannerShown=true; _ga=GA1.3.472488305.1546426857; _gid=GA1.3.1348013297.1546426857; _fbp=fb.2.1546436170115.11466858'

        }

Setelah tokonya ketemu kemudian kita lakukan scrapping data-data produknya pada toko tersebut dengan menggunakan url Api berikut ini :

 URL = 'https://shopee.co.id/api/v2/search_items/?match_id={}&order=desc&page_type=shop'.format(

            USERID

        )

Untuk mengaksesnya pun dibutuhkan header seperti berikut ini :

 "user-agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36"

Setelah semuanya selesai kemudian jalankan scribt tersebut . Untuk yang menggunakan text editor jupyter notebook dapat dilakukan dengan menekan tombol run pada tabs di jupyter notebook atau bisa juga dengan menekan tombol CTRL+ENTER secara bersamaan. Anda dapat mulai melakukan scrapping data dari website shoppe sekarang hanya dengan menginputkan ids nama toko pada shopee yang dapat anda lihat ketika anda membuka profile toko yang akan anda scrape datanya seperti pada gambar berikut ini yang ditunjukkan pada nomor 1 :

copykan ids nama toko ke kolom yang telah tersedia saat program telah dijalankan kemudian enter dan tunggu proses scrapping datanya jika berhasil maka data hasil scrappingnya akan disimpan pada folder yang sama dengan file scribt program python yang kita buat .

Referensi dari web kodekreasi.com