Magento Adobe Stock Integration, 17 Jun 2019

Previous Meeting

⏯

youtube image

►

From YouTube: Magento Adobe Stock Integration Demo. June 17, 2019

Description

Initial community project demo.
Configuration.
Images grid based on ui components.
Filters.

A

Okay, so welcome to the first demo meeting for other district integration project and I'll start it with the basic general project over you. Let me share my screen.

A

Can you see it.

B

A

So Adobe stock integration is a community project that was started. It's imagined this year, just one month around one months ago, and it's developed in Magento domestic integration repository and the project is not a fork of magenta. It's a package of modules and.

A

The status of the project can be seen on the project's on the project backlog of the github repository.

A

So currently we almost completed the first milestone for the projects for the project and done these three tasks that are left over from milestone. One are expanded view on the grid, saving an image and a filter for colors that we are currently working on with RO. The projects has the Wikipedia page with all the documentation, including technical documentation, life installation guides.

A

Different technical designs and product documentation, including the roadmap and tell the stories.

A

So here is here is basically the description of first milestone, that I said we are coming to close to completion. The first milestone right now and the safe image task is left for this milestone, that's something we are going to focus on the on the current and maybe next week.

A

Okay basically said so for overview now, I would like to invite our contributors to show their contributions that they add on to our project role. What do you like to start.

C

Okay share my screen.

B

Guys before you start, can you just explain like how the demo, how you go into demo, yet all of the skull that was already implemented or led by feature feature by feature I.

A

Think we are going to dare more to organize her them are based on pool requests. So it's a feature by feature, but present we expect to cover all the functionalities it was implemented.

C

You guys see my screen now. Yes,.

D

C

Okay thanks the first request: I stopped working with was the table in the database.

C

You can see. I can show you.

C

C

It is basically the DB schema that creates all the tables I know they're pouring is, you can see.

C

All the table stock that file creates here.

C

And that was the contribution they are imagine and then being but then I continue working with functionality.

C

That the API key that is needed to connect the hobby stock and that can be seen in here.

E

Let me add about tables into database. We used our declarative, schema approach that was introduced in Magento to the suite yes, and we didn't use all styles enchanted table creations of them. We used the.

D

Parity, so doesn't mean that we've set of extensions will be compatible only with 2.3 and fire.

C

C

But there is some the whitelist.

C

So that at least not allowed to be backward compatible.

C

Please somebody correct me if I'm wrong.

E

With unique to implement, install install scripts database, it up.

D

E

But it's personal understand.

D

We're not going to install this the bistec integration on 2.0. Is it correct.

E

I hope all then I can answer to this question, but I guess: yes, the targeting only for two to two points: three magenta to answer your question: okay, so.

D

In this case, we don't need is the legacy installation, scripts, yeah.

C

A

Sorry, sorry, sorry white lists will allow easier upgrades for a virtualization further releases.

C

Okay, thanks thanks for the rectification continuing with the older functionality, I was talking about which in appleton that can be used to as the API key I'm, showing.

C

It is part well, but also are these section to store the API key and this time that can be used to able or disable integration and also this button that allows to work.

D

It's in developer mode, that's.

C

Still in development, try! Oh!

C

If you click on that, you can see it's their successful. Try again.

C

D

Did you get this API key.

C

The API key, the bother, didn't, didn't documentation, specify where, where we should, what website we should piece it together. Yeah k equal to.

E

And probably didn't translated develop because he implemented the T for this field on the back end was a short like a documentation where we can retrieve this API key with the link to Adobe. So we already have. No ties under the field was a short explanation where we can get this. Oh.

C

Yeah, that's that's another thing. It was a comment yeah initially what's a tooltip in this area, but then the tooltip was difficult to click on so I I decided to change to a comment in here, and that comment contains a link to basically this this section where you can get a an API key and also an explanation for that for the user to understand where, where to get a key from that was part of the development of this thing.

C

More recently, I've been working on their filters. The filters can be seen in here on that page in the page or content TMS well, the actual images can be from Adobe stock can be seen.

