Authentication with Firebase -- Polycasts #57 Google Chrome Developers English Indonesian

Authentication with Firebase -- Polycasts #57YouTube↗ IA↗(long shot)
Science & Technology 23.7K views 353 likes 2 dislikes 16 Nov 2016

Chrome for Developers 814K subscribers N/A YouTube↗

Click to Play Video

[MUSIC PLAYING]

ROB DODSON: Hey everyone, what's up, it's Rob.

Semuanya, apa kabar? Saya Rob.

Welcome back to the show.

Selamat datang kembali.

So I got on Twitter recently and I

Saya masuk Twitter baru-baru ini dan bertanya,

asked folks, what would they like to see

apa yang ingin mereka lihat di Polycast mendatang.

in upcoming Polycasts. And kind of resoundingly, a lot of folks

Dan sangat meyakinkan sekali, banyak yang mengatakan

said they want to see more Firebase.

mereka ingin lebih banyak Firebase.

So I thought it would be cool to kind of kick off

Jadi, saya pikir, sangat keren untuk memulai seri beberapa bagian

a multi-part series where we talk

di mana kami berbicara tentang bagaimana Anda bisa menggabungkan

about how you can integrate Polymer and Firebase together into your projects.

Polymer dan Firebase dalam proyek Anda.

So today, what we're going to do is just get started.

Jadi hari ini, yang akan kita lakukan adalah memulainya.

We're going to set up a very simple Firebase project

Kita akan membangun proyek Firebase yang sangat sederhana

and we're going to do some Firebase authentication.

dan kita akan melakukan Firebase Authentication.

So follow me over here to my laptop.

Ikuti saya melalui laptop ini.

And the first thing I'm going to do

Hal pertama yang akan saya lakukan

is I'm going to go to console.firebase.google.com.

adalah saya akan buka<i> console.firebase.google.com</i>.

You'll want to have a Google account already that you can sign into.

Anda harus punya akun Google yang bisa dimasuki.

So I've signed into my personal account here.

Jadi, saya masuk ke akun pribadi saya.

And I'm going to create a new project for my Firebase app.

Dan saya akan membuat proyek baru untuk aplikasi Firebase saya.

And this is going to let me do all sorts of really

Dan dengan ini, saya bisa lakukan berbagai hal keren.

cool things. I can do hosting with Firebase, I

Saya bisa lakukan hosting dengan Firebase,

can do database work with Firebase, authentication, et cetera.

saya bisa melakukan kerjaan basis data dengan Firebase, otentikasi, dan lainnya.

I got to give it a name. So I'm going to call this poly-fire,

Saya harus menamakannya. Saya akan memanggilnya <i>poly-fire</i>,

or something like that.

atau sejenisnya.

And we'll create that project.

Dan kita akan membuat proyek itu.

Firebase will go off. It'll think for a second.

Firebase akan tercipta dan akan berpikir sejenak.

The hamster wheels are spinning up.

Roda hamster akan berputar.

poly-fire is getting created and released into the world.

<i>poly-fire</i> akan dibuat dan diterbitkan ke seluruh dunia.

OK. Cool. After that's done, you're going to see a dashboard that

Keren. Setelah selesai, Anda akan melihat dasbor seperti ini.

looks kind of like this. And there's a bunch of options and things right here.

Dan ada berbagai pilihan dan hal di sini.

It can be a little bit overwhelming.

Agak sedikit membingungkan.

But we're going to start off really, really small,

Tapi kita akan memulai kecil

and the only thing that we're going to really deal with today

dan hal yang benar-benar akan kita kerjakan hari ini adalah otentikasi.

is authentication. And so what I want to do is click on this authentication

Jadi, yang akan kita lakukan adalah klik tab otentikasi ini,

tab, and it's going to ask me, up here at the top,

dan ia akan bertanya di atas sini,

what sort of sign in methods I would like to allow in this app.

jenis tanda dalam metode apa yang saya izinkan dalam aplikasi ini.

Now being a Googler, I got to represent.

Sebagai seorang karyawan Google, saya harus mewakilinya.

So I'm going to enable Google sign in.

Jadi, saya akan izinkan 'masuk Google'.

And we just flip this little switch and click Save.

Dan kita akan menghidupkan saklar kecil ini dan klik <i>Save</i>.

And what this is going to let us do,

is anybody who's got a Google account will

siapa pun yang mempunyai akun Google akan bisa menekan tombol Masuk

be able to hit a sign in button and sign in through that account in our Firebase app.

dan masuk melalui akun tersebut ke dalam aplikasi Firebase kita.

The other thing that we need to do, is we need to go over here to our settings,

Hal lain yang perlu kita lakukan, kita perlu ke bagian setelan sini,

