PhoneGap Plugin Roundup

Posted on Tuesday, September 20th, 2016 by Ash Ryan
Categories: Android, iOS, Web
Tags: Client Auth, Image Editor UI, PhoneGap, Send To Desktop API, User Auth UI

PhoneGap Logo

We’ve had a lot of PhoneGap news recently, with the release of our first 4 PhoneGap plugins and 2 PhoneGap templates.

PhoneGap makes it possible for Web developers to build apps for iOS and Android using the languages they know and love: HTML, CSS, and JavaScript. Our PhoneGap plugins are also compatible with Cordova and Ionic.

Creative SDK Image Editor PhoneGap template

Image Editor UI PhoneGap plugin

Creative SDK Send To Desktop API PhoneGap plugin

Send To Desktop API PhoneGap plugin

Learn more

For an overview of these new offerings, head over to the PhoneGap blog, where they talk about the Image Editor UI plugin, Send To Desktop API plugin, and more!

To see all of the Creative SDK PhoneGap plugins and templates, also be sure to check out the Plugins section of the Creative SDK GitHub page.

If there’s another Creative SDK PhoneGap plugin you’d like to see, let us know in the comments!

PhoneGap template for the Creative SDK Send To Desktop API

Posted on Wednesday, September 7th, 2016 by Ash Ryan
Categories: Android, iOS, Web
Tags: Client Auth, Image Editor UI, PhoneGap, Send To Desktop API, User Auth UI

PhoneGap Logo

Hi Web developers! We’ve had a lot of PhoneGap + Creative SDK announcements for you recently. We announced our first PhoneGap plugins, a PhoneGap template for the Image Editor, and another batch of PhoneGap plugins.

As a companion to that second batch of plugins, today we are releasing a PhoneGap template for the Creative SDK Send To Desktop API.

A template is a great way to start learning about a PhoneGap plugin. Templates are essentially sample apps that you can download via NPM, build from your command line, and run on your device (these plugins support iOS and Android).

When you try out the Creative SDK Send To Desktop PhoneGap template, without writing any code, you’ll have a sample app for your reference that looks like this:

Creative SDK Send To Desktop API PhoneGap plugin

In the template app, you can:

Try it out

You can get started with the Creative SDK Send To Desktop template for PhoneGap by checking out the repo on GitHub.

The README covers everything you need to get going, including prerequisites, setup steps, and files to check for sample code.

Learn more

After you’ve tried the template and you’re ready to learn more about the plugins that make the template possible, check out these GitHub repos:

The READMEs for the plugin repos on GitHub contain Setup and API guides, as well as sample code, to help you get started quickly.

If there’s another Creative SDK PhoneGap plugin you’d like to see, let us know in the comments!

New PhoneGap plugins: Send To Desktop API and User Auth UI

Posted on Tuesday, August 30th, 2016 by Ash Ryan
Categories: Android, iOS, Web
Tags: Client Auth, Image Editor UI, PhoneGap, Send To Desktop API, User Auth UI

PhoneGap Logo

Hi Web developers! Joining our first two PhoneGap plugins, we’re excited to announce a new batch of plugins that let you use the Creative SDK in your PhoneGap app.

Adobe PhoneGap lets you easily create apps using the web technologies you know and love: HTML, CSS, and JavaScript.

With our growing catalogue of PhoneGap plugins, you can build apps using the Creative SDK native components for iOS and Android without writing a single line of Objective-C, Swift, or Java.

About the plugins

Our newest plugins make available the Creative SDK Send To Desktop API and User Auth UI components.

With the Send To Desktop API plugin, your users can send images from your mobile app and have them open automatically in Photoshop, Illustrator, or InDesign on the desktop.

For the user, this interaction feels like magic; for the developer, it’s a single function call.

Send To Desktop API

Send To Desktop API: Send images from your app to Photoshop, Illustrator, or InDesign

The Send To Desktop workflow makes use of the user’s Adobe Creative Cloud account, which you can access via the User Auth UI plugin.

