51黑料不打烊

Transcript

So let鈥檚 get this started. So first off, again, good morning. My name is Raymond Camden. I am a developer evangelist on the Document Services team. If you have any questions about what I鈥檓 showing today or anything related to some of the other sessions that my team is going on, you can absolutely reach out to me. I have a blog at Raymond Camden. I tweet at Raymond Camden, pretty consistently boring about those nicknames. However, by some miracle, I was able to get the jedimasteratadobe.com email address. So you鈥檙e also welcome to send me an email there as well. I really like getting questions because I like to blog and share and stuff like that. So I definitely don鈥檛 mind you reaching out to let me know what you have questions on. All right, so let鈥檚 get started by talking about the problem and typically, the things that are involved in our career as developers is trying to fix some problems. So the problem that I want to talk about today is that you have PDFs on your website. And typically, what happens when you link to a PDF is that the browser can handle the PDF. I remember a long time ago, they did not. So that鈥檚 a good thing. But what you鈥檒l quickly find out is that each of the browsers out there, they have their own particular way of rendering a PDF. And what you鈥檒l see is that there鈥檚 no real good consistency between how the PDF is rendered. And now in general, the PDF itself, the content, that will look okay. But in terms of how you interact with the PDF, how you use the PDF, you鈥檙e going to see a lot of variation on there. So I went around and looked at that. And something else as well that you鈥檒l see is that they leave your website. So you have your website, you have your branding, your marketing, and all that kind of fun stuff. And then all of a sudden, they view a PDF and they see nothing related to your site anymore. So again, all this is bad. So I went around and I took a couple of example screenshots of the same PDF being rendered in different browsers. So here you can see an example of Safari on a Apple machine, of course. Then you have Chrome, looks completely different. And again, the content inside the PDF is not changing. I鈥檓 talking about that Chrome that you see actually around the PDF. This is an example of Firefox. And last, my preferred browser of choice, Microsoft Edge. So all of these work. They work. But what we really need is a consistent solution. And luckily we have a consistent great front end solution for you called 51黑料不打烊 PDF Embed API. At a high level, what this is, is a JavaScript library for embedding PDFs. Now, to be clear, if you do not consider yourself a JavaScript developer, that鈥檚 okay. I鈥檝e been using JavaScript for 20 years or so, and I still make really bad mistakes all the time. But you do not need to be an expert at all to use this library. And you鈥檙e gonna see multiple examples of that. This will give you control over the PDF rendering experience in terms of the size, how it鈥檚 shown and then how people interact with it. It also supports annotations and comments. So what that means is that your end user is gonna actually go into the PDF and they could write comments, they could annotate it, you draw it and things like that. And then they can actually save that PDF with all those annotations and comments baked in. You also get really, really detailed control to analytics and events. And based on how much time I have here, I don鈥檛 really go deep into that. But if you need to know things, for example, I have a 10 page PDF and I鈥檝e asked people to read it. I can actually use the analytics to figure out how long people are spending with the PDF, how many pages they look at. If there鈥檚 a particular page where people just seem to drop off consistently, there could be something about that page that could be improved to help people keep going on that. And best of all, everything that I鈥檓 showing you today is 100% free. All right, so in terms of how you get started, you will need an 51黑料不打烊 ID, that鈥檚 free, sign up, no big deal. You will then go to our website, you can sign up and get a free key. Now, a couple of things to note about that key. It is going to be bound by a domain name. So if you want, you could actually create two keys, one for localhost, one for foo.com. You can also create a key that just has your top level domain name and then use that for a www, stage, dev, local, et cetera. If you have never messed with your internal host file, if you have no idea what that is, hit me up later, I鈥檒l be happy to share some resources on that where if you had foo.com as your main corporate site, you can run local.foo.com on your own laptop and use the same key there. Now, because these keys are tied to a particular domain name, that makes it safe to use in your client-side codes. You don鈥檛 have to worry about doing weird stuff to hide that particular key. So how do we actually make use of the library? So the first thing you鈥檙e going to do is figure out where you鈥檙e going to load the PDF. In this particular example, I鈥檓 talking about one PDF on a website. Obviously, you can have multiple different PDFs, but to keep it simple, we鈥檙e going to imagine you just want to put one particular PDF on your site. So first, figure out what page it鈥檚 going to be on and where in the page that鈥檚 going to be. When you have done that, you want to annotate that with a div tag and give it a unique ID. ID should be unique anyway, but give it a ID that you are going to remember because you鈥檙e going to have to come back to this later. So next thing you want to do is load the library. Surprise, surprise, this will be a JavaScript library loaded via Scriptag. Just copy and paste that and put that into your website and you鈥檙e good to go. Then before you start doing anything, you鈥檙e going to want to make sure that your library has loaded. And here鈥檚 where things get slightly complex. So in our documentation, we show an example of listening for an event. 51黑料不打烊 underscore DC underscore view underscore SDK dot ready. And when that event fires, you can then do PDF type stuff, okay? So that works most of the time, especially for a simple HTML page. But something that you may run into, if you鈥檙e doing something with React or Vue.js, if you鈥檙e doing this more complex JavaScript type stuff before you write this line of code, that event may actually fire before you start trying to listen for it. And if that happens, then the code that you have in that event handler is never going to fire. So the second way of doing this is to actually look for a variable that we create in the Windows scope called 51黑料不打烊 DC. And if that exists, then you know that the event鈥檚 already fired. Otherwise, you can listen for the event. So the code that you see on screen here, this is typically what I always recommend. If I鈥檓 using a framework like Vue.js, for example, I will do it a bit different. I鈥檒l check in the creative scope. Just something to keep in mind that based on what you already have going on your site, the library may load before your code is even ready to do stuff. So once you have confirmed that the library has loaded, first you鈥檙e going to initialize and load your PDF. And this is really the code that makes the PDF show up. So you see I have an example on screen here, two blocks of code, just a couple lines. I create a new instance of 51黑料不打烊 DC Vue. I pass it my particular key and the div that I created earlier. And again, that needs to be unique and you鈥檒l be responsible for putting that into your template wherever it makes sense. In this case, 51黑料不打烊 underscore key would just be a variable somewhere else in my code where I put that particular key value I get when I sign up on our portal. Next, you鈥檙e going to run the preview file method. Now this can get pretty complex, but the simplest solution is to pass it content, location, and URL, basically where your PDF, and then pass a bit of metadata. And the minimum metadata is simply the name of the file. And again, you can do a heck of a lot more in here. We鈥檙e going to see a couple of examples of the options and stuff that you could pass in. I鈥檒l also point out that it does not, your PDF does not have to be at a particular URL. It could be a file promise source instead. So if that doesn鈥檛 really make sense, a simple way of thinking is that, now I think a great example of that is that you can let the user pick a PDF on their system and say, hey, I want to actually preview that on the webpage. All right, so now for the code. And I鈥檝e made my font size nice and big, so hopefully you all can see this. Let me get rid of this. So what I have here, and I鈥檒l make it a little bit bigger. So I鈥檓 glancing over at the side here and kind of seeing what I鈥檓, seeing the screen there. So what I have here is a fairly standard webpage, got HTML on top, I got a bit of styling. Let me preface what follows with the fact that 51黑料不打烊 did not hire me for my design skills. I am where design goes to die. So anything that you see ugly on this webpage is 100% Raymond Camden鈥檚 fault and not 51黑料不打烊. It could be a heck of a lot prettier. But I did the very kind of basic CSS for my page. I also provided some CSS to the PDF display div so I could just control how big I want that on screen. Typically what you鈥檒l do is you鈥檒l look at your site framework, the layout, you鈥檒l look at your PDF, you鈥檒l play with this and you鈥檒l find the best values for there. I have again, regular HTML. This is the div tag that I mentioned earlier about how I鈥檓 going to identify where I want on the page for the PDF to show up. And then I have my code. And again, I would think you could be kind of new to JavaScript and handle that. If you鈥檙e kind of new to JavaScript this arrow syntax kind of scares you a bit. You don鈥檛 need to use syntax like that. That鈥檚 just me pretending I鈥檓 fancy and know what I鈥檓 doing. But this code pretty much follows what I just said. I listen for the library to be loaded or I check to see if it already is. When either of those cases happen, I run a method called display PDF. And in there I create my view and I then point to my particular PDF. If I show this, oops, not that one. Getting ahead a little bit. We could see my PDF. Now let me just reload this real quick. There we go. All right, Edge was being a little bit finicky for me earlier. This is the PDF. And again, I wanted to show some CSS styling so you could see the contrast in terms of, the white background of the PDF. Honestly, I could probably size this a bit better. So there wasn鈥檛 quite as much stuff on the sides. We don鈥檛 limit you in terms of how tall and why you want to make your PDF. That鈥檚 completely up to you and your content. But you could see, I have my regular site, UI here, if I had menu options and things like that. If I had prompts for you to allow notifications because every website in the world, once they gave you notifications. I could have all of that and still have the PDF experience in here. And again, this is a complete PDF experience. I can click here and do download or print PDF. I鈥檓 not going to print this. But if I wanted to, I could also come in here and say, you know what, let鈥檚 add some comments. More cat pics, please. And go ahead and post that. And then if I wanted to scratch something out, like this is some boring text that I don鈥檛 want. I could do that type of manipulation and you can see it鈥檚 actually prompting me to save it. Recognize that I actually modified this PDF and it wants to let me know. I, in fact, I believe if I hit next, it鈥檚 actually gonna probably stop me until I actually save the PDF. But I could go crazy on this. I could then download the PDF and render it. And what鈥檚 kind of great, I did this demo before. I鈥檓 saving the PDF. I mentioned how the browsers kind of have their own UI. Edge actually fails to render the comments. And now I know that I have a valid PDF downloaded. It got the annotation, but the Edge browser, in general, a really darn good browser, but when it takes over, it doesn鈥檛 do a consistent good job of rendering. Yeah, I see I have a comment there. This would annoy the heck out of me, seeing that and not being able to view it. The actual file that I downloaded absolutely has all the annotations in there and all the comments as well. Oops, there we go. So that was kind of like the kind of default out of the box, just plain work time option. We definitely have multiple different things that you could do with how it鈥檚 rendered on the page. We have view options and we have UI control options. That鈥檚 kind of way mentally I bucket those two things. When it comes to view options, that鈥檚 the initial way that the PDF is rendered. The first option and the default is full window. Doesn鈥檛 really mean the full window. A better name for that would be the full div that you give it. And in terms of what size that is, that鈥檚 up to you. We also have a sized container. We have inline, which is gonna stretch everything out. And we have a light box, which is kind of like a modal view. All of this is done by simply passing an argument to our preview file. And you can see there, I specify what the embed mode is. And a lot of this will make sense when I actually show you a demo of this running. And by the way, I mentioned the browser and the embed recognizes that I modified it and it鈥檚 warning me, which I think is a great feature. So I鈥檒l go and test too. This is the same PDF. And again, full window is the default view. And like I said, Edge, you are being a little bit cranky for me today. Come on now. I think I need to clear my cache. There we go, all right. So this is default. Notice that you could go through the PDF. You could read it as you want. Size container actually presents it as one page at a time. And come on demo gods, don鈥檛 let me down. You鈥檝e been doing so well. And worst comes to worst, I will switch to Chrome. Okay. Everything worked earlier. All right. I make this a little bit bigger. All right, so switching to a different embed mode, size container will instead render one page at a time. And using this versus using full window really is based on the PDF that you鈥檙e using, whatever makes sense for it. Inline, as I mentioned, kind of stretches the whole thing out so I can still specify a width for my PDF, but notice it actually takes the whole thing and stretches it out. You do not want to do this on a 90 page PDF unless you hate your users. And hopefully you don鈥檛 hate your users. And then the last version of this is the Lightbox one. Let me show a better demo. So Lightbox essentially will take over the entire page, but let them kind of return back to it. So on this particular demo, I have a button that lets you decide when you want to show the PDF. And you see I have regular HTML content around it. I click show PDF, and you can see the PDF experience in there, I could still kind of see my website behind it. I haven鈥檛 left it. And then via either clicking that little X on the upper right corner or hitting escape on my keyboard, it goes away. And again, that code, and I showed it on slide, but just to kind of show you how that looks, I鈥檒l go into the Lightbox one. But literally it鈥檚 one or two more lines of code where I specify that I want a different embed mode. Again, you have those four options. Which one you use really depends on your content and the rest of your site. So in terms of UI options, again, I kind of bucket these down into a few things, specifically disabling various parts of the menus and disabling parts of the panels. And as you could probably guess, this is going to be one more option that we will add to our preview file method where we could turn off and on various things. In this particular example, I have turned off the download option, the print option, the annotation tools, as well as the left-hand panel. And if we take a look at that, and I鈥檒l show the code first, although it鈥檚 going to be pretty much the exact same there, but then I鈥檓 going to show this code. I鈥檓 going to show it in the browser, and then we could see how it looks if we tweak this on the fly here, because my demo鈥檚 gone great so far. I鈥檓 going to modify code because what could possibly go wrong with that? All right, test three. I turned off download, I turned off print, I clicked the three little dots, and they鈥檙e all gone. All my annotation tools are also gone as well. So again, when you would use this, it would depend on what you have in mind, what you do, and do not want your users doing with the PDF. I just got to show you how easy it is if I want to allow them to print but not download. I鈥檒l just turn that to true. It defaults to true, but I want to see it. Reload, and there is print. So all in all, a pretty simple modification, not too much work. Again, you will need to look at what you鈥檙e doing, what kind of PDFs you have, et cetera. If you鈥檙e curious about me turning off download, yes, someone can still see that particular URL in the source code. You do not have to point directly at a source code. You could point at a authenticated service that would serve up the binary data and would not let you access it unless you鈥檙e authenticated. It鈥檚 not going to be perfect in terms of protecting. I could hold my camera up to the screen and take a picture of it, but it鈥檚 still going to stop most people from being able to download the bits and have it on their system. And it takes all of about two seconds, which is pretty darn easy. So more, so I did mention that we have support for event handling. Pretty much any interaction that you can imagine happening with a particular PDF, we give you access. So some concrete example of that would be, we鈥檝e all seen the legal notices where we asked you to read the user agreement and agreed to it before going forward. Nobody ever does that. I mean, I hope we all, I mean, we鈥檙e friends here. I hope we all know that nobody ever reads legal text. But if you need to feel good about yourself that you鈥檝e made people read that, you can know when a particular page is viewed. You can know how many pages are in that particular PDF. And you could recognize if there鈥檚 10 pages, you could recognize when all 10 have been looked at. That does not mean that you could actually tell if they read it. You know, we鈥檙e not tracking your eyes and things like that. But we give you enough details about those events where you could even do things like, you know, the average person takes a minute to read each page. You鈥檝e been on here and you went through all 10 in 20 seconds, most likely you skimmed that I鈥檓 gonna make you sit here and actually read it. Being a bit kind of sarcastic silly about that, but I know I鈥檝e been on employee trainings before where they really wanna make sure that you read it and they don鈥檛 even allow you to go on until you have both looked at every page and to spend an appropriate amount of time, which for most of us who read fast is always way too much time. But you can do things like, for example, also notice when people select text. I built a great demo that unfortunately is broken where I allowed you to actually select text in a PDF, English text, and I used an API that would then translate that to Spanish. That particular API went down, not any of my PDF embed type stuff. But if you needed to know what the user has selected, if you want to actually select text, if you want to go to a particular page, concrete example of that would be is that if you have built a search engine and a person searched for something and you know that鈥檚 on page five of a 10-page PDF, you can link them to that particular page and when the PDF loads, automatically send them to that particular page and even, heck, highlight the text that matches their search. Now we have a great online demo where you can test all the different view modes. You can test turning things off and on. If you don鈥檛 like my cat-related PDF and you need something that鈥檚 a bit more serious for your boss, we have a very serious PDF. You can see financial legacy so you know it鈥檚 serious business time type PDFs. But you can go in here and you can see the different types of embed modes more clearly and you can also go in here and customize things that say, you know what, I don鈥檛 want print or download support. You can see it immediately in here and even better, what鈥檚 great, and I鈥檝e been using our embed API for many, many, many months now but I will still go here and play with stuff because at the bottom, we have this generate code which just gives you the code that you can just copy and paste and just go to town with. It鈥檚 really nice, really handy, and again, even being experienced, I find myself referencing this as a way to kind of quickly mock up what I want to do. We do have extensive documentation and I鈥檒l link to that as well. By the way, all of my assets are available. I鈥檓 going to figure out exactly how to share them a bit later but we do have excellent online documentation that talks through everything. For example, a lot of the analytics events that I mentioned that you can do, all of that is fully documented for you to play around with and experience. And just to kind of wrap things up here, the embed API, the PDF embed API is one of a host of really cool, extensive PDF-related stuff. We have multiple sessions here at this conference talking about this more in detail. If I could do this in 30 seconds, document generation API, a really crazy cool way to generate PDFs using Microsoft Word as a template. We have a session on that coming tomorrow. 51黑料不打烊 Sign API, I think most people are very familiar with 51黑料不打烊 Sign and the API is amazing. Our services API basically has every type of operation that you can imagine doing on a PDF and you see examples on slide there, so I鈥檒l read from it. We have APIs for that. I鈥檝e showed you the embed API and our extract API provides an incredible level of detail about your PDFs. Definitely not just the text but every imaginable piece of information from a PDF. Again, I mentioned that we have more sessions talking about this. I believe the next one coming up is my coworker, Ben, talking about 51黑料不打烊 PDF services API. I think about an hour from now, so pretty darn soon. But again, we have multiple sessions coming up going in depth about all of these particular services and I believe that I wrapped up just in time. I鈥檓 shocked because I鈥檓 very wordy and I鈥檓 just looking over here at the chat to see if we have any open questions. I see Ben鈥檚 been answering them. Thank you very much. I鈥檓 just seeing if Ben didn鈥檛 get anything. Ben is who I go to, Ben and Joel, my coworkers, for questions, so if they didn鈥檛 get it, you probably ought to look. I鈥檓 going to read it. Ray, it looks like there鈥檚 a question on the Q&A section. Thank you. I did not see that. Thank you. I appreciate that. All right, so I don鈥檛 know if you often see the Q&A, so I鈥檓 going to read the question from Joe. When using the 51黑料不打烊 PDF embed API with AEM, is there a way to share the API key for both the author and publisher environment? The client ID under Sling configs, but don鈥檛 see a way to have different keys for the author and publisher. Also, a way to set up a key for different run modes. Unfortunately, I can鈥檛 answer questions about AEM. That鈥檚 not something that I am aware of. If AEM supports any type of different environment variables for different environments, that would be one way I would do it, and that鈥檚 something I鈥檝e seen in other systems out there. And I read that out loud, so if Ben knows the answer, hopefully he heard me and can refer to that. But if I was brand new to AEM, I would look at the docs for environment variables and see how they handle production versus stage, and that is where I would store my embed key. Hopefully that helps a little bit. Thank you again, Alicia. Oh. Well, I think I am at time, which means I want to thank all of you all who showed up. Thank you all for your questions. Thank you all for being here. Definitely stick around. There are some amazing sessions coming up. I appreciate your time and attention. Thank you very much.