go to Project Settings, and we're

pergi ke Setelan Proyek,

going to need this web API key that I'm copying here.

dan kita akan perlukan kunci web API yang saya salin ini.

Otherwise our authentication will not work.

Jika tidak, otentikasi kita tidak akan berfungsi.

OK. So I think that's basically everything we

Itu semua yang diperlukan dalam konsol Firebase.

need in the Firebase console. There's a ton more that you can do here.

Banyak hal lain yang bisa dilakukan.

And we're going to cover that in some of future episodes.

Kita akan bahas dalam episode mendatang.

But for now, we're pretty much ready to go with just the default setup.

Untuk sekarang, kita gunakan saja default setup.

So the next thing I want to do is switch over to my command line.

Hal berikutnya yang ingin saya lakukan adalah berpindah ke baris perintah.

And I've already gone ahead and created a directory to hold my demo application.

Saya telah membuat sebuah direktori untuk aplikasi demo saya.

And Firebase also provides a really useful set

Dan Firebase juga menyediakan himpunan peralatan barisan perintah

of command line tools that you can install that will go ahead and scaffold a project for you.

yang Anda bisa pasang dan bisa merancang kerangka proyek untuk Anda.

So if you don't have those installed already,

Jika Anda belum memasangnya,

you can do npm install -g firebase-tools.

Anda bisa melakukan<i> npm install -g firebase-tools</i>.

That'll go out, fetch all that stuff, set it up for you,

Ia akan kumpulkan semua hal itu, menyiapkannya untuk Anda.

so you'll now have a Firebase command.

jadi Anda sekarang punya perintah Firebase.

I've already got those installed so you don't have

Saya sudah memasangnya jadi Anda tak perlu lihat saya melakukannya.

to watch me do any of that. So what I'm going to do, is I'm going to run firebase init.

Yang akan saya lakukan adalah saya akan menjalankan <i>firebase init</i>.

And it's going to put a very rad emoji on my screen.

Dan itu akan menampilkan emoji hebat pada layar saya.

And then it's going to ask me some questions about what

Dan akan menanyakan beberapa pertanyaan

sort of Firebase features I would

tentang jenis fitur Firebase yang ingin saya miliki di proyek ini.

like to have in this project. Firebase provides a real time database, which is awesome,

Firebase menyediakan basis data realtime yang hebat,

and we will be using that, so we'll leave that checked.

dan kita akan memakainya, jadi kita centang.

And then we've got Firebase hosting.

Kita juga mempunyai hosting Firebase.

And that lets us basically just do hosting of static assets.

Yang mengizinkan kita melakukan hosting dari aset statik.

We can host our entire site on Firebase if we want.

Kita bisa saja menghost seluruh situs kita dalam Firebase.

So I will leave that in there as well.

Jadi, saya akan membiarkannya.

I'll hit enter.

Saya tekan tombol <i>enter</i>.

It's going to ask us what project

Dan ia akan menanyakan proyek apa yang ingin kita hubungi.

we want to associate with. So since we just created that one called poly-fire.

Karena kita baru saja membuat proyek bernama <i>poly-fire</i>-

Here I'll move this up a little bit,

Saya akan memindahkannya sedikit, jadi lebih mudah melihatnya.

this is a little easier to see. So we will associate with poly-fire.

Jadi kita akan berhubungan dengan <i>poly-fire</i>.

What file should be associated with the database?

Fail apa yang harus berhubungan dengan basis data?

We'll just use the default value there database.rules.json.

Kita akan gunakan nilai default di sana, <i>database.rules.json</i>.

What directory do you want to use?

Direktori apa yang ingin digunakan? Kita akan jawab, yang publik.

We'll say our public one. And then it's going to ask if Firebase should sort of configure its local server

Ia akan bertanya apakah Firebase harus mengonfigurasi aturan server lokalnya

rules to direct everything to index.html?

untuk mengarahkan semuanya ke <i>index.html</i>?

So if we were building a single page web app.

Jika kita membangun aplikasi halaman web tunggal,

I'm going to say yes, I would like that feature,

saya akan menjawab, "Iya, saya ingin fitur itu.", karena itu keren.

because that's pretty cool. And at that point, it's basically done.

Dan semuanya selesai.

And if we go ahead and we open this up in our code editor,

Jika kita lanjut dan membuka ini dalam editor kode kita,

we'll see that this has started to kind of scaffold

kita akan lihat bahwa sejenis kerangka telah dimulai untuk kita.

some things out for us. So I've got these firebase.json, firebaserc file

Jadi saya mempunyai fail<i> firebase.json, firebaserc</i>

that points to my project name, stuff like that.

yang menunjukkan nama proyek saya, dan sejenisnya.