C

Let's use this page, for example, clicking here and then insert and edit image we browse for images. We see that each other we stock button here and if you click here, you can see the filters. I basically worked on adding these fancy thing. It was and isolated. And, lastly, this color filter, which I still have as you can see, a niche period where the label doesn't show but.

C

For it I would it works because you can used to put them.

C

To add to difficulties in here, that is basically the things been working on. If somebody.

B

C

Can can show their work.

A

Things really mushroom, that's the big part and become nice part of the functionality implemented but yeah, let's, let's move forward and who wants to demo next.

F

A

Go hey Gege, yes,.

F

Let me share my screen.

F

Are you guys able to see.

F

Actually, I don't have anything visual to show, but my my last request was poor request to implement all the interfaces and the modules that will be used by the Adobe stock integration. So basically, I was creating all the modules to managing a store. All the data in the database tables that we are creating this extension to order in the backend functionality basically is going to use the dis classes to manipulate holiday.

F

This professor I was creating all the the classes for each specific table and basically my last request was was doing that.

D

Okay, maybe you can show more so we have some database tables and you create the application layer to manage these data may be access or write it a little growth. Maybe you can explain briefly the purpose of the database tables what kind of information we are storing there and actually, why do we need this information? How we use it.

E

I at playground just ask for this: you know a large pool request. It was really simple tasks. We need to like some data from the image that belongs to the image and any image will be deleted from the storage, so we just need to implement some plugin and in case when we are removing some image, all the data will be removed and eager implemented. All the models of tables remove this data, but yeah the original task was very simple, just implemented like a plugin that was that will be. The two handles is request.

A

Whatever add that Eagers contribution covering all the model specification and add in the repository, is really big: help for us to implement the safe to implement, actually all the work with image, attributes in future type to implement the safe image and then display an attributes.

A

One the grid on the front end.

A

Okay, thanks thanks a lot rigor and.

A

Valentina's on the call.

G

This is my first contribution project.

G

I was working on the filters like dole and I had to implement the price dimming price filter. So do you see my screen.

G

D

The probably you cannot is over the browser, but you need to install the blue genius extensions on your phone. Your machine.

C

That's okay! To do that thing as well! Didn't have the plug-in previously so.

G

A

Okay, bye, oh that's that was fast and now we can start screen. Do.

G

You see now yeah.

D

I wouldn't dare see both.

H

Okay, we're seeing two monitors: okay,.

G

So here is a new book and then I won't what an image of the button to search the dogs talk, and here is the price, the price tutor, and if we choose premium image premium prices we can see that works.

G

um I want to share with you some of my experience with the process. I was talking about this with Stanislav and.

G

But first of all, I was I was confused about the name and finality of the because I was thinking that is about types of price and really is about the premium price, which is not enable or not enable, and we change the name and now is premium priced this debt of price, and that is Oh or no.

D

And as I see these pork fat from these contributions already merged and available in develop branch, correct yeah excuse me: I mean.

G

D

Mean your pull request is already merged to develop branch and it is available already today. Yes,.

A

Okay sink, thank you, willing, valentina ease or anybody else on the call who would like to show their contribution.

A

Okay, then I think stuffs want to finalize and show every scene like every scene in integration.

E

I will start with configuration page who already already showed us the double-slit integration section, and here is the latest changes from the develop branch effect. I was merged few hours ago so about the changes on this page. We made the api key field, this five passport and nobody can see your api key right now, it's by them, and I.

D

Really is written credit on the database.

E

We are using our default configuration a framework agenda, different configuration framework, so if magenta will encrypt.

I

It uses the secret key to encrypt this data.

D

Probably don't want to store it in the open.

E

B

So you decided to hide the key after user enters and mouse over from the input or like when it happened. Can you just like walk through that experience? It's.

E

Justified passport, when you try it.

B

E

B

Okay, but if you test the connection.

E

For example, I have valid token right now.

E

Let me check I need to say my token before.

H

Is there any way to get it back out after you've entered it or is it a one-way process.

H

B

