Hack Your Life: Bagaimana untuk membuat Kad Perniagaan Digital anda sendiri

[Kemas Kini 29 Sep 2018: Liwei dan saya mengeluarkan https://firstnamebasis.app/ - perkhidmatan percuma untuk menjana kad perniagaan digital peribadi anda]

Kad perniagaan agak sakit untuk dibawa masuk.

Anda tidak pernah tahu berapa banyak yang boleh dibawa ke mesyuarat atau acara berkaitan dengan kerja. Dan ada saat-saat janggal apabila anda menyedari bahawa anda berada di luar kad perniagaan.

Walaupun semua kekecohan itu, kad perniagaan masih menjadi alat yang hebat untuk bertukar-tukar maklumat hubungan. Tetapi bolehkah kita melakukan ini tanpa memerlukan kad perniagaan fizikal?

Imbas dan simpan

Bagaimana jika semua yang diperlukan untuk bertukar-tukar maklumat hubungan adalah imbasan mudah dan selamat?

Bayangkan ini: anda cuba mendapatkan maklumat hubungan daripada orang A. Orang A memaparkan kod QR pada telefon mereka, dan yang perlu anda lakukan adalah mengimbas telefon mereka menggunakan kamera iPhone anda. Maklumat hubungan mereka dipaparkan secara automatik pada telefon anda dan anda menekan butang simpan. Voila, kini anda mempunyai maklumat hubungan mereka dalam senarai Kenalan anda.

Sekiranya anda kini berada di desktop / komputer riba anda, anda mungkin mahu mengambil telefon anda untuk memberi ini pergi.

Kod QR untuk kad perniagaan digital sayaMaklumat hubungan yang dipaparkan di laman web mudah alih (kiri) dan VCF dalam aplikasi Kenalan selepas muat turun (kanan)

Semua bidang dalam laman web mudah alih adalah interaktif. Sekiranya anda mengetuk medan nombor kenalan, anda akan mendail nombor yang ditunjukkan secara automatik (bukan nombor mudah alih saya yang sebenar).

Selepas mengklik pada butang muat turun, Fail Hubungan Maya (VCF) akan dimuat turun dan disegerakkan ke dalam aplikasi Kenalan anda serta-merta.

Sudah cukup, bukan?

Tutorial: 7 langkah mudah

Kini anda dapat membuat kad perniagaan digital anda sendiri! Anda tidak perlu mempunyai pengalaman pengekodan untuk melakukan ini - saya akan menerangkan apa yang perlu dilakukan. Sila berasa bebas untuk meninggalkan komen jika anda tersekat!

Langkah 1: Buat akaun GitHub (jika anda belum ada)

Mari kita mulakan dengan membuat akaun GitHub dan log masuk. Kebanyakan kerja kami akan dilakukan di GitHub.

https://github.com/join

Apa itu GitHub?
GitHub adalah platform yang digunakan secara tradisional oleh jurutera perisian untuk menyimpan kod mereka dan menjejaki perubahan yang telah dibuat dari masa ke masa (kawalan versi a.k.a.
Tetapi untuk tujuan kami, mari kita hanya merawat GitHub sebagai Dokumen Word gergasi yang menyimpan semua maklumat hubungan kami. Ini juga di mana kita akan membuat perubahan dalam kod.

Langkah 2: Garpu dari repositori kod saya (repo)

Dalam langkah ini, kami akan membuat garpu - salinan - repo saya. Kami ingin melakukan ini supaya anda boleh menggantikan maklumat hubungan saya dengan anda sendiri.

Apa itu repo?
Repositori, atau repo untuk pendek, adalah tempat di mana fail dipegang. Bayangkan ia sebagai baldi atau folder yang memegang banyak dokumen kod.
Apakah garpu?
Garpu adalah salinan repositori. Forking repositori membolehkan anda bebas bereksperimen dengan perubahan tanpa menjejaskan projek asal.

Buka tetingkap pelayar anda dan pergi ke url berikut (pastikan anda telah melog masuk ke akaun GitHub anda): https://github.com/prestonlimlianjie/digital-namecard

Repo GitHub yang mengandungi semua fail yang berkaitan.

Klik pada butang 'Fork' di bahagian atas sebelah kanan halaman. Tunggu beberapa saat!

Forking sedang berjalan! Saya suka bagaimana ada garpu harfiah dalam imej.

Anda kemudiannya akan melihat repo yang sama - tetapi bukannya nama prestonlimlianjie / digital-namecard di bahagian atas kiri, repo kini akan menjadi [your_username] / digital-namecard. Dalam kes saya, ia adalah preston-test / digital-namecard. Anda kini telah membuat garpu yang hanya milik anda!

Repo anda yang baru diberkas!

Tahniah, awak buat garpu dari repo saya! Sekarang kita hanya mempunyai satu langkah persediaan terakhir sebelum kita melompat ke dalam kod.

Langkah 3: Muat naik gambar profil dan logo syarikat anda

Anda perlu menyediakan gambar profil dan logo syarikat - sama ada dalam .png, atau .jpg, atau .svg.

Klik pada butang 'Muat naik fail' di bahagian atas sebelah kanan.

Butang 'Muat naik fail' boleh didapati di bahagian atas sebelah kiri skrin.

Anda akan tiba di skrin muat naik. Seret dan lepaskan gambar profil dan logo syarikat anda!

Halaman muat naik.

Gambar profil saya ialah user.png dan logo syarikat saya adalah icon.png.

Sebaik sahaja fail telah dimuat naik ke halaman, klik pada butang 'Komit perubahan' untuk menyimpan fail ke repositori.

Jangan lupa untuk menyelamatkan!

Anda harus melihat fail anda di halaman utama repo sekarang.

user.png dan icon.png kini boleh didapati di repo.

Dan kini kami bersedia menyelam masuk ke dalam kod. Tetapi sebelum kita berbuat demikian, mari kita jalankan ke jalan pintas bagaimana kad perniagaan digital berfungsi. Terdapat 3 komponen utama:

  1. Kod QR yang, sekali diimbas, membawa pengguna ke laman web kad perniagaan digital anda
  2. Laman web mudah alih utama yang memaparkan kad perniagaan digital dengan maklumat hubungan anda - ini dibuat terutamanya menggunakan HTML.
  3. Fail Hubungan Maya (VCF) yang akan dimuat turun dari laman web mudah alih dan disimpan ke dalam aplikasi Kenalan di telefon.

Kami perlu membuat perubahan kepada semua 3 komponen untuk menjadikan kad perniagaan digital anda sendiri.

Tapi mari kita ambil satu langkah pada satu masa - bermula dengan HTML.

Langkah 4: Edit HTML

Apakah itu HTML?
HyperText Markup Language (HTML) adalah bahasa yang bertanggungjawab untuk laman web.
Apabila anda menggunakan penyemak imbas (Chrome, Firefox, Safari dll) untuk mengakses laman web, pelayar sebenarnya menerima HTML - yang merupakan sekumpulan kod. Pelayar kemudian membaca HTML dan mencipta laman web yang menarik secara visual yang kami biasa lihat.
Laman web sebagai pengguna melihatnya (kiri) dan kod HTML yang mendasarinya (kanan) dibaca oleh penyemak imbas untuk menghasilkan versi laman web yang dilihat di sebelah kiri.

Mari mulakan dengan membuka index.html dalam GitHub. Anda melakukan ini dengan mengklik pada perkataan index.html di repo.

Anda kini akan melihat fail HTML dalam kemuliaan penuhnya.

Jangan kecewa, HTML tidak akan menggigit.

Untuk membuat pengeditan padanya, kita perlu mengklik butang edit-yang dengan ikon pena di sebelah kiri atas.

Editor GitHub sedia untuk digunakan!

Terdapat beberapa perkara yang perlu kita edit dalam HTML. Saya telah menyerlahkan bidang dalam kod yang harus diganti!

Catatan:
Kebanyakan bahasa pengekodan, termasuk HTML, sangat khusus mengenai sintaks. Jadi cuba yang terbaik untuk hanya mengganti bahagian kod yang saya nyatakan.
Sekiranya anda secara tidak sengaja memadam satu aksara terlalu banyak, simpan peraturan ini: kod berfungsi seperti pintu - jika anda membuka sesuatu, anda perlu menutupnya. Sebagai contoh, jika terdapat pembukaan sudut sudut <, mesti ada penutupan juga>.

Gambar profil (preston.jpg) dan logo (aset / govtech-logo-blue.svg)

Ganti preston.jpg dengan nama gambar profil anda yang anda ingin gunakan.
Ganti aset / govtech-logo-blue.svg dengan nama fail logo anda.

Senang kacang!

Nama (Preston Lim), tajuk (Jurutera Perisian Kejuruteraan), dan nama syarikat (Bahagian Sains Data, GovTech)

Gantikan Preston Lim dengan nama anda.
Ganti Jurutera Perisian Bersekutu dengan tajuk anda.
Gantikan Bahagian Sains Data, GovTech dengan nama syarikat anda.

Perlahan perlahan-lahan!

Sekarang ada bahagian yang agak rumit. Anda perlu melakukan setiap langkah ini dua kali. Berikan perhatian sepenuhnya!

Alamat e-mel (preston@data.gov.sg), nombor telefon (+65 9123-4567), URL laman web (tech.gov.sg), dan alamat syarikat (1 Fusionopolis, Sandcrawler, # 09-01, 135877)

Gantikan preston@data.gov.sg dengan alamat e-mel anda. Lakukan ini di dua tempat yang diserlahkan di bawah.

Lakukan dua kali!

Ganti +6591234567 dengan nombor telefon anda. Lakukan ini di dua tempat yang diserlahkan di bawah. (Saya tahu mereka agak berbeza, tetapi tidak begitu penting)

Dua kali lagi!

Ganti https://www.tech.gov.sg dengan URL laman web anda. Lakukan ini di dua tempat yang diserlahkan di bawah.

Hampir sampai!

Dan kini perhatikan. Kami akan menggantikan 1 Fusionopolis, Sandcrawler, # 09-01, 135877 dengan alamat syarikat anda (ini adalah perkara kedua yang diserlahkan).

Blok yang diserlahkan pertama ialah URL untuk mencari Peta Google alamat syarikat anda. Apa yang ingin anda lakukan sekarang ialah pergi ke Peta Google dan masukkan alamat syarikat anda, dan salin dan tampal URL yang dihasilkan. Gantikan blok kod yang diserlahkan dengan URL.

Yang terakhir saya berjanji!

Tatal ke bahagian bawah halaman dan tekan 'Commit change'!

Yay!

Sekarang kita selesai dengan menyunting HTML!

Langkah 5: Buat laman web anda menggunakan Halaman GitHub

Kami kini selesai menyunting laman web mudah alih utama! Walau bagaimanapun, kami mempunyai masalah - laman web pada masa ini hanya duduk di repo GitHub sebagai fail HTML. Bagaimanakah kita membuatnya supaya fail HTML ditunjukkan kepada sesiapa yang mahu melihatnya?

Kami perlu menjadi tuan rumah laman web kami.

Apa yang menjadi tuan rumah?
Hosting adalah proses menyambungkan fail HTML anda (dan dengan itu laman web anda) ke Internet. Laman web anda mendapat URL - alamat yang orang boleh pergi ke Internet jika mereka mahu mengakses tapak web anda.

Syukurlah, GitHub mempunyai perkhidmatan hosting yang dipanggil GitHub Pages. Mari kita mulakan untuk mendapatkan fail HTML kami yang dihoskan!

Mari klik pada butang Tetapan di bahagian atas dan tengah halaman.

Bolehkah anda mencari butang Tetapan? Ia dekat dengan butang 'Tontonan'.

Anda harus melihat halaman yang serupa dengan yang ditunjukkan di bawah. Tatal ke bawah sehingga anda melihat 'GitHub Pages'.

Halaman tetapan repo anda.

Klik pada butang 'Tiada' dalam medan Sumber. Anda harus melihat menu lungsur turun.

Tetapan Halaman GitHub - pilih cawangan Master sebagai Sumber

Pilih 'cawangan induk'. Dengan berbuat demikian, anda memberitahu halaman GitHub untuk menjadikan repo anda menjadi laman web langsung!

Klik Simpan. URL akan dijana. Ini ialah URL tapak mudah alih anda yang mengandungi kad perniagaan digital.

Klik pada URL - anda harus melihat tapak web yang dipenuhi dengan butiran perhubungan anda!

Voila!

Langkah 6: Edit VCF

Kini, kami terus memodenkan VCF.

VCF adalah fail yang dimuat turun dan disimpan ke dalam aplikasi Kenalan apabila seseorang mengklik pada butang 'Muat Turun' di laman web.

Kembali ke halaman utama repo. Klik pada fail user.vcf.

Anda harus tiba di halaman pratonton untuk VCF. Klik pada butang edit (ikon pen pada bahagian atas sebelah kanan halaman).

Saya telah menyerlahkan kawasan yang perlu diganti dengan maklumat hubungan anda. Berhati-hati agar tidak memadamkan separuh titik!

Nota pada sintaks VCF:
Jika anda ingin memasukkan baris baru, anda perlu menambah \ n ke dalam barisan.
Jika anda ingin memasukkan koma, anda perlu menambah \, ke dalam baris.

Berikut adalah bidang yang perlu diedit dan apa yang mereka ada untuk:

N: Nama
FN: Nama Penuh
ORG: Organisasi
TITLE: Judul Kerja (\ n adalah sintaks untuk garis baharu)
EMAIL: Alamat E-mel
TEL: Nombor Mudah Alih
item1.ADR: Alamat
item2.URL: URL laman web

Klik butang 'Komit perubahan' untuk menyelamatkan VCF!

Sekarang kita selesai dengan 2 daripada 3 langkah utama - mengedit HTML dan VCF - semua yang telah kita lakukan adalah mencipta kod QR yang memandu pengguna anda ke laman web anda!

Langkah 6: Buat kod QR untuk Kad Perniagaan Digital anda

Pergi ke laman web penjana kod QR percuma - Saya menggunakan qr-code-generator.com.

Sebaik sahaja anda berada di sana, masukkan URL laman web GitHub anda dan buat kod QR. Ingat untuk memuat turun dan simpannya!

Menjana kod QR khusus untuk URL halaman GitHub anda

Sekarang anda mempunyai kod QR, beri imbasan menggunakan telefon bimbit anda. Kad perniagaan digital anda kini sedia untuk digunakan! Ambil foto itu, atau muat turun ke telefon / komputer anda.

Tahniah, anda mempunyai kad perniagaan digital anda sendiri! Itu tidak begitu buruk itu? Jika anda mendapati bahawa mudah, anda mungkin mahu mengambil langkah seterusnya berikut: penyesuaian lanjut!

Langkah 7 (pilihan): Buat sendiri!

Ini adalah untuk anda jika anda mahu pergi lebih jauh dan terus menyesuaikan kad perniagaan digital anda. Anda boleh menukar warna laman web dengan melakukan pengeditan ke fail utama.css dalam repo yang sama - Saya akan membiarkan anda untuk memikirkannya, dan anda harus menggunakan Google untuk mencari dokumentasi untuk CSS.

Apakah CSS?
Cascading Style Sheets atau CSS adalah bahasa yang menentukan bagaimana laman web HTML anda kelihatan.
Inilah analogi yang menyeronokkan. Sekiranya laman web adalah manusia, HTML adalah struktur rangka manusia, dan CSS adalah kulit dan rambut manusia.

Hanya untuk memberi anda rasa apa yang boleh dilakukan: Saya telah membuat beberapa variasi reka bentuk kad perniagaan digital yang anda lihat di atas menggunakan alat reka bentuk yang dipanggil Figma.

Reka bentuk gantian laman web di Figma

Menutup pemikiran

Sekarang bahawa anda telah mendapat kad perniagaan digital anda dan berjalan begitu mudah, saya mencabar anda untuk membayangkan apa lagi yang anda boleh membina dengan alat yang sama!

Terima kasih kerana memberikan tutorial ini menusuk! Saya harap anda menikmati melalui tutorial dan mendapat sepakan daripada membuat kad perniagaan digital peribadi seperti yang saya lakukan!

Jika anda mempunyai sebarang komen atau pertanyaan, sila hubungi saya! Ini kali pertama saya menulis tutorial, dan saya tidak sabar untuk mendengar apa yang anda fikirkan!