Magento Adobe Stock Integration, 30 Jul 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Magento Adobe Stock Integration public meeting. July 30, 2019

Description

Login to Adobe Stock
Save preview image
MFTF tests
Documentation

A

Safe image and some use cases, so it will be good.

A

It will be good just to see what we have. Okay.

A

Yeah hi hi Vlad, you know how are you.

B

Yeah hi sorry good preparing to show tests finally come compiling us and everything so I hope it will start working.

A

Yeah, that's that's great I'm! Looking forward to it, we are still kind of doing final checks on the on your PR, but we are working really closely and I expect her to be immersed soon and your pull request is the beginning of all MF to have to request I guess so after you.

C

A

Be merged we'll be able to marshal ladder as well.

B

Yeah, because every time I see some somebody else, no request, there's like something which already exists and that one and I don't know like it's, not because I I made it I didn't want other people to do the same thing. It's just because that was the first test, which I was updating like.

B

A

That make sense good.

B

I will I will check that it works and then let you know in the chat.

A

Yeah just yeah, just let me know when you're ready, okay, let's anyway wait a couple of more minutes because we'll we might have more people that would like to join the call right, I'm sure will then I be today.

A

A

My Christopher hello.

A

Thanks for your help with the bug identification, oh yeah.

C

Yeah and I am yeah. It urged me to write up some more documentation that was missing.

C

Also I wanted to let you know that I am we finally merge changes internally to our SDK repo, so future pull requests should be a lot smoother, so I'll start working through the ones that are in there.

C

So the way it works on our side is that we have an internal version of the same SDK and it was slightly different and I've made it the same as the public one. And what that allows is that when you guys submit pull requests, I I then submit the same. Pull request to our internal repository and one of our stock engineers can just do a code review and give some feedback, and if, if all is good there, then I go back to the public. One and I can just approve it.

C

So it'll it'll make things a lot easier.

A

Yeah, that's that's great news. We actually today we review to the least of our issues and yeah. We were thinking about a couple of purposes that they have two SDK. That should resolve a couple of our issues. Finally, yeah.

C

One thing I will I, don't think one change I did make on. It, though, is I added a a a set of styles for PHP code, sniffer and I. Don't know if you guys use this in any of your workflows, but you know some linting rules so that your code conforms to what what we expect. In most cases it does. You know, I think it's I added that as a another test to the package file or the composer file, so that you know you can run a linting test and it'll match our rule set.

C

So that'll also make it easier to get things accepted on our side by our engineers, because they're expecting things to be done, a certain way. Yeah.

A

That's that's a really good addition. I would say that we are using static tests on all our public repositories as well, because it's it really helps to keep the court in one style and readable and also like ensures, helps in maintaining code in lots of ways so yeah it's it's definitely mustn´t really good is that you have allottee. It will help us to help contributors to understand that they are writing or formatting code correct, as well. Yeah.

C

So when when, if it's for any of you who are working with the SDK, please pull down the latest version. When you get a chance, because it has a few of those changes in there.

A

Okay, so do we have a checks under the pull requests that will show us yeah.

C

I have to I think I mean there's no way. I can automatically do it. So I think what we will ask is I mean I've got to add these notes, I think what we'll ask is that you show the is that you say or show the results of your linting and test results and then so that when our engineers do a code review, they can just quickly look at it and see everything's in order before they look at the actual code.

C

Okay, okay, thanks right, I'll write that up in on the public on the SDK. So you know no getting on the repo is part of the pull request: yeah, okay,.

A

Thanks a lot, and that were great news and updates from wsd keysight as so, we have more opportunities to improve this decay as well. Now I think we can start with them of our pull requests our contributions that have been done since last weekly public meeting and my usual question is: are there any volunteers to start the demonstration.

B

A

Ahead: Alex, okay, okay, nice one second,.

A

I think you now you can see my screen right.

A

C

A

Okay, nice, so please confirm that you see my screen. I can see your screen. Yes,.

D

A

D

A