All of the heavy lifting for User Auth login and logout is handled by the plugin, making the integration quick and simple to set up.

Get the plugins

Check out our PhoneGap plugins on GitHub:

  • Client Auth: The starting point for all Creative SDK integrations
  • Image Editor UI: Powerful photo editing for mobile apps
  • New! User Auth UI: Let users log in to their Adobe Creative Cloud accounts, right from within your app
  • New! Send To Desktop API: Magically send images from mobile to Photoshop, Illustrator, or InDesign

The READMEs for the plugin repos contain Setup and API guides, as well as sample code, to help you get started quickly.

We’ll have more Creative SDK + PhoneGap news for you soon. As always, feel free to reach out if you have any requests related to our PhoneGap plugins.

(Oh, and while you’re digging in, try out our PhoneGap template for the Image Editor!)

PhoneGap template for the Creative SDK Image Editor

Posted on Wednesday, August 24th, 2016 by Ash Ryan
Categories: Android, iOS, Web
Tags: Image Editor UI, PhoneGap

Hi Web developers! Last week we announced our first PhoneGap plugins for the Creative SDK.

As a companion to those plugins, today we are releasing a PhoneGap template for the Creative SDK Image Editor.

A template is a great way to start learning about a PhoneGap plugin. Templates are essentially sample apps that you can download via NPM, build from your command line, and run on your device (these plugins support iOS and Android).

When you try out the Creative SDK Image Editor PhoneGap template, without writing any code, you’ll have a sample app for your reference that looks like this:

Creative SDK Image Editor PhoneGap template

The buttons let you use the Creative SDK Image Editor to edit the photo on the screen or use the camera to take a new photo for editing.

Try it out

You can get started with the Creative SDK Image Editor template for PhoneGap by checking out the repo on GitHub.

The README covers everything you need to get going, including prerequisites, setup steps, and files to check for sample code.

Learn more

After you’ve tried the template and you’re ready to learn more about the plugins that make the template possible, check out these GitHub repos:

The READMEs for the plugin repos on GitHub contain Setup and API guides, as well as sample code, to help you get started quickly.

We’ll have more PhoneGap plugins to announce very soon. In the meantime, if there’s a Creative SDK PhoneGap plugin you’d like to see, let us know in the comments!

PhoneGap plugins for the Creative SDK

Posted on Friday, August 19th, 2016 by Ash Ryan
Categories: Android, iOS, Web
Tags: Client Auth, Image Editor UI, PhoneGap

PhoneGap Logo
(Update: you can also check out our latest batch of plugins after reading this article.)

Hi Web developers! We’re excited to announce our first PhoneGap plugins for the Creative SDK.

PhoneGap lets you easily create apps using the web technologies you know and love: HTML, CSS, and JavaScript.

We’ve been working in collaboration with the Adobe PhoneGap team to bring the power of the Creative SDK to even more developers with PhoneGap. Now, you can take advantage of the Creative SDK native components for iOS and Android without writing a single line of Objective-C, Swift, or Java.

Get the plugins

As of today, you can start using these Creative SDK PhoneGap plugins:

(Update: be sure to check out our latest batch of plugins too.)

The READMEs for the plugin repos contain Setup and API guides, as well as sample code, to help you get started quickly.

We have more PhoneGap plugins on the way. In the meantime, if you have a request for a PhoneGap plugin for a specific Creative SDK component, let us know in the comments!

New Sample Repo for Web: Image Editor + Drag & Drop API

Posted on Monday, May 16th, 2016 by Ash Ryan
Category: Web
Tags: GitHub, Image Editor UI, Repo

Creative SDK Image Editor sample app repo with Drag and Drop API
Hi Web developers! We’re exited to announce a new sample repo that integrates both the Creative SDK Image Editor for Web and the HTML Drag and Drop API.

Even better, it features the first contributions from our GitHub community (more on that below).

Contents

Overview of the repo

This repo is a basic example written in jQuery. It integrates both the Creative SDK Image Editor and the HTML Drag and Drop API.

