Save Complex Cc Number with airSlate SignNow

Save complex cc number

welcome everybody to tech craft this is Rob and in today's video we'll take a deeper dive into a more complex shortcuts workflow we're gonna take a look at calling in to third-party api's we'll take a deep dive into breaking our shortcut up into smaller reusable shortcuts and then we're going to see a brand new app called toolbox Pro which has been designed specifically to work with the shortcuts app let's go so let me first start by showing you the shortcut we're gonna build today this is quite a complex little workflow so I think it helps just to see what it is we're building so here I am in shortcuts and I have this PDF make a shortcut here in green and you can see it says it has 22 actions but it also depends on all these other shortcuts here off to the right so this is quite a complex work but let's click on it and see what happens so the first thing that happens is I'm prompted to select a photograph so I'm going to choose this photograph of my daughter then it takes quite a long time to run because what we're doing here is constructing a PDF with that photograph with a color swatch made up of the colours of that photograph and with the lat/long from that photograph as the title we're then using a third party API called cloud converts you actually turn this into a PDF now if you saw last week's video you'll see that you can make PDFs directly on the iPad but you don't have a lot of control over the orientation the page size and things like that by using cloud convert you can fully control what page size you want orientation you want in fact you actually have access to the full rendering engine of the Chrome web browser when making your PDF let's take a look at the result so here you can see the resulting PDF we have the lat/long at the top we have the color palette that was extracted from this image and then we have the image itself and this is one landscape page and if I press the share sheet option here and then scroll down I can select and the app I want for this I'm gonna open this up in PDF Expert and there we go we have a full PDF made from various different components so we'll approach this stroke in four sections one section to get the lat/long title text and another section to get the color swatches and another section to construct the PDF template and then a final section to actually send that template to cloud convert and turn it into a PDF let's start with that text header okay so here we are back in shortcuts and we're going to recreate this shortcut here I'm going to quite make it titled banner too so I'm gonna give it a title make make title on a two I'm going to select to be part of the share sheet so it can accept some input and the input is going to be an image I'm going to remove it from the widget for now and just click done and what I want to do first of all is just set a variable with the image that's been passed in the form the shortcode important image so now we have the image we can extract the location it was shot in and we do that by using the get details of images option so it's already picked the right variable and I'm going to choose the location attributes and now we've got that I'm going to set that as a variable called location and now from the location we need to extract two two particular variables the longitude and the latitude and there is a get details of locations for this as well so we can get details of location and we're going to choose latitude I'm going to set that to a variable called lat and then we're gonna do another get details of location this time longitude it's chosen the wrong thing here so we need a long press on that and make sure that we choose location another set variable and we're going to choose that long call that long okay great now what we need to do is turn these into a single text Butler separated by a comma to do that you just take a text object drag this in here and you can basically choose la cama long and that gives us a formatted text with those two variables in there now to test this because we're expecting shortcut employees it's kind of a bit messy to test this we can easily just throw a dummy image in for now so let's do that I'm gonna come here select photos I'm just gonna drop that in here she's just gonna temporarily change what this variable is let's press play and see what happens right I'm gonna choose that photograph there and okay this is looking okay we've just got a slight issue here which is that we've got all these decimal numbers here which is overly precise for our purposes what we want to do is around these numbers off so we get something a little bit more sensible easy to do that if we take the round number action I'm gonna drop it in there I want to run the latitude to the hundredths and I want to do the same thing again all the longitude in there two hundredths and let's play that again and see what happens choose our image why doesn't it work the reason being isn't when we dropped these round actions in it didn't actually update what was set as the value in the variables this is something just be a little bit wary off so get a long press on this select magic variable and just choose around it number and then do the same thing here as well it's like magic variable number so now you should see that these are all linked together and this little line here serves to show you that you've got those actions connected and then it's run that one final time okay that's more sensible we now have something that looks like a smooth like to having a title banner on a PDF so that's the basic outline of the action for getting the text banner all we need to do is just revert this change this here so get rid of that and then long press on this to choose select magic variable make sure we set up but the shortcut in prompt I also want to show you a little trick here that I didn't even realize was possible currently this shortcut is showing up in the share sheet because we want it to accept input what you can do though is once you have used the shortcut input in your in your shortcut actions here you can go back into these three dots here um and you can just deselect this and this will still work it still has access to the shortcut input variable this is a really handy hack and thank you to whoever it was it commented with that little tidbit there's a very very useful okay the next thing I want to do is take the to graph and get the swatches from it let's see how that works see we got bucking shortcuts I'm going to build our action to extract the color palette from an image let's see how that works so I'm going to start by just using select photos again for the purposes of this demo I'm in set variable to be the image so now what I want to do is use an action from toolbox Pro that will allow us to actually extract the colors from the image and this is the get colors from image action so I can do that here and this is gonna get the average color but what I want to do is just get all the colors as a dictionary and let's just run that and see what happens I'm gonna choose the same portrait then what we get here is we've got the average color the primary call the secondary color and we've got the the hash codes on everything now let me just say at this point that toolbox Pro is are completely free download and I'm not sponsored at all by I'll exhale you is the developer of toolbox pro issue some that I found that I use quite a bit this action is not included in the free version of toolbox Pro you have to pay for that the whole thing is 5 pounds 99 or 5 dollars 99 the u.s. to unlock and if you're building a lot of shortcuts it's absolutely indispensable there are so many actions and in the coming weeks we'll see more and more of these I'll also link below to a fantastic guide slash review by Federico fatty Chi which shows you a lot more about toolbox Pro in some great detail let's give us the shortcut ok so now we have the actual colors what we need to do now is combine this into one image that has them as kind of like vertical stripes that we use for our swatch really easy to do this first thing I'm going to do is get a repeat with each action and I'm gonna repeat with each item in column just going to long press on that and choose mat color this is giving me actually an image with the whole the color as a score swatches there's one big image with each color in that list I like to do a really good job of designing these actions to be using a lot of use cases so that's what we'll get there and I can just play this now and you'll see that again in action if I choose my portrait or we've got is a list of their individual colors that's the white one that are in that image okay cool now what I want to do is truncate these and can cut it in to get it into one image so the first thing to do is to do resize I'm going to resize each of these repeat items so each time we loop over this we're going to repeat we're going to resize the image that is the repeat item and I want this to be one 150 wide and 300 high and then the final thing I want to do is combine these into one image combine images like that so combine the results of darts which is a list of images I'm going to combine horizontally because that's how we had our swatches in the output before and let's just try this and see what happens it's a poor tree it's that one there we go we've got a little swatch pallet there which is really nice and really powerful now of course we need to switch this back to the having a shortcut input so I'm going to delete that one press on this clear that out and we can't select anything because you've not set this in the share sheet so you must remember to do that save this first we're gonna call it and extract cause it's just three dots there three dots they're showing sure she' images of the input type it's kind of painful but it does work and then here we can now it's that magic variable as being the shortcut input okay so we've got title banner we've got the colors let's now create the template so back in shortcuts again with a brand new shortcut I'm gonna have this one be the main shortcut that we used to drive this workflow so I'm going to give it the name and I'm gonna call it PDF maker Sunday I'm gonna leave it as showing the widget we don't need a share sheet so we're kind of good to go first thing I want here is the select photos action again which is gonna be our our primary photo then what I want to do is get the title for that photo and get the swatches as well so let's call those other shortcuts and save those resource as variable so today that we can use the run shortcut action drag down here we have our extract cause making sure that we're passing in the photo there and what I actually want to do here cuz that's not particularly clever way of doing this is drag in this variable here I'm gonna call that the image this way if we change what this is everywhere else will change I'm going to clear that out and make that to be the image and I want to set that as a variable which is the swatch image okay cool and then I also want to run the shortcut that creates the title text and we called that mate title banner too okay brilliant and let's just make sure we're passing in the right thing which is not the swatch image it's actually the main image so let's get that right these little niggles can really cause problems when your trends are deep of these shortcuts so just be extra careful at what what values you're passing into what actions okay this is looking good to me now what we need to do is load the template text and I have that in a file in iCloud so I'm gonna do get file for that just this and I don't want to show the document picker I know that this is called template txt and let's just switch over to my coding app codex just to see what this template is made of so actually have it as an HTML file here in codex so I get the code highlighting but you can't use the HTML file in the option and we'll see why shortly it's very very basic it's got some CSS here to do the styling but it's also got these all caps placeholders the location the swatch and the photo and we're gonna insert those in the shortcuts so we can use this template for multiple PDF output just notice as well that we could we don't have a URL for any of the images we're actually using a PNG base64 encoded data URL we have to construct those URLs and we'll see how shortly I've just then copied this orbit to a txt file the reason I'm doing this is if in this action here in the get file option I tried to load an HTML file it creates some sort of text object inside shortcuts and you don't actually get access to the raw HTML text so we can't insert the images we can't install it the title text it's kind of messy use this approach instead of B dot txt extension at the end okay know what we need to do is replace those place all the variables with the actual content that we need before we can do that though we need to encode the two images as basics t4p and GS let's see how I'm going to do that so I'm back in shortcuts now and I actually have a shortcut that I've already made called PNG base64 encode and all this does is take an image as the shortcut input it then forces that image to be a PNG so we get a conversion action here this is just the inbuilt convert image action and then we use the in Bill encourage base64 to give us the base64 data for that image click done so I'm back in the main shortcut now and I'm just in a call into the base64 encode shortcut to encode the images as we need so let's get a run shortcut option in here we want to run PNG base64 encode and I'm going to pass in not the shortcut I'm gonna pass in the image and I also want to do here is I'm just gonna put a comment node in here to start to brai this up a little bit and this is where we do the base64 encoding this can be quite useful if you have a very long messy shortcut just using these comments will help you delineate what the sections are of your logic okay so I'm gonna save that into a variable and that is encoded image and then I'm gonna get another run same shortcut again and this want to pass in the swatch image and save that as a variable I'm gonna call that encoded swatch okay so let's just see what we have here now we have the title banner text which actually we should also store as a variable so let's store that in here call that title text and we then have the encoded image in base64 and the encourage swatch in base64 this those three values that we need to use when replacing content inside the template let's see how that works so the first thing I want to do is create a dictionary with all these values inside they're keyed by the variables that's supposed to replace inside the template so we can do this with a dictionary action like this and then we know that we had a variable called the location and that was going to be the title text we had another variable called the image I believe and if you forget we can just switch back into Cole Epson check so we had the swatch and the photo not the image the photo and that was encoded image then we had another one here which was the swatch we're gonna call that swatch image and I've noticed this little book here where you've noticed that the value at the location has disappeared and I can't click on it doesn't work so we're just gonna do is just change that to the location to add a new item down here called the location set that to title text and then remove that one it's kind of a little frustration I'm not sure if this is just an artifact of me being on the beta but I've seen it crop up a few times now so that's just a little workaround you can use so now we have the dictionary what we want to do is loop over all the keys in there and then do the replacement on the template text before we can do that there what I want to do is just set a variable which is called template so the contents of this file and I'm just going to make sure we could worse that from a file object into the raw text so this will be raw text now and we can start to do replacements inside there to do this I'm going to use a repeat with each action so let's choose repeat with each and what I want to do here is click on the dictionary and choose get keys so now what I'm going to get is all the keys in this dictionary so this will execute once for the photo once for the swatch and once for the location and then what I'm going to do is just get some variables so I'm on a variable which is called key to be the repeat item so that will be each of those in order then I'm going to get the dictionary value for that key and be careful here because this is set incorrectly again so I'm just going to click on that clear down and make sure that it is this dictionary here and I'm going to set that to be a variable called value and now I'm going to use these the key in the value to replace the content inside their template and this is really easy because there is a built-in replace text action I'm going to replace the key with the value in in the template now this is not an inline replacement so you also have to update the template variable with the results of the replaced text action let's click done set variable okay cool so that should be the finished template what we can do is just use the quick action to take a look and see if this is working so I'm gonna pick up the quick look here click on that so he goes at the bottom and I change that I don't want it to be the results of this repeat I want it to be simply a variable and then let's click play and see what happens so I select my image it's gonna extract the colors using the extra colors shortcut we've made it's gonna make the title banner and then it's good to base64 encoding all his images gonna keep going keep going and then finally we'll get the HTM or concert and you can scroll down and what you're looking for is the fact that these images have now got this base64 text in there the title has the encoded long in there and this is definitely right but it goes on forever and ever and ever because these are big images let's just click done that's the template constructed now we're in the final stretch all we to do is pass this template to cloud convert and we can create our final PDF so before we can call into cloud convert you actually need to sign up for a free cloud convert account just be clear I'm not sponsored by cloud cover in any way I'm not even really a paying customer of theirs I'm just using my free account for the occasional PDF conversion once you've signed up you can go into your API console and you can find your API key and you will need this API key very shortly to be able to call into the API from shortcuts so once you've got your API key and handle ready to start calling into the cloud convert API and I have segmented my shortcut for this into two parts once you actually get hold of the API key and then want to make the API call I actually I do have multiple cloud convert shortcuts so I'd like to have one that manages the API key and I'm using toolbox pros global variables support to actually store the API key not just on my iPad but because those variables also sync of iCloud on my iPhone as well so super handy let's see how that shortcut works so I actually have this shortcut pre-made and I'd like to know in the comments below if you like me to build these shortcuts as I go or if you like seeing them pre-made or a mixture of both let me know this is a really simple one there should have a text object here at the top called which has the text CC API key this is what I'm going to call my global variable I'm storing this in a local variable just to make things confusing that I'm using the toolbox Prohm check if global variable exists action see if that exists if it does so if true and do nothing because if you already exists I'm just gonna return the value if it doesn't exist and then I'm gonna prompt for import using that ask for input action that's built into shortcuts and I'm going to set the value that the user in enters as the global variable called CC API key and at the final thing I just used the get value now two things about this this set and get are both in the same action in toolbox Pro and that action is called edit global variables and then when you pull the action in you get to choose set get get or delete delete or whatever you want the other thing to notice here is this existence here if you notice here it says existence as bully and when I click on it it's a true or false value when it comes back however when you first drop this check if exists action in the return value set as a number which is kind of confusing so you need to make sure you go in by clicking on that and select as boolean all that will happen with this action is it will prompt if I don't have the API key let's see how it works so we're ready for the first time and what we've gets prompted is what's the API key so I'm going to enter test here click ok let's tour it and returned it as test if I run it again it won't prompt in this time it will just return the value test obviously this is exactly what we want this is fantastic let's now see how we can use this in an actual API call into cloud convert so actually calling cloud convert is really simple I have this shortcut CC converts PDF this takes the template text as shortcut import so we're gonna pass it our template text that we saw earlier we get the API keys in the get API key shortcut we just saw the API brute that I'm using is the v1 API from Cloud converter I just got that as a text object here and then the most important thing is this bit at the bottom and I've got that annoying bug where you can't see what I'm doing so I'm kind of putting nothing action at the bottom here bring this up and then click show more so I'm using the get contents of URL action which is the way that you couldn't call third-party api's this is a post request to slash converts at the URL we saw earlier at this URL and it requires you to pass in the API key as an authorization header with the word bearer a space and then the API key and really like this how you can just put these variables in here which is which is cool there's a whole bunch of interesting things we have to pass in so I've chosen form as the request body type and then I've got input format HTML output format PDF gray input is actually set to upload got that weird bug that we saw earlier the weight is set to true done only set to true together these three variables mean that I'm gonna upload the template text as part of this request I want to wait until the job is finished then I want to download the resort there are other API is in cloud convert that I'd like to do this in an asynchronous manner so you don't have to up sitting around waiting button shortcuts I find this to be the easiest way because we are uploading we need to set these two variables a file name can be anything I've just called load dot HTML the extension seems to be important I've not had much success if I don't set that's a HTML then we're passing in template as our file content let me just show you here when you click an add new field you get to choose between text and file and you want to choose file for this particular attribute here and then what I want is I want cloud convert to use the inbuilt chrome support so I've set this converter options use Chrome to true and converter options page orientation to landscape all of these attributes are documented on the cloud convert website this is just the basic thing that I think you need to make a landscape PDF from HTML using Chrome as their rendering engine and that's it that will just return the PDF once this has rendered it's really quite a simple call now we need to do is just drop this into our main shortcut and we can finally see the results of our work so here I am back in our PDF maker Sunday shortcut we know we've got our constructed template now we have a shortcut to call into cloud convert let's just call that and see what happens so I'm going to do run short cook the shortcut is a CC convert to PDF that's one we just saw the input to this is going to be our template make sure you get that right and what I want to do at the end is pop up the quick lock with the returned PDF and then from there you can save it to anywhere that you want so let's get the quick look option out of here press that so we want the show shortcut resolving quickly caption and the line is there that shows this is all connected this should be everything let's press play and see how it works so I'm going to select my portrait photo here and then all of the shortcut will start running now a lot of different shortcuts are being called here a lot of different actions are executing what you might want to do is go back through all the places where you call run shortcut and deselect the show while running that prevents the kind of onward details from popping up and messing up your shortcuts window eventually though what will happen is the network call will be made like this and you'll see a little waiting symbol here this means that we're waiting on the conversion to happen once the conversion has happened and the actual download starts you'll see a progress bar in the background of the get contents action here we have our progress bar now so this is the PDF downloading very near the end now and there is our PDF fantastic it has the lap and the long it has the color swatch and it has our photograph now obviously one of the colors here is white so what you might want to do is put a border around that but you can tweak the template you can tweak all this to your heart's content so that was obviously quite a complex workflow quite a complex set of shortcut option but this is something that could be developed into a real program I just wanted to build this one to show you that you can actually build real software using shortcuts I started on this journey while I'm trying to build a piece of mood board software for my wife and got into all this kind of color management and PDF creation so you can do real things with it I'll put links to all the shortcuts you've seen in the description below so that you can play with this at home please do let me know if you like these shortcuts if you'd like to see any tweaks or any further content suggestions you have do comment below otherwise please hit like please hit subscribe and don't just hit subscribe button as well so you don't miss out on any future content there is at least a video coming every Sunday about shortcuts and usually one or two in the week about other things related to Apple laptops iPad and so forth thanks so much for watching and I'll see you in the next video