Nice Thanks, so I have some problems with an internet connection, but this is I'm worried about this okay, so let me introduce maybe do just alpha version on the safe image and save us at data. I mean just mostly safe acidotic when we try to save the preview image. So this pull request. Pull requests consists of some complex solutions and we need your help with decisions. But at this moment what we have.

A

We have this beautiful download preview button and when we press it, we start to the save process the same process, if it sucks it. If it was successful finish it with some notification like this, just I took the ordinary magenta style and sorted here for every image. If thus it will pay out will see their error notification so also I added some and just obnoxious requests yes, and we have some information like.

A

It was successful, no chance, some message Pocky, but this is what we have at the front end and the backhand side, and in this in the data storage, we have assets, information, Sates and power related to the stock tables. Currently we have media type and on category ad, creates radians premium level introduced as a asset component. This can be shown. This can be seen in the pull request. Yes- and it works like this, so we get an image if image successfully done load it physically download it to our storage.

A

Let me show that here we are so we have this image downloaded successfully. Yes, we start the TAFE process. Firstly, we see if category creates a media type and premier level objects. Yes, so, for example, we can just go to them and see that we have this information. They have some media type have premium level they have category but have Creator information which would get from which will go from Adobe stock. Here's by using KPI, then they have that passed.

A

Some other assets related information, and yes shortly speaking zit so about my pool, requests I, introduce it in the next way. So, firstly, we have just a simple controller, just which manage this download section and then I extends it I think in saying that we just changes in the asset model, so I edit, some media type, that I mean repository Prieto repository and mentor data models, particularly data metadata, most and I decided to create a safe premium of view, image asset strategy.

A

So this class is not just an API, because just implementation can be easily changed and we assume should not support it, but it consists of several steps. Firstly, we create needed component category components, creator component and others we set needs data I mean foreign keys, yes and safe assets repository so basically, I think that this approach can give us more flexibility in the future. For future changes. More control is writing tests and the one thing maybe I would like to change here.

A

Of course, if this will be approved to make this in the one transaction, for example, it will fail somewhere in a media-type acid component, say we should just roll back category and maybe creator something like that to just have that consistent.

A

Yet, maybe at all.

A

C

A

Sorry to interrupt you, because, just if I do continue this crap old, they start. This will take a long time and it will be so technically and not so. But if you have some questions, I'm ready transfer it anytime. You want this.

C

Is Christopher so what I, what so um the data that you're getting back here, category creator or media type which which action is giving you this is downloading of the preview? Is this um coming in the JSON response? I, don't learn.

D

That one very often so.

C

I just want to know where okay.

A

Nice we have under the stock image module which is responsible for such actions. So we have a get image endpoint, and this get image in points use our get image list function now, should we just ask Adobe Adobe stock to get to return some data asset data and we just create API requests? Yes and get this information from the Adobe stock? Oh.

C

A

Research is good.

C

A

She telling ya sorry Christopher. We are using search, retrieves information like search files, okay,.

C

A

C

Certainly I would only want you to write information in the database. That is useful and you know, and yet Creator is a good one. Media type ID that one's a little bit.

C

That may not have a ton of use for you I'm just trying to think I mean I'd say leave everything as it is right now, but I think I would imagine we're only going to be pulling down photos at this time. Ya.

A

Know I'm Christopher from opera you're right so we're talking about the photos, but what other types do they have? Any video content, yeah.

C

Yeah right so photos videos well also of there's a we have a type called image and I put image in quotes because image could be, it actually could be photo, it could be vector, and it could also be something called illustration. An illustration is actually also a bitmap image so that that would be totally fine for board this implementation as well vector would not, while you could view the preview.

C

Well, actually you wouldn't I mean if you download the preview or if you download the asset, it'll come as a illustrator file and that's probably not going to do any good for for Magento users, because you can't directly use that and then, of course we have all these other asset types. You would never want templates, 3d stuff like that, so yeah, so probably the image types of photo and illustration, and eventually video, so yeah, I, guess yeah. So it makes sense to keep this flexible. So we can add more types in the future.