This is all just configuration to make Firebase work.

Ini semua hanyalah konfigurasi agar Firebase bekerja.

What we're mainly going to be working with today

Yang akan kita lakukan hari ini

though is this public directory.

adalah direktori publik ini.

So this is where our code is going to live.

Ini tempat di mana kode kita berada.

The other nice thing that we can do with the Firebase tools,

Hal hebat lain yang bisa dilakukan dengan peralatan Firebase,

is we can start up a local dev server.

adalah kita bisa memulai server dev lokal.

So we'll say firebase serve.

Jadi kita akan berkata <i>firebase serve</i>.

And it's actually going to look at the rules

Dan ia akan melihat aturan dalam <i>firebase.json</i> kita,

that we have in our firebase.json there. That tells it to serve our public directory.

yang memberitahunya untuk melayani direktori publik kita.

So we can then just open up localhost:5000.

Jadi kita bisa membuka <i>localhost:5000</i>.

And you'll see a page that looks like this.

Dan Anda akan melihat halaman seperti ini

Letting you know that your local instance of Firebase

yang memberitahu Anda, instance lokal Firebase Anda berfungsi.

Keren. Baiklah.

Cool. All right. The next thing we want to do, is we

Hal berikutnya yang akan kita lakukan,

want to go ahead and install Polymer,

adalah kita akan memasang Polymer,

and we want to install Polymer Fire.

dan kita akan memasang Polymer Fire.

Which is a set of Polymer elements that work specifically with Firebase.

Yaitu himpunan elemen Polymer yang bekerja khusus dengan Firebase.

So, because I want everything to live in this public directory,

Jadi, karena saya ingin semuanya berada dalam direktori publik ini,

I'm actually going to create a bowerrc file.

saya sebenarnya akan membuat fail <i>bowerrc</i>.

So I'll create a .bowerrc file.

Jadi, saya membuat fail <i>.bowerrc</i>.

Jadi, <i>.bowerrc</i>.

RC And I will use this to tell bower

Dan saya akan memakai ini untuk memberitahu <i>bower</i>

to install all my stuff into that public dir.

untuk memasang semua benda saya dalam direktori publik itu.

So I will say, directory is public/bower_components.

Saya akan berkata,<i> "directory": public/bower_components</i>.

And then in my terminal, bower init.

Dan dalam terminal saya, <i>bower init</i>.

Yeah, it'll ask us a bunch of questions about our project,

Akan muncul banyak pertanyaan tentang proyek kita,

we can just use the default values, that's fine.

dan kita bisa saja memakai nilai default.

And then we will bower install --save.

Dan kita akan <i>bower install --save</i>.

We will definitely want Polymer/polymer.

Pastinya kita menginginkan<i> Polymer/polymer</i>.

We're going to want firebase/polymerfire.

Kita akan menginginkan<i> firebase/polymerfire</i>.

And we're going to want Polymer Elements/paper-button.

Dan kita akan menginginkan<i> PolymerElements/paper-button</i>.

All right, so that's going to go out and fetch

Baiklah, semuanya akan pergi menjemput semua referensi itu

all of those resources and dump them into our public directory.

dan membuangnya dalam direktori publik kita.

Finished pretty quickly, which is good.

Selesai cukup cepat, bagus.

And now we're basically ready to start building our app.

Sekarang kita siap untuk membangun aplikasi kita.

And remember the goal of this app

Ingat, tujuan dari aplikasi ini

is to basically have sort of a simple sign in flow

adalah membuat sejenis arus masuk sederhana bagi pengguna.

for the user. So all I'm going to build today is a button, that when

Jadi, yang akan saya bangun hari ini adalah sebuah tombol,

you click on it, it'll take you through the o-auth flow

di mana saat Anda mengkliknya, Anda akan dibawa

for Google sign in.

melalui arus <i>o-auth</i> untuk masuk Google.

And when the user is actually signed in,

Dan saat pengguna sudah masuk,

it'll just like display their name on screen.

nama mereka akan ditampilkan pada layar.

That way we know we at least have something working there.

Dengan begitu, kita tahu bahwa itu bekerja.

So, let's go into our index.html file.

Jadi, kita lihat fail <i>index.html</i> kita.

And there's a bunch of code here that Firebase sort of set up

Ada banyak kode di sini yang dibangun Firebase untuk kita,

for us that I'm just going to go ahead and delete because I don't really need any of this stuff.

yang akan saya hapus karena saya tidak memerlukannya.

So we'll get rid of that.

Jadi, kita akan buang.

We'll get rid everything in the body. And make this a little bit bigger.

Kita akan membuang semua dalam <i>body</i>, dan memperbesarnya.