And one of the objectives of like hiding them in admin panel doing.

E

B

Stuff for other API skis that, yes,.

E

Yes, I can show you, for example, with payment methods in magenta and all API kids has.

D

The same yeah, all tokens keys password, so they should be encrypted and secure, is to work in the database. I believe it's our compliance requirements.

E

Yes, it's for count. For example, I want to test connection, I, have a valid token and I have successful test or something random string and test it again.

E

Yeah and I received a message that I haven't been credited Reggie by.

D

The way do we need to save it before testing again.

E

While using this key from the configuration, probably we can rework it and add testing. Before the same, like it passed some some API key and tested results. We need to discuss.

D

Nice improvement: usually we test something before so.

B

D

Are saying that.

B

It's not possible to test without saving the configuration.

E

Right now, whole configuration fields that has like similar functionality works. It's the same data only so you need to save it and test this way. What we can afford. It's.

I

A standard magenta mekinese when you need to get some configuration, it always data configuration from the database order from the XML files and like we do not store a runtime configuration. That's why you need it, it feel safe it and after that, you can use it just.

D

Engaging for clarification.

E

And we added short sentence where you can retrieve the API.

D

That looks like your stuff.

C

Maybe he little technician.

A

Yeah, it looks like stars dropped here.

E

Hold the back in the moment, yeah.

D

He was keep keep showing the other things, but he didn't notice that he is disconnected yeah he's reconnecting right now.

E

E

I've had a connection problem.

E

Yeah you back. Can you see my screen.

D

Yes, yes within you see advantage. Yes,.

E

We are CMS page, we are trying to create the new page and, for example, I want to add bouncing some image together, we added you button who's, a medium magenta media killer, search about the stock, and we can see.

B

I can see the screen I.

D

E

32 images per page without any filters, and it's like random default images provided by another stock, result any additional filter source search criteria.

E

D

Loaded 1 million images or only 32 of them, hopefully.

E

Load it on the 32 of them, but we have 1 million a lot of images.

E

We can add more images per page. We have three default options: 32 48 and 60 for images.

E

Maximum count of images per page is 64, this number limited by the bestop API. So you can get more images and.

B

What is custom.

E

We can add, for example, 10, but in range from 100.

B

I will have this custom option its.

E

Default option on every Magento greet.

E

Probably we can disable it.

E

D

Can do the questionnaire, so we would like to have same experience on all reads like we have in Magento all we wanna just remove this option and didn't provide this teacher for the for the users talk about this talk. It's mostly.

D

B

Be honest: I see this custom option for the first time in this grid, so maybe it was recently added or something or I, just like didn't sort of the pages for a long time. Okay,.

D

Yeah we'll make a note on this, and we will check that one more time. Okay, thank you. Okay,.

E

Well, we can choose the different numbers: images per page, for example I just fixed before images per page. One of the requirements was is the grid should be responsive and we can write. They can see that we've rebuilt. Oh, it.

B

Looks really great the.

E

Worrisome trend change.

E

Yeah also, we can navigate between pages and search for images, and we can. We can search images between what's observed.

E

And can search cars or a.

D

Very good response time. Yes,.

E

It's really fast and we can apply filters. Guys showed us already implemented filters. We have orientation filter, we can use very image images. You want a square images.

D

One question here: this filter works, you can end or or condition it's.

E

All conditional, if.

D

Either square or vertical: oh, it should be square and.

E

It should be square or vertical, so we can use only one condition at time.

B

Even one condition from a from single type right, yeah.

E

If we need to choose, you know like multi select, probably we already have this component in magenta. We can try to use a few types I.

A

Don't think it will be applicable, image can be either square or not square in terms.

B

Of the point is to see at the same search. Yes,.

J

B

And horizontal images, both type.

E

So we need it to implement. Yes,.

B

E

B

Remember that we discussed it with Eugene the options but I, don't remember what we decided. That's going to open filters, one.

D

