Demo app used during the Building Capacitor Apps in Appflow webinar. This companion app consists of two copies of the same Ionic Angular app: one built with Cordova and the other with Capacitor.
In the webinar, the Cordova version is migrated to Capacitor, then various Ionic Appflow (mobile DevOps) features are demoed.
Note: This app is meant to be a demo sample and thus may not be maintained over time. Specs: @ionic/angular 4.6.2, Angular 7, Cordova Android 8.0.0, Cordova iOS 5.0.1, Capacitor 1.1.1.
Capflow (Capacitor + Appflow, heh) is a modified version of the Ionic tabs
starter project (ionic start myApp tabs
). On tab 2, a basic photo gallery has been implemented that allows the user to take pictures from their devices' camera (via a FAB UI component), then arranges them within a simple grid. Upon tapping a picture, an action sheet UI component is displayed with the option to delete the picture from the device (or cancel).
The Cordova version (iOS, Android):
- Taking pictures: Ionic Native/Cordova Camera plugin
- Saving files to the device: Ionic Native/Cordova File plugin
- Caching app data: Ionic Storage plugin along with the Cordova SQLite Storage plugin
The Capacitor version (iOS, Android, and can be extended with PWA support):
- Taking pictures and caching app data: Still uses the Ionic Native/Cordova Camera plugin and Ionic Storage plugin! This is intentional, demonstrating that these Cordova plugins work as-is with Capacitor without any modifications.
Challenge! Fork this repo then switch to the Capacitor Camera plugin, which adds PWA support!
- Saving files to the device: Capacitor Filesystem plugin. Changed from Cordova File plugin to this, which also brings support for PWAs.
The Cordova version of the app is under the cordova/
folder.
You guessed it! The Capacitor version is under the capacitor/
folder.
The Tab 2 page (within the src/app/tab2
folder) has been modified to become a Photo Gallery. The PhotoService
class (src/app/services/photo.service.ts
) contains all logic to take pictures, write files, and store data.
- Clone this repository.
- In a terminal, change directory into the repo:
cd webinar-capflow
. - If not already installed, install Ionic:
npm install -g ionic
. - Continue on based on your device OS of choice.
- Change directory into the
cordova
folder. - Run
npm install
. - Cordova-based projects are not considered source assets, but rather build time assets, so the Android project must be freshly created. Run
ionic cordova platform add android
. - With a device connected to your computer, run
ionic cordova run android
. - After a few moments, the app should load on the device.
- Change directory into the
capacitor
folder. - Run
npm install
. - Capacitor-based projects are considered source assets, so there is no need to recreate the Android project.
- Build the project:
ionic build
. - Copy the web code into the Android project:
ionic cap copy
. - Open Android Studio:
ionic cap open android
. - Click the Run button to build and deploy to a device.
- Change directory into the
cordova
folder. - Run
npm install
. - Open
config.xml
and change the<widget>
id property (currentlyio.ionic.webinars.capflow.cordova
). This must be changed because each App Id is uniquely attached to an Apple Developer account. - Build the project:
ionic build
. - Cordova-based projects are not considered source assets, but rather build time assets, so the iOS project must be freshly created. Run
ionic cordova platform add ios
. - Build the iOS project:
ionic cordova build ios
. - Open the Cordova iOS project in Xcode:
cordova/platforms/ios/Capflow - Cordova.xcworkspace
. - With a device connected to your computer, click the Run button to build and deploy to a device.
- Change directory into the
capacitor
folder. - Run
npm install
. - Capacitor-based projects are considered source assets, so there is no need to recreate the iOS project.
- Build the project:
ionic build
. - Copy the web code into the iOS project:
ionic cap copy
. - Open Xcode:
ionic cap open ios
. - Change the Bundle Identifier property (currently
io.ionic.webinars.capflow.capacitor
). This must be changed because each App Id is uniquely attached to an Apple Developer account. - Click the Run button to build and deploy to a device.