C

Premium level is another that one's also good. It's isn't these. These features are a little bit obtuse like you know, you wouldn't look at them and be like. Oh I, know exactly what that means. It's it's they're a little bit internal, but basically that's saying whether it's a asset that requires, like one credit or multiple credits, to license.

C

Usually that means a premium asset or something in a higher cost. So yeah I need to take a look at some of these data models just to see, if there's anything else that we'd want to add as well. But this looks good I, just don't yeah I just wanted to talk about that briefly. So cool.

A

Okay, so and again, just maybe this approach having some components we can easily include, exclude them and not to load our repository of parts on which we use for linking service and the main levels. Maybe this will help us, but as much information we'll have is better because, for example, as you mentioned, it's possible to have some credits, some several qualities for one image, but can maybe build some argent own sales rules and self conditions. You know this information, maybe it will be a good decision to have them in magenta.

D

A

I would like to say because thank you Alex, because this was a big pull request. I believe take more than 50 files were updated and lots of functionality was introduced. As for technical details, I think we can discuss the approaches in the pull request not to overload this mission. These technical details.

A

Yeah, just one one, quick question that I have about the interface: there is safe preview button and done boat image button. Why did you decide to use the second button as well.

B

A

Introduce a new button because she they look like the same operation. Yes,.

A

Because when I checked, how the safe preview works, I see that just it works like this, so I saw that say, preview button and so the direct URL to the image and ten seconds. Okay. But we are going to merge this functionality, actually we're going to save it first and then insert it to media gallery. So we can.

C

We can discuss it in.

A

The flow request as well yeah we would would like to have just one button there, possibly preview. As for the.

C

A

Yeah thanks and Christopher is yes was data that we are saving the scene is that we are trying to develop our database. We spittle for future extensibility of any future needs and fix it, so that we will not need to update it later some data we would be able to use for future and, for example, some for showing some image related and for attributes, information and the detailed image view and yeah.

A

We are storing those attributes because, like when you're given safety images, we don't want to create a lot of requests to Adobe stock API, the cinemas premium level. I. Think Adobe stock allows user to filter by like just open premium images on day. So we can try to use that same filter as well, and we can also use media type or filtering for the same purpose. But yeah, let's discuss lets goes maybe through all the fields. May you can review our documentation.

A

We have all the fields in that we are saving in the documentation and they we can have a separate discussion about each.

C

Of them ya know decide what we.

A

Can yeah yeah great thanks for your input and thank you Alex.

A

Okay, let's switch to the next one.

A

Raul would you like to show us the documentation if we started talking about documentation? There were some recent update straight yeah.

E

My contribution this book this way was was not good repeatable. It was an improvement to the documentation, I'm gonna share screen.

E

And you guys see my screen now? Yes, yes, okay, it is I.

E

Came to this because one of my colleagues was asking about about this project on how to contribute and then I redirect him to the documentation to get his local stat up, and then he came to me came back to me to ask some questions about the adobe dog API, so I thought! Well, maybe it's no clear enough and well yeah, just add a little bit more of the nation and couple of screen captures of the procedure to set up a lava stock API as well as the information in Magento I, was pretty much there.

E

My changes this week.

A

Okay thanks roll I would like to so. There were more picture. There were more changes to documentation as well. I would like to show my screen just here to show you that I that are the condition was our wiki page was reorganized a bit. There are no stories on the sidebar right now so to find stories. You can go to roadmap and storage section and then find all our stories with the use. Cases on this page is further links.

A

We have a separate get started section that that would be interesting for anybody who is starting to work. This project, and one of the pages was just showed by row who provided more details for installation guide. Implementation guide is included here and project maintainer, just contact me stas or if you have any questions or if you cannot find an information and documentation, we are always ready to help you the general project over you dock. The documentation contains some general approaches, like modules that we are developing database structure. Visual design is here.

A