We'll rename this Firebase Auth or something like that.

Kita akan mengubah namanya menjadi Firebase Auth atau lainnya.

And because we're using Polymer, because we're

Dan karena kita menggunakan Polymer, karena kita membangun aplikasi Polymer,

building a Polymer app, I want to start off by creating just a my app element, that can sort of hold

saya ingin memulai dengan hanya membuat elemen <i>my app</i>,

all of my logic.

yang bisa menyimpan semua logika saya.

So I'll have a my-app element here.

Saya punya elemen <i>my-app</i> di sini.

And I'm going to make sure to include an HTML import for that.

Dan saya akan pastikan memasukkan impor HTML untuk itu.

So we're going to ask for my-app.html. OK.

Saya akan meminta <i>my-app.html</i>.

And inside of this my-app element, my-app.html,

Dan dalam elemen <i>my-app</i> ini, <i>my-app.html</i>,

we're going to want to import some of the Polymer Fire

kita akan mengimpor beberapa elemen Polymer Fire.

elements. So let's go check those out really quick.

Kita cek sebentar.

So we'll going to beta.webcomponents.org.

Kita akan membuka <i>beta.webcomponents.org</i>.

This is the new catalog where you can find all sorts of interesting, custom elements.

Ini katalog baru di mana Anda bisa temukan semua jenis elemen khusus yang menarik.

The ones that I'm looking for are called polymerfire.

Yang saya cari bernama <i>polymerfire</i>.

So go check these out.

Mari kita lihat.

So this is a suite of elements created by the Firebase team

Ini rangkaian elemen yang dibuat oleh tim Firebase khusus untuk Polymer.

specifically for Polymer. And you can see here that basically what we want

Anda bisa lihat bahwa yang kita inginkan sebenarnya

is this firebase-app element, and we're

adalah elemen <i>firebase-app</i> ini,

going to combine it with this firebase-auth element.

dan kita akan menggabungkannya dengan elemen <i>firebase-auth</i> ini.

So when I bower installed these, I got both of these already.

Jadi saat <i>bower</i> memasang ini, saya dapat keduanya.

But you can sort of see the signature for how these work.

Anda bisa lihat ciri khas cara mereka bekerja.

Here, I'll bump this up a little bit so you can read that.

Saya akan geser agar Anda bisa baca.

So you create a firebase-app element. You basically tell it about your domain,

Anda buat elemen <i>firebase-app</i> dan memberitahunya tentang domain Anda,

you give it that API key that we copied earlier,

Anda memberi kunci API yang kita salin tadi,

and you create a firebase-auth element,

dan Anda buat elemen <i>firebase-auth</i>,

and that'll tell you when your user is signed in or not.

dan ia akan memberitahu Anda saat pengguna Anda masuk atau tidak.

Cukup bagus sejauh ini.

So far so good. So in our my-app element, over here.

Jadi, dalam elemen <i>my-app</i> kita di sini,

I basically want to create an element that's going to hold that firebase-app element.

saya ingin membuat elemen yang akan menyimpan elemen <i>firebase-app</i> tersebut.

So I've got some code here that I've already written.

Ada kode yang sudah saya tulis di sini.

Kind of stolen from another project.

Hasil curian dari proyek lain.

And let's go through and we'll update this a little bit,

Mari kita bahas dan kita akan perbarui ini sedikit,

I can explain what's happening.

dan saya akan jelaskan apa yang terjadi.

So I've got a dom-module from my-app element.

Jadi, saya punya <i>dom-module</i> dari elemen <i>my-app</i> saya.

I got this firebase-app element inside of here.

Saya mempunyai elemen<i> firebase-app</i> di dalam sini.

And I want to give it the domain for my project.

Dan saya ingin memberinya domain untuk proyek saya.

So if we go back to Firebase, we go back to the console,

Jika kita kembali ke Firebase, kita kembali ke konsol,

we look at our project settings, what it actually wants

kita lihat setelan proyek kita, yang diinginkan sebenarnya

is this Project ID right here.

adalah <i>Project ID</i> di sini.

So it says Polymer fire, or poly-fire-11d42.

Di sini disebut <i>Polymer fire</i>, atau <i>poly-fire-11d42</i>.

So that's what we're going to use.

Itu yang akan kita gunakan.

So our auth-domain is going to be poly-fire-11d42.

Jadi, <i>auth-domain</i> kita akan menjadi <i>poly-fire-11d42</i>.

Our database URL, even though we're not using it yet,

URL basis data kita, walaupun kita belum gunakan,

we can go ahead and set that up.

kita bisa menyiapkannya dulu.

And then our API key is going to be that one that we copied.

Dan kunci API kita adalah yang kita salin tadi.