More time, yeah, ok, so my first question was I want to search all horizontal images with premium price, and this will be end condition here correct between filters. Yes, yeah, that's pretty clear! Then we are talking if I want to search something horizontal or where and right now it's alpha. We cannot. The question is: do we have this option available on the Adobe stock, API side, I.

H

D

H

Know if you can do both, but what you are missing is an option called all. So the default is.

H

K

H

Can I don't think you can select two of them, for example, I think you have to select one or all: okay, horizontal vertical square or all filters.

A

Not to play it, we are searching for all.

H

Is your way to remove that? Oh I see that's the you, you would click at the top.

E

Yep and we can remove all filters by click on 0.

D

The question was about the options for the orientation right. Our have select, horizontal vertical and square, probably makes sense to add options here, kind of all that, what's the question.

H

The dutiful is all, but it might make sense to have it just have it as an explicit option here. Yes,.

J

So I would also agree with that. It would be more clear for the user to see all they're also, the original mock-ups were having a multi select component and it seems like Adobe stocks for that at least I see it on the website. I can filter by horizontal vertical square or even panoramic. There's another option called panoramic and I can checkbox that basic, take and check horizontal and square. For example,.

H

I'm not sure if that's supported in the API there is a there is an option for panoramic. That's that's actually a separate API. How do you separate so you could? You could add that, but then yeah you would have to have two options selected or it could be a separate, a separate control for panoramic.

J

Okay, yeah, but I will definitely allow all, and that would be basically like a kind of default setting right. Okay, let's.

D

Check on the API side, if we can support multiple choices orientation, probably we should consider this. If API doesn't support, it, yeah probably will establish what we have.

B

So and I suggest check the default option for each of the filters, because I believe all is the default value for many of that.

E

B

And if we have all, we don't need an option select because all is selected by default. So it is something that kind of users will always see. So it's like more explicit filter.

D

Agree with yeah just.

A

To verify, do you mean that by selecting all user will remove the filter from the grid yeah.

A

B

You also check if the orientation multiple identities can be select because I just checked and yeah. We had that in the requirements specified.

E

Okay, we will check the API. If we can do it will change it to the motor selection. You know: use few options also.

B

An isolated images on there on the mall cops, it's a chat, box, I believe and.

H

B

Is a help to talk tube that explains what it means for users.

E

I reviewed the mock-ups I didn't find the chat box component for the filters we have it in magenta, so we need to leave it at select or implement. The new type of filter was a magenta leads. We.

B

Have a total I believe it's definitely more suitable because it's I believe the default option is explicit.

B

Again, it's not like clear what what I have when there is no filter selected.

J

Yeah, if you don't have a component for that, I will definitely agree like let's just have a default value explicitly stated in the drop-down. This is fine. If you don't have checkbox, it's really doesn't make a big difference. What.

B

About toggle so.

J

We don't have to go as well there, so it's kind of like if we want that. We want to build a new component for filter right as.

E

Far as I remember, we have only select component for the filters, the text field or arrange.

J

E

A

But, to be honest, also curently magenta components do not support drop in filters by select selecting one of filter options. So if you want to implement that, probably will need to make an update to magenta a GUI components and I. Don't there is no such behavior on other grits right now. You.

J

A

J

A

I mean selection and option like if we will add all options and for.

E

Example: presentation filter. We have option provider on the with three options: horizontal vertical and square, and in the grid configuration we have note caption. Then we can fast. You know any text for the caption and we have select in the caption right now for all filters and there is no ability to choose the first option for the filters by default.

E

Magenta rings.

J

So it will basically be a label replacement right, yeah.

E

J

I think that will work.

E

Okay, so we just replace, select to zero and will not be applied.

C

B

It still possible to add a tool tip to two isolated images. If it's a top down.

K

E

Me check: if we have such functionality we can edit, so it probably will be really simple to add it to Justin's a configuration and if we don't have it, we need to decide, we won't have one and it or not. Okay,.

B

Yeah, just let us know if you have that already and the grid.

A

Please clarify in more details about this tooltip like what, on.

B