It was harder to find it in the previous documentation right now, I just a list of all pages on Magento admin that we update n, but the most interesting is UI prototype that you can open and navigate through all the designs that we have like I, believe it wasn't so obvious before and for detailed detailed documentation can be found under technical designs and guidelines.

A

Section I think this section is kind of section that also open for additions as we go through development process and have more details in place and actually how to connect us weekly public mission and slug. That's it for documentation, updates and I know that Vladimir is ready to show us some functional tests, magic yeah.

B

Yeah, okay, so I will start with ensuring you know like install extension and everything.

C

Just well well a lot of Mayors during that surgery. I would like to separately I'd like to have you and and stuff.

C

Maybe we can set up a meeting for you to meet with some of the architects on my team, so we can go over some of the things that we were just talking about just now, because there are some, probably some other things we'll need to support in your data, for licensing and but also they're, just curious, I I can't easily demo it so I was thinking, it'd be nice. If you guys could do a quick demo. What.

A

We talked about this offline.

C

But, but now that we're getting really into the meat of things, I want to make sure that we don't have any false steps.

C

Yeah overall, we're all I, and all of us are really impressed with how quickly you guys are pulling this together and all the work that you guys are doing. So we really happy appreciate all of you.

C

A

Yeah, definitely we are impressed as well so and yeah we will be ready to meet I think it will be really helpful to discuss with Adobe stock to meet with other destruct humans discuss the scenes that we are doing so. Let's schedule it off fine yeah, sorry, volodymyr, legitimate.

B

A

Yeah, yes, we can see a screen.

B

Okay, so there was already a test written and at some point, I found that there is a ticket to create this test and I decided to update it and actually mark with the proper user story and understand like this.

B

So first, what they did was refactoring.

C

B

I believe by design there are few key things which must be done when you write em FTF test, so all of the selectors should be in sections. So basically, if you, you can have pages or parts of your pages and you have to mark all of the items you're going to use. So there is Adobe stock section and.

B

I'm trying to use nice selectors so not like that they should be meaningful and in perfect scenario, not not be connected with, like CSS or just with structure, so I try to use data UID. If I can find something like this, though in many cases is not possible to add your own things, for example, for this panel I think for the panel or for other yeah, probably for modal. So it's automatically made by JavaScript and you cannot add your like the data or test ID or anything so for model.

B

I had to add extra class, and this was the only I think I added it or I used the one which was already there and if I can find the role or your ID I try to use it. So it will be uniquely identified and.

B

It will be like it will not have probably will will, will have less errors, then, if you will just have classes and XPath, or rather.

B

Also, there is already predefined sections and selectors that will show inside action group. Probably so there is action group. No, not this one open search model and let me find some so there's. For example, media gallery section browse it's a selector for button and tiny MCE section again with insert image and also I tried not to duplicate things, though Oh Rahman in the stock section I have a modal, selector and I have other and insights action group I use both of them.

B

So if I know that starch input should be on the inside model, I try to use this way.

B

Yeah so let's come back to the test and.

B

One more thing is data: it's all like there are lots of test data like there things things which you see on the screen and we have it in model data, for example like a title, or this is like button text to open model, this title of model and also the amount of tab nails we have so I, don't want to specify it every single time and I don't want to hard code it. So if we change something, we can change it in one place and hopefully it will work yeah.

B

In the perfect scenario, there shouldn't be any minor things in the test. There should be only act, action groups, but like action group, is the.

B

Something meaningful you do and- and it also can be assertions you do like you do so in our case there is a action group to open the model search model, so we know that we're gonna use it in every test. So why not to combine everything and have one action group? Then we want to check the amount of items on the page. Even this one can be inside the previous like if we want to check it every single time. In this case we have it here, maybe next time we'll do it.

B

So we asserts amount of images. Then we search the page number by default is first. Then we click to the next page. Again, probably we're going to use it quite often, then we again assert this same thing that amount to the page amount of the items that we already were using the same thing in the same test, and then we assert the current page number.

B

So I can just provide arguments inside if I have something we changed and then we are checking that we can close the model and.

B