So get rid of that and we'll drop in the API key that we copied there.

Jadi, buang itu dan kita akan masukkan kunci API yang kita salin ke sana.

And the last thing I'm going to do,

Hal terakhir yang akan saya lakukan,

is I'm going to have this log in element

saya akan memiliki elemen masuk yang akan saya buat ini.

that I'm going to create. But essentially this is all that my app is going to do for us.

Sebenarnya, ini semua yang akan dilakukan <i>my-app</i> untuk kita.

It's going to set up the connection to Firebase app,

Ia akan menyiapkan koneksi ke aplikasi Firebase,

and then it's going to have a little log in element that will sort of toggle on and off.

dan akan memiliki elemen masuk yang bisa beralih <i>on</i> dan <i>off</i>.

Let's go ahead and create that.

Mari kita buat.

Create a my-login.html.

Buatlah <i>my-login.html</i>.

So again, I've got a little bit of code

Lagi-lagi, saya akan mencuri kode

that I'm going to steal and drop in here just to start to scaffold out my log in element.

dan meletakkanya di sini untuk mulai merangka elemen masuk saya.

What I want to do, is I want to make sure

Yang ingin saya lakukan adalah, saya ingin pastikan

that I am importing the Firebase app elements.

bahwa saya mengimpor elemen aplikasi Firebase.

I'm going to steal this link tag here.

Saya akan curi tag tautan ini.

I don't have it in any of my snippets now that I'm using Visual Studio Code.

Saya tidak punya itu di cuplikan saya karena saya pakai Visual Studio Code.

It's making me like the world's slowest developer.

Jadi saya seperti pengembang terlambat di dunia.

So if anybody wants to create a Visual Studio Code snippets

Jika ada yang ingin buat paket cuplikan Visual Studio Code untuk Polymer,

package for Polymer. I would totally be your best friend.

saya bersedia jadi teman baik Anda.

What we're going to do is we're going to import bower_components/, is it polymerfire I believe.

Yang akan kita lakukan adalah kita akan mengimpor <i>bower_components/</i>, atau <i>polymerfire</i>, saya pikir.

polymerfire/firebase-auth.

<i>polymerfire/firebase-auth</i>. Baiklah.

All right. So polymerfire/firebase-auth.html.

Jadi, <i>polymerfire/firebase-auth.html</i>.

And we're also going to pull in the paper button.

Kita juga akan menarik <i>paper button</i>.

We'll have paper-button/paper-button.html.

Kita akan punya<i> paper-button/paper-button.html</i>.

Terlihat bagus.

It's looking good. Inside of our template I'm going to drop in a firebase-auth element.

Dalam template kita, saya akan letakkan elemen <i>firebase-auth</i>.

This is the basic signature for a firebase-auth element.

Ini ciri khusus untuk elemen<i> firebase-auth</i>.

I want to give it an ID because I

Saya akan memberinya ID

am going to need to reference it in JavaScript a little bit.

karena saya perlu mereferensikannya dalam JavaScript.

And then it's got a user property

Dan ia punya properti pengguna

that we are going to expose to the outside world using

yang akan kita ekspos ke dunia luar dengan ikatan ini.

this binding. So we're just going to have a thing called user.

Jadi kita harus punya sesuatu yang bernama pengguna.

It's also got this value called status-known

Dan mempunyai nilai bernama<i> status-known</i>, yang cukup menarik.

which could be interesting.

Ini logika Boolean yang akan beritahu Anda,

It's a boolean that tells you whether or not you can assert the presence of a user, and whether

apakah Anda bisa memastikan kehadiran pengguna,

or not you're allowed to check the user object.

dan apakah Anda diizinkan untuk mengecek obyek pengguna.

So I'm including it here.

Jadi, saya memasukkannya.

I'm actually not going to use it in my code today

Saya sebenarnya tidak akan pakai dalam kode saya hari ini

because, I'll be 100% honest, I'm not entirely sure if I need to use it in my code.

karena, sejujurnya, saya tidak yakin memerlukannya dalam kode saya.

But I am including i there just so you know about it.

Tapi saya masukkan agar Anda tahu.

Maybe in the next episode we'll discover

Mungkin di episode mendatang, kita akan cari tahu apa benar berguna.

if it's actually useful or not. But I'm just going to drop it in there

Tapi saya meletakkannya agar semua orang tahu.

so it's on everyone's radar. And lastly we have this provider value. Which I'm just going to set to Google.

Terakhir, kita punya nilai provider ini, yang akan saya set ke Google.

Because if you remember, we went through,

Jika Anda ingat, kita membahasnya,

and when we were in our dashboard,

dan saat kita dalam dasbor kita,

we set up the authentication method as, sign in with Google.

