So far we have setup our Org and ran a sample Salesforce Mobile SDK app against it. Now it didn’t look too pretty and things might get a little un-organized if we stick with what the Mobile SDK came with out of the box. That’s where the Ionic Framework is going to help us. As stated in the intro post the Ionic Framework helps developer Native looking apps with Angular. This will help us with both the look of the app and the way the code is organized.
Install Ionic
The install is pretty easy npm install ionic -g
, lets see how it would go.
npm install ionic -g
PS D:\Workspace\Blog\salesforce\ionic\ionic-sfdc> npm install ionic -g C:\Users\brettmn\AppData\Roaming\npm\ionic -> C:\Users\brettmn\AppData\Roaming\npm\node_modules\ionic\bin\ionic + ionic@3.4.0 added 128 packages in 7.281s PS D:\Workspace\Blog\salesforce\ionic\ionic-sfdc>
ok so far so painless. Now what can we do?
Info
If you want to see what you can do with the Ionic cli just run ionic
with no commands or parameters and get a brief overview.
ionic
PS D:\Workspace\Blog\salesforce\ionic\ionic-sfdc> ionic _ _ (_) (_) _ ___ _ __ _ ___ | |/ _ \| '_ \| |/ __| | | (_) | | | | | (__ |_|\___/|_| |_|_|\___| CLI 3.4.0 Usage: $ ionic <command> [--help] [--verbose] [--quiet] [<args>] [options] $ ionic [--confirm] [--no-interactive] [--yarn] [--no-timeout] Global Commands: docs ..................... Open the Ionic documentation website info ..................... Print system/environment info login .................... Login with your Ionic ID signup ................... Create an Ionic account start .................... Create a new project telemetry ................ Opt in and out of telemetry Project Commands: generate ................. Generate pipes, components, pages, directives, providers, and tabs (ionic-angular >= 3.0.0) (alias: g) link ..................... Connect your local app to Ionic serve .................... Start a local dev server for app dev/testing upload ................... Upload a new snapshot of your app cordova build ............ Build (prepare + compile) an Ionic project for a given platform cordova compile .......... Compile native platform code cordova emulate .......... Emulate an Ionic project on a simulator or emulator cordova platform ......... Manage Cordova platform targets cordova plugin ........... Manage Cordova plugins cordova prepare .......... Transform metadata to platform manifests and copies assets to Cordova platforms cordova resources ........ Automatically create icon and splash screen resources cordova run .............. Run an Ionic project on a connected device package build ............ Start a package build package download ......... Download your packaged app package info ............. Get info about a build package list ............. List your cloud builds PS D:\Workspace\Blog\salesforce\ionic\ionic-sfdc>
Of cource full documentation can be found at the website at ionicframework.com/docs/
Now let’s create something.
Create an Ionic App
In the directory you want to create the app folder we are going to run ionic start myApp sidemenu
and what this is going to do is create a new folder that contains your app. That folder will be called myApp
. Ionic will use a template called sidemenu
to create the app. The sidemenu
template looks had a menu that slides out from the side. You have probably seen numerous apps that use this style of layout.
Run ionic start myApp sidemenu
PS D:\Workspace\Blog\salesforce\ionic> ionic start myApp sidemenu ✔ Creating directory .\myApp - done! [INFO] Fetching app base (https://github.com/ionic-team/ionic2-app-base/archive/master.tar.gz) ✔ Downloading - done! [INFO] Fetching starter template sidemenu (https://github.com/ionic-team/ionic2-starter-sidemenu/archive/master.tar.gz) ✔ Downloading - done! ✔ Updating package.json with app details - done! ✔ Creating configuration file ionic.config.json - done! [INFO] Installing dependencies may take several minutes! > npm install ✔ Running command - done! > npm install --save-dev --save-exact @ionic/cli-plugin-ionic-angular@latest ✔ Running command - done! > git init ✔ Running command - done! > git add -A ✔ Running command - done! > git commit -m "Initial commit" --no-gpg-sign ✔ Running command - done! ♬ ♫ ♬ ♫ Your Ionic app is ready to go! ♬ ♫ ♬ ♫ Run your app in the browser (great for initial development): ionic serve Run on a device or simulator: ionic cordova run ios Test and share your app on a device with the Ionic View app: http://view.ionic.io ? Link this app to your Ionic Dashboard to use tools like Ionic View? No Go to your newly created project: cd .\myApp
After running the command the only interaction was before it finished it asked if I wanted to like the app to my Ionic Dashboard. I chose no, feel free to choose differently.
Now we can go into the folder and see the app we have created.
Our New App
The folder structure should look familiar if you created the Mobile SDK app with us previously.
Folder Structure
And we should be able to add a platform with ionic cordova platform add android
and run it with ionic cordova run android
or you can build it with ionic cordova build android
and open the platform/android
folder with Android Studio with the Import project (Eclipse ADT, Gradle, ect)
method. This will allow you to run it from Android Studio.
Either way you should end up with something like this in your Android Emulator or Device.
myApp Running
Conclusion
We now have a sample app made with Ionic and one made from the Salesforce Mobile SDK. Our next step will be to see what we need to do to combine the two. Then we will have an app that can use the Mobile SDK styled by the Ionic Framework.
Be sure you sign up for The Weekly Stand-Up! to receive free the WIP Developer.com weekly newsletter every Sunday!
Hi Brett, great articles! I don’t know how your articles didn’t appear on any Google searches till now. Do you have your entire Ionic 3/SalesforceMobileSDK combined app on GitHub? I followed all your articles but wanted to compare the final version of your combining the Ionic 3 and forcedroid app. Thanks
Hello Diana,
Thanks for reading! I think I have forgotten to add the in the posts, thanks for pointing this out!
The repo can be found at:
https://github.com/BrettMN/salesforce-sdk-mobile-with-ionic-starter
Good Luck!
Brett