The mock-up we have a small tooltip next to the isolated images that kind of helps users to understand what isolated images are, because it's not like very common term that every people, every person knows that's kind of why it's important to user experience.

A

E

Yep, so how it looks.

E

It's probably all functionalities that we already implemented it also available on the latest development about the lens we implemented. New UI component was agreed since the vendors images, like you, can see, they're in responsive grid and we're planning to deliver this component to the magenta to core and every developer ability to use it in projects expansions.

B

Even you're going to merge it in magenta to destroy develop branch, not.

D

Entire functionality, but only this component- yes only this.

E

Completely reusable and.

D

What are the next steps.

E

The next steps, let me check the board.

E

We have human major tasks is that we need to implement. It expands preview image when you click on the image we can see.

E

That we can enlarge this image and retrieve some image information like category dimensions of the image and this image.

E

So it's like a main main part of the work that we need to do to complete the stone trust and also we need to implement the sage review functionality, the media gallery, so that this functionality will provide ability to save this image to your molecular and use it across. For example, we have two major tasks: left grunts, yes, two major tasks, one one complete front-end task to display this image and one complete became asked to save this image together. Do.

D

They dance on each other or we can start working on them in parallel.

E

Probably we can start work parallel because we can implement API and foreign support image safe and just the call you know from any rest client since this API the stop date. I.

A

Think this this task can be divided into three independent tasks like save image, show extended for you and third, one show the saved attributes that can be implemented after save image after the rest of us, we.

E

Have three tasks for that yeah? We have expand image thumbnail on thumbnail click.

E

We have tasks, render image attributes on the preview. That depends on the expense, previous review image tasks, the tools yet.

K

We can render image.

E

Attributes only even we can when we will implement as I expanded view for the image, and we can. We have two tasks for the image save we have task or image saved to the media gallery and task for save image attributes to database. So probably we also can develop this task separately.

E

One of them just saves attributes to the database and the second one just saved image to the storage. I think we have yeah, we have several boxes, it should be fixed, auto, complete, milestone.

E

And, of course, we need to cover all functionality by the automated tests. We have a request with my small EQI refactoring that probably will be merged today and after it will be merged. We can cover all the camp code with at least unit tests, integration tests.

E

It would be later we can start to cover functionality with yeah.

B

Thank you guys that was really amazing, especially the grid, and how responsive it is. It's outstanding work. One question on that: did you test this module on cloud or on their own local installations right.

E

E

B

You going to test it some cloud.

E

Yeah, probably we have, we will have working prototype, we can pick you up, but we.

A

Actually do have says the bills running right now is visit. That extension right.

E

You just we added this extension extension to our.

E

All magenta test with this expansion enabled I believe.

D

The part will be when you will save images when you download images and save and I mean preview images. The case was the cloud will be like a read-only file system, so we have some limitations which folders are writable which are not.

D

All same approaches same thing, nothing specific, so it should work and need to exist in infrastructure requirements and in file system environments. If not, we should reconsider this stuff, but yeah I hope it will work. But anyway, once we own tremendous logic to save files.

D

We are going to.

A

Use Magento media storage process, magenta media storage personality for that, so it will be exactly the same I suppose in media from admin panel yeah.

E

We're going to review existing staff provides media gallery, and if we decide that we need some additional e PR endpoints, this API invoice will be developed and delivered is a magenta for yep. We just we will just use. Is a merchant or endpoints.

D

Like a test case is already described for the project.

E

D

Wait until in progress it tests, yes ready, always still work.

E

We have several tests. I had it in chance to review it more carefully. I.

A

Think we have three scenarios.

H

A

This work is to focus when we are creating marginal cases. What.

D

Once ready, probably it would be nice to present okay.

A

I think you will share the test cases.

A

Those cases will be used to if somebody would like to cover these to write, optimization tests.

D

Great great job, guys and yeah I just want to say one more time. Thank you for ego role and Valentin for joining this project for your contributions, Yeah right right now, you are really drivers from this project and I'm happy to see you.

A

Guys it's a big pleasure to work with you.

I

C

A

You think thanks a lot.

F

B