kita menyiapkan metode otentikasi yaitu, Masuk dengan Google.

The next thing we need to do, is we need to drop in some paper buttons.

Hal berikutnya yang perlu kita lakukan, kita perlu letakkan <i>paper buttons</i>.

Here all close the side bar so you can see this a bit easier.

Tutup semua bilah samping jadi Anda bisa lihat dengan mudah.

So you have a paper button here, it's raised,

Anda punya <i>paper button</i> di sini, yang dinaikkan,

so it'll have a bit of a drop shadow.

jadi ada sedikit bayangan drop.

And when the user taps it, it's going to run a log in method,

Dan saat pengguna mengetuknya, ia akan menjalankan metode masuk,

and I've got this little thing that I'm doing here where I'm hiding the button if there is a user

dan ada hal kecil ini di mana saya sembunyikan tombol

jika ada pengguna yang hadir.

So if the user is already signed in,

Jika pengguna telah masuk,

let's not show the sign in button, right?

jangan tunjukkan tombol masuk.

And I've got basically the exact same thing going down here

Dan pada dasarnya hal yang sama persis untuk tombol lain ini.

for this other button. This will be our log out button.

Ini akan menjadi tombol keluar kita.

And we just sort of flip the logic.

Dan kita hanya mengubah logikanya.

So if there is already a user, then let's display the log out button.

Jika sudah ada pengguna, maka tampilkan tombol keluar.

And if there is not a user, we'll display the log in button.

Jika tidak ada pengguna, kita akan menampilkan tombol masuk.

Right. Cool, so far so good.

Keren, cukup bagus sejauh ini.

Let's also add a little bit of script here to define our element.

Kita tambahkan sedikit skrip di sini untuk menjelaskan elemen kita.

So I will say this element is a my-login element.

Jadi, saya akan berkata, elemen ini adalah elemen <i>my-login</i>.

And for the properties, we basically will want to expose this user property.

Dan untuk propertinya, kita ingin mengekspos properti pengguna ini.

So it's a user.

Jadi, itu pengguna.

Which is an object.

Yang merupakan obyek.

We also want to have that status known property.

Kita juga ingin mempunyai properti <i>status-known</i>.

So status known.

Jadi, <i>statusKnown</i>.

And that is also going to be an object.

Dan itu juga merupakan suatu obyek.

OK. And now I want to implement these log in and log out

Sekarang saya ingin implementasikan metode masuk dan keluar ini.

methods. So these should be pretty straightforward.

Ini cukup mudah.

We're basically just going to use some of the APIs

Pada dasarnya kita akan gunakan beberapa API

that the Firebase Auth element expose's for us.

yang diekspos elemen Firebase Auth untuk kita.

So I'm going to just go ahead and paste some code in here

Jadi saya akan menyalin beberapa kode di sini.

that I already copied. And what we're going to do, is we're

Dan yang akan kita lakukan adalah,

going to use the ID of the auth element.

kita akan gunakan ID dari elemen <i>auth</i>.

So remember, when we say this .$,

Jadi ingat, saat kita berkata <i>this.$</i>,

that's Polymer's way of saying reference this thing with this

itu cara Polymer mengatakan, hal ini mengacu pada ID ini.

ID. So we'll say this .$.auth, sign in with pop up.

Jadi, kita berkata <i>this.$.auth</i>, masuk dengan pop up.

And that method basically tells the auth element

Dan metode itu sebenarnya memberitahu elemen <i>auth</i>

to open the o-auth screen and ask someone to sign in using Google.

untuk membuka layar <i>o-auth</i> dan meminta seseorang untuk masuk melalui Google.

For the log out method, it's basically just call sign out using that.

Untuk metode keluar, sebenarnya hanya memanggil keluar dengan itu.

The last thing that I want to do,

Hal terakhir yang ingin saya lakukan,

is I want to add just a little template here

saya ingin menambah template kecil di sini

that will toggle on and off when we have a user or not.

yang bisa beralih <i>on</i> dan <i>off</i> saat ada pengguna atau tidak.

And it will display that user's name.

Dan akan menampilkan nama pengguna itu.

Just so we can verify that the user object we get back is correct.

Supaya kita bisa membuktikan bahwa obyek pengguna yang kita kembalikan itu benar.

So I've got some code that I'm just going to paste in here.

Jadi saya akan menyalin kode di sini.

And yeah, so I'm using a dom-if.

Dan saya menggunakan <i>dom-if</i>.

I'm checking if we have a user already.

Saya mengecek apakah kita sudah punya pengguna.

And then I've just got an h1.

Dan saya mendapat <i>h1</i>.

Where I'm just going to bind to the user's display name.

Yang akan saya ikat ke nama tampilan pengguna.