Yeah, so let's go deeper shortly, so icer action groups are just all of the steps we do with everything, so we can combine as many things as we want, but it shouldn't be too large if thing that we can use it again like some of the parts. In this case, we assume that we will always open their model. First, though, is there like a lot of actions in the same action group, but there are other, like let's say, assert parent page number- that we just check the page number in the field.

B

This is a good example to see that we use detection from from the core magenta, so we didn't have to do it again and if they will change it, magenta core team will change it. It will still work and we have argument and where we can provide the page number one steam yeah so and when I opened the.

B

The user story I found that there should be authentication as well, so we need to enter our API key and private key and we need to enter it before every test and we have to remove it every single time we do it using just unfit calls yeah it's easy. We just that that data, okay and since explains everything now I'm, going to show how it works.

B

So all of our tests are going to be inside one group, I believe so we can just run test from our group. There's a comment to run that we can just run group and choose the one we want. Of this token.

B

B

When we open its web, browser will open as well as soon as test will start.

A

Okay, sir, just been MFT Efron group, other district integration right yeah.

B

I attached yeah I edited to readme file, so there is a readme file inside MF, TF folder, which was there before, but empty. So I decided to add some useful things. So, let's try to see both thought. We see things running on the left side and the browser on the right have more screen. It.

A

Is configuration setup that is happening on in back and right now, right, yeah.

B

Yeah so now it started opening login page. It's also requirements for all of the admin pages to log in and log out. So now we are in the open search model action group. So it goes through many things to open it yeah and the good thing that we are not writing most of these things, all of most of the selectors. So oh, it's pretty so we opened search. We check the amount of items we click to the next page. We closed it. That's it! It works pretty fast when everything is pre.

B

Cached I did con static, content deploy and the I compile, because otherwise it can fail because of the timeout I, don't know. Maybe I have a slow machine.

B

Yeah, that's it! So it's fast. If you will have more than one test, it will every single time it will close chrome window and then open it again. It will like it will open up, not very user friendly I. Think that's it. If you have like any questions, I can yeah. I can just give more information how to write test. If anybody interested like rules, some rules or I, think I spent already a lot of time, I.

D

See is it you completely factored my desk, my first test yeah, it's divided two different action groups that we can reduce every next test.

D

The Granger.

B

Yeah, thank you. I I was not going to refactor it entirely, but then I started getting quad review responses and you cannot stop after.

A

Raja, who also helped us with a monkey of code reviews, so thanks Kim as well, but the oligomers it that's, really great job. That's a very nice basis for functional testing of our project and I.

A

Just would like to add to your presentation that you have added. A lot of this document means I test them. Ftf readme file, these instructions how to set up and run tests, yeah that one yeah.

B

So it's um yeah, it will not work if you will not put environment variables inside that and is the one. So if you will go to instruction how to use them if TF the main one, maybe we need to add the link I, don't know it will say, go to this file and add some important things like your URL and admin login and password, and this to environment variables should be added as well with your API key and private key, and this is so.

A

E

Gladly one one thing gladly meal: if you don't mind, I, think you're gonna ping, you later in it slack and ask you for some help with with the test I'm working with.

B

Yeah no problem, yeah I will be happy to help. But don't ask me to code review because I will ask and ask to change everything.

E

But that's fine, that's fine, I mean I. Think we will share the decide to to have these done the best way as possible. So I think that's a good thing. Then.

A

B

This actually probably the most important change.

A

B

A

Most important changes that we're done since the last week and it's the pull request that introduced login functionality.

A

The polar quest was made by Dmitry captain, however he's not on the call, so I will present this pull request on behalf him.

A

So let me share my screen.

A

A

We have Magento admin panel, Here I am on the develop branch of other Vista integration. My integration is configured and, if I go to do Adobe stock integration grid. Just let me edit homepage.

A

Select some image and search had a stock open image there here. How expanded view looks on the develop branch and there is a button license unsafe. So when it pleases button, we expect first to login admin user to the IMS to other this, to IMS as a system or logon into Adobe API, and then to perform additional queries for save licensing and saving images. So right now we completed the first part that is login and 3-trillion, assess and refresh keys from my site.