If you’re looking specifically for the Drag and Drop implementation, see the index.js file where we listen for Drag and Drop-related events:

// `dropArea` is a jQuery object for an HTML `div` element
dropArea.on('drag dragstart dragend dragover dragenter dragleave drop', function(e) {
    if (e.preventDefault) e.preventDefault(); 
    if (e.stopPropagation) e.stopPropagation(); 
})
// ...
.on('drop', function(e) {

    // Get the dropped file
    var file = e.originalEvent.dataTransfer.files[0];

    validateFileType(file);

});

That .on('drop', ...) call is where the magic starts: we get the file and pass it to our own validateFileType() helper method.

Have a look at that helper method to see what happens from there.


Sidenote:

If you’re wondering what .originalEvent is in the code above: our event e in the callback function is a jQuery event. We have to go to the original JavaScript event to access the .dataTransfer property, where the dropped file lives.

jQuery events let us do this via the .originalEvent property. If this sample repo were written in vanilla JavaScript, you could write that line as e.dataTransfer.files[0].

You can read more about the jQuery event object in the jQuery docs.

Community contributions

We’d like to thank our first GitHub community contributors for the code they’ve submitted to this sample app!

We’ll post again pretty soon about how you can contribute to this sample app too. Stay tuned!

Try it live or fork the repo

You can try a live demo of this repo on its GitHub project page.

Want to fork the repo and try it yourself? Head over to GitHub to fork, and be sure to read the readme for setup instructions!

More repos

Want more repos for Web, iOS, and Android?

We offer more sample repos for all three platforms. Have a look at our GitHub organization’s table of contents.

Head on over to GitHub to fork a repo and try out our Creative SDK sample repos.

Web sample repo: Image Editor with High Resolution

Posted on Tuesday, May 10th, 2016 by Ash Ryan
Category: Web
Tags: GitHub, Image Editor UI, Repo

High Resolution sample repo for the Creative SDK

Hi Web developers! We’re happy to announce a new sample repo that demonstrates how to use the Creative SDK Image Editor with High Resolution image editing.

This repo joins our standard resolution sample repos for jQuery and for Angular/Express.

Contents

Background

The Creative SDK Image Editor UI component for Web offers standard resolution image editing out of the box, with no additional permissions required.

For High Resolution image editing, there are a couple of extra steps involved:

  1. Approval is required from the Creative SDK team

    For more information about getting approval, see the High Resolution image editing guide

  2. Setup for High Resolution is required in your code

For that second step, our new Angular/Express with High Resolution sample repo will be helpful when viewed in conjunction with our High Resolution image editing guide.

Points to check

Have a look at the code in our sample repo to see one way to set up High Resolution image editing.

Client-side setup

In this repo, the client-side code hits our server’s Creative SDK authentication endpoint. The client knows what endpoint to hit because we have provided the following key/value pair to our Aviary.Feather() configuration object:

authenticationURL: "/api/auth/creativesdkAuthObj"

Also note that for High Resolution, we use the onSaveHiRes property in the Aviary.Feather() configuration object. What you do in this function is completely up to your app’s needs.

Lastly, note that in our $scope.imageEditor.launch() call, we pass both url and hiresUrl key/value pairs in our configuration object. These can point to the same place, but both key/value pairs must be present.

For sample code, see: /client/pre-build/home/home.controller.js

Server-side setup

On the server, we have created an API endpoint at /api/auth/creativesdkAuthObj. The location of this endpoint is arbitrary, but the object it returns is crucial for High Resolution editing.

This endpoint returns the value of getAuthObj(), where getAuthObj() is a helper method we created to set up our authentication object. The Creative SDK uses this object to authenticate the client for High Resolution image editing.

Ulitimately, the authentication object returned from the /api/auth/creativesdkAuthObj endpoint looks like this:

{
    apiKey: <key>,
    salt: <salt>,
    timestamp: <timestamp>,
    encryptionMethod: <method>,
    signature: <signature>
}