All right. So I think we're pretty close to having everything

Baiklah. Saya pikir hampir semuanya sudah ada.

where we want it. Let's just double check all of our imports here.

Mari cek ulang semua impor kita.

We don't want to have a white screen of death.

Kita tidak ingin ada layar putih kematian.

That does happen from time to time.

Bisa terjadi kapan saja.

So everything in my-login looks good.

Semua di <i>my-login</i> terlihat bagus.

In my-app we need to make sure that we are importing my-login.

Dalam <i>my-app</i>, kita perlu pastikan bahwa kita mengimpor <i>my-login</i>.

So let's do that.

Kita lakukan itu.

Go back up here.

Kembali ke atas sini.

So we will pull in my-login.html.

Kita akan menarik <i>my-login.html.</i>

We are also going to want to pull in that firebase-app element.

Kita juga akan menarik elemen <i>firebase-app</i> itu.

So polymerfire.

Jadi, <i>polymerfire</i>.

<i>Firebase-app</i>.

And then in our index file, we are pulling in the my-app element.

Dalam fail indeks kita, kita menarik elemen <i>my-app</i>.

So my-app contains firebase-app and log in.

Jadi, <i>my-app</i> berisi<i> firebase-app</i> dan Masuk.

And then log in contains firebase-auth.

Dan Masuk berisi <i>firebase-auth</i>.

Let's cross our fingers and see if this works on the first try.

Mari silangkan jari dan lihat apakah ini berjalan pada percobaan pertama.

We will run the provided Firebase server.

Kita akan menjalankan server Firebase yang tersedia.

I know sometimes we use Polymer CLI to serve things.

Saya tahu terkadang kita menggunakan Polymer CLI untuk melakukan hal.

But right now I'm just doing everything with the provided

Tapi sekarang saya lakukan semuanya dengan peralatan Firebase yang tersedia.

Firebase tools. We're following their project structure and everything.

Kita ikuti struktur proyek mereka dan lainnya.

In a later episode, I'll actually

Pada episode mendatang, saya sebenarnya

show how to integrate both Polymer tools and Firebase

menunjukkan cara menggabung peralatan Polymer dan Firebase.

tools. But for now let's just use the Firebase server.

Untuk sekarang, gunakan server Firebase.

And it will tell us that the app is that localhost:5000.

Dan ia akan memberitahu kita bahwa aplikasinya adalah <i>localhost:5000</i>.

Jadi, salinlah itu.

Drop that in here to the Chrome's.

Dan letakkan di Chrome sini.

I see I have a sign in button there.

Saya lihat ada tombol masuk di sana.

Let's zoom in a little bit so you can see that.

Kita perbesar agar Anda bisa melihatnya.

Clicking on that should give me an o-auth pop up.

Mengkliknya akan memberi kita pop up <i>o-auth</i>.

And ask me to sign in.

Dan meminta saya untuk masuk.

Dan saya masuk.

And then boom, it says, welcome Rob Dodson.

Dan keluarlah, dan berkata, selamat datang Rob Dodson.

Lets me know that we have a user object.

Memberitahu saya bahwa kita mempunyai obyek pengguna.

And if I want, I can then sign out.

Jika saya mau, saya bisa keluar.

And start the process all over again.

Dan mengulangi proses yang sama lagi.

So that about covers it for today.

Jadi, itu saja untuk hari ini.

We've now got kind of the basics of setting up

Sekarang kita punya dasar untuk membuat Firebase

Firebase and setting up Firebase authentication in our project.

dan membuat Firebase Authentication dalam proyek kita.

There's still a lot more to talk about,

Masih banyak yang harus dibicarakan,

but I'm going to save that for the next episode.

tapi saya akan menyimpannya untuk episode mendatang.

So if you have any questions, as always,

Jika Anda punya pertanyaan, seperti biasa,

you can leave them for me down below in the comments.

Anda bisa menulisnya di bagian komentar. Atau Anda bisa bertanya ke saya

Or you can hit me up on a social network of your choosing at #askpolymer.

melalui jaringan sosial pilihan Anda di #AskPolymer.

As always, thanks so much for watching,

Terima kasih telah menonton,

and I'll see you next time.

dan sampai jumpa lagi.

Hey there, Polycasters, what's up?

Pengguna Polycast, apa kabar?

If you liked this episode and you want to see some more,

Jika Anda suka episode ini dan ingin menonton yang lain,

you can check them out over here.

Anda bisa melihatnya di sini.

And also be sure to click that little subscribe button,

Pastikan untuk mengklik tombol kecil berlangganan itu,

Similar videos:

Firebase Messaging -- Polycasts #59
Chrome for Developers
21.9K views 180 likes 7 dislikes 14 Dec 201676% match