A

So if I click on license and save I'll be redirected to IMS and it happens really quickly and the after ization was successful, actually I was locked in yeah I was logged into Adobe stock. That's why you haven't seen my login form, but if you are not locating you can check, you will have the login and password form where you enter your login password and then make milestones.

D

Where I will show you.

A

A

You are getting is.

E

In develop branch, yes,.

A

It is, and then you are getting this token to your database charity centre first token as well. Do.

C

The Adobe stock user profile label.

A

And once you have you.

C

A

After iced, you like no longer need to authorize right now we have a big of a bit of placeholder here for our license functionality. So when we click the bottom, the user is authorized and there is a placeholder to add further license and download functionality for licensing features.

A

Ok, I guess stuff. Yeah can.

C

You show initial.

A

Is a not locating user logon screen.

D

A

D

When I, when I click on services and say button, more small window will be opened and yep looks like something went wrong as well.

D

C

A

C

A

A

Yes, so basically.

B

A

Opportunities to work further into adding the functionality to retrieve user water and license image and.

C

A

C

C

Now, working on.

A

For saving license a licensed image as well: oh.

D

A

B

C

A

D

A

The integration and we.

D

A

The redirect URL, which user have specific.

E

D

A

Integration on Adobe stock site.

E

A

The reason tasks to dynamic, redirect URL and I I think there is a vanilla request right now with the resolution to the stuff. But there are some changes that were requested on this polar quest yeah. We will have dynamic reddit redirect URL soon, and we also plan in to add some helpful information for admin, user on system configuration page, just regenerate, redirect URL and redirect URL pattern dynamically and so on system configuration form into copy and create integration. Another way stock side much more easier, easily.

D

Really better to provide dynamic to regenerate the realm of that of study, Carrel.

D

So yeah, by the way we already have magenta cloud instance with the latest auto-destruct integration project deployed, and we are going to update this Alston's every time before before the demo, so we can put in just demo. You know upcoming syncs of this on this environment. On this instance, you don't need to configure something locally. You can just use the rel and show us.

D

Yep I will show the surrounding chart and and I want to share my you know. Mobile experience with this merchants after the vacation, I had a lot of power and motivation and I decided to review to the court that was merged last weeks and I found found several lines of codes that should resolve one problem when Adam in session has expired and you trying to do something. There's another stock and you got an arrow in the console and did it without any the directory or meaningful message.

D

Interface and I think that ungentle should have something out of the box to handle such situations such cases and, if I, try to investigate how it works and I realize that we already have an functionality to handle such cases and our code already working as expected. But we have still have an error in the console result. In a rigid egg, I have two hours had a few hours of debug and I realized that we have denied JSON controller.

D

Is that the written response that you're I excuse expired and whirl around for a direct and I tried to find the place on the front?

D

End when it was redirected, appropriate URL I found the matter on our bootstrap jeaious, complete method that will be called after every Knox request in magenta, and if this method find responded keys, it will redirect to the specified route, and the issue was just in error in our court that variable roles was undefined and they cannot get less of undefined, and this method just did Oh after that Oh with this small fix. Yes, both natural magenta Oh.

D

Sometimes it will be really useful go deep. Dive is magenta called because we have a really complex project. That was the support of different cases. Sometimes it it can be really easy to fix something. Instead of developing something.

A

That's a really nice optimization.

A

Okay, let's probably eat for the demo part at least for today.

A

Does anybody wants to show anything else or raise any questions or anything.

A

If not, then I will be able to chat with you in slack, please, if you will have any ideas, any questions propositions do contact me or Stas or Raul E the robots. There are still lots of dust for him after after coverage on our dashboard and as flood Aamir said he can help to start, at least if you don't know how to start writing tests.

A

So, let's, let's keep it moving thanks guys. Thank you all for great job and talk to you next week, bye, bye. Thank you. Bye, bye, bye,.