Everything in angle brackets (< >) above should be replaced with real values, as we do in our sample repo.

For sample code, see: /server/api/auth/auth.controller.js

Getting started

Be sure to follow the steps in the readme to get set up.

You will need Nodejs and NPM installed to run the app.


Not a web developer? We offer Getting Started sample repos for mobile platforms as well. Have a look at our sample repos for iOS and for Android on GitHub.

Head on over to GitHub to fork a repo and try out our Creative SDK sample repos.

Angular/Express Sample Repo for Web

Posted on Tuesday, April 19th, 2016 by Ash Ryan
Category: Web
Tags: GitHub, Image Editor UI, Repo

Angular/Express sample repo for the Creative SDK

Hi Web developers! Last week we announced a new sample GitHub repo for the Creative SDK Image Editor.

This first repo is meant to be a very basic example of how to launch and get results from the Image Editor component, and is written in jQuery for maximum code readability for the widest range of web developers.

Joining the jQuery sample repo is a new Angular/Express sample repo.

Points to check

This repo was created to show you a couple of things that we often get questions about:

  1. How to use the Image Editor within the Angular framework

    See:

  2. One way to pull images from your Express server for use in the app UI and Image Editor

    See:

Getting started

Be sure to follow the steps in the readme to get set up.

You will need Nodejs and NPM installed to run the app.


Not a web developer? We offer Getting Started sample repos for mobile platforms as well. Have a look at our sample repos for iOS and for Android on GitHub.

Head on over to GitHub to fork a repo and try out our Creative SDK sample repos.

Our first sample repo for Web on GitHub

Posted on Wednesday, April 13th, 2016 by Ash Ryan
Category: Web
Tags: GitHub, Image Editor UI, Repo

Creative SDK GitHub repos for Web

Hi Web developers! On the heels of our recent announcement of sample Android app repos, we are excited to announce that we have our first sample repo using the Creative SDK for Web.

The Web Getting Started repo

The Web Getting Started repo will contain multiple samples of web apps using Creative SDK components.

The first sample shows you how to use the Creative SDK Image Editor for Web. Just follow the instructions in the readme, and you’ll have a working web app that integrates the Creative SDK Image Editor:

As shown in the slideshow above, the sample app displays an image that can be loaded into the Creative SDK Image Editor. After saving edits in the Image Editor, the results of the user edits are then shown in place of the original image.

This is a very basic example of what you might do with the Image Editor, but the code included in the repo should give you an idea about how to get started with your own integration.

Getting Started sample repos for mobile platforms

In addition to Web, we offer Getting Started sample repos for mobile platforms as well. Have a look at our sample repos for iOS and for Android on GitHub.

Head on over to GitHub to fork a repo and try out our Creative SDK sample repos.

We’ve got GitHub repos

Posted on Thursday, March 24th, 2016 by Ash Ryan
Categories: Android, iOS, Web
Tags: Asset Browser UI, Client Auth, GitHub, Image Editor UI, Repo, Send To Desktop API, User Auth UI

Adobe Creative SDK repos on GitHub

When you start your Creative SDK integration, the best place to learn what the SDK can do for your app is to check out our developer guides for your platform. The guides walk you through step-by-step example integrations for each Creative SDK component, complete with code snippets and screenshots.

But sometimes you just want to see top-to-bottom working code.

If that’s the case for you, go have a look at our GitHub repos for iOS, Android, and Web. These Getting Started repos contain multiple apps that accompany the developer guides on our portal.

For example, if you’re looking to integrate the Asset Browser UI component on Android, see the example app in our Android GitHub repo. The code in this app mirrors what is covered in our Asset Browser UI guide.

Our current developer guide and GitHub repo offerings

We offer GitHub repos and companion developer guides for iOS, Android, and Web.

The lineup will naturally change over time. You can check the latest developer guides on our developer portal, and the latest repos on our GitHub org.

We hope the example GitHub repos make it easy for you to get up and running with the Creative SDK.

Head on over to GitHub to fork a repo and try out our Creative SDK example apps.