Firebase Realtime Database -- Polycasts #58
Chrome for Developers
25.4K views 249 likes 4 dislikes 30 Nov 201667% match

How to use Redux in Polymer -- Polycasts #61
Chrome for Developers
33.5K views 546 likes 6 dislikes 18 Jan 201765% match

Asynchronous Actions with Redux -- Polycasts #62
Chrome for Developers
42K views 273 likes 15 dislikes 15 Feb 201763% match

What's up with Polymer 2? #AskPolymer -- Polycasts #54
Chrome for Developers
29.8K views 223 likes 3 dislikes 22 Sep 201660% match

Forms! -- Polycasts #55
Chrome for Developers
29.7K views 499 likes 13 dislikes 05 Oct 201653% match

Polygit. The Polymer CDN! -- Polycasts #45
Chrome for Developers
450.1K views 286 likes 5 dislikes 07 Apr 201649% match

Polymer Starter Kit 2! -- Polycasts #52
Chrome for Developers
53K views 371 likes 7 dislikes 24 Aug 201644% match

Routing with carbon-route -- Polycasts #46
Chrome for Developers
195.5K views 259 likes 10 dislikes 20 Apr 201642% match

Lazy loading data with app-route -- Polycasts #47
Chrome for Developers
120K views 320 likes 5 dislikes 01 Jun 201640% match

What about 3rd party JavaScript? #AskPolymer -- Polycasts #44
Chrome for Developers
69.4K views 125 likes 3 dislikes 23 Mar 201638% match

Intro to ARIA -- A11ycasts #13
Chrome for Developers
46.9K views 820 likes 13 dislikes 10 Feb 201734% match

What is Focus? -- A11ycasts #03
Chrome for Developers
42.8K views 206 likes 3 dislikes 19 Aug 201633% match

Introducing A11ycasts! -- A11ycasts #01
Chrome for Developers
285.7K views 648 likes 2 dislikes 02 Aug 201633% match

#ChromeDevSummit talks are up - W00T! -- Polycast #34
Chrome for Developers
382.8K views 37 likes 2 dislikes 18 Nov 201532% match

Google Sign-In for Websites: Authentication with backends
Chrome for Developers
52.6K views 244 likes 23 dislikes 16 Mar 201631% match

Inert Polyfill -- A11ycasts #02
Chrome for Developers
75.8K views 512 likes 4 dislikes 04 Aug 201629% match

Controlling focus with tabindex -- A11ycasts #04
Chrome for Developers
160.7K views 322 likes 6 dislikes 02 Sep 201629% match

Just use button -- A11ycasts #05
Chrome for Developers
55.5K views 673 likes 7 dislikes 16 Sep 201628% match

Polymer and Progressive Web Apps: Building on the modern web - Google I/O 2016
Chrome for Developers
94.9K views 679 likes 19 dislikes 19 May 201628% match

Web Performance Tooling - Google I/O 2016
Chrome for Developers
316.6K views 625 likes 30 dislikes 18 May 201628% match

شاهد ماذا اختاروا الاجانب الاغاني ام القران؟ 😨 لايفوتكم شي صادم (مترجم عربي)
MustiTubeTV
9.1M views 382.5K likes 43.1K dislikes 14 Aug 201728% match

Introduction to Google Sign-In for Websites
Chrome for Developers
193.9K views 907 likes 66 dislikes 09 Mar 201628% match

Progressive Web Apps across all frameworks - Google I/O 2016
Chrome for Developers
52.3K views 694 likes 10 dislikes 20 May 201628% match

Sa'duna Fiddunya AHKAM Feat Gus Najmi Syubbanul Muslimin Reaction | Indonesia | MR Halal Reacts
MR Halal
2.5K views 182 likes 2 dislikes 18 Nov 202027% match

5 Basic Cajon Beats You Can Learn Today
Ross McCallum
1.2M views 16.5K likes -1 dislikes 13 Jun 201927% match

How to Blur the Background with Adapted Lenses and the Sony A6000
AdaptedAlpha
56.8K views 593 likes 47 dislikes 09 Jan 201726% match

Al Qur'aniyah Islamic Boarding School Performancing Surah Al Maa'uun
MR Halal
2.1K views 181 likes 2 dislikes 18 Sep 202026% match

PS5 Teardown: An up-close and personal look at the console hardware Playstation 5 | MR Halal Reacts
MR Halal
1.2K views 56 likes 4 dislikes 08 Oct 202026% match

Alor Island Indonesia | East Nusa Tenggara - Reaction (BEST REACTION)
MR Halal
4K views 283 likes 1 dislikes 02 Jul 202026% match

Settings Privacy About Contact Donate